use types when adding data to db

slidr-app · Jul 16, 2023 · ea58353 · ea58353
1 parent b9fb0cf
commit ea58353
Show file tree

Hide file tree

Showing 12 changed files with 79 additions and 33 deletions.
diff --git a/functions/src/presentation.d.ts b/functions/src/presentation.d.ts
@@ -7,16 +7,38 @@ export type Note = {
   markdown: string;
 };
 
-// TODO: use this when uploading
-export type PresentationData = {
+export type PresentationCreate = {
+  created: Date;
   title: string;
-  thumb: string;
   pages: string[];
   notes: Note[];
   uid: string;
   username: string;
-  // TODO: use this in function metadata
-  twitterHandle: string;
-  thumbIndex?: number;
 };
+
+export type PresentationUpdate =
+  | {
+      original: string;
+    }
+  | {
+      username: string;
+    }
+  | {
+      title: string;
+      notes: Note[];
+    }
+  | {
+      pages: string[];
+      rendered: Date;
+      title: string;
+      notes: Note[];
+    };
+
+export type PresentationData = PresentationCreate &
+  PresentationUpdate & {
+    // Thumb: string;
+    // TODO: use this in function metadata
+    twitterHandle: string;
+    thumbIndex?: number;
+  };
 export type PresentationDoc = Doc & PresentationData;
diff --git a/src/components/broadcast/use-broadcast-firestore.ts b/src/components/broadcast/use-broadcast-firestore.ts
@@ -1,6 +1,8 @@
 import {useCallback, useEffect, useState} from 'react';
 import {onSnapshot, collection, addDoc, setDoc, doc} from 'firebase/firestore';
 import {firestore as db} from '../../firebase';
+import {type ReactionData} from '../reactions/reaction';
+import {type SessionData} from '../slides/sessions';
 import {type Payload, type Handler} from './use-channel-handlers';
 
 export default function useBroadcastFirebase({
@@ -29,21 +31,21 @@ export default function useBroadcastFirebase({
         return addDoc(collection(db, 'sessions', sessionId, 'reactions'), {
           reaction: payload.icon,
           ttl,
-        });
+        } satisfies ReactionData);
       }
 
       if (payload.id === 'confetti') {
         return addDoc(collection(db, 'sessions', sessionId, 'reactions'), {
           reaction: 'confetti',
           ttl,
-        });
+        } satisfies ReactionData);
       }
 
       if (payload.id === 'slide index') {
         return setDoc(doc(db, 'sessions', sessionId), {
           slideIndex: payload.index,
           ttl,
-        });
+        } satisfies SessionData);
       }
 
       // Note: we don't handle the 'confetti reset' action as it always happens on the broadcast channel

diff --git a/src/components/reactions/Reactions.tsx b/src/components/reactions/Reactions.tsx
@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import {useEffect, useMemo, useRef} from 'react';
-import {type Reaction as ReactionType} from './use-reactions';
+import {type Reaction as ReactionType} from './reaction';
 
 // This file is inspired from these 2 articles:
 // https://eng.butter.us/awesome-floating-emoji-reactions-using-framer-motion-styled-components-and-lottie-36b9f479a9f9

diff --git a/src/components/reactions/reaction.d.ts b/src/components/reactions/reaction.d.ts
@@ -0,0 +1,9 @@
+export type Reaction = {
+  id: number;
+  icon: string;
+};
+
+export type ReactionData = {
+  reaction: string;
+  ttl: Date;
+};
diff --git a/src/components/reactions/use-reactions.ts b/src/components/reactions/use-reactions.ts
@@ -1,9 +1,5 @@
 import {useCallback, useState} from 'react';
-
-export type Reaction = {
-  id: number;
-  icon: string;
-};
+import {type Reaction} from './reaction';
 
 export default function useReactions(): {
   removeReaction: (reaction: Reaction) => void;

diff --git a/src/components/slides/sessions.d.ts b/src/components/slides/sessions.d.ts
@@ -0,0 +1,4 @@
+export type SessionData = {
+  slideIndex: number;
+  ttl: Date;
+};
diff --git a/src/pages/Audience.Test.tsx b/src/pages/Audience.Test.tsx
@@ -4,6 +4,7 @@ import {RouterProvider, createMemoryRouter} from 'react-router-dom';
 import {auth, firestore} from '../firebase';
 import {screen, userEvent, render, findByRole} from '../test/test-utils';
 import Routes from '../Routes';
+import {type PresentationCreate} from '../../functions/src/presentation';
 
 beforeAll(async () => {
   // Use anonymous auth because email link is complicated to emulate
@@ -27,12 +28,12 @@ beforeAll(async () => {
   // Add a single presentation to firestore
   await setDoc(doc(firestore, 'presentations', 'presentation-2'), {
     uid: cred.user.uid,
-    created: Date.now(),
+    created: new Date(),
     username: 'test user',
     pages: ['img1.jpg', 'img2.jpg', 'img3.jpg'],
     notes: [],
     title: 'test presentation',
-  });
+  } satisfies PresentationCreate);
 });
 
 describe('Audience view', () => {

diff --git a/src/pages/Presentation.Test.tsx b/src/pages/Presentation.Test.tsx
@@ -2,6 +2,7 @@ import {signInAnonymously} from 'firebase/auth';
 import {doc, setDoc} from 'firebase/firestore';
 import {auth, firestore} from '../firebase';
 import {screen, userEvent, renderRoute} from '../test/test-utils';
+import {type PresentationCreate} from '../../functions/src/presentation';
 
 beforeAll(async () => {
   // Use anonymous auth because email link is complicated to emulate
@@ -15,12 +16,12 @@ beforeAll(async () => {
   // Add a single presentation to firestore
   await setDoc(doc(firestore, 'presentations', 'presentation-1'), {
     uid: cred.user.uid,
-    created: Date.now(),
+    created: new Date(),
     username: 'test user',
     pages: ['img1.jpg', 'img2.jpg', 'img3.jpg'],
     notes: [],
     title: 'test presentation',
-  });
+  } satisfies PresentationCreate);
 });
 
 describe('Presentation view', () => {

diff --git a/src/pages/PresentationPreferences.tsx b/src/pages/PresentationPreferences.tsx
@@ -4,7 +4,10 @@ import {deleteDoc, doc, updateDoc} from 'firebase/firestore';
 import {ref, deleteObject, listAll, getStorage} from 'firebase/storage';
 import clsx from 'clsx';
 import usePresentation from '../components/slides/use-presentation';
-import {type Note} from '../../functions/src/presentation';
+import {
+  type PresentationUpdate,
+  type Note,
+} from '../../functions/src/presentation';
 import {app, firestore} from '../firebase';
 import DefaultLayout from '../layouts/DefaultLayout';
 import PresentationPreferencesEditor, {
@@ -32,7 +35,7 @@ export default function PresentationPreferences() {
     await updateDoc(doc(firestore, 'presentations', presentationId!), {
       notes,
       title,
-    });
+    } satisfies PresentationUpdate);
     setSavingState((currentState) =>
       currentState === 'saving' ? 'saved' : currentState,
     );

diff --git a/src/pages/Speaker.Test.tsx b/src/pages/Speaker.Test.tsx
@@ -10,6 +10,7 @@ import {
   queryByRole,
 } from '../test/test-utils';
 import Routes from '../Routes';
+import {type PresentationCreate} from '../../functions/src/presentation';
 
 beforeAll(async () => {
   // Use anonymous auth because email link is complicated to emulate
@@ -33,12 +34,12 @@ beforeAll(async () => {
   // Add a single presentation to firestore
   await setDoc(doc(firestore, 'presentations', 'speakertest'), {
     uid: cred.user.uid,
-    created: Date.now(),
+    created: new Date(),
     username: 'test user',
     pages: ['img1.jpg', 'img2.jpg', 'img3.jpg'],
     notes: [],
     title: 'test presentation',
-  });
+  } satisfies PresentationCreate);
 });
 
 describe('Speaker view', () => {

diff --git a/src/pages/Upload.tsx b/src/pages/Upload.tsx
@@ -26,7 +26,11 @@ import '../components/pdf/pdf.css';
 import PresentationPreferencesEditor, {
   type NotesSaveState,
 } from '../components/PresentationPreferencesEditor';
-import {type Note} from '../../functions/src/presentation';
+import {
+  type PresentationCreate,
+  type Note,
+  type PresentationUpdate,
+} from '../../functions/src/presentation';
 import DefaultLayout from '../layouts/DefaultLayout';
 import {UserContext, type UserDoc} from '../components/UserProvider';
 import Loading from '../components/Loading';
@@ -84,12 +88,12 @@ export default function Export() {
         collection(firestore, 'presentations'),
         {
           created: new Date(),
-          uid: auth.currentUser?.uid,
+          uid: auth.currentUser!.uid,
           username: userData?.username ?? '',
           pages: [],
           notes: [],
           title: '',
-        },
+        } satisfies PresentationCreate,
       );
       setPresentationRef(presentationRef);
       const originalName = `${nanoid()}.pdf`;
@@ -101,7 +105,9 @@ export default function Export() {
         cacheControl: 'public;max-age=604800',
       });
       const originalDownloadUrl = await getDownloadURL(originalRef);
-      await updateDoc(presentationRef, {original: originalDownloadUrl});
+      await updateDoc(presentationRef, {
+        original: originalDownloadUrl,
+      } satisfies PresentationUpdate);
       setRendering(true);
     },
     [userData?.username],
@@ -221,7 +227,7 @@ export default function Export() {
         rendered: new Date(),
         title,
         notes: nextNotes,
-      });
+      } satisfies PresentationUpdate);
       setPages(nextPages);
       setNotes(nextNotes);
       setUploadDone(true);
@@ -282,7 +288,7 @@ export default function Export() {
     await updateDoc(presentationRef, {
       notes,
       title,
-    });
+    } satisfies PresentationUpdate);
     setSavingState((currentState) =>
       currentState === 'saving' ? 'saved' : currentState,
     );

diff --git a/src/pages/UserPreferences.tsx b/src/pages/UserPreferences.tsx
@@ -14,6 +14,7 @@ import DefaultLayout from '../layouts/DefaultLayout';
 import {UserContext, type UserDoc} from '../components/UserProvider';
 import {firestore} from '../firebase';
 import SaveIndicator from '../components/SaveIndicator';
+import {type PresentationUpdate} from '../../functions/src/presentation';
 
 export default function UserPreferences() {
   const {user} = useContext(UserContext);
@@ -46,17 +47,17 @@ export default function UserPreferences() {
   const save = useDebouncedCallback(async () => {
     setSaveState('saving');
     await setDoc(doc(firestore, `users/${user!.uid}`), userData, {merge: true});
-    const userPersentationsSnapshot = await getDocs(
+    const userPresentationsSnapshot = await getDocs(
       query(
         collection(firestore, 'presentations'),
         where('uid', '==', user!.uid),
       ),
     );
     await Promise.all(
-      userPersentationsSnapshot.docs.map(async (presentation) =>
+      userPresentationsSnapshot.docs.map(async (presentation) =>
         updateDoc(doc(firestore, 'presentations', presentation.id), {
-          username: userData.username,
-        }),
+          username: userData.username!,
+        } satisfies PresentationUpdate),
       ),
     );
     setSaveState((currentState) =>