Mental model for the forms implementation
In this step we'll familiarize ourselves with the application we'll be using.
Now that the application is built, and the mock server is running, you can view the application by navigating to http://localhost:3000. Once you do, you should see this:
The application is pretty basic. There's a Feed that displays a list of tweets, and you can create new tweets, as well as edit and delete existing tweets.
Additionally, when you create a tweet, it will immediately show up at the top of the Feed. There is no pagination or infinite scrolling for this application.
Feel free to try out the application. Each of the actions you can perform (create, edit, and delete) will launch a dialog. The location of the code for each dialog is shown below:
create dialog is located at src/dialogs/tweet/create/index.jsedit dialog is located at src/dialogs/tweet/update/index.jsdelete dialog is located at src/dialogs/tweet/destroy/index.jsCurrently each of the dialogs is very explicit. The code is all vanilla React - there are no libraries or abstractions of any kind. So if you're familiar with building forms in React, it will hopefully look familiar.
Over the course of this tutorial, we're going to refactor each of those dialogs, starting with the create dialog.
In the process, we will also gradually build up and explain the pattern that Lore uses for hooks like lore-hook-forms-bootstrap and lore-hook-dialogs-bootstrap, the latter of which is used in the Quickstart (though at the time there was no explanation of how it worked).
Each of Lore's form-related hooks are able to generate some non-trivial forms and dialogs from a configuration object, and by the end of this tutorial you will understand how they work, and how to build your own version of one, should you choose to.
Next we're going to add a create dialog.