For my final Flatiron School project, using Rails/React/Redux, I created a Rick and Morty favorite episodes tracker. I created 3 routes accessible via the navigation bar: Home, Episodes, and Favorites. Clicking on Episodes will render a list of all Rick and Morty episodes along with buttons that when clicked adds that episode to your favorites list. Clicking on Favorites will render a list of all your favorite episodes as well an additional button that will allow you to see all the characters in that episode.
In my Rails backend I set up the project with a PostgreSql database so that I’d have the option to host it in the future. I only created one model — FavoriteEpisode — which has the following attributes: id, air_date, episode, characters, and url. I came across two issues when I tried to send a fetch POST request from my frontend to create a FavoriteEpisode instance. The first issue dealt with the id. The Rick and Morty API I used listed episodes with an id. I wanted the ability to create my own id so that it matched the id from the Rick and Morty API. The error I received whenever I tried to send a fetch POST request was that there was no primary key found. In order to fix this, I changed the id’s data type from integer to primary_key. The second issue dealt with my characters attribute. In the API, it is an array of long strings of urls. The error I received was that the characters attribute was an unpermitted attribute. I was able to fix this in the favorite_episodes_controller.rb by changing my favorite_episodes_params method. It originally just permitted :characters. I changed it to {:characters => []}, which resolved my issue.
I first approached my React/Redux front end by creating a visual layout on draw.io so that I could determine what types of components I would want in my project. My next step was figuring out which components would contain other components and which would be presentational components. I had a few presentational components. They had no logic and only served to display the information that they were given. This allowed me to use some of them in multiple components. One of them was my button component. It was very simple:
I used it in both the EpisodeButtonContainer and CharacterButtonContainer. These container components worked with separate data — episode data and character data and was able to pass down separate click events and button names down to the same button component.
While working on the components I also had to decide whether I needed to use global state from the redux store or local state. The handleClick functions are also an example of how I determined whether I used global or local state. In the handleClick function in the EpisodeButtonContainer, it checks whether findFavorites returns true or false. The variable findFavorites checks if the episode that has been passed to the component can be found in the store. If the episode is found in the store, when clicked, the button will send a DELETE fetch request to the backend. If the episode is not found in the store, the button will send a POST fetch request to add it to the Rails backend. Because this component deals with figuring out whether or not something is in the backend, I used global state. In the handleClick function in the CharacterButtonContainer it sets the local state every time the button is clicked. This allows the button name to be toggled between “Hide Characters” and “Show Characters”. This also allows the character component to be rendered for each character in the episode if this.state.showingCharacters is true. This component does not need to retrieve information from the backend, because its parent already passes that information down via props. Therefore, I set up a local state instead of a global state.
Overall, I really enjoyed working on this project. If I had more time, I would include a feature that tracks whether or not you have watched the episodes. Another feature I would add is a character page that shows all the characters that have been in the episodes.