Prepopulate Questionnare

src/types.ts

@@ -111,6 +111,14 @@ export type QuestionOption = {
   score: number
 }
 
+export type QuestionScores = {
+  scoreid: number
+  fismasystemid: number
+  datecalculated: number
+  notes: string
+  functionoptionid: number
+  datacallid: number
+}
 export type SystemDetailsModalProps = {
   open: boolean
   onClose: () => void

src/views/QuestionnareModal/QuestionnareModal.tsx

@@ -16,7 +16,12 @@ import { styled } from '@mui/system'
 import TextField from '@mui/material/TextField'
 import NavigateNextIcon from '@mui/icons-material/NavigateNext'
 import NavigateBeforeIcon from '@mui/icons-material/NavigateBefore'
-import { FismaQuestion, QuestionOption, SystemDetailsModalProps } from '@/types'
+import {
+  FismaQuestion,
+  QuestionOption,
+  SystemDetailsModalProps,
+  QuestionScores,
+} from '@/types'
 import axiosInstance from '@/axiosConfig'
 import CircularProgress from '@mui/material/CircularProgress'
 
@@ -49,7 +54,9 @@ type Category = {
   name: string
   steps: FismaQuestion[]
 }
-
+type questionScoreMap = {
+  [key: number]: QuestionScores
+}
 export default function QuestionnareModal({
   open,
   onClose,
@@ -62,6 +69,9 @@ export default function QuestionnareModal({
   const [categories, setCategories] = React.useState<Category[]>([])
   const [options, setOptions] = React.useState<QuestionOption[]>([])
   const [loadingQuestion, setLoadingQuestion] = React.useState<boolean>(true)
+  const [questionScores, setQuestionScores] = React.useState<questionScoreMap>(
+    {}
+  )
   const [notes, setNotes] = React.useState<string>('')
   const activeCategory = categories[activeCategoryIndex]
   const activeStep = activeCategory?.steps[activeStepIndex]
@@ -148,30 +158,46 @@ export default function QuestionnareModal({
 
           setCategories(categoriesData)
           if (data.length > 0) {
-            // console.log(categoriesData)
             setQuestionId(categoriesData[0]['steps'][0].function.functionid)
           }
         })
         .catch((error) => {
           console.error('Error fetching data:', error)
         })
+      axiosInstance
+        .get(`scores?datacallid=2&fismasystemid=${system.fismasystemid}`)
+        .then((res) => {
+          const hashTable: questionScoreMap = Object.assign(
+            {},
+            ...res.data.map((item: QuestionScores) => ({
+              [item.functionoptionid]: item,
+            }))
+          )
+          setQuestionScores(hashTable)
+        })
+        .catch((error) => {
+          console.error('Error fetching question scores:', error)
+        })
     }
   }, [open, system])
 
   React.useEffect(() => {
     if (questionId) {
       try {
         axiosInstance.get(`functions/${questionId}/options`).then((res) => {
-          // console.log(res.data)
           setOptions(res.data)
+          res.data.forEach((item: QuestionOption) => {
+            if (item.functionoptionid in questionScores) {
+              setNotes(questionScores[item.functionoptionid].notes)
+            }
+          })
           setLoadingQuestion(false)
         })
       } catch (error) {
         console.error('Error fetching data:', error)
       }
-      // setQuestionId(firstQuestionnaireId)
     }
-  }, [questionId])
+  }, [questionId, questionScores])
   const renderRadioGroup = (options: QuestionOption[]) => {
     return (
       <FormControl component="fieldset">
@@ -183,6 +209,7 @@ export default function QuestionnareModal({
               control={<Radio />}
               label={option.description}
               sx={{ m: 0 }}
+              checked={questionScores[option.functionoptionid] !== undefined}
             />
           ))}
         </RadioGroup>
@@ -292,7 +319,7 @@ export default function QuestionnareModal({
                 >
                   {renderRadioGroup(options)}
                 </Box>
-                <Typography variant="body1">
+                <Typography variant="body1" sx={{ mb: 2 }}>
                   {activeStep?.notesprompt || ''}
                 </Typography>
                 <CssTextField

src/views/Title/Title.tsx

@@ -1,12 +1,12 @@
 import Typography from '@mui/material/Typography'
 import { Container } from '@mui/material'
-import { Outlet, useLoaderData, Navigate } from 'react-router-dom'
+import { Outlet, useLoaderData } from 'react-router-dom'
 import { UsaBanner } from '@cmsgov/design-system'
 import logo from '../../assets/icons/logo.svg'
 import AccountCircleIcon from '@mui/icons-material/AccountCircle'
 import 'core-js/stable/atob'
 import { userData } from '@/types'
-import { useEffect, useState, useRef } from 'react'
+import { useEffect, useRef } from 'react'
 /**
  * Component that renders the contents of the Dashboard view.
  * @returns {JSX.Element} Component that renders the dashboard contents.