Counting Days on React-Day-Picker

After deploying my portfolio last week, I started exploring how I could expand it along with increasing my network. I’ve always been interested in participating in a hackathon but been unable to find the right time. Like any person, I googled for software development tips and found a couple suggestions including Chingu, a platform that forms teams to work on a collaborative project to build “technical and soft skills required in a professional software job.” My application was accepted, which I’m sure isn’t very hard to do, and started the process of preparing for the August 30th start date.

Part of the process is having an application to showcase to determine what tier I would be categorized under. While I do have my Sinatra application deployed on Heroku, I felt it wasn’t a good representation of my coding abilities. With some time before the due date, I decided I should upload my calorie counting React application, Counting Cookies. Before I could deploy it, I wanted to give it a serious facelift along with some new features including an interactive calendar.

At first, I was feeling overly ambitious and thought I could build my own calendar. After reviewing some examples online, I quickly realized it would take a lot of time and work considering the differing days in a month and adding basic functionality. Instead I found a React component, React Day Picker, that could be easily inserted into my application.

npm install react-day-picker

import DayPicker from ‘react-day-picker’
import  ‘react-day-picker/lib/style.css’

The first thing I wanted my calendar to be able to handle is highlighting days that have records on file. DayPicker included a feature that could easily perform this action by toggling the display of each date saved in the database so far, the issue was iterating over the multiple days. DayPicker only needed a date to render the highlight on the calendar, and originally I attempted to parse through the props I had already set up in the page to create an array of dates.

Based on the examples provided with the application, I thought I would be able to use an array as the parameter but that prevented the calendar from displaying at all. I also tried creating a new array of the dates that converted them to numbers as I believed that was the necessary format to be used to instantiate a new Date. I eventually realized this was creating more code than was necessary and finally decided to add mapStateToProps to the component that included the array of dates. Then the props would be mapped over again as each date would be used as a parameter when instantiating a date on the DayPicker. I experimented on this for a while before searching for a solution on StackOverflow that was luckily answered by the creator of DayPicker.

<DayPicker class="calendar" selectedDays={this.props.vinyl.map(date => new Date(date))} />

Once Jenny Craig’s records (my demo user) began appearing on the calendar, I moved onto the next task I wanted the calendar to be able to handle. When a date was selected on the calendar, I wanted the date to be then set as the value in the form. The function onDayClick was already developed, all that was needed was to define a function that could perform my desired action.

Of course, easier said than done as passing that information between two different components could be difficult if not taking the proper steps. I originally thought I would be able to set the value by using query selectors and simply changing the value. Upon some research I realized that because my form constructor has set up the values in state, and the state can only be changed from a different component by passing props. I finally settled on adding “date” to state in my recordsReducer as well as adding a new action called SELECT_DATE that simply inserts the date.

export const selectDate = (date) => {
    return { type: 'SELECT_DATE', payload: date}
}

While the state was being updated, the form input still remained the same. I then attempted to use componentDidUpdate that would setState after the state should have been updated to the clicked date. Warning, this will cause the application to stop working as React is preventing an endless loop from going off as setState would be constantly called. I needed to check the current state, this.props.date against the previous props, and only if they were different would the state be updated.

componentDidUpdate = (prevProps) => {
    if (prevProps.date != this.props.date) {
        this.setState({
            date: this.props.date
        )}
    }
}

Along with some styling changes, the addition of the calendar makes my application look a little more professional, but there is still a long way to go. Currently, next to the calendar is a list of links to each record to display a card detailing the items consumed that day. I would also like this same functionality to occur when the highlighted date on the calendar is clicked. I’ve tried a couple techniques but they haven’t been successful, so I’m hoping my next idea has better luck. After some more alterations, I will hopefully adapt React-Day-Clicker to application successfully.