refactor: websocket logic in spotlights

Author: ruilopesm

components/Layout/components/Banner.tsx

@@ -1,11 +1,13 @@
 import { ISpotlight, useNotify } from "@context/Notification";
-import { displayRemainingTime } from "@lib/time";
+import { compareDates, displayRemainingTime } from "@lib/time";
 import { motion as Motion } from "framer-motion";
 import Link from "next/link";
 import { useEffect, useState } from "react";
 
 function PlainBanner({ spotlight }: { spotlight: ISpotlight }) {
-  const [remaining, setRemaining] = useState("");
+  const [remaining, setRemaining] = useState(
+    displayRemainingTime(spotlight.end)
+  );
 
   useEffect(() => {
     const timerID = setInterval(() => {
@@ -74,33 +76,31 @@ function PlainBanner({ spotlight }: { spotlight: ISpotlight }) {
 
 export default function Banner() {
   const { spotlight } = useNotify();
-  const [lastSpotlight, setLastSpotlight] = useState(null);
 
-  useEffect(() => {
-    if (spotlight) {
-      setLastSpotlight(spotlight);
-    }
-  }, [spotlight]);
+  if (spotlight) {
+    const dateDifferenceinMs: number =
+      new Date(spotlight.end).getTime() - new Date().getTime();
 
-  if (!lastSpotlight) {
-    return null;
-  } else if (spotlight) {
-    return (
-      <Motion.div
-        initial={{ y: -100, height: 0 }}
-        animate={{ y: 0, height: "auto" }}
-      >
-        <PlainBanner spotlight={spotlight} />
-      </Motion.div>
-    );
-  } else {
-    return (
-      <Motion.div
-        initial={{ y: 0, height: "auto" }}
-        animate={{ y: -100, height: 0 }}
-      >
-        <PlainBanner spotlight={lastSpotlight} />
-      </Motion.div>
-    );
+    if (dateDifferenceinMs > 0) {
+      return (
+        <Motion.div
+          initial={{ y: -100, height: 0 }}
+          animate={{ y: 0, height: "auto" }}
+        >
+          <PlainBanner spotlight={spotlight} />
+        </Motion.div>
+      );
+    } else if (dateDifferenceinMs >= -1000) {
+      return (
+        <Motion.div
+          initial={{ y: 0, height: "auto" }}
+          animate={{ y: -100, height: 0 }}
+        >
+          <PlainBanner spotlight={spotlight} />
+        </Motion.div>
+      );
+    }
   }
+
+  return null;
 }

context/Notification/NotifyContext.tsx

@@ -1,35 +1,46 @@
-import { NotificationData, fetchers } from "./fetchers";
 import { useContext, createContext, useState, useEffect } from "react";
-import { Socket, io } from "socket.io-client";
+import { Socket } from "phoenix";
+
+export interface ISpotlight {
+  id: number;
+  name: string;
+  badge_id: number;
+  end: string;
+}
+
+type NotificationData = {
+  spotlight: ISpotlight;
+};
 
 const NotifyContext = createContext({} as NotificationData);
 
 export const useNotify = () => useContext<NotificationData>(NotifyContext);
 
-export function NotifyProvider({ children }) {
-  const initialValue = Object.fromEntries(
-    Object.entries(fetchers).map(([k, v]) => [k, v.initialValue])
-  );
+const getPushUrl = () => {
+  return process.env.NEXT_PUBLIC_WS_URL;
+};
 
-  const [socket, setSocket] = useState<Socket>(null);
-  const [value, setValue] = useState(initialValue as NotificationData);
+export function NotifyProvider({ children }) {
+  const [value, setValue] = useState({ spotlight: null } as NotificationData);
 
   useEffect(() => {
-    fetch("/api/notifications").finally(() => {
-      const s = io();
+    const socket = new Socket(getPushUrl(), {
+      reconnectAfterMs: () => 10000,
+      rejoinAfterMs: () => 10000,
+      heartbeatIntervalMs: 30000,
+    });
+
+    socket.connect();
+    const channel = socket.channel("spotlight");
 
-      Object.keys(fetchers).forEach((key) => {
-        s.on(key, (data) => {
-          setValue({ ...value, [key]: data });
-        });
-      });
+    channel.join();
 
-      setSocket(s);
+    channel.on("spotlight", (data: ISpotlight) => {
+      setValue({ ...value, spotlight: data });
     });
 
     return () => {
-      socket?.disconnect();
-      setSocket(null);
+      socket.disconnect();
     };
   }, []);
 

context/Notification/WebSocket.jsx

@@ -0,0 +1,54 @@
+import { useState, useEffect } from "react";
+import { Socket } from "phoenix";
+
+const getPushUrl = () => {
+  return `ws://${process.env.NEXT_PUBLIC_API_URL}/socket`;
+};
+
+function useWebSocket({ room, onNewMessage }) {
+  const [channel, setChannel] = useState();
+  const [connected, setConnected] = useState(false);
+
+  useEffect(() => {
+    if (room) {
+      const socket = new Socket(getPushUrl(), {
+        reconnectAfterMs: () => 10000,
+        rejoinAfterMs: () => 10000,
+        heartbeatIntervalMs: 30000,
+      });
+
+      socket.connect();
+      const channel = socket.channel(room);
+
+      setChannel(channel);
+      channel
+        .join()
+        .receive("ok", () => {
+          setConnected(true);
+        })
+        .receive("error", () => {
+          setConnected(false);
+        });
+
+      if (onNewMessage) {
+        channel.on("spotlight", onNewMessage);
+      }
+
+      return () => {
+        setConnected(false);
+        socket.disconnect();
+      };
+    }
+
+    return () => {};
+  }, []);
+
+  useEffect(() => {
+    channel?.off("spotlight");
+    channel?.on("spotlight", onNewMessage);
+  }, [onNewMessage]);
+
+  return { connected, channel };
+}
+
+export default useWebSocket;

context/Notification/fetchers.ts

@@ -1,2 +1,2 @@
-export type { ISpotlight } from "./fetchers";
+export type { ISpotlight } from "./NotifyContext";
 export { NotifyProvider, useNotify } from "./NotifyContext";

context/Notification/index.ts

@@ -1,4 +1,4 @@
-export function displayRemainingTime(end) {
+export function displayRemainingTime(end: string) {
   const now = new Date();
   const endTime = new Date(end);
   const timeDifference = endTime.getTime() - now.getTime();
@@ -15,3 +15,9 @@ export function displayRemainingTime(end) {
 
   return `${formattedMinutes}:${formattedSeconds}`;
 }
+
+export function compareDates(a: Date, b: Date) {
+  if (a > b) return 1;
+  if (a < b) return -1;
+  return 0;
+}

lib/time.js renamed to lib/time.ts

@@ -37,6 +37,7 @@
     "jsqr": "^1.4.0",
     "lottie-web": "^5.8.1",
     "next": "^13.4.19",
+    "phoenix": "^1.7.7",
     "qrcode": "^1.5.1",
     "react": "^18.2.0",
     "react-cool-inview": "^2.0.8",