For those of you following this blog (all two of you), you’ll know that I’ve been investing time in learning React and Redux. I’ve been working on a “toy” app I’ve codenamed “DanTube”. I’m hoping that one day this will take down YouTube. In all seriousness, it actually uses the YouTube API. Its been a good learning tool for me, but its also far from being completed. I’ve taken the time to try and diagram out how this application works (as of the time of this writing).
Application State Overview
Below is a diagram of what the state of this application looks like.
There are essentially three properties to state right now:
videos property is an object which contains three subproperties:
searchBox is also an object but it only contains one property:
currentSearch is simply a string.
By far, the most complex part of this application is the videos. This is not only because it is the “meat and potatoes” of the app, but it is also dealing with a lot of asynchronous activity. In the diagram below, it appears that there is a lot going on, so I’ll try and break things down as best I can.
There are three actions that will update the state of videos:
updateFetchVideos do the same thing. However, I created a second action (
updateFetchVideos) for updating
videos.pageToken when the user scrolls to the bottom of the screen and update the
pageToken so the YouTube API can pick up where it left off. Rather than clear the current videos, the app needs to know to just add more videos to the videos array.
fetchVideos on the other hand clears all the videos in the
videoList parameter and it doesn’t require a
pageToken. Other than those differences, these two actions essentially do two things:
- Set the video state parameter of
- Trigger the
ytMiddlewaremiddleware to make a call to YouTube and fetch the videos based on the users
true, we can display a message or an indicator to the user while we are still retrieving videos.
Once the middleware pulls all the videos down, a new action is triggered:
ytMiddleware will pass the
pageToken (this indicates where we left off so that we can expand the list from the user’s search) to the
videosReducer to then update the videos state. As part of the update,
isFetching is set to
false so that any messages or indicators can be removed. There’s more details on this in my previous post.
currentSearch is what the user is searching for. When the page first loads, the current search is just and empty string. However, once a user enters text into the searchbox, the
searchbox property is updated. Its pretty straightforward. No middleware is required, and there are no async calls. It only takes one parameter, which is the
searchTerm specified by the user.
The last piece is the
searchBox property. Again, this is also pretty straightforward. It only really applies to the UI in mobile. When the page loads, the physical search box is actually invisible. The user can click a magnifying glass icon and it will then open up the search box. At the time of this writing, the
searchBox property is an object that only contains one property. I know that right now this seems silly, but I was considering that if there are other interactions that may need to take place, it might make sense to have an object with keys. However, going forward, I may refactor it to just be a simple boolean if it seems more appropriate. When the user clicks the magnifying glass,
isShowing is set to
true. After that happens an “X” icon replaces the magnifying glass. If the user clicks that “X” icon,
isShowing is then set to
The first stage of this little app is now done. Its not a finished product at all. There are several things I’d like to do on this going forward. Below are some of them:
- Build a backend so users can log in/log out and add comments to individual videos. I haven’t decided what I would use but it would probably be either Java or NodeJS.
- Implement react router so each video has its own page.
- Implement a Jenkins pipeline so that there can be a CI/CD workflow.
- Add unit tests.
I’m currently going through a course on Jenkins, so the next step would probably be setting that up before going through with any of the other items. I hope you enjoyed this. Please let me know if you have any questions or comments.
You can view the code for this app here:
A working version of the app can be found here: