fix: order of questionnare pillars with api updates

src/types.ts

@@ -99,7 +99,7 @@ export type FismaQuestion = {
   questionid: number
   question: string
   notesprompt: string
-  pillar: string
+  pillar: questionPillar
   function: FismaFunction
 }
 
@@ -111,6 +111,12 @@ export type QuestionOption = {
   score: number
 }
 
+export type questionPillar = {
+  pillar: string
+  pillarid: number
+  order: number
+}
+
 export type QuestionScores = {
   scoreid: number
   fismasystemid: number

src/views/FismaTable/FismaTable.tsx

@@ -5,6 +5,7 @@ import { useState } from 'react'
 
 import Link from '@mui/material/Link'
 import QuestionnareModal from '../QuestionnareModal/QuestionnareModal'
+import { first } from 'lodash'
 type FismaTable2Props = {
   fismaSystems: FismaSystemType[]
   scores: Record<number, number>
@@ -42,9 +43,9 @@ export default function FismaTable({ fismaSystems, scores }: FismaTable2Props) {
       renderCell: (params) => {
         const name = params.row.issoemail.split('@')
         const fullName = name[0].replace(/[0-9]/g, '').split('.')
-        return fullName.length > 1
-          ? `${fullName[0]} ${fullName[1]}`
-          : fullName[0]
+        const firstName = fullName[0][0].toUpperCase() + fullName[0].slice(1)
+        const lastName = fullName[1][0].toUpperCase() + fullName[1].slice(1)
+        return fullName.length > 1 ? `${firstName} ${lastName}` : fullName[0]
       },
     },
     {

src/views/QuestionnareModal/QuestionnareModal.tsx

@@ -111,17 +111,15 @@ export default function QuestionnareModal({
           datacallid: 2,
         })
         .then((res) => {
-          if (res.status != 200) {
-            console.error('Error updating score')
+          if (res.status != 204) {
+            return console.error('Error updating score')
           }
+          fetchQuestionScores(Number(system?.fismasystemid), setQuestionScores)
+          setLoadingQuestion(false)
         })
         .catch((error) => {
           console.error('Error updating score:', error)
         })
-        .finally(() => {
-          fetchQuestionScores(Number(system?.fismasystemid), setQuestionScores)
-          setLoadingQuestion(false)
-        })
     } else {
       axiosInstance
         .post(`scores`, {
@@ -132,14 +130,12 @@ export default function QuestionnareModal({
         })
         .then(() => {
           console.log('Created score')
+          fetchQuestionScores(Number(system?.fismasystemid), setQuestionScores)
+          setLoadingQuestion(false)
         })
         .catch((error) => {
           console.error('Error creating score:', error)
         })
-        .finally(() => {
-          fetchQuestionScores(Number(system?.fismasystemid), setQuestionScores)
-          setLoadingQuestion(false)
-        })
     }
     let nextCategoryIndex = activeCategoryIndex
     let nextStepIndex = activeStepIndex + 1
@@ -164,7 +160,6 @@ export default function QuestionnareModal({
   const handleQuestionnareBack = () => {
     let prevCategoryIndex = activeCategoryIndex
     let prevStepIndex = activeStepIndex - 1
-
     if (prevStepIndex < 0) {
       prevCategoryIndex -= 1
       if (prevCategoryIndex >= 0) {
@@ -202,27 +197,31 @@ export default function QuestionnareModal({
     setNotes('')
     onClose()
   }
+  const handleQuestionChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setSelectQuestionOption(Number(event.target.value))
+  }
   React.useEffect(() => {
     if (open && system) {
       axiosInstance
         .get(`/fismasystems/${system.fismasystemid}/questions`)
         .then((response) => {
           const data = response.data.data
           const organizedData: Record<string, FismaQuestion[]> = {}
+          const pillarOrder: Record<string, number> = {}
           data.forEach((question: FismaQuestion) => {
-            if (!organizedData[question.pillar]) {
-              organizedData[question.pillar] = []
+            if (!organizedData[question.pillar.pillar]) {
+              organizedData[question.pillar.pillar] = []
+              pillarOrder[question.pillar.pillar] = question.pillar.order
             }
-            organizedData[question.pillar].push(question)
+            organizedData[question.pillar.pillar].push(question)
           })
-
-          // Convert the organized data into categories format
-          const categoriesData: Category[] = Object.keys(organizedData).map(
-            (pillar) => ({
-              name: pillar,
-              steps: organizedData[pillar],
-            })
+          const sortedPillars = Object.keys(organizedData).sort(
+            (a, b) => pillarOrder[a] - pillarOrder[b]
           )
+          const categoriesData: Category[] = sortedPillars.map((pillar) => ({
+            name: pillar,
+            steps: organizedData[pillar],
+          }))
 
           setCategories(categoriesData)
           if (data.length > 0) {
@@ -248,36 +247,33 @@ export default function QuestionnareModal({
         })
     }
   }, [open, system])
-  const handleQuestionChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setSelectQuestionOption(Number(event.target.value))
-  }
   React.useEffect(() => {
-    if (questionId && questionScores) {
-      try {
-        axiosInstance.get(`functions/${questionId}/options`).then((res) => {
-          setOptions(res.data.data)
-          let isValidOption: boolean = false
-          let funcOptId: number = 0
-          res.data.data.forEach((item: QuestionOption) => {
-            if (item.functionoptionid in questionScores) {
-              isValidOption = true
-              funcOptId = item.functionoptionid
-            }
-          })
-          if (!isValidOption) {
-            setSelectQuestionOption(0)
-            setScoreId(0)
-            setNotes('')
-          } else {
-            setSelectQuestionOption(funcOptId)
-            setScoreId(questionScores[funcOptId].scoreid)
-            setNotes(questionScores[funcOptId].notes)
+    try {
+      axiosInstance.get(`functions/${questionId}/options`).then((res) => {
+        setOptions(res.data.data)
+        let isValidOption: boolean = false
+        let funcOptId: number = 0
+        res.data.data.forEach((item: QuestionOption) => {
+          if (item.functionoptionid in questionScores) {
+            isValidOption = true
+            funcOptId = item.functionoptionid
           }
-          setLoadingQuestion(false)
         })
-      } catch (error) {
-        console.error('Error fetching data:', error)
-      }
+        if (!isValidOption) {
+          setSelectQuestionOption(0)
+          setScoreId(0)
+          setNotes('')
+        } else {
+          const id = questionScores[funcOptId].scoreid
+          const notes = questionScores[funcOptId].notes
+          setSelectQuestionOption(funcOptId)
+          setScoreId(id)
+          setNotes(notes)
+        }
+        setLoadingQuestion(false)
+      })
+    } catch (error) {
+      console.error('Error fetching data:', error)
     }
   }, [questionId, questionScores])
   const renderRadioGroup = (options: QuestionOption[]) => {
@@ -326,7 +322,9 @@ export default function QuestionnareModal({
               {categories.map((category, categoryIndex) => (
                 <Box key={category.name} marginBottom="16px">
                   <Typography variant="h6" align="center">
-                    {category.name}
+                    {category.name === 'CrossCutting'
+                      ? 'Cross Cutting'
+                      : category.name}
                   </Typography>
                   <Box>
                     {category.steps.map((step, stepIndex) => (