History session stats

cqb13 · Sep 15, 2023 · bca777b · bca777b
1 parent 63916af
commit bca777b
Show file tree

Hide file tree

Showing 4 changed files with 3,788 additions and 238 deletions.
diff --git a/app/history/page.tsx b/app/history/page.tsx
@@ -4,9 +4,13 @@ import { useEffect, useState } from "react";
 import getAllSessions from "@/utils/score/getAllSessions";
 import { doc, getDoc } from "firebase/firestore";
 import { auth, db } from "@lib/firebase";
+import Dropdown from "@/components/general/dropdown";
+import Button from "@/components/general/button";
 
 export default function History() {
   const [currentGame, setCurrentGame] = useState(1);
+  const [currentGameName, setCurrentGameName] = useState("");
+  const [gameNameList, setGameNameList] = useState([] as string[]);
   const [dateMap, setDateMap] = useState(new Map());
 
   // session info
@@ -24,6 +28,11 @@ export default function History() {
     getAllSessions(auth.currentUser).then(({ sortedMap, dateMap }) => {
       setDateMap(dateMap);
       setCurrentGame(dateMap.size);
+      setCurrentGameName(sortedMap.keys().next().value);
+
+      let listOfGames = Array.from(sortedMap.keys());
+      setGameNameList(listOfGames);
+
       getScoreDoc(sortedMap.values().next().value);
     });
   }, []);
@@ -72,8 +81,27 @@ export default function History() {
   };
 
   return (
-    <main className='flex min-h-screen flex-col items-center justify-between p-24'>
-      <h1>Some Stuff</h1>
+    <main className='flex flex-col gap-2 items-center justify-center pt-4 text-black'>
+      <section className='flex gap-2 w-full items-center justify-center'>
+        <Dropdown
+          title={currentGameName}
+          items={gameNameList}
+          customClass=' w-full'
+          setSelected={() => {}}
+        />
+        <div className='flex items-center justify-center gap-2'>
+          <Button title='Back' onClick={switchGame} />
+          <h2 className='whitespace-nowrap'>{`Game ${currentGame}/${gameNameList.length}`}</h2>
+          <Button title='Next' onClick={switchGame} />
+        </div>
+      </section>
+      <section className='flex gap-2'>
+        <h2 className="whitespace-nowrap">
+          {`${location} ${distance} ${distanceUnit} ${bow}`}
+        </h2>
+        <Button title='Note' onClick={() => {}} />
+        <Button title='Delete' onClick={() => {}} />
+      </section>
     </main>
   );
 }
diff --git a/components/general/dropdown.tsx b/components/general/dropdown.tsx
@@ -5,18 +5,28 @@ import { useState } from "react";
 type Props = {
   title: string;
   items: string[];
+  customClass?: string; // meant for width changes only
   setSelected: (value: string) => void;
 };
 
-export default function Dropdown({ title, items, setSelected }: Props) {
+export default function Dropdown({
+  title,
+  items,
+  customClass,
+  setSelected
+}: Props) {
   const [opened, setOpened] = useState(false);
   const [selectedItem, setSelectedItem] = useState("");
 
   const toggle = () => setOpened(!opened);
 
   return (
     <section>
-      <div className='relative inline-block w-60 text-left '>
+      <div
+        className={`relative inline-block w-60 text-left ${
+          customClass ? customClass : ""
+        }`}
+      >
         <div>
           <button
             type='button'
@@ -38,7 +48,7 @@ export default function Dropdown({ title, items, setSelected }: Props) {
         <div
           className={`${
             opened ? " absolute" : "hidden"
-          } mt-2 w-56 rounded-md shadow-lg bg-lightest ring-1 ring-black ring-opacity-5 z-10`}
+          } mt-2 w-60 rounded-md shadow-lg bg-lightest ring-1 ring-black ring-opacity-5 z-10 ${customClass ? customClass : ""}`}
         >
           <div
             className='py-1'