Flatiron School Phase 2 Project
For my phase 2 project, I have created a web journal where users can store and read back on journal entries.
The Home Page
When the user first opens the app, they are presented with a random journal entry. The journal displayed is stored in state; when the “Random Button” button is clicked, the state is updated to a random index of the collection of journals downloaded from the json server. The journal is displayed in a JournalCard component taking an individual journal object as a prop.
The Journal Page
When the user accesses the journals page, they are greeted with the most recent journal automatically selected and displayed in a JournalCard component as well as a JournalList component which contains a TimeCard component that holds a Link element to select the corresponding journal using the react router. When a journal is selected, the corresponding TimeCard is given a background-color to indicate that it is selected.
The New Journal Page
The new journal page is very simple, it contains just a form containing a textarea element and a submit button. When the form is submitted, a new journal object is sent to the json server via a push request and then the user is redirected to the journal page with the newly added journal automatically selected
Data Loading and Error Handling
In the App component, the useReducer hook is used to hold the status of the application, the collection of journals and any message that the app may need to communicate to the user. When a fetch request is made, the app is set to a loading state and the message “Loading…” is displayed on the page. If the fetch is successful, the app is changed to a ready state and the journals are stored. If the fetch fails, the app is set to an error state and the error that is returned is displayed on the page.