It’s a Second Date
Using date objects from your database
Introduction
Within the context of my last few blogs, I discussed using the JavaScript date constructor to create and access information from date objects and using JSON Server to quickly create databases for prototyping and mocking. This week, I want to combine the two and discuss accessing and using date objects from our database.
The last couple weeks, I’ve been dusting off and sharpening my React skills. To do this, I decided to re-create my bootcamp React code challenge. But this time, building it from scratch. The objective of the challenge was to modify a transaction ledger so that it fetched transactions from the database and displayed them in a transaction spreadsheet. Users could then add transactions, sort by amount, search by location, and delete transactions. Sounds pretty practical, right?
To take it up a notch, I wanted to add a few extra features like adding comments, seeing amount totals, and filtering by date and month. It was filtering by date and month that kind of stumped me. Initially, I had transaction dates set in mm/dd/yyyy format. And, when a user added a transaction, they provided the date, as text input, in the same format . My immediate thought was, ‘how would the computer know which date was earlier or later based strictly on text?’ My next thought, store the dates as date objects! Challenge accepted.
Getting Started
I wanted the user to be able to select the date from a calendar, instead of a text input. So, I implemented the npm React-Calendar. This allows dates to be selected from this nice, and useful, calendar, as seen below.
The Code
Within my component, I created state to keep track of the date, and I put an onChange into the calendar so that state would change on each date selected. As per the docs, I set the initial state to be a new date object, representing today’s date.
In my onChange function, I wanted to see what kind of information I was getting. So, I put in a console.log
Much to my liking, I was getting a date object.
Since my end goal was to store this date object in my database and be able to transform it so that when it fetches, I was on the right track. If state is initially set using the date constructor, to update it, use the date constructor.
Nice! I wanted to try adding a transaction to see what happens. My add function looks like this.
I checked my db.JSON, and this is what I saw.
Perfect! Exactly what I needed — a date object. Now, how to transform this to the mm/dd/yyyy format.
Making it Look Right
In my View Component, which renders the spread sheet, when it receives the state transaction array, the array is mapped over. Each transaction gets its own table row, and each transaction property gets its own cell. From my previous blog, I learned there are many helpful instance methods that come built into date objects. So, I knew I wanted to use the .toLocaleDateString() method. I initially implemented it like this.
I was getting an error!
This is due to the fact that, at this point, the component is being given the date as a string, and the instance methods only works on date objects. Easy fix! Throw the transaction.date as an argument into the date constructor to create a new date object with the desired information.
Perfect! Now my date column is represented in my preferred method.
Sort and Filter
Step one complete! Now, to sorting and filtering. Having discovered the issue with dates being fetched as strings, I now knew the best way to handle this — put the date information into a date constructor!
To sort, simply use the sort method, but don’t forget to put your args in the constructor!
To filter by month, use the filter method. Again, don’t forget the args and constructor! The tricky thing about this, though, is in the .getMonth() instance method, January is numerically 0, unlike our conventional 1. So, adjust the months accordingly.
Conclusion
There are many great and interesting things we can do with dates. The date constructor has many great built in instance methods we can utilize. The important thing to remember: if your date information is coming from your database in JSON, those strings need to be converted into date objects before we can get into the fun stuff!
I hope my dive into errors, and eventual resolution, has been helpful. As always, dig into this on your own, and have fun. Happy coding!
