Final time choice

components/MarkChoices.tsx

@@ -4,26 +4,26 @@ import { MarkedProps } from "../models/poll";
 
 const MarkChoices = (props: {
   sortedChoices: number[];
-  newUserMarked: MarkedProps;
-  setNewUserMarked: Dispatch<MarkedProps>;
+  newMarked: MarkedProps;
+  setNewMarked: Dispatch<MarkedProps>;
 }): JSX.Element => {
-  const { sortedChoices, newUserMarked, setNewUserMarked } = props;
+  const { sortedChoices, newMarked, setNewMarked } = props;
 
   const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
     const { value } = e.target;
-    setNewUserMarked({ ...newUserMarked, userID: value });
+    setNewMarked({ ...newMarked, userID: value });
   };
 
   const handleChoiceChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
     const { value, checked } = e.target;
     if (checked) {
-      const newChoices = newUserMarked.choices;
+      const newChoices = newMarked.choices;
       newChoices.push(parseInt(value, 10));
-      setNewUserMarked({ ...newUserMarked, choices: newChoices });
+      setNewMarked({ ...newMarked, choices: newChoices });
     } else {
-      const newChoices = newUserMarked.choices;
+      const newChoices = newMarked.choices;
       newChoices.splice(newChoices.indexOf(parseInt(value, 10)), 1); // remove the unchecked element from array
-      setNewUserMarked({ ...newUserMarked, choices: newChoices });
+      setNewMarked({ ...newMarked, choices: newChoices });
     }
   };
 

components/SubmitChoices.tsx

@@ -1,18 +1,18 @@
 import { Button } from "react-bootstrap";
 import { MarkedProps } from "../models/poll";
 
-const SubmitChoices = (props: { newUserMarked: MarkedProps }): JSX.Element => {
-  const { newUserMarked } = props;
+const SubmitChoices = (props: { newMarked: MarkedProps }): JSX.Element => {
+  const { newMarked } = props;
 
   const handleSubmit = (): void => {
-    // PUT newUserMarked at v1/poll/{pollID}
+    // PUT newMarked at v1/poll/:pollID
   };
 
   return (
     <Button
       variant="primary"
       type="submit"
-      disabled={!newUserMarked.userID || newUserMarked.choices.length === 0}
+      disabled={!newMarked.userID || newMarked.choices.length === 0}
       onClick={handleSubmit}
     >
       Mark your choice

components/SubmitFinalChoice.tsx

@@ -6,7 +6,11 @@ const SubmitFinalChoice = (props: {
   const { finalChoice } = props;
 
   const handleSubmit = (): void => {
-    // PUT finalChoice at v1/user/poll/{pollID}
+    const markFinalChoice = {
+      finalChoice,
+      open: false,
+    };
+    // PUT markFinalChoice at v1/user/poll/:pollid
   };
 
   return (

pages/poll/haha.tsx

@@ -56,7 +56,7 @@ const Poll = (): JSX.Element => {
 
   const sortedChoices = pollFromDB.choices.sort((a, b) => a - b);
 
-  const [newUserMarked, setNewUserMarked] = useState<MarkedProps>({
+  const [newMarked, setNewMarked] = useState<MarkedProps>({
     userID: "",
     choices: [],
   });
@@ -77,7 +77,17 @@ const Poll = (): JSX.Element => {
                     participants
                   </th>
                   {sortedChoices.map((idx) => (
-                    <th key={idx}>{dayjs(idx).format("llll")}</th>
+                    <th
+                      key={idx}
+                      className={
+                        idx === pollFromDB.finalChoice
+                          ? "slot-final-chosen-cell"
+                          : ""
+                      }
+                    >
+                      {dayjs(idx).format("llll")} -{" "}
+                      {dayjs(idx + pollFromDB.interval).format("LT")}
+                    </th>
                   ))}
                 </tr>
               </thead>
@@ -103,8 +113,8 @@ const Poll = (): JSX.Element => {
                   currentLoggedInUserID !== pollFromDB.userID && (
                     <MarkChoices
                       sortedChoices={sortedChoices}
-                      newUserMarked={newUserMarked}
-                      setNewUserMarked={setNewUserMarked}
+                      newMarked={newMarked}
+                      setNewMarked={setNewMarked}
                     />
                   )}
                 {pollFromDB.open &&
@@ -117,7 +127,7 @@ const Poll = (): JSX.Element => {
               </tbody>
             </Table>
             {pollFromDB.open && currentLoggedInUserID !== pollFromDB.userID && (
-              <SubmitChoices newUserMarked={newUserMarked} />
+              <SubmitChoices newMarked={newMarked} />
             )}
             {pollFromDB.open && currentLoggedInUserID === pollFromDB.userID && (
               <SubmitFinalChoice finalChoice={finalChoice} />

styles/index.css

@@ -91,4 +91,8 @@ h3 {
 .slot-checkbox input[type="radio"] {
   width: 1.8em;
   height: 1.8em;
+}
+
+.slot-final-chosen-cell {
+  background-color: #FFBB12;
 }