Creating Custom Randomized Routes in React/Rails App
For my Phase 4 project at the Flatiron School Software Engineering program I was tasked to build a RoR (Ruby on Rails) API backend with a React.js frontend. My project was to build my own version of IMDB with minimal layout in comparison ,but it was made with full CRUD functionality with categories: movies, actors, directors, genres, users, and movie reviews.
As I was building the application my thought process wanted to come up with a unique user experience on the home page. That experience being a suggestion area that displayed a random movie, actor, etc. that the user may not know about or would be interested in checking out.
After doing a adequate amount of googling which I have become quite the professional at since becoming a developer. If found bits and pieces of information of a lot of old methods nothing in the last two years really. So I thought I would save you the trouble and present the updated process of creating a randomized object from your API. For this example I will be showing the steps that made it so I could grab a random actor from my database, set it into state, and display it on my React frontend!
Start off by creating a class method in my Actor.rb model. In the class method self.random when the Actor.random gets called on. It pulls all instances of the Actor class ,and limits the return to one instance. Once that is complete it will order every instance of the Actor class into a random order after which it will grabs the first returned instance.
Once the model class method is complete I moved to actors_controller.rb in which I wrote out the method that would be called in my routes to access the random actor. As I always do and its personal preference I write pseudo code above my controller methods letting my know my HTTP Verb and the path. This controller method is pretty simple it tells it to render JSON for the actor it finds by the ID using our Actor.random class method.
Moving along to the routes.rb file I set up a simple set of routes for every object I wanted to get my random instance from!
After these steps are complete the back end part is completed and time to move to the frontend. Since I am using React v17 I use hooks. On the home page I set my state variable and setState function take in the random actor and set my state.
Once the state is set its time to write my useEffect hook for my fetch and make sure that the fetch will only execute once when the page is loaded. This fetch will take in the route we set up and grab that random actor instance object and set it the randActor state variable.
Now that we are getting our random actor it’s time to go into our JSX and display it for the user to see!
Finally we are all done! Load up your front end and watch the magic happen before your eyes as you are now pulling a random object from your API!
Now, obviously it will not come out looking like this. That comes with a helping hand of CSS.
In conclusion, it is not a complicated process ,but now developers have a more updated step by step guide of how to set up and render a randomized custom route!
Have a great day and don’t forget to tell someone you love them!