When you have the itch in your head to try stuff, you become good at that stuff.
I built a CodePen app that resembles a preliminary Journal app, using React, Bootstrap, Moment.js and localStorage as a DB.
I just want to share a few important concepts that you may be interested in.
Whenever we are storing items in localStorage, we will have to stringify the value and parsing it while reading it.
When we have to delete an entry, we will create a new array out of the old one using the two features:
The index is the one of the item to delete in the array.
To make the delete button work for each entry in the list of entries, we have to let the event handler know the item it has to delete in the DB, so we create a higher order function (one that returns another function which acts as the actual event handler).
In the add Entry form, We want the focus onto the message textarea so that we can readily enter the message on page load, we can do a useEffect that runs only once per page load because of an empty array as second argument.
When we show the date and time at which the entry was recorded, we can use a special feature of Moment.js called .fromNow() that converts the duration since the entry was recorded till now into human readable messages like "a few moments ago" and "2 minutes ago".
Any function that returns an array or object containing at least one of the built-in React hooks is known as a custom hook. In our case, we are abstracting the read-write to localStorage functionality in this custom hook so as to keep the functionality reusable and less messy in the component using it.
Have a look at the CodePen (below) to understand what is done there and do suggest any simple changes that might improve the example greatly.
Please check it here.
Originally posted in Dev.to here.