feat: redesign app layout

thraizz · Mar 7, 2024 · 6ca226a · 6ca226a
1 parent ac2822e
commit 6ca226a
Show file tree

Hide file tree

Showing 32 changed files with 912 additions and 200 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -2,18 +2,19 @@ module.exports = {
   root: true,
   env: { browser: true, es2020: true },
   extends: [
-    'eslint:recommended',
-    'plugin:@typescript-eslint/recommended',
-    'plugin:react-hooks/recommended',
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react-hooks/recommended",
+    "plugin:prettier/recommended",
   ],
-  ignorePatterns: ['dist', '.eslintrc.cjs'],
-  parser: '@typescript-eslint/parser',
-  plugins: ['react-refresh', 'prettier'],
+  ignorePatterns: ["dist", ".eslintrc.cjs"],
+  parser: "@typescript-eslint/parser",
+  plugins: ["react-refresh", "prettier"],
   rules: {
-    'react-refresh/only-export-components': [
-      'warn',
+    "react-refresh/only-export-components": [
+      "warn",
       { allowConstantExport: true },
     ],
-    'prettier/prettier': 'error',
+    "prettier/prettier": "error",
   },
-}
+};
diff --git a/.prettierrc.json b/.prettierrc.json
@@ -0,0 +1,3 @@
+{
+  "plugins": ["prettier-plugin-tailwindcss"]
+}
diff --git a/bun.lockb b/bun.lockb
diff --git a/index.html b/index.html
@@ -1,7 +1,6 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" class="h-full bg-white">
   <head>
-
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>
@@ -45,10 +44,14 @@
 
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
 
-    <script defer data-domain="r10progress.web.app" src="https://plausible.io/js/script.js"></script>
+    <script
+      defer
+      data-domain="r10progress.web.app"
+      src="https://plausible.io/js/script.js"
+    ></script>
   </head>
-  <body>
-    <div id="root"></div>
+  <body class="h-full">
+    <div id="root" />
     <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -17,10 +17,14 @@
     "ag-grid-react": "^31.1.0",
     "autoprefixer": "^10.4.17",
     "clsx": "^2.1.0",
+    "dayjs": "^1.11.10",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.3",
     "firebase": "^10.8.0",
     "papaparse": "^5.4.1",
     "postcss": "^8.4.35",
+    "prettier": "^3.2.5",
+    "prettier-plugin-tailwindcss": "^0.5.11",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.50.1",
@@ -30,6 +34,7 @@
     "vitest": "^1.3.1"
   },
   "devDependencies": {
+    "@tailwindcss/forms": "^0.5.7",
     "@types/react": "^18.2.57",
     "@types/react-dom": "^18.2.19",
     "@typescript-eslint/eslint-plugin": "^6.21.0",

diff --git a/src/components/FileUpload.tsx b/src/components/FileUpload.tsx
@@ -5,6 +5,7 @@ import { db } from "../firebase";
 import { UserContext } from "../provider/UserContext";
 import { BaseLoadingSpinner } from "./base/BaseLoadingSpinner";
 import { SessionContext } from "../provider/SessionContext";
+import clsx from "clsx";
 
 export const FileUpload = () => {
   const { fetchSnapshot } = useContext(SessionContext);
@@ -76,19 +77,19 @@ export const FileUpload = () => {
           ref={inputRef}
           type="file"
           id="file"
+          className="btn"
           onChange={handleFileChange}
         />
-        <p className="text-red-500 text-sm">{error}</p>
+        <p className="text-sm text-red-500">{error}</p>
       </div>
       <button
-        className={[
+        className={clsx(
           "btn",
-          csvFile !== null &&
-          isUploading === false &&
-          inputRef.current?.value !== ""
-            ? "bg-sky-200"
-            : "is-disabled",
-        ].join(" ")}
+          (csvFile === null ||
+            isUploading === true ||
+            inputRef.current?.value === "") &&
+            "is-disabled",
+        )}
         type="submit"
       >
         {isUploading ? <BaseLoadingSpinner /> : "Upload"}

diff --git a/src/components/SessionPicker.tsx b/src/components/SessionPicker.tsx
@@ -3,20 +3,21 @@ import { CheckIcon, ChevronUpDownIcon } from "@heroicons/react/20/solid";
 import { Fragment, useContext, useEffect, useState } from "react";
 import { SessionContext } from "../provider/SessionContext";
 import { Sessions } from "../types/Sessions";
-import { BaseLabel } from "./base/BaseLabel";
 
 export const SessionPicker = () => {
   const [selected, setSelected] = useState<string[]>([]);
-  const { sessions, setSessions, fetchSnapshot } = useContext(SessionContext);
+  const { sessions, setSessions, fetchSnapshot, initialized } =
+    useContext(SessionContext);
   useEffect(() => {
     const _ = async () => await fetchSnapshot();
-    _().then((fetchedSessions) => {
-      if (fetchedSessions) {
-        setSessions(fetchedSessions);
-        setSelected(Object.keys(fetchedSessions));
-      }
-    });
-  }, [fetchSnapshot, setSessions]);
+    if (!initialized)
+      _().then((fetchedSessions) => {
+        if (fetchedSessions) {
+          setSessions(fetchedSessions);
+          setSelected(Object.keys(fetchedSessions));
+        }
+      });
+  }, [fetchSnapshot, setSessions, sessions, initialized]);
 
   const writeSelected = (value: string[]) => {
     const setAll = value.includes("All") && !selected.includes("All");
@@ -41,23 +42,26 @@ export const SessionPicker = () => {
   };
 
   return (
-    <div>
-      <BaseLabel>
-        Select a session to filter data in the table and averages.
-      </BaseLabel>
+    <div className="flex items-baseline gap-4">
       <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">
-            <span className="block truncate">
-              {selected.length < 2 ? selected : `${selected.length} sessions`}
-            </span>
-            <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
-              <ChevronUpDownIcon
-                className="h-5 w-5 text-gray-400"
-                aria-hidden="true"
-              />
-            </span>
-          </Listbox.Button>
+        <div className="relative z-20 mb-4 mt-1 max-w-full flex-grow lg:flex-grow-0">
+          <Listbox.Label className="flex w-full flex-col text-sm font-medium text-gray-700">
+            Session Selection
+            <Listbox.Button
+              title="Select a session to filter data in the table and averages."
+              className="relative h-8  cursor-pointer 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 lg:w-full lg:min-w-64"
+            >
+              <span className="block truncate">
+                {selected.length < 2 ? selected : `${selected.length} sessions`}
+              </span>
+              <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
+                <ChevronUpDownIcon
+                  className="h-5 w-5 text-gray-400"
+                  aria-hidden="true"
+                />
+              </span>
+            </Listbox.Button>
+          </Listbox.Label>
           <Transition
             as={Fragment}
             leave="transition ease-in duration-100"

diff --git a/src/components/UploadModal.tsx b/src/components/UploadModal.tsx
@@ -11,20 +11,20 @@ export const UploadModal = ({ disabled }: { disabled: boolean }) => {
         <>
           <Popover.Button
             className={clsx(
-              "btn btn-secondary whitespace-nowrap flex flex-row gap-px items-center justify-center",
+              "btn btn-secondary flex flex-row items-center justify-center gap-px whitespace-nowrap",
               open ? "text-white" : "text-white/90",
             )}
           >
             <span>Upload File</span>
             <ChevronDownIcon
               className={clsx(
                 "h-5 w-5 transition duration-150 ease-in-out group-hover:text-sky-300/80",
-                open ? "text-sky-600 rotate-180" : "text-sky-600/70",
+                open ? "rotate-180 text-sky-600" : "text-sky-600/70",
               )}
               aria-hidden="true"
             />
           </Popover.Button>
-          <Popover.Overlay className="md:hidden fixed inset-0 bg-sky-800 opacity-30" />
+          <Popover.Overlay className="fixed inset-0 bg-sky-800 opacity-30 md:hidden" />
           <Transition
             as={Fragment}
             enter="transition ease-out duration-200"
@@ -34,8 +34,8 @@ export const UploadModal = ({ disabled }: { disabled: boolean }) => {
             leaveFrom="opacity-100 translate-y-0"
             leaveTo="opacity-0 translate-y-1"
           >
-            <Popover.Panel className="fixed sm:absolute right-0 left-0 sm:left-[unset] z-30 mt-3 w-screen sm:max-w-sm transform px-4 sm:px-0 lg:max-w-3xl">
-              <div className="mx-auto w-full max-w-xl p-4 bg-white rounded-md shadow-md flex flex-col gap-4 ">
+            <Popover.Panel className="fixed left-0 right-0 z-30 mt-3 w-screen transform px-4 sm:absolute sm:left-[unset] sm:max-w-sm sm:px-0 lg:max-w-3xl">
+              <div className="mx-auto flex w-full max-w-xl flex-col gap-4 rounded-md bg-white p-4 shadow-md ">
                 {disabled ? (
                   <p className="text-md">Please login to upload a file.</p>
                 ) : (

diff --git a/src/components/UserMenu.tsx b/src/components/UserMenu.tsx
@@ -8,7 +8,7 @@ export const UserMenu = () => {
   const isAuthenticated = user?.uid;
   const isAnonymous = user?.isAnonymous;
   return (
-    <div className="flex flex-row gap-4 items-center">
+    <div className="flex flex-row items-center gap-4">
       {isAuthenticated && (
         <>
           <UploadModal disabled={!!isAnonymous} />

diff --git a/src/components/authentication/LoginForm.tsx b/src/components/authentication/LoginForm.tsx
@@ -16,13 +16,11 @@ export const LoginForm = () => {
       .then((userCredential) => {
         // Signed in
         const user = userCredential.user;
-        console.log(user);
         setUser(user);
         navigate("/dashboard");
       })
       .catch((error) => {
         const errorCode = error.code;
-        console.log(errorCode);
         if (errorCode === "auth/invalid-credential") {
           loginForm.setError("email", {
             type: "manual",
@@ -57,10 +55,10 @@ export const LoginForm = () => {
           {...loginForm.register("email", { required: true })}
         />
         {loginForm.formState.errors.email?.type === "required" && (
-          <p className="text-red-500 text-sm">This field is required</p>
+          <p className="text-sm text-red-500">This field is required</p>
         )}
         {loginForm.formState.errors.email?.type === "manual" && (
-          <p className="text-red-500 text-sm">
+          <p className="text-sm text-red-500">
             {loginForm.formState.errors.email.message}
           </p>
         )}
@@ -71,18 +69,18 @@ export const LoginForm = () => {
         </label>
         <input
           className={clsx(
-            "border-2 border-gray-300 px-4 py-2 rounded-md",
+            "rounded-md border-2 border-gray-300 px-4 py-2",
             loginForm.formState.errors.password && "border-red-500",
           )}
           type="password"
           id="password"
           {...loginForm.register("password", { required: true })}
         />
         {loginForm.formState.errors.password?.type === "required" && (
-          <p className="text-red-500 text-sm">This field is required</p>
+          <p className="text-sm text-red-500">This field is required</p>
         )}
         {loginForm.formState.errors.password?.type === "manual" && (
-          <p className="text-red-500 text-sm">
+          <p className="text-sm text-red-500">
             {loginForm.formState.errors.password?.message}
           </p>
         )}

diff --git a/src/components/authentication/RegisterForm.tsx b/src/components/authentication/RegisterForm.tsx
@@ -19,7 +19,6 @@ export const RegisterForm = () => {
     createUserWithEmailAndPassword(auth, email, password)
       .then((userCredential) => {
         const user = userCredential.user;
-        console.log(user);
         setUser(user);
         navigate("/dashboard");
       })
@@ -49,7 +48,7 @@ export const RegisterForm = () => {
           Email
         </label>
         <input
-          className="border-2 border-gray-300 px-4 py-2 rounded-md"
+          className="rounded-md border-2 border-gray-300 px-4 py-2"
           type="email"
           id="email"
           {...registerForm.register("email", {
@@ -62,7 +61,7 @@ export const RegisterForm = () => {
           Password
         </label>
         <input
-          className="border-2 border-gray-300 px-4 py-2 rounded-md"
+          className="rounded-md border-2 border-gray-300 px-4 py-2"
           type="password"
           id="password"
           {...registerForm.register("password", {

diff --git a/src/components/base/BaseDisclosure.tsx b/src/components/base/BaseDisclosure.tsx
@@ -16,10 +16,10 @@ export const BaseDisclosure = ({ title, children }: BaseDisclosureProps) => {
             <ChevronUpIcon
               className={`${
                 open ? "rotate-180 transform" : ""
-              } h-5 w-5 text-sky-500 self-center`}
+              } h-5 w-5 self-center text-sky-500`}
             />
           </Disclosure.Button>
-          <Disclosure.Panel className="pt-4 text-sm text-gray-500 mb-6">
+          <Disclosure.Panel className="mb-6 pt-4 text-sm text-gray-500">
             {children}
           </Disclosure.Panel>
         </>

diff --git a/src/components/base/BasePageLayout.tsx b/src/components/base/BasePageLayout.tsx
@@ -0,0 +1,7 @@
+export const BasePageLayout = ({ children }: { children: React.ReactNode }) => (
+  <div className="mx-6 flex flex-grow flex-col items-center justify-center gap-8">
+    <div className="flex w-full flex-col gap-4 rounded-md bg-gray-100 p-4 shadow-md">
+      {children}
+    </div>
+  </div>
+);