typescript hacks

client/src/components/timerCard.tsx

@@ -27,10 +27,13 @@ const replaceReferencedFriendsInName = (
   });
 };
 
-const refreshTimer = (id: number) =>
+const refreshTimer = (id?: number) => {
-  fetch(`/api/timers/${id}/refresh`, {
+  if (!id) return;
+
+  return fetch(`/api/timers/${id}/refresh`, {
     method: "POST",
   });
+};
 
 export type TimerCardProps = {
   timer: TimerResponse;
@@ -41,18 +44,20 @@ export default function TimerCard({ timer, onSelect }: TimerCardProps) {
   const [since, setSince] = useState<string>("");
 
   useEffect(() => {
-    const start = new Date(timer.start);
+    if (timer && timer.start) {
-    let updateTimersInterval: ReturnType<typeof setInterval>;
+      const start = new Date(timer.start);
-    const msTillNextSecond = 1000 - (start.getTime() % 1000);
+      let updateTimersInterval: ReturnType<typeof setInterval>;
+      const msTillNextSecond = 1000 - (start.getTime() % 1000);
 
-    setSince(ago(start));
+      setSince(ago(start));
 
-    setTimeout(() => {
+      setTimeout(() => {
-      updateTimersInterval = setInterval(() => setSince(ago(start)), 1_000);
+        updateTimersInterval = setInterval(() => setSince(ago(start)), 1_000);
-    }, msTillNextSecond);
+      }, msTillNextSecond);
 
-    return () => clearInterval(updateTimersInterval);
+      return () => clearInterval(updateTimersInterval);
-  }, [timer.start]);
+    }
+  }, [timer?.start]);
 
   return (
     <div className="card grid-card">
@@ -63,36 +68,44 @@ export default function TimerCard({ timer, onSelect }: TimerCardProps) {
           </h4>
         </header>
         <p>
-          {replaceReferencedFriendsInName(
+          {timer?.name && timer?.referenced_friends ? (
-            timer.name,
+            replaceReferencedFriendsInName(
-            timer.referenced_friends,
+              timer.name,
-            onSelect
+              timer.referenced_friends,
-          ).map((element: JSX.Element | string, i: number) => (
+              onSelect
-            <span style={{ overflowWrap: "anywhere", hyphens: "auto" }} key={i}>
+            ).map((element: JSX.Element | string, i: number) => (
-              {element}
+              <span
-            </span>
+                style={{ overflowWrap: "anywhere", hyphens: "auto" }}
-          ))}
+                key={i}
+              >
+                {element}
+              </span>
+            ))
+          ) : (
+            <> </>
+          )}
         </p>
       </div>
       <div className="timer-metadata text-grey italic">
-        <div>
+        {timer.created_by ? (
-          <a
+          <div>
-            onClick={() =>
+            <a onClick={() => onSelect({ friendId: timer?.created_by?.id })}>
-              onSelect({ friendId: timer.timer_refreshes[0].refreshed_by.id })
+              {timer.created_by.name}
-            }
+            </a>{" "}
-          >
+            is tracking this
-            {" "}
+          </div>
-            {timer.created_by.name}
+        ) : (
-          </a>{" "}
+          <div>has no creator?</div>
-          is tracking this
+        )}
-        </div>
         <div>
           {timer.timer_refreshes && timer.timer_refreshes.length ? (
             <span>
               <a
                 onClick={() =>
                   onSelect({
-                    friendId: timer.timer_refreshes[0].refreshed_by.id,
+                    friendId: timer.timer_refreshes
+                      ? timer.timer_refreshes[0].refreshed_by.id
+                      : undefined,
                   })
                 }
               >
@@ -104,8 +117,9 @@ export default function TimerCard({ timer, onSelect }: TimerCardProps) {
             "has not yet been refreshed..."
           )}
         </div>
+
         <button
-          onClick={() => refreshTimer(timer.id)}
+          onClick={() => refreshTimer(timer?.id)}
           className="button outline"
         >
           Refresh

client/src/context/authContext.tsx

@@ -1,7 +1,7 @@
 import React, { useContext, useState, createContext, useEffect } from "react";
 
 interface authContext {
-  signedIn: boolean;
+  signedIn?: boolean;
   setSignedIn: (signedIn: boolean) => void;
   sessionOver: Date;
   setSessionOver: (expiry: Date) => void;

client/src/routes/timers.tsx

@@ -68,9 +68,13 @@ export default function Timers() {
           timers
             .sort(
               (
-                { start: startA }: { start: string },
+                { start: startA }: { start?: Date | string | undefined },
-                { start: startB }: { start: string }
+                { start: startB }: { start?: Date | string | undefined }
-              ) => new Date(startB).getTime() - new Date(startA).getTime()
+              ) => {
+                if (!startA) return -1;
+                if (!startB) return 1;
+                return new Date(startB).getTime() - new Date(startA).getTime();
+              }
             )
             .map((timer) => (
               <TimerCard key={timer.id} onSelect={onSelect} timer={timer} />

client/src/utils/types.ts

@@ -12,7 +12,7 @@ export type TimerResponse = {
   message?: string;
   id?: number;
   name?: string;
-  start?: Date;
+  start?: Date | string;
   created_by?: Friend;
   referenced_friends?: Friend[];
   timer_refreshes?: TimerRefresh[];