feat: #80 with nice typing

src/routes/raids/ViewRaid.tsx

@@ -6,7 +6,8 @@ import styled from '@emotion/styled'
 import UserStatBlock from '#components/userStatBlock'
 import Emoji from '#components/emoji'
 import LoadingSpinner from '#components/loadingSpinner'
-import useDocument from '#utils/useDocument'
+import { RAID_STATS } from '#utils/firestoreCollections'
+import useFirestoreQuery, { to } from '#utils/useFirestoreQuery'
 
 const userStatSorts: {
   [key: string]: (a: UserStats, b: UserStats) => number
@@ -19,12 +20,20 @@ const userStatSortNames = Object.keys(userStatSorts)
 
 const ViewRaid = () => {
   const { raidId } = useParams<{ raidId: string }>()
-  const documentData = useDocument<ViewRaidData>('raid-stats', raidId)
+  const documentQuery = useFirestoreQuery((firestore) =>
+    firestore.collection(RAID_STATS).withConverter(to<ViewRaidData>()).doc(),
+  )
 
   const [currentSort, setCurrentSort] = useState(userStatSortNames[0])
 
-  if (documentData.state === 'success') {
-    const data = documentData.data
+  if (documentQuery.status === 'success') {
+    const data = documentQuery.data
+
+    if (!data)
+      return (
+        <p>Couldn`t find that Raid - did you fall into the wrong dungeon?</p>
+      )
+
     return (
       <$StatsView>
         <$Header>
@@ -84,14 +93,10 @@ const ViewRaid = () => {
         </$StatContainer>
       </$StatsView>
     )
-  } else if (documentData.state === 'error') {
-    return <p>{JSON.stringify(documentData.error)}</p>
+  } else if (documentQuery.status === 'error') {
+    return <p>{JSON.stringify(documentQuery.error)}</p>
   } else {
-    return documentData.state === 'loading' ? (
-      <LoadingSpinner />
-    ) : (
-      <p>Couldn`t find that Raid - did you fall into the wrong dungeon?</p>
-    )
+    return <LoadingSpinner />
   }
 }
 

src/routes/raids/index.tsx

@@ -2,13 +2,16 @@ import React from 'react'
 
 import { Link } from 'react-router-dom'
 import LoadingSpinner from '#components/loadingSpinner'
-import useCollection from '#utils/useCollection'
+import useFirestoreQuery, { to } from '#utils/useFirestoreQuery'
+import { RAID_STATS } from '#utils/firestoreCollections'
 
 const AllRaids = () => {
-  const collectionData = useCollection<ViewRaidData>('raid-stats')
+  const collectionQuery = useFirestoreQuery((firestore) =>
+    firestore.collection(RAID_STATS).withConverter(to<ViewRaidData>()),
+  )
 
-  if (collectionData.state === 'success') {
-    const data = collectionData.data
+  if (collectionQuery.status === 'success') {
+    const data = collectionQuery.data
     return (
       <>
         <h1>Raids</h1>
@@ -40,7 +43,7 @@ const AllRaids = () => {
     )
   }
 
-  return collectionData.state === 'loading' ? (
+  return collectionQuery.status === 'loading' ? (
     <LoadingSpinner />
   ) : (
     // Theoretically this can/should never be hit... But a fun message nonetheless

src/utils/firestoreCollections.ts

@@ -0,0 +1 @@
+export const RAID_STATS = 'raid-stats'