fix(apps/frontend-manage): resolve rendering loop that blocked creation of case study elements (#4732)

Author: sjschlapbach

apps/frontend-manage/src/components/evaluation/hooks/useChartTypeUpdate.tsx

@@ -32,6 +32,7 @@ function useChartTypeUpdate({
         setChartType(ACTIVE_CHART_TYPES[activeElementType][0].value)
       }
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [activeInstance, activeElementType])
 }
 

apps/frontend-manage/src/components/evaluation/hooks/useStackInstanceUpdates.tsx

@@ -20,6 +20,7 @@ function useStackInstanceUpdates({
         }
       })
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [activeInstance])
 }
 

apps/frontend-manage/src/components/questions/manipulation/options/CaseStudyCollectionSelection.tsx

@@ -9,16 +9,14 @@ import {
 import { useField } from 'formik'
 import { useTranslations } from 'next-intl'
 import Link from 'next/link'
-import { Dispatch, SetStateAction, useMemo, useState } from 'react'
+import { Dispatch, SetStateAction, useEffect, useMemo, useState } from 'react'
 import Select from 'react-select'
 import { twMerge } from 'tailwind-merge'
 import { ElementFormTypesCaseStudy } from '../types'
 import AnswerCollectionInlineEditButton from './AnswerCollectionInlineEditButton'
 import CaseStudyCollectionChangeModal from './CaseStudyCollectionChangeModal'
-import useAnswerCollectionChangeEffect from './useAnswerCollectionChangeEffect'
 import useSelectAnswerCollectionOptions from './useSelectAnswerCollectionOptions'
 import useSelectedAnswerEntry from './useSelectedAnswerEntry'
-import useSolutionsUpdateItemsChange from './useSolutionsUpdateItemsChange'
 
 function CaseStudyCollectionSelection({
   loading,
@@ -73,19 +71,35 @@ function CaseStudyCollectionSelection({
     setSelectedItems,
   })
 
-  // update the selected correct answers if the answer collection changes
-  useAnswerCollectionChangeEffect({
-    field: itemsField,
-    helpers: itemsHelpers,
-    collectionAnswers,
-  })
-
   // update the solutions stored on the cases to be consistent with the selected items
-  useSolutionsUpdateItemsChange({
-    itemIds: itemsField.value ?? [],
-    cases: casesField.value,
-    casesHelpers,
-  })
+  useEffect(() => {
+    // map over the cases and remove any solutions that do not belong to one of the selected items
+    const newCases = casesField.value?.map((caseItem) => {
+      // if no solutions are set, skip this case
+      if (!('solutions' in caseItem) || !caseItem.solutions) {
+        return caseItem
+      }
+
+      // filter out all solution entries that do not belong to one of the selected items
+      const newSolutions = Object.fromEntries(
+        Object.entries(caseItem.solutions).filter(([itemIdString]) =>
+          (itemsField.value ?? []).includes(
+            parseInt(itemIdString.split('-')[1])
+          )
+        )
+      )
+
+      return {
+        ...caseItem,
+        solutions: newSolutions,
+      }
+    })
+
+    // update the cases field with the new cases
+    casesHelpers.setValue(newCases)
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [itemsField.value, casesHelpers])
 
   // locally store the selected answer collection
   const selectedCollection = useMemo(() => {

apps/frontend-manage/src/components/questions/manipulation/options/SelectionCollectionOptions.tsx

@@ -10,12 +10,11 @@ import {
 import { useField } from 'formik'
 import { useTranslations } from 'next-intl'
 import Link from 'next/link'
-import { Dispatch, SetStateAction, useMemo } from 'react'
+import { Dispatch, SetStateAction, useEffect, useMemo } from 'react'
 import Select from 'react-select'
 import { twMerge } from 'tailwind-merge'
 import { ElementFormTypesSelection } from '../types'
 import AnswerCollectionInlineEditButton from './AnswerCollectionInlineEditButton'
-import useAnswerCollectionChangeEffect from './useAnswerCollectionChangeEffect'
 import useSelectAnswerCollectionOptions from './useSelectAnswerCollectionOptions'
 import useSelectedAnswerEntry from './useSelectedAnswerEntry'
 
@@ -67,11 +66,34 @@ function SelectionCollectionOptions({
   })
 
   // udpate the selected correct answers if the answer collection changes
-  useAnswerCollectionChangeEffect({
-    field: solutions,
-    helpers: solutionHelpers,
-    collectionAnswers,
-  })
+  useEffect(() => {
+    // if no collection answers are available, reset the solutions field
+    if (
+      !solutions.value ||
+      !collectionAnswers ||
+      collectionAnswers.length === 0
+    ) {
+      if (solutions.value?.length) {
+        solutionHelpers.setValue([])
+      }
+      return
+    }
+
+    const newFieldValues = solutions.value.filter((id) =>
+      collectionAnswers.map((entry) => entry.value).includes(id)
+    )
+
+    // if the existing solutions and the new ones are not the same, update the solutions field
+    if (
+      solutions.value.length !== newFieldValues.length ||
+      solutions.value.some((id) => !newFieldValues.includes(id))
+    ) {
+      solutionHelpers.setValue(newFieldValues)
+    }
+
+    // do not add value as a dependency --> rendering loop! - updates only on collection change desired
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [collectionAnswers])
 
   // locally store the selected answer collection
   const selectedCollection = useMemo(() => {

apps/frontend-manage/src/components/questions/manipulation/options/SelectionManualItemCreation.tsx

@@ -6,12 +6,11 @@ import {
 } from '@uzh-bf/design-system'
 import { useField } from 'formik'
 import { useTranslations } from 'next-intl'
-import { Dispatch, SetStateAction } from 'react'
+import { Dispatch, SetStateAction, useEffect } from 'react'
 import Select from 'react-select'
 import Creatable from 'react-select/creatable'
 import { ElementFormTypesSelection } from '../types'
 import useSelectedAnswerEntry from './useSelectedAnswerEntry'
-import useSelectionItemsChangeEffect from './useSelectionItemsChangeEffect'
 
 interface SelectionManualItemCreationProps {
   inputsDisabled?: boolean
@@ -48,11 +47,30 @@ function SelectionManualItemCreation({
   })
 
   // make sure that only valid elements are stored as correct answers (-> on item removal, the item should also be removed from the correct answers)
-  useSelectionItemsChangeEffect({
-    items,
-    solutions,
-    solutionHelpers,
-  })
+  useEffect(() => {
+    // if no items are available, reset the solution field
+    if (!solutions.value || !items.value || items.value.length === 0) {
+      if (solutions.value?.length) {
+        solutionHelpers.setValue([])
+      }
+      return
+    }
+
+    const newFieldValues = solutions.value.filter((id) =>
+      items.value!.map((item) => item.id).includes(id)
+    )
+
+    // if the existing solutions and the new ones are not the same, update the solutions field
+    if (
+      solutions.value.length !== newFieldValues.length ||
+      solutions.value.some((id) => !newFieldValues.includes(id))
+    ) {
+      solutionHelpers.setValue(newFieldValues)
+    }
+
+    // do not add value as a dependency --> rendering loop! - updates only on collection change desired
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [items.value])
 
   return (
     <div className="flex w-full flex-col">

apps/frontend-manage/src/components/questions/manipulation/options/useAnswerCollectionChangeEffect.ts

@@ -47,6 +47,7 @@ function useRemainingInstances({
       }
     }
     exec()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [quizId, instances, execution])
 }