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. 💯
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.
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:
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. 🤞