Simple Instagram app with Rails 6 API and React. Part 2

The React Part

Find the first part here

For this app, we would be styling mobile-first. For this second part in the series, we would only be focusing on working with the index and update methods in our controller. We would also only be focusing on implementing the ‘Liking’ functionality.

We would be using the create-react-app configuration containing the heroku:buildpack to get us up and running.

Follow the instructions in the repo to get started or see below.

I have taken out the heroku parts as we will be using Netlify for deployment.

Git is also initialized for us out of the box. Let’s create our development branch, make a commit there, then checkout to a new branch called index.

Head to the src folder. Delete every file except App.css/App.js/index.css/index.js.

Inside the src folder, create a components folder. Name it ‘Pictures.jsx’.

Create another folder called helpers inside the src folder. Inside the helpers folder, create a file called apiHelper.js. This file will hold the link to our API so that we don’t have to keep manually typing out http://localhost:3001 each time we make a request to the server. In the future when we deploy our backend to the cloud, we would only have to change the URL in one place.

Add the following code to the file.

Exit that file and return to our Pictures.jsx file.

We will create a new React class component called Pictures. This component will grab our data from the server using a package called axios. It would then hold this data in an array in our React app.

First things first, get axios. Make sure you are in the instabox-frontend folder. In your terminal, type

Add the following code to your Pictures.jsx file. I will try to add comments for each line in the code

We need to import our Pictures component inside our App component so it can be rendered in the DOM.

Run

Open another instance of your vscode. Navigate to the instabox-api directory and run your rails server on port 3001.

If you’ve made it this far, you should see that your console includes stale data from our Postman POST requests. Let’s take that data out as we used dummy values.

Head back into your rails folder in the seperate vscode instance you created.

Head into the rails console with rails c. Find the user you created.Mine has an id of 2.

This would remove that dummy picture from our DB. You can confirm it was deleted by running Picture.all.

Back to React.

We need to install a few packages to help us. First, fontawesome for all our icons.

Now, let’s build the menu.

And here’s the CSS

Next is the card for each Picture. It’ll contain the picture, caption text, created_by and any other information that belongs to a single picture.

Let’s call it PictureCard component. Create a PictureCard.jsx file inside the components folder. This time around we will use a functional component since we aren’t updating any data and we’re just displaying information.

To avoid this article being filled with CSS code, here’s a link to all the CSS here.

Here’s what our PictureCard component looks like in the end

After styling your page, you should have something like below.

Image for post
Image for post
What we have so far

Back to our Pictures.jsx component. Let’s make some changes that allows us increase the likes after each click of the heart button.

But first let’s extract our Likes and TimeAgo parts into a seperate Likes component. Create a ‘Likes’ component in your src folder and a Likes.css in your styles folder and add the following code to the Likes component. The Likes.CSS code below.

Back in our Pictures component, update the code for our displayAllPictures to include our new Likes component. Don’t forget to import Likes at the top.

Finally, let’s update our Picture component to include our new methods to increase our likes.

After adding this methods. Go into your rails console to see all our pictures and you’ll see that the likes have also been updated in or db. Nice!

In the next part, we’ll add more functionality to our app. We will be able to show a picture clicked on a single page, add comments and allow a user to only have like a picture once.

Now is a good time to make a commit.

github

Written by

Full-stack Engineer. Rails/Node.js/React. I love plantain chips! Reach me at Adebola.dev.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store