main functionalities with imported data

Author: rosewang01

client/src/AdminDashboard/AdminDashboardPage.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Typography, Grid } from '@mui/material';
+import { Typography, Grid, AppBar } from '@mui/material';
 import ScreenGrid from '../components/ScreenGrid';
 // import UserTable from './QuestionTable';
 import QuestionTable from './QuestionTable';

client/src/App.tsx

@@ -58,12 +58,10 @@ function App() {
                     path="/reset-password/:token"
                     element={<ResetPasswordPage />}
                   />
-                  {/* <Route element={<AdminRoutesWrapper />}> */}
-                  {/* <Route path="/users" element={<AdminDashboardPage />} /> */}
-                  {/* </Route> */}
+                  <Route path="/home" element={<HomePage />} />
+                  <Route path="/question" element={<QuestionPage />} />
                 </Route>
                 {/* Routes accessed only if user is authenticated */}
-                {/* <Route element={<AdminRoutesWrapper />}> */}
                 <Route element={<ProtectedRoutesWrapper />}>
                   <Route
                     path="/admin-dashboard"
@@ -81,9 +79,7 @@ function App() {
                     />
                   }
                 />
-                <Route path="/home" element={<HomePage />} />
                 <Route path="/about" element={<AboutThisProjectPage />} />
-                <Route path="/question" element={<QuestionPage />} />
 
                 {/* Route which is accessed if no other route is matched */}
                 <Route path="*" element={<NotFoundPage />} />

client/src/Authentication/LoginPage.tsx

@@ -134,7 +134,7 @@ function LoginPage() {
         <FormCol>
           <Grid item container justifyContent="center">
             <Typography variant="h2" textAlign="center">
-              Log In
+              Administrator Log In
             </Typography>
           </Grid>
           <Grid item width="1">
@@ -177,11 +177,11 @@ function LoginPage() {
                 Forgot password?
               </Link>
             </Grid>
-            <Grid item>
+            {/* <Grid item>
               <Link component={RouterLink} to="/register">
                 Sign up
               </Link>
-            </Grid>
+            </Grid> */}
           </FormRow>
         </FormCol>
       </FormGrid>

client/src/Home/AboutThisProjectPage.tsx

@@ -21,14 +21,14 @@ function AboutThisProjectPage() {
         direction="row"
         justifyContent="space-between"
         alignItems="flex-start"
-        height="100%"
+        height="100vh"
         fit-content="100%"
       >
         <Grid item width="100%">
           <NavBar />
         </Grid>
 
-        <Grid item width="100%" padding={2} justifyContent="flex-start">
+        <Grid item width="100%" justifyContent="flex-start">
           <Typography variant="h3" fontWeight="bold" textAlign="center">
             Guide to Interpersonal Resources at Penn
           </Typography>
@@ -130,7 +130,15 @@ function AboutThisProjectPage() {
             </Box>
           </Grid>
         </Grid>
-        <Grid item width="100%" alignItems="flex-end" padding={0} spacing={0}>
+        <Grid
+          item
+          width="100%"
+          alignItems="flex-end"
+          padding={0}
+          spacing={0}
+          position="fixed"
+          bottom={0}
+        >
           <Footer />
         </Grid>
       </Grid>

client/src/Question/QuestionPage.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable no-underscore-dangle */
 import React, { useEffect, useState } from 'react';
-import { Box } from '@mui/material';
+import { Box, CircularProgress } from '@mui/material';
 import ScreenGrid from '../components/ScreenGrid';
 import QuestionComponent from './QuestionComponent';
 import ResourceComponent from './ResourceComponent';
@@ -10,7 +10,6 @@ import SidebarComponent from '../components/sidebar/SidebarComponent';
 import BackButton from './Components/BackButton';
 import NextButton from './Components/NextButton';
 import StartOverButton from './Components/StartOverButton';
-import PopupWarning from '../components/PopupWarning';
 
 /**
  * This page is the source of truth for all the state driven interactions of the question system.
@@ -21,18 +20,9 @@ import PopupWarning from '../components/PopupWarning';
  * It also stores an array of "allQuestions" which will be used to handle to "back" functionality
  */
 function QuestionPage() {
-  const initialQuestion = '637ea16cf9860ef25c72e639';
-  const [currentQuestion, setCurrentQuestion] = useState({
-    _id: 'Placeholder',
-    text: '',
-    isQuestion: true,
-    resultantAnswers: [],
-  } as IQuestion);
-
-  // const allQuestions: string[] = [initialQuestion];
+  const [currentQuestion, setCurrentQuestion] = useState({} as IQuestion);
   const [questionIndex, setQuestionIndex] = useState(0);
-  const [allQuestions, setAllQuestions] = useState<string[]>([initialQuestion]);
-  // const [allAnswers, setAllAnswers] = useState<string[]>([]);
+  const [allQuestions, setAllQuestions] = useState<string[]>([]);
 
   // Helper functions
   const appendQuestion = (value: string) => {
@@ -109,10 +99,11 @@ function QuestionPage() {
   };
 
   useEffect(() => {
-    if (initialQuestion != null) {
-      getNextFromID(initialQuestion);
+    if (allQuestions.length === 0) {
+      getNextFromID('1');
+      appendQuestion('1');
     }
-  }, [initialQuestion]);
+  }, [allQuestions]);
 
   let leftButton = <div />;
   if (questionIndex !== 0) {
@@ -132,6 +123,14 @@ function QuestionPage() {
     rightButton = <StartOverButton />;
   }
 
+  if (!currentQuestion.text) {
+    return (
+      <ScreenGrid>
+        <CircularProgress />
+      </ScreenGrid>
+    );
+  }
+
   if (currentQuestion.isQuestion) {
     return (
       <ScreenGrid>
@@ -163,7 +162,6 @@ function QuestionPage() {
       {rightButton}
     </ScreenGrid>
   );
-  // }
 }
 
 export default QuestionPage;

client/src/Question/ResourceComponent.tsx

@@ -38,11 +38,13 @@ function ResourceComponent(props: ResourceComponentProps) {
             </Typography>
           </Grid>
           {question.resultantAnswers.map((answer) => {
+            console.log(answer.resourceContent);
             return (
               <Grid item margin="auto" marginTop="1%">
                 <ResourceDropdown
                   title={answer.text}
                   content={answer.resourceContent}
+                  link={answer.resourceLink}
                 />
               </Grid>
             );

client/src/Question/ResourcePage.tsx

@@ -3,6 +3,8 @@ import { Box, Button, Stack } from '@mui/material';
 import ArrowForward from '@mui/icons-material/ArrowForward';
 
 export default function Footer() {
+  const params = window.location.pathname;
+  const isAbout = params === '/about';
   return (
     <div>
       <Stack
@@ -21,14 +23,13 @@ export default function Footer() {
           alt="Penn Logo"
           src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Shield_of_the_University_of_Pennsylvania.svg/1200px-Shield_of_the_University_of_Pennsylvania.svg.png"
         />
-
         <Button
           color="primary"
           size="medium"
           endIcon={<ArrowForward />}
-          href="/about"
+          href={isAbout ? '/question' : '/about'}
         >
-          About This Project
+          {isAbout ? 'Ask a Question' : 'About This Project'}
         </Button>
       </Stack>
     </div>

client/src/components/Footer.tsx

@@ -3,7 +3,6 @@ import { useState } from 'react';
 import Card from '@mui/material/Card';
 import CardHeader from '@mui/material/CardHeader';
 import CardContent from '@mui/material/CardContent';
-import Container from '@mui/material/Container';
 import IconButton from '@mui/material/IconButton';
 import Collapse from '@mui/material/Collapse';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
@@ -12,12 +11,13 @@ import { Button, Grid, Typography } from '@mui/material';
 
 interface ResourceDropdownProps {
   title: string;
-  content: string;
+  content: string | undefined;
+  link: string | undefined;
 }
 
 export default function ResourceDropdown(props: ResourceDropdownProps) {
   const [open, setOpen] = useState(false);
-  const { title, content } = props;
+  const { title, content, link } = props;
   return (
     <Card
       sx={{
@@ -45,12 +45,29 @@ export default function ResourceDropdown(props: ResourceDropdownProps) {
       <div style={{ backgroundColor: 'rgba(211,211,211,0.4)' }}>
         <Collapse in={open} timeout="auto" unmountOnExit>
           <CardContent>
-            <Typography>{content}</Typography>
-            <Grid container justifyContent="flex-end">
-              <Button variant="text" size="medium">
-                Learn More
-              </Button>
-            </Grid>
+            <Typography>{content || ''}</Typography>
+            {link ? (
+              <Grid container justifyContent="flex-end">
+                <Button
+                  variant="text"
+                  size="medium"
+                  onClick={() => {
+                    const newWindow = window.open(
+                      link,
+                      '_blank',
+                      'noopener,noreferrer',
+                    );
+                    if (newWindow) {
+                      newWindow.opener = null;
+                    }
+                  }}
+                >
+                  Learn More
+                </Button>
+              </Grid>
+            ) : (
+              <div />
+            )}
           </CardContent>
         </Collapse>
       </div>

client/src/components/ResourceDropdown.tsx

@@ -41,6 +41,9 @@ export default function SidebarContent(props: SidebarProps) {
     <div>
       <Toolbar />
       <List>
+        <ListItem>
+          <h1>Definitions</h1>
+        </ListItem>
         {definitions.map((definition) => (
           <ListItem>
             <SidebarContentItem