🚚 Relocate firebase files

src/components/ColorSelect.tsx

@@ -5,7 +5,7 @@ import SolidSelectorIcon from "heroicons/solid/selector.svg";
 import React, { ReactElement } from "react";
 import { FormColor } from "src/types/form";
 
-const colors: FormColor[] = [
+const colorChoices: FormColor[] = [
   "green",
   "indigo",
   "orange",
@@ -54,7 +54,7 @@ export default function ColorSelect({ open, color }: Props): ReactElement {
           static
           className="max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm"
         >
-          {colors.map((color) => (
+          {colorChoices.map((color) => (
             <Listbox.Option
               key={color}
               value={color}

src/components/Spinner.tsx

@@ -2,10 +2,8 @@ import { ReactElement, SVGProps } from "react";
 
 export default function Spinner(props: SVGProps<SVGSVGElement>): ReactElement {
   return (
-    <>
-      <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" {...props}>
-        <circle cx={50} cy={50} r={45} />
-      </svg>
+    <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <circle cx={50} cy={50} r={45} />
       <style jsx>{`
         svg {
           animation: 2s linear infinite svg-animation;
@@ -47,6 +45,6 @@ export default function Spinner(props: SVGProps<SVGSVGElement>): ReactElement {
           }
         }
       `}</style>
-    </>
+    </svg>
   );
 }

src/components/SubmissionDetails.tsx

@@ -8,7 +8,7 @@ import SolidHashtagIcon from "heroicons/solid/hashtag.svg";
 import SolidLinkIcon from "heroicons/solid/link.svg";
 import SolidUserAddIcon from "heroicons/solid/user-add.svg";
 import React, { ReactElement, useState } from "react";
-import { firestore } from "src/firebase/client";
+import { firestore } from "src/firebase";
 import { FormSubmission } from "src/types/form";
 import { getSubmissionTitle } from "src/utils/getSubmissionTitle";
 import DataList from "./form-data-list/DataList";
@@ -108,12 +108,12 @@ export default function SubmissionDetails({ submission }: Props): ReactElement {
                     onClick={handleMarkAsDone}
                   >
                     {submission?.done ? (
-                      <SolidCheckIcon
+                      <SolidBanIcon
                         className="-ml-1 mr-2 h-5 w-5"
                         aria-hidden="true"
                       />
                     ) : (
-                      <SolidBanIcon
+                      <SolidCheckIcon
                         className="-ml-1 mr-2 h-5 w-5"
                         aria-hidden="true"
                       />

src/components/sidebar/Sidebar.tsx

@@ -2,9 +2,10 @@ import OutlineAtSymbolIcon from "heroicons/outline/at-symbol.svg";
 import OutlineInboxIcon from "heroicons/outline/inbox.svg";
 import SolidPlusIcon from "heroicons/solid/plus.svg";
 import SolidSearchIcon from "heroicons/solid/search.svg";
+import Link from "next/link";
 import React, { ChangeEvent, ReactElement, useMemo, useState } from "react";
 import { useCollectionData } from "react-firebase-hooks/firestore";
-import { firestore } from "src/firebase/client";
+import { firestore } from "src/firebase";
 import { Form } from "../../types/form";
 import Logo from "../Logo";
 import PrimaryLink from "./PrimaryLink";
@@ -36,7 +37,11 @@ export default function Sidebar(): ReactElement {
   return (
     <div className="h-0 flex-1 flex flex-col overflow-y-auto border-r border-gray-200 bg-gray-100 pt-5">
       <div className="flex items-center flex-shrink-0 px-7 space-x-4">
-        <Logo className="w-8 h-8 text-rose-500" />
+        <Link href="/inbox">
+          <a>
+            <Logo className="w-8 h-8 text-rose-500" />
+          </a>
+        </Link>
       </div>
       <UserMenu />
       {/* Navigation */}

src/components/sidebar/UserMenu.tsx

@@ -1,22 +1,32 @@
 import { Transition } from "@headlessui/react";
 import SolidSelectorIcon from "heroicons/solid/selector.svg";
+import { useRouter } from "next/router";
 import { ReactElement } from "react";
 import { useDocumentData } from "react-firebase-hooks/firestore";
-import { firestore } from "src/firebase/client";
+import { auth, firestore } from "src/firebase";
+import { useAuthState } from "src/hooks/useAuthState";
 import { useDropdown } from "src/hooks/useDropdown";
-import { useAuth } from "src/lib/auth";
 import { User } from "src/types/user";
 
 export default function UserMenu(): ReactElement {
-  const { user, signout } = useAuth();
+  const router = useRouter();
+  const user = useAuthState();
 
   const [userData] = useDocumentData<User>(
     user ? firestore.collection("users").doc(user.uid) : null,
     { idField: "id" }
   );
 
+  const initials =
+    userData && userData.firstName.charAt(0) + userData.lastName.charAt(0);
+
   const [showDropdown, setShowDropdown, containerProps] = useDropdown();
 
+  async function handleSignOut() {
+    await auth.signOut();
+    router.push("/login");
+  }
+
   return (
     <div
       className="px-3 mt-6 relative inline-block text-left"
@@ -37,9 +47,7 @@ export default function UserMenu(): ReactElement {
               className="w-10 h-10 bg-teal-200 bg-opacity-75 text-teal-700 font-bold tracking-wide rounded-full flex-shrink-0 flex items-center justify-center"
               aria-hidden="true"
             >
-              {`${userData?.firstName.charAt(0)}${userData?.lastName.charAt(
-                0
-              )}`}
+              {initials}
             </div>
             <span className="flex-1 min-w-0">
               <span className="text-gray-900 text-sm font-medium truncate block">
@@ -83,7 +91,7 @@ export default function UserMenu(): ReactElement {
 
         <div className="py-1">
           <button
-            onClick={() => signout()}
+            onClick={handleSignOut}
             className="w-full text-left block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900"
             role="menuitem"
           >

src/firebase/client.ts → src/firebase.ts

@@ -16,3 +16,4 @@ if (!firebase.apps.length) {
 export { firebase };
 
 export const firestore = firebase.firestore();
+export const auth = firebase.auth();

src/hooks/useAuthState.ts

@@ -0,0 +1,10 @@
+import { useEffect, useState } from "react";
+import { auth, firebase } from "../firebase";
+
+export function useAuthState() {
+  const [user, setUser] = useState<firebase.User | null>(null);
+
+  useEffect(() => auth.onAuthStateChanged(setUser), []);
+
+  return user;
+}

src/firebase/infiniteQuery.ts → src/hooks/useSubmissionQuery.ts

@@ -1,8 +1,11 @@
 import { useCallback, useEffect, useRef, useState } from "react";
-import { useMemoCompare } from "src/hooks/memoCompare";
+import { useMemoCompare } from "src/hooks/useMemoCompare";
 import { FormSubmission } from "src/types/form";
-import { firebase } from "./client";
+import { firebase } from "../firebase";
 
+/**
+ * Subscribes to a submission query and supports endless scrolling.
+ */
 export function useSubmissionQuery(
   orderedQuery: firebase.firestore.Query | null,
   chunkSize = 20

src/pages/[formSlug]/[submissionId].tsx

@@ -7,8 +7,8 @@ import { useCollectionData } from "react-firebase-hooks/firestore";
 import ListHeader from "src/components/ListHeader";
 import SubmissionDetails from "src/components/SubmissionDetails";
 import SubmissionList from "src/components/SubmissionList";
-import { firestore } from "src/firebase/client";
-import { useSubmissionQuery } from "src/firebase/infiniteQuery";
+import { firestore } from "src/firebase";
+import { useSubmissionQuery } from "src/hooks/useSubmissionQuery";
 import { AppLayout } from "src/layouts/AppLayout";
 import { Form } from "src/types/form";
 

src/pages/[formSlug]/settings.tsx

@@ -13,7 +13,7 @@ import ColorSelect from "src/components/ColorSelect";
 import { useModal } from "src/components/ModalProvider";
 import { useSnack } from "src/components/SnackbarProvider";
 import Switch from "src/components/Switch";
-import { firestore } from "src/firebase/client";
+import { firestore } from "src/firebase";
 import { useHost } from "src/hooks/useHost";
 import { AppLayout } from "src/layouts/AppLayout";
 import { Form, FormColor } from "src/types/form";

src/pages/_app.tsx

@@ -4,15 +4,14 @@ import { ReactNode } from "react";
 import ModalProvider from "src/components/ModalProvider";
 import SnackbarProvider from "src/components/SnackbarProvider";
 import "tailwindcss/tailwind.css";
-import { ProvideAuth } from "../lib/auth";
 import "../styles/app.css";
 
 function CustomApp({ Component, pageProps }: AppProps) {
   // @ts-expect-error
   const getLayout = Component.getLayout || ((page: ReactNode) => page);
 
   return (
-    <ProvideAuth>
+    <>
       <Head>
         <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
         <link
@@ -43,7 +42,7 @@ function CustomApp({ Component, pageProps }: AppProps) {
           {getLayout(<Component {...pageProps} />)}
         </SnackbarProvider>
       </ModalProvider>
-    </ProvideAuth>
+    </>
   );
 }
 

src/pages/inbox/[submissionId].tsx

@@ -4,8 +4,8 @@ import React, { ReactNode } from "react";
 import ListHeader from "src/components/ListHeader";
 import SubmissionDetails from "src/components/SubmissionDetails";
 import SubmissionList from "src/components/SubmissionList";
-import { firestore } from "src/firebase/client";
-import { useSubmissionQuery } from "src/firebase/infiniteQuery";
+import { firestore } from "src/firebase";
+import { useSubmissionQuery } from "src/hooks/useSubmissionQuery";
 import { AppLayout } from "src/layouts/AppLayout";
 
 export default function InboxPage() {

src/pages/index.tsx

@@ -1,6 +1,6 @@
 import { useRouter } from "next/router";
 import { useEffect } from "react";
-import { firebase } from "../firebase/client";
+import { firebase } from "../firebase";
 
 /**
  * This page does not return any elements, since it is only meant for redirects.