Finished save popup

cqb13 · Sep 12, 2023 · 43df831 · 43df831
1 parent aa7bbf6
commit 43df831
Show file tree

Hide file tree

Showing 4 changed files with 128 additions and 56 deletions.
diff --git a/app/page.tsx b/app/page.tsx
@@ -1,9 +1,8 @@
 "use client";
 
-import ErrorPopup from "@/components/general/errorPopup";
+import NotificationPopup from "@/components/general/notificationPopup";
 import ScoringChart from "@/components/scoring/scoringChart";
 import { useState } from "react";
-import DraggableElement from "@/components/wrappers/draggable";
 import SessionOptions from "@/components/scoring/sessionOptions";
 import ScoreSetupMenu from "@/components/scoring/scoreSetupMenu";
 import FinalScoringStats from "@/components/scoring/finalScoringStats";
@@ -12,7 +11,6 @@ import SaveScorePopup from "@/components/scoring/saveScorePopup";
 export default function Home() {
   const [setup, setSetup] = useState(true);
   const [finished, setFinished] = useState(false);
-  const [saving, setSaving] = useState(false);
   const [savingPopup, setSavingPopup] = useState(false);
 
   const [location, setLocation] = useState("");
@@ -25,12 +23,13 @@ export default function Home() {
 
   const [data, setData] = useState({} as any);
 
-  const [error, setError] = useState(false);
-  const [errorMessage, setErrorMessage] = useState("");
+  const [notification, setNotification] = useState(false);
+  const [notificationType, setNotificationType] = useState({} as "success" | "error");
+  const [notificationTitle, setNotificationTitle] = useState("");
+  const [notificationMessage, setNotificationMessage] = useState("");
 
   const updateSetup = (value: boolean) => setSetup(value);
   const updateFinished = (value: boolean) => setFinished(value);
-  const updateSaving = (value: boolean) => setSaving(value);
   const updateSavingPopup = (value: boolean) => setSavingPopup(value);
 
   const updateLocation = (value: string) => setLocation(value);
@@ -40,7 +39,7 @@ export default function Home() {
   const updateArrowsPerEnd = (value: number) => setArrowsPerEnd(value);
   const updateSplitEnds = (value: number) => setSplitEnds(value);
   const updateBow = (value: string) => setBow(value);
-  
+
   const updateData = (value: any) => setData(value);
 
   const defaultSetup = () => {
@@ -51,7 +50,7 @@ export default function Home() {
     setArrowsPerEnd(3);
     setSplitEnds(1);
     setBow("");
-  }
+  };
 
   const startScoring = () => {
     if (!checkIfReady()) return;
@@ -60,21 +59,24 @@ export default function Home() {
   };
 
   const checkIfReady = () => {
+    setNotificationType("error");
+    setNotificationTitle("Error");
+
     if (location === "") {
-      setError(true);
-      setErrorMessage("Please select a location");
+      setNotification(true);
+      setNotificationMessage("Please select a location");
       return false;
     }
 
     if (distanceUnit === "") {
-      setError(true);
-      setErrorMessage("Please select a distance unit");
+      setNotification(true);
+      setNotificationMessage("Please select a distance unit");
       return false;
     }
 
     if (bow === "") {
-      setError(true);
-      setErrorMessage("Please select a bow");
+      setNotification(true);
+      setNotificationMessage("Please select a bow");
       return false;
     }
 
@@ -85,7 +87,27 @@ export default function Home() {
     updateSavingPopup(true);
   };
 
-  const updateError = (value: boolean) => setError(value);
+  const continueSaving = ({
+    title,
+    date,
+    time,
+    note
+  }: {
+    title: string;
+    date: string;
+    time: string;
+    note: string;
+  }) => {
+    updateSavingPopup(false);
+    setNotification(true);
+    setNotificationType("success");
+    setNotificationTitle("Success");
+    setNotificationMessage("Score saved successfully!");
+
+    console.log(title, date, time, note);
+  };
+
+  const updateNotification = (value: boolean) => setNotification(value);
 
   return (
     <main className='flex items-center justify-center pt-4 text-black'>
@@ -111,9 +133,7 @@ export default function Home() {
               done={false}
               updateData={updateData}
             />
-            {finished ? (
-              <FinalScoringStats score={data}/>
-            ) : null}
+            {finished ? <FinalScoringStats score={data} /> : null}
             <SessionOptions
               done={finished}
               updateFinished={updateFinished}
@@ -125,14 +145,22 @@ export default function Home() {
         </section>
       )}
       {savingPopup ? (
-        <SaveScorePopup updateSavingPopup={updateSavingPopup}/>
+        <SaveScorePopup
+          updateSavingPopup={updateSavingPopup}
+          continueSaving={continueSaving}
+          updateNotification={updateNotification}
+          updateNotificationType={setNotificationType}
+          updateNotificationTitle={setNotificationTitle}
+          updateNotificationMessage={setNotificationMessage}
+        />
       ) : null}
-      {error ? (
-        <ErrorPopup
-          title='Error'
-          message={errorMessage}
+      {notification ? (
+        <NotificationPopup
+          title={notificationTitle}
+          type={notificationType}
+          message={notificationMessage}
           timeout={5000}
-          updateError={updateError}
+          updateNotification={updateNotification}
         />
       ) : null}
     </main>

diff --git a/components/general/errorPopup.tsx → components/general/notificationPopup.tsx b/components/general/errorPopup.tsx → components/general/notificationPopup.tsx
@@ -2,23 +2,25 @@ import { useState, useEffect } from "react";
 
 type Props = {
   title: string;
+  type: "success" | "error";
   message: string;
   timeout: number;
-  updateError: (value: boolean) => void;
+  updateNotification: (value: boolean) => void;
 };
 
-export default function ErrorPopup({
+export default function NotificationPopup({
   title,
+  type,
   message,
   timeout,
-  updateError
+  updateNotification
 }: Props) {
   const [opened, setOpened] = useState(false);
 
   useEffect(() => {
     const timer = setTimeout(() => {
       setOpened(false);
-      updateError(false);
+      updateNotification(false);
     }, timeout);
     return () => clearTimeout(timer);
   });
@@ -27,13 +29,13 @@ export default function ErrorPopup({
     <section
       className={`${opened
         ? ""
-        : "absolute bottom-2 left-2"} p-4 w-80 bg-red-500 rounded-md`}
+        : "absolute bottom-2 left-2"} p-4 w-80 ${type == "error" ? "bg-red-500" : "bg-green-500"} rounded-md`}
     >
       <div className="flex items-center justify-between">
         <h1 className="text-white">
           {title}
         </h1>
-        <button className="text-white" onClick={() => updateError(false)}>
+        <button className="text-white" onClick={() => updateNotification(false)}>
           <svg
             className="h-5 w-5"
             xmlns="http://www.w3.org/2000/svg"

diff --git a/components/scoring/saveScorePopup.tsx b/components/scoring/saveScorePopup.tsx
@@ -5,10 +5,30 @@ import { useState, useEffect } from "react";
 
 type SaveScorePopupProps = {
   updateSavingPopup: (value: boolean) => void;
+  continueSaving: ({
+    title,
+    date,
+    time,
+    note
+  }: {
+    title: string;
+    date: string;
+    time: string;
+    note: string;
+  }) => void;
+  updateNotification: (value: boolean) => void;
+  updateNotificationType: (value: string) => void;
+  updateNotificationTitle: (value: string) => void;
+  updateNotificationMessage: (value: string) => void;
 };
 
 export default function SaveScorePopup({
-  updateSavingPopup
+  updateSavingPopup,
+  continueSaving,
+  updateNotification,
+  updateNotificationType,
+  updateNotificationTitle,
+  updateNotificationMessage
 }: SaveScorePopupProps) {
   const [title, setTitle] = useState("");
   const [date, setDate] = useState("");
@@ -35,8 +55,16 @@ export default function SaveScorePopup({
     setNote(event.target.value);
   };
 
-  const handleDateChange = (event: React.ChangeEvent<HTMLDataElement>) => {
-    setDate(event.target.value);
+  const handleSave = () => {
+    if (title === "") {
+      updateNotification(true);
+      updateNotificationType("error");
+      updateNotificationTitle("Error");
+      updateNotificationMessage("Please add a title");
+      return;
+    }
+
+    continueSaving({ title, date, time, note });
   };
 
   return (
@@ -71,7 +99,7 @@ export default function SaveScorePopup({
           onChange={handleNoteChange}
         ></textarea>{" "}
         <div className='flex gap-2'>
-          <Button title='Save' onClick={() => updateSavingPopup(false)} />
+          <Button title='Save' onClick={handleSave} />
           <Button title='Cancel' onClick={() => updateSavingPopup(false)} />
         </div>
       </section>

diff --git a/components/scoring/scoringChart.tsx b/components/scoring/scoringChart.tsx
@@ -87,9 +87,7 @@ export default function ScoringChart(props: Props) {
 
     // set the focus the next arrow
     if (currentArrow < arrowsPerEnd) {
-      document
-        .getElementById(`${currentArrow + 1}-${currentEnd}`)
-        ?.focus();
+      document.getElementById(`${currentArrow + 1}-${currentEnd}`)?.focus();
       return;
     } else {
       // if the end is not the last end, set the focus to the first arrow of the next end
@@ -155,7 +153,7 @@ export default function ScoringChart(props: Props) {
               <th key={columnIndex}>Arrow {columnIndex + 1}</th>
             )
           )}
-          <div className="flex items-center justify-between gap-2">
+          <div className='flex items-center justify-between gap-2'>
             <th>Total</th>
             <th>Running Total</th>
           </div>
@@ -171,28 +169,44 @@ export default function ScoringChart(props: Props) {
                   <input
                     type='text'
                     id={`${columnIndex + 1}-${rowIndex + 1}`}
-                    pattern="[0-9mxMX]*"
-                    className="bg-lightest border border-gray-300 rounded-sm outline-none focus:border-highlight px-2"
+                    pattern='[0-9mxMX]*'
+                    className='bg-lightest border border-gray-300 rounded-sm outline-none focus:border-highlight px-2'
                     value={column}
-                    onChange={event => handleChange(event, rowIndex, columnIndex)}
+                    onChange={(event) =>
+                      handleChange(event, rowIndex, columnIndex)
+                    }
                   />
                 </td>
               ))}
-              <div className="flex gap-2 items-center justify-between">
-              <td className="text-center w-full">{
-                  data[currentSplit][rowIndex].some((value: string) => value === '') ? '0' :
-                  data[currentSplit][rowIndex].reduce((a: string, b: string) => {
-                    return addScores(a, b)
-                  }, 0)
-                  }</td>
-                <td className="text-center w-full">{
-                  data[currentSplit][rowIndex].some((value: string) => value === '') ? '0' :
-                  data[currentSplit].slice(0, rowIndex + 1).reduce((a: any, b: any) => {
-                    return a + b.reduce((c: any, d: any) => {
-                      return addScores(c, d);
-                    }, 0);
-                  }, 0)
-                }</td>
+              <div className='flex gap-2 items-center justify-between'>
+                <td className='text-center w-full'>
+                  {data[currentSplit][rowIndex].some(
+                    (value: string) => value === ""
+                  )
+                    ? "0"
+                    : data[currentSplit][rowIndex].reduce(
+                        (a: string, b: string) => {
+                          return addScores(a, b);
+                        },
+                        0
+                      )}
+                </td>
+                <td className='text-center w-full'>
+                  {data[currentSplit][rowIndex].some(
+                    (value: string) => value === ""
+                  )
+                    ? "0"
+                    : data[currentSplit]
+                        .slice(0, rowIndex + 1)
+                        .reduce((a: any, b: any) => {
+                          return (
+                            a +
+                            b.reduce((c: any, d: any) => {
+                              return addScores(c, d);
+                            }, 0)
+                          );
+                        }, 0)}
+                </td>
               </div>
             </tr>
           ))}