refactor(Pusher): improve reliability

simonknittel · Jan 18, 2025 · 5a7c6a0 · 5a7c6a0
1 parent a065a85
commit 5a7c6a0
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 25 deletions.
diff --git a/app/src/discord/components/NotificationsTooltip.tsx b/app/src/discord/components/NotificationsTooltip.tsx
@@ -15,18 +15,15 @@ type Props = Readonly<{
 export const NotificationsTooltip = ({ className }: Props) => {
   const { interests, setInterests } = useBeamsContext();
   const [isOpen, setIsOpen] = useState(false);
-  const [newEvent, setNewEvent] = useState(
-    interests.includes("newDiscordEvent") ? "true" : "false",
-  );
-  const [updatedEvent, setUpdatedEvent] = useState(
-    interests.includes("updatedEvent") ? "true" : "false",
+  const [newEvent, setNewEvent] = useState<boolean | undefined>(undefined);
+  const [updatedEvent, setUpdatedEvent] = useState<boolean | undefined>(
+    undefined,
   );
 
   useEffect(() => {
-    setNewEvent(interests.includes("newDiscordEvent") ? "true" : "false");
-    setUpdatedEvent(
-      interests.includes("updatedDiscordEvent") ? "true" : "false",
-    );
+    if (interests === undefined) return;
+    setNewEvent(interests.includes("newDiscordEvent"));
+    setUpdatedEvent(interests.includes("updatedDiscordEvent"));
   }, [interests]);
 
   const submitHandler: FormEventHandler<HTMLFormElement> = (event) => {
@@ -35,6 +32,8 @@ export const NotificationsTooltip = ({ className }: Props) => {
     const formData = new FormData(event.currentTarget);
 
     setInterests((currentValue) => {
+      if (currentValue === undefined) return currentValue;
+
       const newValue = currentValue.filter(
         (interest) =>
           ["newDiscordEvent", "updatedDiscordEvent"].includes(interest) ===
@@ -76,10 +75,8 @@ export const NotificationsTooltip = ({ className }: Props) => {
                 type="checkbox"
                 name="newEvent"
                 value="true"
-                onChange={(event) =>
-                  setNewEvent(event.target.checked ? "true" : "false")
-                }
-                defaultChecked={newEvent === "true"}
+                onChange={(event) => setNewEvent(event.target.checked)}
+                defaultChecked={newEvent}
                 className="hidden peer"
               />
               <span className="w-8 h-8 bg-neutral-700 rounded block relative peer-checked:hidden">
@@ -96,10 +93,8 @@ export const NotificationsTooltip = ({ className }: Props) => {
                 type="checkbox"
                 name="updatedEvent"
                 value="true"
-                onChange={(event) =>
-                  setUpdatedEvent(event.target.checked ? "true" : "false")
-                }
-                defaultChecked={updatedEvent === "true"}
+                onChange={(event) => setUpdatedEvent(event.target.checked)}
+                defaultChecked={updatedEvent}
                 className="hidden peer"
               />
               <span className="w-8 h-8 bg-neutral-700 rounded block relative peer-checked:hidden">

diff --git a/app/src/pusher/components/BeamsContext.tsx b/app/src/pusher/components/BeamsContext.tsx
@@ -9,8 +9,8 @@ const Client = dynamic(() => import("./Client").then((mod) => mod.Client), {
 });
 
 interface BeamsContext {
-  interests: string[];
-  setInterests: Dispatch<SetStateAction<string[]>>;
+  interests?: string[];
+  setInterests: Dispatch<SetStateAction<string[] | undefined>>;
 }
 
 const BeamsContext = createContext<BeamsContext | undefined>(undefined);
@@ -21,20 +21,19 @@ type Props = Readonly<{
 }>;
 
 export const BeamsProvider = ({ children, instanceId }: Props) => {
-  const [interests, setInterests] = useState<string[]>([]);
+  const [interests, setInterests] = useState<string[] | undefined>(undefined);
 
   useEffect(() => {
     const _interests = localStorage
       .getItem("notification_interests")
       ?.split(",")
       .filter(Boolean);
 
-    if (_interests) {
-      setInterests(_interests);
-    }
+    setInterests(_interests ?? []);
   }, []);
 
   useEffect(() => {
+    if (interests === undefined) return;
     const _interests = interests.join(",");
     localStorage.setItem("notification_interests", _interests);
   }, [interests]);

diff --git a/app/src/pusher/components/Client.tsx b/app/src/pusher/components/Client.tsx
@@ -13,6 +13,8 @@ export const Client = ({ instanceId }: Props) => {
   const { interests } = useBeamsContext();
 
   useEffect(() => {
+    if (interests === undefined) return;
+
     let beamsClient: PusherPushNotifications.Client;
 
     try {
@@ -22,19 +24,21 @@ export const Client = ({ instanceId }: Props) => {
 
       if (interests.length <= 0) {
         void beamsClient.stop();
+        console.info("[Pusher] Client stopped");
         return;
       }
 
       void beamsClient
         .start()
         .then(() => {
+          console.info("[Pusher] Client started");
           return beamsClient.setDeviceInterests(interests);
         })
         .then(() => {
-          console.info("Device interests set");
+          console.info("[Pusher] Device interests set");
         });
     } catch (error) {
-      console.error(error);
+      console.error("[Pusher] Error initializing client", error);
       toast.error("Benachrichtigungen konnten nicht aktiviert werden.");
     }
   }, [interests, instanceId]);