A Simple Journal App
When you have the itch in your head to try stuff, you become good at that stuff.
#
PremiseI built a CodePen app that resembles a preliminary Journal app, using React, Bootstrap, Moment.js and localStorage as a DB.
#
What this post is aboutI just want to share a few important concepts that you may be interested in.
#
JSON.stringify and JSON.parseWhenever we are storing items in localStorage, we will have to stringify the value and parsing it while reading it.
#
Deleting an entry using Array.prototype.sliceWhen we have to delete an entry, we will create a new array out of the old one using the two features:
- Array.prototype.slice
- The
...
spread operator
The index is the one of the item to delete in the array.
#
Higher order delete entry click handlerTo 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).
#
Textarea in focus on page loadIn 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.
#
Moment.js .fromNow usageWhen 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".
#
Custom hook (useJournal)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.
#
ConclusionHave a look at the CodePen (below) to understand what is done there and do suggest any simple changes that might improve the example greatly.
#
DemoPlease check it here.
Originally posted in Dev.to here.