Wrapped Countdown Component #878
Conversation
|
[diff-counting] Significant lines: 264. |
There was a problem hiding this comment.
Looks great so far Eric! Nice job figuring out the countdown logic independently and styling the component from scratch. It looks pretty good from the pictures and the screen recording you attached. It's not displaying for me when I run it locally for some reason, but we can sync on this during work session tomorrow.
The main thing to note for next steps is the transition to the clickable view (refer to Figma again), which will be a separate step after animating the confetti for some duration. Other than that though, it's looking promising and I'm excited to see this launch!
| // Call the setter function to change the state in the parent | ||
| setDisplayWrapped(true); // Set to true to show the modal | ||
| }; | ||
| const launch = new Date(WRAPPED_LAUNCH_DATE); |
There was a problem hiding this comment.
Date object creation is redundant each render. Can we move these outside this component, maybe to SplitView?
| // Define a zeroCounter object for comparison when there's no time remaining | ||
| const zeroCounter = { days: 0, hours: 0, minutes: 0 }; | ||
| // Helper function to calculate the remaining time in days, hours, and minutes from start date to launch date | ||
| const calculateTimeRemaining = (dateProps: WrappedDate): RemainingTime => { |
There was a problem hiding this comment.
nit: utility functions like these should be declared outside the component, near the top of the file
There was a problem hiding this comment.
also it might be better to define some of these values for time calculations (like 1000 * 60 * 60 * 24) as constants to improve readability
| // Initialize countdown state using the calculateTimeRemaining function | ||
| const [timeRemaining, setTimeRemaining] = useState<RemainingTime>(calculateTimeRemaining(date)); | ||
| useEffect(() => { | ||
| const interval = setInterval(() => { |
There was a problem hiding this comment.
Nice job setting this up to update the time remaining every second!
There was a problem hiding this comment.
Here's what I'm thinking: We launch the countdown component with the countdown itself and the click to view modal when countdown reaches zero first (probably after Nov. 5th). Then, we work on the confetti in a separate PR during that 10 day countdown so it's not blocking us on anything.
Summary
Created a countdown for the QMI Wrapped release start 10 days before launch. The page will render a ribbon ball at the button right that will open the countdown when clicked. The countdown component consist of 3 counter: Days, Hours, Minutes. Note that the ribbon ball and countdown component will NOT be visible until the start date for which QMI Wrap begins its countdown. Unfortunately, currently the confetti for when counter reaches 0 is not yet implemented, thus only a cone svg is visible as of right now. Once counter reaches 0, user will be prompted to click a button to view their QMI Wrapped slider which is the
Wrappedcomponent.To keep track of the varying start date and launch date across different semester, update the dates inside of the
constants.tsfileTest Plan
Tested via the local server to check if component renders and functions as expected. Pictures below:
When today is NOT the start date, so no component will be rendered
When today is the start date, then the counter component will be displayed with DAYS, HOURS, MINUTES
Note this is just a test example for visual purposes, so the 18 days depicted is not what will be shown on start date
When the counter is 0, then user will be prompted to click on the view button to open the Wrapped component
Note this is just an example of what happens when counter is 0
Screen.Recording.2024-10-27.at.7.18.25.PM.mov
Notes
Breaking Changes
None