Heads Up, It's Story Squad!
Published: 2021-08-23 23:03:15

With electronics being in the hands of virtually every child these days, it has presented parents with a unique problem - how to keep children engaged and entertained while learning in a world that is becoming increasingly reliant on computers, tablets, and smartphones. A world becoming even more reliant in the days of a worldwide pandemic.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o6avr4htyne9q5wai62n.jpeg)

This is the very problem that Graig Peterson, founder of Story Squad, set out to solve with his interactive learning experience.  Story Squad makes learning fun for children, helping them to develop their imaginations, as well as their reading, writing, and drawing skills in a controlled, engaging environment, all the while giving parents the peace of mind of seeing their children spending ‘play time’ honing their skills.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g1dv9iu2pvjqlcp9b9zr.jpeg)

For my part in the development process, I had the good fortune of being on the team that created the heads-up display.  My team was tasked with bringing together a well-thought, centralized information center to give the end-user, children, an easy-to-read snapshot of their progress in the overall game.  The heads up would display the current activity, how much time was remaining in that activity, and what the next activity was in a 7-day rotation.  More specifically, I was to work on the countdown and activity portions of the display, and I learned many new things along the way.
<br />

### The Good, The Bad, and The Ugly

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j31rgt3js23dnsc7gzye.jpeg)

Every good project is of course the result of many rough drafts, bug fixes, and sleepless nights, and this project was no different.  Going in, I knew this was going to be a whole new experience, working with a full team on a multi-faceted, expansive project; up until this point, I had been exposed to small-scoped projects that were not going to be released for public consumption, as is the process in a specialized school such as Lambda.  

But now I had the opportunity to be part of a real, living, breathing web application, that would continue to develop and grow into a final form ready for the masses of eager school children and their parents.  I could not wait to get my children involved and see what they could create, but first, it was time to roll up my sleeves and do my part.  

After my team's first planning meeting, I jumped into the codebase to see what we were working with; this was the first time I got to see a full codebase, as everything I had previously worked on was built by me and my team, and it would be an understatement saying that I felt overwhelmed during that first dive into the code.

<figure>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b5s4tihzvbr1iybz9r2n.jpeg)
<figcaption> image by Roozbeh Eslami </figcaption>
</figure>

There was so much to look at; just figuring out where our team's component was going to be placed felt a bit intimidating.  I was like the proverbial bull in a china shop, afraid of making a change in this magnificent codebase, for fear of breaking something beyond repair.  Being on my branch I had nothing to worry about, as any changes I made could be undone before merging to the main branch, but the feeling was there.

After getting over my initial shock and locating the folder the heads-up display would live in, I got to work; I started building my countdown component first, as I felt this would be the easiest portion and take the least amount of time.  This ironically became the most time-consuming portion of the build for me, but we'll come back to that in a few moments.

The first thing I did was research how to set a countdown timer to midnight each day.  It took a bit of digging, but I discovered that I could set an end time at midnight each day, which would reset once the timer was completed.  I added this in and found the difference between the current time and the end time, which would give me a response in Unix time:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s9qdby0xrdgne8p1kk9f.jpeg)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nipxa89dvuc5tor5jfbg.jpeg)

From there, I added a function to convert milliseconds to hours, minutes, and seconds, and then mapped the converted times into a clock format:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n4bvqo62otge7vu8c77h.jpeg)

I wrapped the timer in a useEffect to re-render on a one-second interval and then, once I was satisfied it was functioning properly, I moved on to the activity components.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fenqwxmh97yry32f9num.jpeg)

<img width="100%" style="width:100%" src="https://media.giphy.com/media/UV3JmIbNBZI1Px0urG/giphy.gif">
<br />

### Where Am I, Where Am I Going?

<figure>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fmuenx4ps1f31vtox5pn.jpeg)
<figcaption> image by Jamie Templeton </figcaption>
</figure>

Now, here is where I had my "happy little accident" (don't you just love Bob Ross!) and spent extra hours learning some new things that I wouldn't end up needing for this project.  As I got ready to start my component, I touched base with the Story Squad team to get a list of activity names.  Graig was kind enough to give me a list, and I proceeded to misread his post and start myself on a journey to create a 14-day activity rotation, instead of the 7 days rotation that was intended (note to Graig: maybe an adult version of Story Squad to increase reading comprehension is in order? :grin: )

The first "challenge" I had to figure out was how to set 14 activities into a 2-week rotation; when using 'new Date().getDay', the day of the week will display as an index within the week, with Sunday being 0 and Saturday being 6.  My first thought was to simply place two objects, 'weekOne' and 'weekTwo', into an object named 'currActivity', utilizing a toggle function to toggle between the two weeks (unfortunately I do not have snippets of this earlier code to show for reference).  

This approach proved to be unusable as the toggle would get stuck in an infinite loop when changing from 'weekTwo' back to 'weekOne'.  I did try many different variations with useEffect but had no success, so I moved on to my next attempt.  Using a long line of 'if, else' statements, I set up the logic so that it would function throughout the week without breaking.  This solution, however, was very cumbersome and difficult to read, so I set about refactoring it to make it 'DRY' and readable.  After several more iterations, I was able to reduce 78 lines of code down to 16:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zvd0x5ixt0h2o7z2pmmc.jpeg)

The following Wednesday, as I was sitting in the stakeholders' meeting, my heart sank as I realized I had read that message wrong and had spent extra time working on something that would never even make it into the final product.  

There was nothing to do but to get back to work and make it right, but this was a valuable learning experience regardless.  The time I had spent researching and creating that code will inevitably save me time later in my career, as I learned 2 lessons here.  First, always, always, always make sure you completely understand what you are creating before setting out to complete a task, and second, I got good practice at researching a fix, implementing it, and refactoring for ease of use.  

As for the current and next activity components, the fix was very easy, as a 1-week cycle is much easier to convert into code:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h7wh42k7sb4be3ibug2y.jpeg)
<br />

### Synchronicity

<figure>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mi2fp8uphlmclktgg858.jpeg)
<figcaption> image by Jon Tyson </figcaption>
</figure>

Now it was time for the home stretch, I had only one feature left to incorporate into my component, a full week left to work on it, and it was a small feature so I could rest assured that I would have plenty of time left over after implementation.  At the previous stakeholders' meeting, it had been decided that the countdown timer be synchronized to pacific standard time (PST), so I set off to get this "quick and easy" task knocked out.  Remember when I said this was the longest part of the process?  I do :wink:.

Utilizing only the libraries and frameworks already built into the project, I could find no way to convert timezones from the current timezone a machine resided into PST.  All of my research pointed me to Moment.js, but upon reading up on the library, the actual documentation said it was not recommended for newer projects (objects in moment are mutable), and reading further, it was said to be very cumbersome for larger projects.

I started combing the internet for anything I could find that would point me in the right direction, I read many, many articles and tried several different approaches, but after much research, trial and error, and a bit of elbow grease, I was able to piece a workable solution together.

The first thing I did was convert my 'currTime' variable to PST, which would also turn it into string form:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l4i3k3zbwkj4c4abh31z.jpeg)

I then set up a variable for the 'endTime' that would change the countdown based on the day of the week (final stakeholder request I had saved for the end):

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uw9qm9cq26t464kqtga0.jpeg)

Finally, I converted the time back to number format before finding the difference between the current time and end time:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bjujyxrw71745ibwfu9q.jpeg)

Admittedly, this was a very simple solution once I wrapped my head around it and worked my way to it, but that is the one main truth to development, for it seems to always work out to be 75% research and 25% execution.
<br />

### Final Thoughts

<figure>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mgqecaun9nd8xy89gmtp.jpeg)
<figcaption> image by Ben Sweet </figcaption>
</figure>

This experience has truly been the most challenging, and rewarding, in my time with Lambda School.  I have learned many things in this past year, but nothing in this process has prepared me quite so well as working in a real-world scenario, with a full development team, where every decision you make, every line of code you write, is going to affect the final product (well, I like to think it will :smile:).  It has been a humbling experience, and I am truly grateful for the time that I got to spend working on this project.

I want to thank the team at Story Squad for letting me take part in their journey, wish them all the best as they continue with their product, and look forward to seeing it in the hands of my children soon.