feat: clean up structure of components to make contributions easier

src/App.tsx

@@ -1,57 +1,12 @@
-import { EnvelopeIcon } from "@heroicons/react/20/solid";
 import { useContext } from "react";
-import { Authentication } from "./Authentication";
-import { AveragesScatterPlot } from "./AveragesScatterPlot";
-import { AveragesTable } from "./AveragesTable";
-import { DataTable } from "./DataTable";
-import { SessionPicker } from "./SessionPicker";
-import { UserMenu } from "./UserMenu";
-import { UserContext } from "./UserProvider";
+import { UserContext } from "./provider/UserContext";
+import { Authentication } from "./views/Authentication";
+import { DataView } from "./views/DataView";
+import { Layout } from "./views/Layout";
 
 export const App = () => {
   const { user } = useContext(UserContext);
   const isLoggedIn = user?.uid;
 
-  return (
-    <div className="flex flex-col min-h-screen">
-      <header className="flex flex-row items-center justify-between h-32 bg-sky-50 px-6 py-4">
-        <div>
-          <h1 className="text-2xl font-bold">r10progress</h1>
-          {!isLoggedIn && (
-            <p className="text-md">
-              A tool to track golf shot progress when using the Garmin Approach
-              R10.
-            </p>
-          )}
-        </div>
-        {isLoggedIn && <SessionPicker />}
-        <UserMenu />
-      </header>
-      {isLoggedIn ? (
-        <div className="flex flex-grow flex-col gap-8 bg-gray-200 py-8">
-          <div className="flex mx-8 flex-col items-center justify-center">
-            <div className="w-full p-4 bg-gray-100 rounded-md shadow-md flex flex-col gap-4">
-              <h2 className="text-2xl font-bold">Sessions</h2>
-              <DataTable />
-              <AveragesTable />
-              <AveragesScatterPlot />
-            </div>
-          </div>
-        </div>
-      ) : (
-        <Authentication />
-      )}
-      <footer className="flex flex-row items-center justify-center h-16 bg-sky-50 px-6 py-4 gap-2">
-        <p className="text-md">
-          Created by{" "}
-          <a className="underline" href="https://aronschueler.de/">
-            Aron Schüler
-          </a>
-        </p>
-        <a href="mailto:r10progress@lakur.tech" className="ml-2 flex underline">
-          <EnvelopeIcon className="w-5 h-5" />
-        </a>
-      </footer>
-    </div>
-  );
+  return <Layout>{isLoggedIn ? <DataView /> : <Authentication />}</Layout>;
 };

src/FileUpload.tsx → src/components/FileUpload.tsx

@@ -1,9 +1,9 @@
 import { doc, setDoc } from "firebase/firestore";
 import Papa from "papaparse";
 import { ChangeEvent, createRef, useContext, useState } from "react";
-import { LoadingSpinner } from "./LoadingSpinner";
-import { UserContext } from "./UserProvider";
-import { db } from "./firebaseConfig";
+import { db } from "../firebase";
+import { UserContext } from "../provider/UserContext";
+import { BaseLoadingSpinner } from "./base/BaseLoadingSpinner";
 
 export const FileUpload = () => {
   const formRef = createRef<HTMLFormElement>();
@@ -80,7 +80,7 @@ export const FileUpload = () => {
         ].join(" ")}
         type="submit"
       >
-        {isUploading ? <LoadingSpinner /> : "Upload"}
+        {isUploading ? <BaseLoadingSpinner /> : "Upload"}
       </button>
     </form>
   );

src/SessionPicker.tsx → src/components/SessionPicker.tsx

@@ -2,12 +2,12 @@ import { Listbox, Transition } from "@headlessui/react";
 import { CheckIcon, ChevronUpDownIcon } from "@heroicons/react/20/solid";
 import { collection, getDocs } from "firebase/firestore";
 import { Fragment, useContext, useEffect, useState } from "react";
-import { Label } from "./Label";
-import { SessionContext } from "./SessionContext";
-import { UserContext } from "./UserProvider";
-import { db } from "./firebaseConfig";
-import { Session, Sessions } from "./types/Sessions";
-import { reduceSessionToDefinedValues } from "./utils";
+import { db } from "../firebase";
+import { SessionContext } from "../provider/SessionContext";
+import { UserContext } from "../provider/UserContext";
+import { Session, Sessions } from "../types/Sessions";
+import { reduceSessionToDefinedValues } from "../utils";
+import { BaseLabel } from "./base/BaseLabel";
 
 export const SessionPicker = () => {
   const [selected, setSelected] = useState<string[]>([]);
@@ -59,9 +59,9 @@ export const SessionPicker = () => {
 
   return (
     <div>
-      <Label className="ml-4">
+      <BaseLabel className="ml-4">
         Select a session to filter data in the table and averages.
-      </Label>
+      </BaseLabel>
       <Listbox multiple value={selected} onChange={writeSelected}>
         <div className="relative mt-1 z-20 mb-4">
           <Listbox.Button className="relative w-full cursor-default rounded-lg bg-white py-2 pl-3 pr-10 text-left shadow-md focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-white/75 focus-visible:ring-offset-2 focus-visible:ring-offset-sky-300 sm:text-sm">

src/UserMenu.tsx → src/components/UserMenu.tsx

@@ -1,7 +1,7 @@
 import { useContext } from "react";
+import { auth } from "../firebase";
+import { UserContext } from "../provider/UserContext";
 import { UploadModal } from "./UploadModal";
-import { UserContext } from "./UserProvider";
-import { auth } from "./firebaseConfig";
 
 export const UserMenu = () => {
   const { user } = useContext(UserContext);

src/DemoModeButton.tsx → src/components/authentication/DemoModeButton.tsx

@@ -1,5 +1,5 @@
 import { signInAnonymously } from "firebase/auth";
-import { auth } from "./firebaseConfig";
+import { auth } from "../../firebase";
 
 // Uses firebase anonymous authentication to log in as a demo user
 export const DemoModeButton = () => {

src/authentication/LoginForm.tsx → src/components/authentication/LoginForm.tsx

@@ -2,8 +2,8 @@ import clsx from "clsx";
 import { signInWithEmailAndPassword } from "firebase/auth";
 import { useContext } from "react";
 import { useForm } from "react-hook-form";
-import { UserContext } from "../UserProvider";
-import { auth } from "../firebaseConfig";
+import { auth } from "../../firebase";
+import { UserContext } from "../../provider/UserContext";
 
 export const LoginForm = () => {
   const { setUser } = useContext(UserContext);

src/authentication/RegisterForm.tsx → src/components/authentication/RegisterForm.tsx

@@ -2,8 +2,8 @@ import clsx from "clsx";
 import { createUserWithEmailAndPassword } from "firebase/auth";
 import { useContext } from "react";
 import { useForm } from "react-hook-form";
-import { UserContext } from "../UserProvider";
-import { auth } from "../firebaseConfig";
+import { auth } from "../../firebase";
+import { UserContext } from "../../provider/UserContext";
 
 export const RegisterForm = () => {
   const { setUser } = useContext(UserContext);

src/components/base/BaseDisclosure.tsx

@@ -0,0 +1,29 @@
+import { Disclosure } from "@headlessui/react";
+import { ChevronUpIcon } from "@heroicons/react/20/solid";
+
+type BaseDisclosureProps = {
+  title: string;
+  children: React.ReactNode;
+};
+
+export const BaseDisclosure = ({ title, children }: BaseDisclosureProps) => {
+  return (
+    <Disclosure defaultOpen={true} as="div" className="mt-2">
+      {({ open }) => (
+        <>
+          <Disclosure.Button className="flex w-full justify-between rounded-lg bg-sky-100 px-4 py-2 text-left text-sm font-medium text-sky-900 hover:bg-sky-200 focus:outline-none focus-visible:ring focus-visible:ring-sky-500/75">
+            <h3 className="text-xl font-bold">{title}</h3>
+            <ChevronUpIcon
+              className={`${
+                open ? "rotate-180 transform" : ""
+              } h-5 w-5 text-sky-500 self-center`}
+            />
+          </Disclosure.Button>
+          <Disclosure.Panel className="pt-4 text-sm text-gray-500 mb-6">
+            {children}
+          </Disclosure.Panel>
+        </>
+      )}
+    </Disclosure>
+  );
+};

src/Label.tsx → src/components/base/BaseLabel.tsx

@@ -1,7 +1,7 @@
 import clsx from "clsx";
 import { PropsWithChildren } from "react";
 
-export const Label = ({
+export const BaseLabel = ({
   className,
   children,
 }: { className?: string } & PropsWithChildren) => (

src/Listbox.tsx → src/components/base/BaseListbox.tsx

@@ -2,7 +2,7 @@ import { Listbox, Transition } from "@headlessui/react";
 import { CheckIcon, ChevronUpDownIcon } from "@heroicons/react/20/solid";
 import { Fragment } from "react";
 
-export const StyledListbox = ({
+export const BaseListbox = ({
   options,
   setOption,
   selected,

src/LoadingSpinner.tsx → src/components/base/BaseLoadingSpinner.tsx

@@ -1,4 +1,4 @@
-export const LoadingSpinner = () => (
+export const BaseLoadingSpinner = () => (
   <div
     className="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-current border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite]"
     role="status"