Puff! Done with the 13th day. React is tricky people. Instead, programming can be tough. I thought making a login screen in C++ was difficult, but then I started working on sorting.

My yesterday’s blog was all about how I managed to create pages in my Vidly app. Then learned about prop-types, and eventually started creating Genre Category component. Today, being a good learner, I picked up again from where I left and started building Genre Category.

✅ Genre Category

I started creating this component for making my app more efficient. Genre Category displays all the genres in a list. By hitting on any particular genre, you get all the movies related to it. 💯

vidly app genre category - msaaddev

I implemented all the interface yesterday, and today, I started working on creating a logic. So how did I do it!? At first, I filtered all the movies based on the clicked genre’s id. Then I passed the filtered array from the paginate function to display the movies. 😎

For filtration, I write a condition. This condition checked whether the selected genre is truthy or not. If it is true, then it creates a new array named filtered which contains all the movies of that particular genre. Let me show what I code:

🎬 Movie Table

As I am introducing new features in my vidly application,  it’s root component is becoming a mess. I am using bootstrap tables for creating the layout. But now, my root component is full of code, and it is becoming hard to keep track of all the helper functions.

📄 To make my code readable and modularized, I introduced another component — MoviesTable. I cut all of my layout code from the root component to this new component.

👨‍💻 Sorting

A wise man once said, “Programming is boring.” Today, I got to know why. My next step was to sort all the movies according to their title, genre, stock, and rate in ascending or descending order. I spent a lot of time thinking about how to make it happen. But soon, this small endeavor started becoming impossible for me. 😕

It was really hard. So hard that I will not even try to explain the following logic I created after spending more than 2 hours on it.

Let me show you what it does:

sorting in action - msaaddev

So what it’s happening? When I click on any of the headings, Vidly sorts all the movies in ascending order and then if I click again, in descending order.

This is it for today. I will write again tomorrow on my 14th day of React. Till then, cheerios. 🤞