Charts
The bar graphs are complete, and Husker Gym is now usable. Rather than going with Visx, a React wrapper around D3, I went with raw D3. I didn't find much support for Visx online, and there were some errors in getting it to play nice with Nextjs and server/client components. As it turns out, Visx seems to be a pretty thin wrapper around D3, which happened to be a lot easier than I thought.
Most D3 tutorials show you how to make charts through direct DOM manipulation. But this doesn't let you use the full potential of React, so I only used the "calculation" functions from D3 and created by chart declaratively with React and SVG.
Overall, it was a great experience and a lot easier than I expected.
UI
I wanted the main page to look like the iOS stocks app.
I'm glad with this interface. It is definitely a step up from the previous because rather than showing numbers and percentages (data), it is showing visualizations, colors, and descriptions (information). This should make it more friendly and easy to interpret at a glance.
Timezones
I ran into some pretty weird timezone issues with this project. So this is what I wanted to do:
- Scraping the EST time, then converting it to UTC before adding it to the database
- Querying the UTC times on the database, then use the JavaScript Date
.getHours()method to get the local hour
I am assuming that all my users are (obviously) in Boston, in EST, so this should should work in theory.
But here's the issue, In Nextjs 13, all React components run on the server by default. This means that no matter where my users are, the server is gonna send them UTC times.
By adding "use client" to the top of the React component file, the components are client components, and will render on the client. But the problem is that Nextjs client components may be rendered on the server or client.
This lead to a bug at first. I thought everything was working fine at first as I was navigating around the website. But when I reloaded the page, all timings were messed up. From what I've learned, on initial load, the client components are rendered on the server too. But when you navigate int the website (going from / to /gym, for example), the client components are rendered on the client. Now when you reload the page (reload /gym), the client component is rendered on the server, and therefore has a different time.
I'm not very happy with the fix, but what I had to do was subtract 300 minutes from UTC to get a UTC time that is actually EST ... if that makes sense. I'm pretty sure this is gonna break with daylight saving times, so all I can do is pray that the sunshine act is passed. When I get "UTC as EST", using the getUTCHours() method gets the hour in EST regardless of whether it's called on the server or client.