fix refetch interval

Author: 0Zeno

src/App.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { ScreenCycle } from "./components/screen-cycle";
 import { CalendarScreen } from "./pages/calendar-screen";
 import { MessageScreen } from "./pages/message-screen";
@@ -25,21 +25,28 @@ export default function App() {
     return () => clearInterval(interval);
   }, []);
 
-  let visibleScreens = [CalendarScreen, TransportScreen];
-  if (isAugust()) {
-    visibleScreens.push(WelcomeScreen);
-  }
+  const [visibleScreens, setVisibleScreens] = useState([<CalendarScreen />, <TransportScreen />]);
 
-  if (message?.title && message?.body && isMsgExpired(message._createdAt)) {
-    visibleScreens.push(MessageScreen);
-  }
+  useEffect(() => {
+    if (vaffel?.status === "open") {
+      setVisibleScreens([
+        <VaffelScreen queue={vaffel.queue} status={vaffel.status} total={vaffel.total} />,
+      ]);
+      return;
+    }
+
+    const screens = [<CalendarScreen />, <TransportScreen />];
+
+    if (isAugust()) {
+      screens.push(<WelcomeScreen />);
+    }
+
+    if (message?.title && message?.body && isMsgExpired(message._createdAt)) {
+      screens.push(<MessageScreen />);
+    }
 
-  if (vaffel?.status === "open") {
-    console.log(JSON.stringify(vaffel));
-    visibleScreens = [
-      () => <VaffelScreen queue={vaffel.queue} status={vaffel.status} total={vaffel.total} />
-    ];
-  }
+    setVisibleScreens(screens);
+  }, [message, vaffel]);
 
   const isValentines = isValentinesSeason();
   document.body.classList.toggle("valentines", isValentines);
@@ -53,7 +60,7 @@ export default function App() {
         }`}
       >
         <DateTime />
-        <ScreenCycle screens={visibleScreens} />
+        <ScreenCycle screens={visibleScreens} /> 
       </main>
     </>
   );

src/components/screen-cycle.tsx

@@ -2,9 +2,10 @@ import { useState, useEffect } from "react";
 import { motion, AnimatePresence } from "framer-motion";
 import { ProgressBar } from "./progress-bar";
 import { TRANSITION_TIME } from "../config";
+import { type ReactNode } from "react";
 
 type ScreenCycleProps = {
-  screens: Array<React.FC>;
+  screens: Array<ReactNode>;
 };
 
 export const ScreenCycle = ({ screens }: ScreenCycleProps) => {
@@ -43,8 +44,6 @@ export const ScreenCycle = ({ screens }: ScreenCycleProps) => {
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [screens.length]);
 
-  const CurrentScreen = screens[screenIndex];
-
   return (
     <div className="flex-1">
       {/* `key` is hack to force unmount the progressbar on change */}
@@ -61,7 +60,7 @@ export const ScreenCycle = ({ screens }: ScreenCycleProps) => {
             transition={{ duration: 1 }}
             className="w-full h-full"
           >
-            <CurrentScreen />
+            {screens[screenIndex]}
           </motion.div>
         </AnimatePresence>
       </div>

src/components/vaffel.tsx

@@ -1,7 +1,7 @@
 "use client";
 import { useEffect, useRef } from "react";
 
-export default function HeartsMinimal() {
+export default function HeartsMinimal({ amount }: { amount: number }) {
   const ref = useRef<HTMLCanvasElement | null>(null);
 
   useEffect(() => {
@@ -54,7 +54,7 @@ export default function HeartsMinimal() {
     };
 
     const hearts: Heart[] = [];
-    const numHearts = randomInt(150, 200);
+    const numHearts = amount;
 
     for (let i = 0; i < numHearts; i += 1) {
       hearts.push({
@@ -120,7 +120,7 @@ export default function HeartsMinimal() {
       cancelAnimationFrame(raf);
       window.removeEventListener("resize", resize);
     };
-  }, []);
+  }, [amount]);
 
   return (
     <canvas

src/hooks/use-vaffel.ts

@@ -24,6 +24,6 @@ export function useVaffel() {
 
       return { queue, status, total };
     },
-    staleTime: 1000
+    refetchInterval : 1000
   });
 }

src/pages/vaffel-screen.tsx

@@ -10,9 +10,9 @@ type VaffelProps = {
 export default function VaffelScreen({ queue, status, total }: VaffelProps) {
   return (
     <div className="w-full h-full flex items-center justify-center">
-      <WaffleRain />
+      <WaffleRain amount={total} />
       <div className="bg-background/80 border-2 shadow-lg rounded-2xl p-8 max-w-2xl w-full text-center overflow-hidden">
-        <h1 className="text-3xl font-semibold mb-2">Vaffelkøen </h1>
+        <h1 className="text-3xl font-semibold mb-2">Vaffelkø</h1>
         <p className="text-lg font-semibold mb-6 space-x-2">
           Status:{" "}
           <span
@@ -28,15 +28,15 @@ export default function VaffelScreen({ queue, status, total }: VaffelProps) {
         </p>
 
         {queue.length === 0 ? (
-          <p className="text-2xl text-gray-400">Ingen i køen</p>
+          <p className="text-gray-800">Ingen i køen</p>
         ) : (
           <ul>
             {queue.map((person, index) => (
               <li
                 key={person.user_id}
-                className="flex items-center gap-2 rounded-xl px-6 text-xl font-medium "
+                className="flex items-center gap-2 rounded-xl px-6 "
               >
-                <span className=" w-6 text-right">{index} - </span>
+                <span className=" font-semibold">{index+1}:</span>
                 <span>{person.display_name}</span>
               </li>
             ))}