React-Redux Islamic Calendar Application

I decided to make a calendar application and infuse it with some Islamic features, just to get in touch with my roots. In order to do so I had to undertake the tasks of understanding components and their features, implementing middleware, fetching data from APIs, and making it look presentable.

I’m going to start off by showing you a few very important functions from the central component of my app; CalendarHome.

You can see we are are using object destructuring to gain access to individual functions being passed in as props from their home components. We’ll use deleteTask as an example further down. Here we’re using useState from React to set the local state for this component, and setting attributes in that useState object in the form of key:value pairs so we can display a new attribute for a calendar slot with empty values across the board. We’re then setting an object with those attributes as the local state. Right below that is useEffect which is a hook for the functional component, and acts as the equivalent of the classic componentDidMount lifecycle method usually found in class based components.

Moving onto deleteTask, we will first check out taskReducer which acts as the sole Redux Reducer for this application. As you know, any reducer takes in an argument of an action, and we can see that the type key points to a value of DELETE_TASK which will return a new state of all the tasks minus the task of the ID we have chosen to delete. We do this by using the filter iterator.

Diving deeper into the code, we must then go to the action itself, so deleteTask.js is ultimately where we will end up to see just how this action is written. Here you can see that this is a functional with an argument of taskId, as every task is merely an instance of the task class, and each instance is created with it’s own unique and self-generated ID. So we make a call to the backend Ruby on Rails API using an asynchronous fetch request using the delete method, find that specific instance using the ID, and delete it from the backend so it no longer renders on our frontend.

Fetching information from an API and rendering it to the DOM

The next big step in making my application was finding the right type of API I could get information from. After some searching, I stumbled across https://api.alquran.cloud. From there, I used my tried and true async method of fetching data from the API, but I had to fetch both the Arabic and English translations, as well as sort through the chapters and passages in those chapters. I opted to randomize this Math.floor(Math.random() * 6236) + 1. Afterwards, I had to once again set the state of the component to the newly fetched information, and again set the state to replace the previous state whenever a new fetch was made via a button that responded to the getQuote function.

This, of course, is a stateful component, and its stateless counterpart accepts props from it to render it to the user.

You can see it is passed state and a function that has been destructured and rendered onto the DOM. The Arabic text, English text, as well as the part of the Quran it comes from is displayed, with an event handler attached to the button to rerender the texts as much as possible.

I hope you learned a few things about React, Redux patterns, passing props, and displaying information from this brief passage. Thank you for taking the time out to read my blog, and good luck on your coding journey.