typescript hacks

client/src/components/timerCard.tsx

@@ -27,10 +27,13 @@ const replaceReferencedFriendsInName = (
   });
 };
 
-const refreshTimer = (id: number) =>
-  fetch(`/api/timers/${id}/refresh`, {
+const refreshTimer = (id?: number) => {
+  if (!id) return;
+
+  return fetch(`/api/timers/${id}/refresh`, {
     method: "POST",
   });
+};
 
 export type TimerCardProps = {
   timer: TimerResponse;
@@ -41,6 +44,7 @@ export default function TimerCard({ timer, onSelect }: TimerCardProps) {
   const [since, setSince] = useState<string>("");
 
   useEffect(() => {
+    if (timer && timer.start) {
       const start = new Date(timer.start);
       let updateTimersInterval: ReturnType<typeof setInterval>;
       const msTillNextSecond = 1000 - (start.getTime() % 1000);
@@ -52,7 +56,8 @@ export default function TimerCard({ timer, onSelect }: TimerCardProps) {
       }, msTillNextSecond);
 
       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 ? (
+            replaceReferencedFriendsInName(
               timer.name,
               timer.referenced_friends,
               onSelect
             ).map((element: JSX.Element | string, i: number) => (
-            <span style={{ overflowWrap: "anywhere", hyphens: "auto" }} key={i}>
+              <span
+                style={{ overflowWrap: "anywhere", hyphens: "auto" }}
+                key={i}
+              >
                 {element}
               </span>
-          ))}
+            ))
+          ) : (
+            <> </>
+          )}
         </p>
       </div>
       <div className="timer-metadata text-grey italic">
+        {timer.created_by ? (
           <div>
-          <a
-            onClick={() =>
-              onSelect({ friendId: timer.timer_refreshes[0].refreshed_by.id })
-            }
-          >
-            {" "}
+            <a onClick={() => onSelect({ friendId: timer?.created_by?.id })}>
               {timer.created_by.name}
             </a>{" "}
             is tracking this
           </div>
+        ) : (
+          <div>has no creator?</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: startB }: { start: string }
-              ) => new Date(startB).getTime() - new Date(startA).getTime()
+                { start: startA }: { start?: Date | string | undefined },
+                { start: startB }: { start?: Date | string | undefined }
+              ) => {
+                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[];