Cleanup

jest.config.js

@@ -3,6 +3,7 @@ module.exports = {
   moduleNameMapper: {
     '^#components/(.*)': '<rootDir>/src/components/$1',
     '^#utils/(.*)': '<rootDir>/src/utils/$1',
+    '^#assets/(.*)': '<rootDir>/assets/$1',
   },
   setupFilesAfterEnv: ['./src/setupTests.ts'],
 }

package.json

@@ -4,7 +4,7 @@
     "start": "yarn firestore \"snowpack dev\"",
     "start:firestore": "firebase emulators:start --import=./devData --only firestore",
     "build": "snowpack build",
-    "test": "yarn firestore \"jest --watch\"",
+    "test": "jest --watch",
     "test:ci": "yarn firestore \"jest --coverage\"",
     "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx}\"",
     "lint": "eslint --fix --ext js,jsx,ts,tsx --ignore-path .gitignore .",

snowpack.config.js

@@ -20,6 +20,7 @@ module.exports = {
   alias: {
     '#components': './src/components',
     '#utils': './src/utils',
+    assets: './src/assets',
   },
   exclude: ['**/*.stories.@(js|jsx|ts|tsx)'],
 }

src/__tests__/App.test.tsx → src/App.test.tsx

@@ -1,20 +1,20 @@
 import * as React from 'react'
-import { loadingScreen, render, screen, userEvent } from '../tests/testUtils'
-import App, { AppRouter } from '../App'
+import { loadingScreen, render, screen, userEvent } from './tests/testUtils'
+import App, { AppRouter } from './App'
 import { MemoryRouter } from 'react-router-dom'
 import {
   fetchedCollectionData,
   fetchedDocumentData,
-} from '../tests/data/raidsData'
+} from './tests/data/raidsData'
 import Header from '#components/header'
 import { Global } from '@emotion/react'
-import { globalStyles } from '../styles/globalStyles'
+import { globalStyles } from './styles/globalStyles'
 
 beforeAll(() => {
-  jest.doMock('../utils/useDocument', () =>
+  jest.doMock('./utils/useDocument', () =>
     jest.fn().mockReturnValue(fetchedDocumentData),
   )
-  jest.doMock('../utils/useCollection', () =>
+  jest.doMock('./utils/useCollection', () =>
     jest.fn().mockReturnValue(fetchedCollectionData),
   )
 })

src/routes/Home.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { NavLink } from 'react-router-dom'
-import backgroundLogo from '../components/assets/bg_logo.svg'
-import logo from '../components/assets/logo.svg'
+import backgroundLogo from 'assets/bg_logo.svg'
+import logo from 'assets/logo.svg'
 import styled from '@emotion/styled'
 
 const Home = () => {

src/__tests__/Raids.test.tsx → src/routes/raids/ViewRaid.test.tsx

@@ -1,16 +1,16 @@
 import * as React from 'react'
-import { loadingScreen, render, screen, userEvent } from '../tests/testUtils'
-import App from '../App'
+import { loadingScreen, render, screen, userEvent } from '../../tests/testUtils'
+import App from '../../App'
 import {
   fetchedCollectionData,
   fetchedDocumentData,
-} from '../tests/data/raidsData'
+} from '../../tests/data/raidsData'
 
 beforeAll(() => {
-  jest.doMock('../utils/useDocument', () =>
+  jest.doMock('../../utils/useDocument', () =>
     jest.fn().mockReturnValue(fetchedDocumentData),
   )
-  jest.doMock('../utils/useCollection', () =>
+  jest.doMock('../../utils/useCollection', () =>
     jest.fn().mockReturnValue(fetchedCollectionData),
   )
 })

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,23 @@ 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(raidId),
+  )
 
   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 +96,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/__tests__/AllRaids.test.tsx → src/routes/raids/index.test.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react'
-import { loadingScreen, render, screen, userEvent } from '../tests/testUtils'
-import App from '../App'
-import { fetchedCollectionData } from '../tests/data/raidsData'
+import { loadingScreen, render, screen, userEvent } from '../../tests/testUtils'
+import App from '../../App'
+import { fetchedCollectionData } from '../../tests/data/raidsData'
 
 beforeAll(() => {
-  jest.doMock('../utils/useCollection', () =>
+  jest.doMock('../../utils/useCollection', () =>
     jest.fn().mockReturnValue(fetchedCollectionData),
   )
 })

src/routes/raids/index.tsx

@@ -2,13 +2,17 @@ import React from 'react'
 
 import { Link } from 'react-router-dom'
 import LoadingSpinner from '#components/loadingSpinner'
-import useCollection from '#utils/useCollection'
+import { RAID_STATS } from '#utils/firestoreCollections'
+import useFirestoreQuery, { to } from '#utils/useFirestoreQuery'
 
 const AllRaids = () => {
-  const collectionData = useCollection<ViewRaidData>('raid-stats')
+  console.log('Rendering page...')
+  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>
@@ -38,16 +42,20 @@ const AllRaids = () => {
         </ul>
       </>
     )
+  } else if (collectionQuery.status === 'error') {
+    return (
+      <>
+        <h1>An error occurred</h1>
+        <code>{JSON.stringify(collectionQuery.error)}</code>
+      </>
+    )
   }
 
-  return collectionData.state === 'loading' ? (
+  return collectionQuery.status === 'loading' ? (
     <LoadingSpinner />
   ) : (
     // Theoretically this can/should never be hit... But a fun message nonetheless
-    <p>
-      {`Strange... I could've sworn the Manticore was here a second ago! Seems
-        there aren't any Raids right now. Try again later!`}
-    </p>
+    <p>{`We ain't doing much, here`}</p>
   )
 }
 

src/utils/firestoreCollections.ts

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