I'm currently working on my final project for Flatiron School and the application I'm making is a nutrition tracker. The basic idea is users are able to record any food they consumed and exercises they did during the day. The backend makes an API call to the Nutritionix API which then returns all sorts of relevant information about the entries that the user wants to make. This would be a boring application if you only had the ability to track information on a single list, but the main part of the functionality of the application is the calendar portion which allows you to select the date that you are writing information down for.
This calendar portion of my final application can translate to different applications as a basic planner. This basic planner can store information onto the backend side of your application with the parameter of date. This can be useful for any website that requires recording information separated into the days of a calendar.
The first part of the task is to import the Calendar React component which allows for your application to have a calendar application to select a date. This is what it looks like:
I know, it's not exactly the fanciest thing in the world, and there are fancier calendars out there, but this will get the job done for the basic requirements of making records based on dates. Anyways, the code that you need to make the import is shown in this small snippet here:
The first thing we'd want to look at in the code is how are we going to access different dates. Presumably, we'd want the calendar to return us a certain date as information when we click on that portion of the calendar. The way this particular calendar does that is by putting an onChange function on the calendar and assigning the value change to a state variable. When we look at the the values the onChange function above is receiving as the date variable we pass in we get this in the console.
Now onto the backend. The backend I am using currently on for this application is Rails. With Rails, the controller actions we use to control our routes can actually take in multiple custom parameters to filter our data results. Using this filtering function will make it so that we can get whatever data entries that belong to a certain date. The default routes and setup in Rails has it so that we can only look up a specific data entry within a model based on id, but what we need is to look up many different entries in a model based on a parameter involving date. In that case, the controller action we probably need is the index, since it returns all of the instances of our data, and now all we need is to filter it based on the date parameter.
The trick do doing this will be to use the where function. We would need to set up parameters just like when we take in parameters for a form. For this situation, we would just include date and then have our where function used on the model with those parameters sent in as an argument.
This is the result of the controller action we are looking for:
Now when we look up a url with the specific parameter with date then that will give us just our data entries with the date. This leaves one last detail: the url.
If you take a look back at the code for the calendar component, you'll see that we are already using React's routing methods to take us to the url of /daypage/${currentDate} with the date that we already received from the date in the onChange function, but filtered to just include the date portion.
How this is sent to the backend is that we are running a fetch request with the url of ${API_ROOT}food_posts?user_id=${userId}&date=${date}, where API_ROOT represents and the parameters for the specific user and date are being passed into the userId and date fields. That completes our the click on our calendar to the request for filtered data and then a backend return of that data.
And with that you can now access and store data based on the date! Plan away my friends.
Top comments (0)