Days of the Week - React-Day-Picker Part 2

Last week, I began making improvements to my Counting Cookies application including adding an interactive calendar made by Day React Picker. This is all in anticipation of deploying the project for consideration by Chingu. I was able to incorporate the calendar and display current records by highlighting the days.

As I left off from last time, I had some ideas on other features I wanted to add along with the calendar. Users would be able to click a date on the calendar and it would be displayed in the record input form. I was also hoping users would be able to click a date with an existing record and the record card would display on top.

This took some experimenting as I originally tried defining a handleClick function that would render the record but that became a dead end. As I am prone to try multiple options, I also tried having a Link component that was similar to the list of links I had originally written but had the same results. In the end, I had to customize the calendar that would display a link to each individual record. This involved creating a separate Calendar component to avoid having extraneous code that primarily involves code from clogging the DailyRecords component.

This wasn’t my fondest solution simply because it made some of my previous work pretty obsolete, but I was excited by the idea of cookies filling up a calendar. While I mirrored the example given by the developer of Day Picker, I had to make some adjustments to handle my records. It followed a similar concept to the SelectedDays option for Day Picker, as the records would be mapped over and any record’s date that matched the date being rendered would be displayed as a link. Now a user can easily view a daily record by clicking on the cookie of a desired date. Plus, the correct dates are being selected on the calendar rather than being a day early with the default selected days option.

<div style={cellStyle}>
                <div style={dateStyle}>{date[8] + date[9]}</div>
                {this.props.records.map(function(record) {
                    if (record.date == date) {
                        return (
                        <div style={birthdayStyle}>
                            <Link to={`/users/${record.user_id}/records/${record.id}`}>Cookie</Link>
                        </div>
                        )
                    }
                })}
            </div>

There are still cosmetic issues that I’d like to address including the daily record form and the card. The biggest task I’d like to conquer is using session storage to persist the users login status as refreshing the page or clicking to a link to add a new record is redirecting to the root page, or login. I’ve written in the past about developing a login feature as my original project didn’t have the capabilities, and while I completed the basic functionality, I obviously have more to add so a user can have a viable experience with Counting Cookies.