remove hs msg after a week

src/App.tsx

@@ -1,16 +1,16 @@
-import { useEffect, useState } from "react";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { useEffect } from "react";
 import { ScreenCycle } from "./components/screen-cycle";
 import { CalendarScreen } from "./pages/calendar-screen";
 import { MessageScreen } from "./pages/message-screen";
 import { TransportScreen } from "./pages/transport-screen";
 import DateTime from "./components/date-time";
-import { isAugust, isValentinesSeason } from "./utils/date";
+import { isAugust, isMsgExpired, isValentinesSeason } from "./utils/date";
 import WelcomeScreen from "./pages/welcome-screen";
 import { AutoReload } from "./components/auto-reload";
+import { useMessage } from "./hooks/use-message";
 
 export default function App() {
-  const [queryClient] = useState(() => new QueryClient());
+  const { data: message } = useMessage();
 
   useEffect(() => {
     const interval = setInterval(
@@ -22,16 +22,20 @@ export default function App() {
     return () => clearInterval(interval);
   }, []);
 
-  const visibleScreens = [CalendarScreen, TransportScreen, MessageScreen];
+  const visibleScreens = [CalendarScreen, TransportScreen];
   if (isAugust()) {
     visibleScreens.push(WelcomeScreen);
   }
 
+  if (message?.title && message?.body && isMsgExpired(message._createdAt)) {
+    visibleScreens.push(MessageScreen);
+  }
+
   const isValentines = isValentinesSeason();
   document.body.classList.toggle("valentines", isValentines);
 
   return (
-    <QueryClientProvider client={queryClient}>
+    <>
       <AutoReload />
       <main
         className={`px-6 pt-6 pb-0 space-y-5 h-screen flex flex-col ${
@@ -41,6 +45,6 @@ export default function App() {
         <DateTime />
         <ScreenCycle screens={visibleScreens} />
       </main>
-    </QueryClientProvider>
+    </>
   );
 }

src/components/screen-cycle.tsx

@@ -45,6 +45,8 @@ export const ScreenCycle = ({ screens }: ScreenCycleProps) => {
 
   const CurrentScreen = screens[screenIndex];
 
+  console.log("CS", screens[screenIndex]);
+
   return (
     <div className="flex-1">
       {/* `key` is hack to force unmount the progressbar on change */}

src/lib/sanity/message.ts

@@ -4,7 +4,8 @@ const messageQuery = `
 *[_type == "post" && "board" in authors[]->groupType]
 | order(_createdAt desc)[0]{
   title,
-  "body": coalesce(pt::text(body), body)
+  "body": coalesce(pt::text(body), body),
+  _createdAt
 }
 `;
 

src/main.tsx

@@ -2,9 +2,14 @@ import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import App from "./App.tsx";
 import "./index.css";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+const queryClient = new QueryClient();
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
-    <App />
+    <QueryClientProvider client={queryClient}>
+      <App />
+    </QueryClientProvider>
   </StrictMode>
 );

src/utils/date.ts

@@ -104,3 +104,9 @@ export function isValentinesSeason(date: Date = new Date()): boolean {
 
   return false;
 }
+
+export function isMsgExpired(createdAt: string): boolean {
+  const createdDate = new Date(createdAt);
+  const expiryDate = new Date(createdDate.getTime() + 24 * 60 * 60 * 1000);
+  return isBefore(new Date(), expiryDate);
+}