Merge pull request #30 from hack4impact-upenn/question-page

Question page

client/src/App.tsx

@@ -3,9 +3,8 @@ import { ThemeProvider } from '@mui/material/styles';
 import { CssBaseline } from '@mui/material';
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import { Provider } from 'react-redux';
-import { PersistGate } from 'redux-persist/integration/react';
 import theme from './assets/theme';
-import { store, persistor } from './util/redux/store';
+import { store } from './util/redux/store';
 import NotFoundPage from './NotFound/NotFoundPage';
 import HomePage from './Home/HomePage';
 import AboutThisProjectPage from './Home/AboutThisProjectPage';
@@ -21,6 +20,7 @@ import RegisterPage from './Authentication/RegisterPage';
 import LoginPage from './Authentication/LoginPage';
 import EmailResetPasswordPage from './Authentication/EmailResetPasswordPage';
 import ResetPasswordPage from './Authentication/ResetPasswordPage';
+import QuestionPage from './Question/QuestionPage';
 
 function App() {
   /* const testa = {
@@ -39,68 +39,57 @@ function App() {
     <div className="App">
       <BrowserRouter>
         <Provider store={store}>
-          <PersistGate loading={null} persistor={persistor}>
-            <ThemeProvider theme={theme}>
-              <CssBaseline>
-                <Routes>
-                  {/* Routes accessed only if user is not authenticated */}
-                  <Route element={<UnauthenticatedRoutesWrapper />}>
-                    <Route path="/login" element={<LoginPage />} />
-                    <Route path="/register" element={<RegisterPage />} />
-                    <Route
-                      path="/verify-account/:token"
-                      element={<VerifyAccountPage />}
-                    />
-                    <Route
-                      path="/email-reset"
-                      element={<EmailResetPasswordPage />}
-                    />
-                    <Route
-                      path="/reset-password/:token"
-                      element={<ResetPasswordPage />}
-                    />
-                    {/* <Route element={<AdminRoutesWrapper />}> */}
-                    {/* <Route path="/users" element={<AdminDashboardPage />} /> */}
-                    {/* </Route> */}
-                  </Route>
-                  {/* Routes accessed only if user is authenticated */}
+          <ThemeProvider theme={theme}>
+            <CssBaseline>
+              <Routes>
+                {/* Routes accessed only if user is not authenticated */}
+                <Route element={<UnauthenticatedRoutesWrapper />}>
+                  <Route path="/login" element={<LoginPage />} />
+                  <Route path="/register" element={<RegisterPage />} />
+                  <Route
+                    path="/verify-account/:token"
+                    element={<VerifyAccountPage />}
+                  />
+                  <Route
+                    path="/email-reset"
+                    element={<EmailResetPasswordPage />}
+                  />
+                  <Route
+                    path="/reset-password/:token"
+                    element={<ResetPasswordPage />}
+                  />
                   {/* <Route element={<AdminRoutesWrapper />}> */}
-                  <Route element={<ProtectedRoutesWrapper />}>
-                    <Route path="/users" element={<AdminDashboardPage />} />
-                  </Route>
-
-                  {/* Route which redirects to a different page depending on if the user is an authenticated or not by utilizing the DynamicRedirect component */}
+                  {/* <Route path="/users" element={<AdminDashboardPage />} /> */}
+                  {/* </Route> */}
+                </Route>
+                {/* Routes accessed only if user is authenticated */}
+                {/* <Route element={<AdminRoutesWrapper />}> */}
+                <Route element={<ProtectedRoutesWrapper />}>
                   <Route
-                    path="/"
-                    element={
-                      <DynamicRedirect unAuthPath="/login" authPath="/home" />
-                    }
+                    path="/admin-dashboard"
+                    element={<AdminDashboardPage />}
                   />
+                </Route>
 
-                  {/* Route which is accessed if no other route is matched */}
-                  <Route path="*" element={<NotFoundPage />} />
-
-                  <Route path="/home" element={<HomePage />} />
-                  <Route path="/about-us" element={<AboutThisProjectPage />} />
-
+                {/* Route which redirects to a different page depending on if the user is an authenticated or not by utilizing the DynamicRedirect component */}
+                <Route
+                  path="/"
+                  element={
+                    <DynamicRedirect
+                      unAuthPath="/home"
+                      authPath="/admin-dashboard"
+                    />
+                  }
+                />
+                <Route path="/home" element={<HomePage />} />
+                <Route path="/about" element={<AboutThisProjectPage />} />
+                <Route path="/question" element={<QuestionPage />} />
 
-                  {/* <Route
-                    path="/dropdown"
-                    element={
-                      <Box padding={2}>
-                        <ResourceDropdown
-                          title="Example Resource"
-                          content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed gravida ex. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris ut erat pulvinar, dignissim est et, eleifend quam. Aenean euismod ultricies accumsan. Sed vel nulla posuere, vestibulum sem eget, porttitor dolor. Integer et erat in mi tincidunt sollicitudin."
-                        />
-                      </Box>
-                    }
-                  /> */}
-                  {/* <Route path="popupwarning" element={<PopupWarning />} /> */}
-                  {/* <Route path="/sidebar" element={<SidebarComponent />} /> */}
-                </Routes>
-              </CssBaseline>
-            </ThemeProvider>
-          </PersistGate>
+                {/* Route which is accessed if no other route is matched */}
+                <Route path="*" element={<NotFoundPage />} />
+              </Routes>
+            </CssBaseline>
+          </ThemeProvider>
         </Provider>
       </BrowserRouter>
     </div>

client/src/Home/HomePage.tsx

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import Button from '@mui/material/Button';
 import { Typography, Grid } from '@mui/material';
 import Box from '@mui/system/Box';
+import { useNavigate } from 'react-router-dom';
 import ScreenGrid from '../components/ScreenGrid';
 import Footer from '../components/Footer';
 import NavBar from '../components/NavBar';
@@ -42,7 +43,7 @@ function HomePage() {
             </Grid>
 
             <Grid container direction="column" alignItems="center" padding={8}>
-              <Button variant="contained" size="large">
+              <Button variant="contained" size="large" href="/question">
                 Begin
               </Button>
               <Box padding={2}>

client/src/Question/AnswerButton.tsx → client/src/Question/Components/AnswerButton.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable no-underscore-dangle */
 import * as React from 'react';
 import { Button } from '@mui/material';
-import { IAnswer } from '../util/types/answer';
+import { IAnswer } from '../../util/types/answer';
 
 interface AnswerButtonProps {
   answer: IAnswer;

client/src/Question/Components/BackButton.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { Button } from '@mui/material';
+
+interface BackButtonProps {
+  onClick: any;
+}
+
+function BackButton(props: BackButtonProps) {
+  const { onClick } = props;
+
+  const [isHover, setIsHover] = React.useState(false);
+
+  const handleMouseEnter = () => {
+    setIsHover(true);
+  };
+
+  const handleMouseLeave = () => {
+    setIsHover(false);
+  };
+
+  return (
+    <Button
+      id="qback"
+      onClick={onClick}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      sx={{
+        width: '96px',
+        height: '39px',
+        textTransform: 'none',
+        backgroundColor: '#EEEEEE',
+        color: 'rgba(0, 0, 0, 0.87)',
+        padding: '6px 16px 6px 12px',
+        gap: '8px',
+        position: 'fixed',
+        left: '4.72%',
+        right: '88.61%',
+        top: '75.45%',
+        bottom: '10.74%',
+        fontFamily: 'Roboto',
+        fontStyle: 'normal',
+        fontWeight: '500',
+        fontSize: '14px',
+        lineHeight: '14px',
+      }}
+    >
+      BACK
+    </Button>
+  );
+}
+
+export default BackButton;

client/src/Question/Components/ConfirmationModal.tsx

@@ -0,0 +1,91 @@
+import React from 'react';
+import Button from '@mui/material/Button';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogContentText from '@mui/material/DialogContentText';
+import DialogTitle from '@mui/material/DialogTitle';
+
+interface IConfirmModal {
+  buttonText: string;
+  title: string;
+  body: string;
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  onConfirm: Function;
+}
+/**
+ * A modal component that displays a confirmation message and a button to confirm the action or cancel the action.
+ * @param buttonText - the text to display on the confirmation button
+ * @param title - the title of the modal
+ * @param body - the body of the modal
+ * @param onConfirm - the function to call when the confirmation button is clicked
+ */
+export default function ConfirmModal({
+  buttonText,
+  title,
+  body,
+  onConfirm,
+}: IConfirmModal) {
+  const [open, setOpen] = React.useState(false);
+
+  const handleClickOpen = () => {
+    setOpen(true);
+  };
+
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  const handleConfirm = () => {
+    onConfirm();
+    handleClose();
+  };
+
+  return (
+    <div>
+      <Button
+        onClick={handleClickOpen}
+        sx={{
+          width: '96px',
+          height: '39px',
+          textTransform: 'none',
+          backgroundColor: '#EEEEEE',
+          color: 'rgba(0, 0, 0, 0.87)',
+          padding: '6px 16px 6px 12px',
+          gap: '8px',
+          position: 'absolute',
+          left: '88.61%',
+          right: '4.72%',
+          top: '80.45%',
+          bottom: '15.74%',
+          fontFamily: 'Roboto',
+          fontStyle: 'normal',
+          fontWeight: '500',
+          fontSize: '14px',
+          lineHeight: '14px',
+        }}
+      >
+        {buttonText}
+      </Button>
+      <Dialog
+        open={open}
+        onClose={handleClose}
+        aria-labelledby="alert-dialog-title"
+        aria-describedby="alert-dialog-description"
+      >
+        <DialogTitle id="alert-dialog-title">{title}</DialogTitle>
+        <DialogContent>
+          <DialogContentText id="alert-dialog-description">
+            {body}
+          </DialogContentText>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={handleClose}>Cancel</Button>
+          <Button onClick={handleConfirm} autoFocus>
+            Confirm
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </div>
+  );
+}

client/src/Question/Components/NextButton.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { Button } from '@mui/material';
+
+interface NextButtonProps {
+  onClick: any;
+}
+
+function NextButton(props: NextButtonProps) {
+  const { onClick } = props;
+
+  const [isHover, setIsHover] = React.useState(false);
+
+  const handleMouseEnter = () => {
+    setIsHover(true);
+  };
+
+  const handleMouseLeave = () => {
+    setIsHover(false);
+  };
+
+  return (
+    <Button
+      id="next"
+      onClick={(e) => onClick(e)}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      sx={{
+        width: '96px',
+        height: '39px',
+        textTransform: 'none',
+        backgroundColor: '#EEEEEE',
+        color: 'rgba(0, 0, 0, 0.87)',
+        padding: '6px 16px 6px 12px',
+        gap: '8px',
+        position: 'fixed',
+        left: '66.61%',
+        right: '26.72%',
+        top: '75.45%',
+        bottom: '10.74%',
+        fontFamily: 'Roboto',
+        fontStyle: 'normal',
+        fontWeight: '500',
+        fontSize: '14px',
+        lineHeight: '14px',
+      }}
+    >
+      NEXT
+    </Button>
+  );
+}
+
+export default NextButton;