implemented mystery box animation in tracks section only playing once per session

Author: iteerP

src/app/HomePage.tsx

@@ -21,9 +21,11 @@ import { LeaderboardRecord, Prize } from "@/src/util/dataTypes";
 export default function HomePage({
     hackeroonPrizes,
     leaderboardData,
+    noTrackAnimation
 }: {
     hackeroonPrizes: Promise<Prize[]>;
     leaderboardData: Promise<LeaderboardRecord[]>;
+    noTrackAnimation: boolean;
 }) {
     const mainRef = useRef<HTMLDivElement>(null);
     const aboutRef = useRef<HTMLDivElement>(null);
@@ -181,7 +183,7 @@ export default function HomePage({
 
                         {/* TODO - release all of these the day of the event */}
                         <div id="tracks" ref={tracksRef} className="w-full">
-                            <TracksSection />
+                            <TracksSection noTrackAnimation={noTrackAnimation} />
                         </div>
 
                         <div

src/app/page.tsx

@@ -1,6 +1,7 @@
 import HomePage from "@/src/app/HomePage";
 import { getPrizes } from "@/src/util/db/prize";
 import { getLeaderboard } from "../util/db/leaderboard";
+import { cookies } from "next/headers";
 
 export default async function Page() {
     // The catch is to let this work in builds without databases.
@@ -14,10 +15,14 @@ export default async function Page() {
         return [];
     });
 
+    const reqCookies = await cookies();
+    const noTrackAnimation = reqCookies.has("hackathonTracksShown");
+
     return (
         <HomePage
             hackeroonPrizes={hackeroonPrizes}
             leaderboardData={leaderboardData}
+            noTrackAnimation={noTrackAnimation}
         />
     );
 }

src/components/landing-page/TrackSection.tsx

@@ -22,8 +22,10 @@ import Tracks from "./(TracksSectionComponents)/TracksTabNavigation/Tracks";
 import { Track } from "@/src/util/dataTypes";
 
 import LivePoll from "./(AboutSectionComponents)/LivePoll";
+import { ReadonlyRequestCookies } from "next/dist/server/web/spec-extension/adapters/request-cookies";
+import { actionSetTracksAnimation } from "@/src/util/actions/animation";
 
-const TracksSection = () => {
+const TracksSection = ({ noTrackAnimation }: { noTrackAnimation: boolean }) => {
     const panelMargin = "mt-12 md:mt-16";
 
     // tracks contains all relevant information about each of the 6 tracks
@@ -34,13 +36,10 @@ const TracksSection = () => {
     const selectedTrackRef = useRef<HTMLDivElement | null>(null);
     const livePollRef = useRef<HTMLDivElement | null>(null);
 
-    const [noAnimation, setNoAnimation] = useState<boolean>(
-        sessionStorage.getItem("hackathonTracksShown") !== null,
-    );
     const [startAnimation, setStartAnimation] = useState(false);
 
     useEffect(() => {
-        if (noAnimation) {
+        if (noTrackAnimation) {
             return;
         }
 
@@ -129,13 +128,12 @@ const TracksSection = () => {
                 duration: 0.3,
                 opacity: 1,
                 onComplete: () => {
-                    // set session storage to prevent animation from playing again
-                    sessionStorage.setItem("hackathonTracksShown", "true");
-                    setNoAnimation(true);
+                    // set cookies storage to prevent animation from playing again
+                    actionSetTracksAnimation();
                 },
             });
         }
-    }, [showTracks, noAnimation]);
+    }, [showTracks, noTrackAnimation]);
 
     return (
         <Panel id="tracksPanel" className={panelMargin} panelColor="white">
@@ -149,7 +147,7 @@ const TracksSection = () => {
             </PanelHeader>
 
             <div ref={panelContentRef}>
-                {!noAnimation && (
+                {!noTrackAnimation && (
                     <PanelContent
                         parentPanelId="tracksPanel"
                         className="relative flex flex-col items-center"

src/util/actions/animation.ts

@@ -0,0 +1,9 @@
+"use server";
+
+import { cookies } from "next/headers";
+
+export async function actionSetTracksAnimation() {
+    "use server";
+
+    (await cookies()).set("hackathonTracksShown", "true");
+}