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

When the page is fetching or posting data, a loading page is displayed until the data is ready

When an error is encountered, it is displayed on the page

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.