Modified RSCDashboard, RSCDetail,RSCQuestion, and RSCResult to displa…

…y assesment data on dashboard. Added Authenticated route to app.tsx
cisagov · Apr 12, 2024 · f18b228 · f18b228
1 parent 69c924c
commit f18b228
Show file tree

Hide file tree

Showing 5 changed files with 109 additions and 61 deletions.
diff --git a/backend/src/api/app.ts b/backend/src/api/app.ts
@@ -454,6 +454,8 @@ authenticatedRoute.put(
 //Authenticated ReadySetCyber Routes
 authenticatedRoute.get('/assessments', handlerToExpress(assessments.list));
 
+authenticatedRoute.get('/assessments/:id', handlerToExpress(assessments.get));
+
 //************* */
 //  V2 Routes   //
 //************* */

diff --git a/frontend/src/components/ReadySetCyber/RSCDashboard.tsx b/frontend/src/components/ReadySetCyber/RSCDashboard.tsx
@@ -4,13 +4,21 @@ import Grid from '@mui/material/Grid';
 import Stack from '@mui/material/Stack';
 import Divider from '@mui/material/Divider';
 import { RSCSideNav } from './RSCSideNav';
-// import { RSCResult } from './RSCResult';
+import { RSCResult } from './RSCResult';
 import { useAuthContext } from 'context';
 
 export const RSCDashboard: React.FC = () => {
   const { user, apiGet } = useAuthContext();
 
-  const [results, setResults] = React.useState([]);
+  const [results, setResults] = React.useState<
+    {
+      id: string;
+      createdAt: string;
+      updatedAt: string;
+      rscID: string;
+      type: string;
+    }[]
+  >([]);
 
   const fetchResults = useCallback(async () => {
     try {
@@ -49,18 +57,18 @@ export const RSCDashboard: React.FC = () => {
                 platform, for free vulnerability scanning services to kickstart
                 or enhance your cybersecurity measures.
               </p>
-              {/* {results.map((result) => (
+              {results.map((result) => (
                 <Stack key={result.id} spacing={2}>
                   <RSCResult
                     id={result.id}
                     type={result.type}
-                    date={result.date}
-                    categories={result.categories}
-                    questions={result.questions}
+                    createdAt={result.createdAt}
+                    updatedAt={result.updatedAt}
+                    rscID={result.rscID}
                   />
                   <Divider />
                 </Stack>
-              ))} */}
+              ))}
             </Stack>
           </Box>
         </Grid>

diff --git a/frontend/src/components/ReadySetCyber/RSCDetail.tsx b/frontend/src/components/ReadySetCyber/RSCDetail.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import Box from '@mui/material/Box';
 import Grid from '@mui/material/Grid';
@@ -8,19 +8,54 @@ import Button from '@mui/material/Button';
 import { RSCSideNav } from './RSCSideNav';
 import { RSCResult } from './RSCResult';
 import { RSCQuestion } from './RSCQuestion';
-import { dummyResults } from './dummyData';
 import { Typography } from '@mui/material';
+import { useAuthContext } from 'context';
 
 export const RSCDetail: React.FC = () => {
+  const { apiGet } = useAuthContext();
   const { id } = useParams<{ id: string }>();
-  const result = dummyResults.find((result) => result.id === parseInt(id)) || {
-    id: 0,
-    type: '',
-    date: ''
-  };
-  const { questions } = dummyResults.find(
-    (result) => result.id === parseInt(id)
-  ) || { questions: [] };
+  const [details, setDetails] = React.useState<any>({});
+
+  const fetchResult = useCallback(async () => {
+    try {
+      const data = await apiGet(`/assessments/${id}`);
+      // console.log(data["Data Security"]);
+      // console.log(data["Data Security"][0]);
+      // console.log(data["Data Security"][0]["question"]);
+      // console.log(data["Data Security"][0]["question"].longForm);
+
+      setDetails(data);
+    } catch (e) {
+      console.error(e);
+    }
+  }, [apiGet, id]);
+
+  useEffect(() => {
+    fetchResult();
+  }, [fetchResult]);
+
+  const dataSecurity = details['Data Security'];
+
+  // console.log("Key 0: ", Object.keys(data)[0]);
+
+  // console.log("This is Security: ", dataSecurity[0]);
+  // console.log("Details: ", typeof details);
+  // for (const question in data) {
+  //   console.log(question);
+  // }
+
+  // Object.keys(data).forEach((key)=> {
+  //   console.log(key, dataSecurity[key]);
+  // }
+  // );
+
+  // Object.keys(details).forEach((key)=> {
+  //   console.log(key, details[key]);
+  //   // Object.keys(details[key]).forEach((key2)=> {
+  //   //   console.log(key2, details[key][key2]);
+  //   // });
+  // });
+
   return (
     <Box sx={{ flexGrow: 1, padding: 2 }}>
       <Grid container spacing={2}>
@@ -57,21 +92,29 @@ export const RSCDetail: React.FC = () => {
                 cybersecurity measures.
               </p>
               <Box>
-                <RSCResult
+                {/* <RSCResult
                   id={result.id}
                   type={result.type}
-                  date={result.date}
+                  createdAt={result.date}
                   categories={[]}
                   questions={[]}
-                />
+                /> */}
               </Box>
-              <br />
-              {questions.map((question) => (
-                <>
-                  <RSCQuestion key={question.id} question={question} />
+              {/* {console.log("Details: ", details)} */}
+              {/* {details.forEach((detail) => {
+                  <>
+                  <RSCQuestion key={detail.id} question={detail} />
                   <br />
                 </>
-              ))}
+                }); */}
+              <div>
+                {Object.entries(details).map(([detail]) => (
+                  // <div key={detail}>
+                  //   <strong>{detail}:</strong>
+                  // </div>
+                  <RSCQuestion key={detail} category={details} />
+                ))}
+              </div>
             </Stack>
           </Box>
         </Grid>

diff --git a/frontend/src/components/ReadySetCyber/RSCQuestion.tsx b/frontend/src/components/ReadySetCyber/RSCQuestion.tsx
@@ -5,38 +5,44 @@ import Stack from '@mui/material/Stack';
 import Button from '@mui/material/Button';
 
 interface Props {
-  question: {
-    id: number;
-    title: string;
-    answers: {
-      id: number;
-      name: string;
-      selected: boolean;
-    }[];
-    category: string;
+  category: {
+    question: {
+      id: string;
+      longForm: string;
+      number: string;
+    };
+    selection: string;
   };
 }
 
 export const RSCQuestion: React.FC<Props> = (props) => {
-  const question = props.question;
-  const answers = props.question.answers;
+  const question = props.category.question;
+  const category = props.category;
+  const answers = props.category.selection;
+
+  console.log(
+    'Question: ',
+    Object.entries(category).map(([key, value]) => ({
+      key,
+      value
+    }))
+  );
+
   return (
     <div>
       <Box
         sx={{ width: '100%', bgcolor: '#D3D3D3', padding: 2, borderRadius: 2 }}
       >
+        {/* <Typography variant="h6" gutterBottom component="div">
+          Question {question.number}
+        </Typography> */}
         <Typography variant="h6" gutterBottom component="div">
-          Question {question.id}
-        </Typography>
-        <Typography variant="h6" gutterBottom component="div">
-          {question.title}
+          {question.longForm}
         </Typography>
         <Stack direction="row" spacing={2} padding={2} paddingLeft={0}>
-          {answers.map((answer) => (
-            <Button key={answer.id} variant="contained" color="primary">
-              {answer.name}{' '}
-            </Button>
-          ))}
+          <Button key={answers} variant="contained" color="primary">
+            {answers}{' '}
+          </Button>
         </Stack>
         <Box
           sx={{

diff --git a/frontend/src/components/ReadySetCyber/RSCResult.tsx b/frontend/src/components/ReadySetCyber/RSCResult.tsx
@@ -6,26 +6,15 @@ import { Typography } from '@mui/material';
 import { useHistory } from 'react-router-dom';
 
 interface Props {
-  id: number;
+  id: string;
   type: string;
-  date: string;
-  categories: {
-    id: number;
-    name: string;
-  }[];
-  questions: {
-    id: number;
-    title: string;
-    answers: {
-      id: number;
-      name: string;
-      selected: boolean;
-    }[];
-  }[];
+  createdAt: string;
+  updatedAt: string;
+  rscID: string;
 }
 
 export const RSCResult: React.FC<Props> = (props) => {
-  const { id, type, date } = props;
+  const { id, type, createdAt: date } = props;
   const history = useHistory();
   const handleClick = () => {
     history.push(`/readysetcyber/result/${id}`);