Fetching data depending on the date.
Tags: react, rails, beginners, reacthooks
Published: 2022-03-09 19:17:13

In the past three weeks of building my capstone project for a software engineering boot camp I'm close to graduating from, I came upon an issue(one of many). Every day I needed to fetch a prompt from my rails backend based on what date that prompt instance has. In this Dev-Blog, I'll show you what I came up with. I'm sure there's a better way, but this is mine.
**Note: I'm using a JS react frontend and a ruby on rails backend**

Let's start with the backend. First set up your resources.

`rails g resource Prompt title date:date`

make sure to use a date table when generating them. Once that's finished you can go ahead and migrate.

`rails db:migrate`

Okay cool, now let's look in the Prompt controller. You should have something like this.

```
class PromptsController < ApplicationController

end
```
Before we forgot to go into the config file and down somewhere near the bottom should be a routes.rb file. Go ahead and add a new route to it, name it whatever you want, I'm going to name it...

```
get '/prompts/:date', to: 'prompts#show_prompt_by_date'
```

Now, let's go ahead and make the method for grabbing the data by the date. 

```
class PromptsController < ApplicationController

  def show_prompt_by_date 
     #grabbing the specific prompt using the params
     prompt = Prompt.find_by(date: params[:date])

     #rendering/error handling
     if prompt
        render json: prompt, status: :ok
     else
        render json: { errors: ["Prompt not found"] }, status: :not_found
     end
  end

  private

  #being safe
  def prompt_params
     params.permit(:date)
  end
end
```
If you're using sterilizers go ahead and add date and whatever other table you want to show up in front of the attributes.

```
class PromptSerializer < ActiveModel::Serializer
  attributes :title, :date
end
```
If you aren't then when you render the prompt render it with includes.

```
render json: prompt, include[:title, :date, status: :ok
```

After all that lets add some seed data
**seeds.rb**
```
Prompt.destroy_all

Prompt.create!(title: "July, 15th, 2020", date: 7152022)
Prompt.create!(title: "March, 9th, 2020", date: 392022)
Prompt.create!(title: "March, 10th, 2020", date: 3102022)

puts "done seeding"
```
Now go ahead and seed!
`rails db:seed`

That's it for the backend!

**Now for the frontend.**

First in whatever component you want to fetch the data in you'll need to set up a few things, I'll be using the hooks useState(for grabbing state) and useEffect(for fetching whenever window is loaded). Let's import that and also get and format the current date.

**App.js**
```
import React, { useState, useEffetc } from "react";

function App(){
  //setting up our useState for assigning a prompt 
  const [prompt, setPrompt] = useState([])
  
  //grabs the current date/time
  const currentDate = new Date();
  
  //formatting our date for fetching
  const date = `${current.getMonth()+1}${current.getDate()}${current.getFullYear()}`;

  return(
    <div>nothing here yet</div>
  )
}

export default App;
```
Now all that is left to do is set up our useEffect/fetch and do something with the fetched data. 

**App.js**
```
useEffect(() => {
  //your url might be different, such as: http://localhost:4000/prompts/${date}

  fetch(`/prompts/${date}`)
  .then((r) => r.json())
  .then(data => {
     setPrompt(data)
     fetchPosts(data.id)
   })
}, [date]);

//doing something with the data
return (
  <div>{prompt.title} : {prompt.date}</div>
```

That's pretty much it, run your backend with `rails start` and your front with `npm start`. Hopefully, this was helpful, thank you for reading.