Merge pull request #87 from jolynloh/FE/collabPage

Collab page session controls

Author: nicolelim02

frontend/src/components/CollabSessionControls/index.tsx

@@ -0,0 +1,67 @@
+import { Button, Stack } from "@mui/material";
+import Stopwatch from "../Stopwatch";
+import { useMatch } from "../../contexts/MatchContext";
+import { USE_MATCH_ERROR_MESSAGE } from "../../utils/constants";
+import { useEffect, useState } from "react";
+import {
+  extractHoursFromTime,
+  extractMinutesFromTime,
+  extractSecondsFromTime,
+} from "../../utils/sessionTime";
+
+const CollabSessionControls: React.FC = () => {
+  const [time, setTime] = useState<number>(0);
+
+  useEffect(() => {
+    let intervalId = setInterval(
+      () => setTime((prevTime) => prevTime + 1),
+      1000
+    );
+
+    return () => clearInterval(intervalId);
+  }, [time]);
+
+  const match = useMatch();
+  if (!match) {
+    throw new Error(USE_MATCH_ERROR_MESSAGE);
+  }
+  const { handleEndSessionClick } = match;
+
+  return (
+    <Stack direction={"row"} alignItems={"center"} spacing={2}>
+      <Stopwatch time={time} />
+      <Button
+        sx={{
+          border: 1.5,
+          borderRadius: 4,
+        }}
+        variant="outlined"
+        color="success"
+        onClick={() => {
+          console.log(
+            `Time taken: ${extractHoursFromTime(
+              time
+            )} hrs ${extractMinutesFromTime(
+              time
+            )} mins ${extractSecondsFromTime(time)} secs`
+          );
+        }} // TODO: implement submit function with time taken pop-up
+      >
+        Submit
+      </Button>
+      <Button
+        sx={{
+          border: 1.5,
+          borderRadius: 4,
+        }}
+        variant="outlined"
+        color="error"
+        onClick={() => handleEndSessionClick()}
+      >
+        End Session
+      </Button>
+    </Stack>
+  );
+};
+
+export default CollabSessionControls;

frontend/src/components/Navbar/index.tsx

@@ -23,6 +23,7 @@ import {
 } from "../../utils/constants";
 import { isMatchingPage, isCollabPage } from "../../utils/url";
 import { useMatch } from "../../contexts/MatchContext";
+import CollabSessionControls from "../CollabSessionControls";
 
 type NavbarItem = { label: string; link: string; needsLogin: boolean };
 
@@ -83,15 +84,9 @@ const Navbar: React.FC<NavbarProps> = (props) => {
             PeerPrep
           </Typography>
           {isCollabPage(path) ? (
-            <Stack direction={"row"} alignItems={"center"} spacing={2}>
-              <Button
-                variant="outlined"
-                color="error"
-                onClick={() => stopMatch()}
-              >
-                Stop matching
-              </Button>
-            </Stack>
+            <>
+              <CollabSessionControls />
+            </>
           ) : !isMatchingPage(path) ? (
             <Stack direction={"row"} alignItems={"center"} spacing={2}>
               {navbarItems

frontend/src/components/Stopwatch/index.tsx

@@ -0,0 +1,29 @@
+import {
+  extractHoursFromTime,
+  extractMinutesFromTime,
+  extractSecondsFromTime,
+} from "../../utils/sessionTime";
+
+interface StopwatchProps {
+  time: number;
+}
+
+const Stopwatch: React.FC<StopwatchProps> = (props) => {
+  const { time } = props;
+
+  const hours = extractHoursFromTime(time);
+  const minutes = extractMinutesFromTime(time);
+  const seconds = extractSecondsFromTime(time);
+
+  return (
+    <div>
+      <p style={{ color: "black", fontWeight: "bold" }}>
+        {hours.toString().padStart(2, "0")}:
+        {minutes.toString().padStart(2, "0")}:
+        {seconds.toString().padStart(2, "0")}
+      </p>
+    </div>
+  );
+};
+
+export default Stopwatch;

frontend/src/contexts/MatchContext.tsx

@@ -82,11 +82,15 @@ type MatchContextType = {
   matchOfferTimeout: () => void;
   verifyMatchStatus: () => void;
   getMatchId: () => string | null;
+  handleEndSessionClick: () => void;
+  handleRejectEndSession: () => void;
+  handleConfirmEndSession: () => void;
   matchUser: MatchUser | null;
   matchCriteria: MatchCriteria | null;
   partner: MatchUser | null;
   matchPending: boolean;
   loading: boolean;
+  isEndSessionModalOpen: boolean;
   questionId: string | null;
 };
 
@@ -114,6 +118,9 @@ const MatchProvider: React.FC<{ children?: React.ReactNode }> = (props) => {
   const [loading, setLoading] = useState<boolean>(true);
   const [questionId, setQuestionId] = useState<string | null>(null);
 
+  const [isEndSessionModalOpen, setIsEndSessionModalOpen] =
+    useState<boolean>(false);
+
   const navigator = useContext(UNSAFE_NavigationContext).navigator as History;
 
   useEffect(() => {
@@ -485,6 +492,19 @@ const MatchProvider: React.FC<{ children?: React.ReactNode }> = (props) => {
     return matchId;
   };
 
+  const handleEndSessionClick = () => {
+    setIsEndSessionModalOpen(true);
+  }
+
+  const handleRejectEndSession = () => {
+    setIsEndSessionModalOpen(false);
+  };
+
+  const handleConfirmEndSession = () => {
+    stopMatch();
+    setIsEndSessionModalOpen(false);
+  };
+
   return (
     <MatchContext.Provider
       value={{
@@ -497,11 +517,15 @@ const MatchProvider: React.FC<{ children?: React.ReactNode }> = (props) => {
         matchOfferTimeout,
         verifyMatchStatus,
         getMatchId,
+        handleEndSessionClick,
+        handleRejectEndSession,
+        handleConfirmEndSession,
         matchUser,
         matchCriteria,
         partner,
         matchPending,
         loading,
+        isEndSessionModalOpen,
         questionId,
       }}
     >

frontend/src/pages/CollabSandbox/index.tsx

@@ -1,5 +1,13 @@
 import AppMargin from "../../components/AppMargin";
-import { Box } from "@mui/material";
+import {
+  Box,
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+} from "@mui/material";
 import classes from "./index.module.css";
 import { useMatch } from "../../contexts/MatchContext";
 import { USE_MATCH_ERROR_MESSAGE } from "../../utils/constants";
@@ -17,7 +25,17 @@ const CollabSandbox: React.FC = () => {
   if (!match) {
     throw new Error(USE_MATCH_ERROR_MESSAGE);
   }
-  const { verifyMatchStatus, getMatchId, partner, loading, questionId } = match;
+
+  const {
+    verifyMatchStatus,
+    getMatchId,
+    handleRejectEndSession,
+    handleConfirmEndSession,
+    partner,
+    loading,
+    isEndSessionModalOpen,
+    questionId,
+  } = match;
   const [state, dispatch] = useReducer(reducer, initialState);
   const { selectedQuestion } = state;
 
@@ -53,10 +71,54 @@ const CollabSandbox: React.FC = () => {
     <AppMargin classname={`${classes.fullheight} ${classes.flex}`}>
       {/* <Stack spacing={2} alignItems={"center"}>
         <Typography variant="h1">Successfully matched!</Typography>
-        <Button variant="outlined" color="error" onClick={() => stopMatch()}>
-          End Session
-        </Button>
       </Stack> */}
+      <Dialog
+        sx={{
+          "& .MuiDialog-paper": {
+            padding: "20px",
+          },
+        }}
+        open={isEndSessionModalOpen}
+        onClose={handleRejectEndSession}
+      >
+        <DialogTitle sx={{ textAlign: "center", fontSize: 20 }}>
+          {"End Session?"}
+        </DialogTitle>
+        <DialogContent>
+          <DialogContentText sx={{ textAlign: "center", fontSize: 16 }}>
+            Are you sure you want to end session?
+            <br />
+            You will lose your current progress.
+          </DialogContentText>
+        </DialogContent>
+        <DialogActions
+          sx={{
+            justifyContent: "center",
+            paddingBottom: "20px",
+          }}
+        >
+          <Button
+            sx={{
+              width: "250px",
+            }}
+            variant="contained"
+            color="secondary"
+            onClick={handleRejectEndSession}
+          >
+            Back
+          </Button>
+          <Button
+            sx={{
+              width: "250px",
+            }}
+            variant="contained"
+            onClick={handleConfirmEndSession}
+          >
+            Confirm
+          </Button>
+        </DialogActions>
+      </Dialog>
+
       <Box sx={{ display: "flex", flex: 1 }}>
         <Box sx={(theme) => ({ flex: 1, marginRight: theme.spacing(2) })}>
           <QuestionDetailComponent

frontend/src/utils/sessionTime.ts

@@ -0,0 +1,6 @@
+export const extractHoursFromTime = (time: number) => Math.floor(time / 3600);
+
+export const extractMinutesFromTime = (time: number) =>
+  Math.floor((time % 3600) / 60); // after extracting hours
+
+export const extractSecondsFromTime = (time: number) => time % 60; // after extracting hours and minutes