From 0b098c572b1b84c250ad7820791240054c235adc Mon Sep 17 00:00:00 2001
From: Wilson Mutua <willymathuva@gmail.com>
Date: Tue, 8 Oct 2024 11:36:19 +0300
Subject: [PATCH] Check for duplicates & delete added

---
 .../add-question.modal.tsx                    | 71 ++++++++++++-------
 .../edit-question.modal.tsx                   | 70 ++++++++++++++----
 2 files changed, 101 insertions(+), 40 deletions(-)

diff --git a/src/components/interactive-builder/add-question.modal.tsx b/src/components/interactive-builder/add-question.modal.tsx
index 60d75be..41a0661 100644
--- a/src/components/interactive-builder/add-question.modal.tsx
+++ b/src/components/interactive-builder/add-question.modal.tsx
@@ -61,6 +61,7 @@ interface AddQuestionModalProps {
 }
 
 interface Item {
+  id: string;
   text: string;
 }
 
@@ -130,7 +131,10 @@ const AddQuestionModal: React.FC<AddQuestionModalProps> = ({
   const [selectedAnsConcept, setSelectedAnsConcept] = useState<Concept | null>(null);
   const [selectedPersonAttributeType, setSelectedPersonAttributeType] = useState<PersonAttributeType | null>(null);
   const { concepts, conceptLookupError, isLoadingConcepts } = useConceptLookup(debouncedConceptToLookup);
-  const { concepts: ansConcepts, conceptLookupError: conceptAnsLookupError, isLoadingConcepts: isLoadingAnsConcepts,
+  const {
+    concepts: ansConcepts,
+    conceptLookupError: conceptAnsLookupError,
+    isLoadingConcepts: isLoadingAnsConcepts,
   } = useConceptLookup(debouncedAnsConceptToLookup);
   const { personAttributeTypes, personAttributeTypeLookupError } = usePersonAttributeTypes();
   const [selectedPatientIdetifierType, setSelectedPatientIdetifierType] = useState<PatientIdentifierType>(null);
@@ -175,6 +179,7 @@ const AddQuestionModal: React.FC<AddQuestionModalProps> = ({
   const handleConceptSelect = (concept: Concept) => {
     const updatedDatePickerType = getDatePickerType(concept);
     if (updatedDatePickerType) setDatePickerType(updatedDatePickerType);
+    setAnswer(false);
     setConceptToLookup('');
     setSelectedConcept(concept);
     setAnswers(
@@ -198,9 +203,26 @@ const AddQuestionModal: React.FC<AddQuestionModalProps> = ({
     setaddedAnswers([]);
   };
   const handleSaveClick = () => {
-    setSelectedAnswers((prevAnswers) => [...prevAnswers, ...addedAnswers]);
+    setSelectedAnswers((prevAnswers) => {
+      const newAnswers = addedAnswers.filter(
+        (newAnswer) => !prevAnswers.some((prevAnswer) => prevAnswer.id === newAnswer.id),
+      );
+      const updatedAnswers = [...prevAnswers, ...newAnswers];
+
+      setAnswers((prevAnswers) => [
+        ...prevAnswers,
+        ...newAnswers.map((answer) => ({
+          concept: answer.id,
+          label: answer.text,
+        })),
+      ]);
+
+      return updatedAnswers;
+    });
+
     setaddedAnswers([]);
   };
+
   const handleConceptAnsSelect = (concept: Concept) => {
     setConceptAnsToLookup('');
     setSelectedAnsConcept(concept);
@@ -448,8 +470,8 @@ const AddQuestionModal: React.FC<AddQuestionModalProps> = ({
 
                 {questionTypes.filter((questionType) => questionType !== 'obs').includes(questionType)
                   ? renderTypeOptions[questionType].map((type, key) => (
-                    <SelectItem key={`${questionType}-${key}`} text={type} value={type} />
-                  ))
+                      <SelectItem key={`${questionType}-${key}`} text={type} value={type} />
+                    ))
                   : fieldTypes.map((type, key) => <SelectItem key={key} text={type} value={type} />)}
               </Select>
 
@@ -697,14 +719,13 @@ const AddQuestionModal: React.FC<AddQuestionModalProps> = ({
                         id: answer.concept,
                         text: answer.label,
                       }))}
-                      onChange={({
-                        selectedItems,
-                      }: {
-                        selectedItems: Array<{
-                          id: string;
-                          text: string;
-                        }>;
-                      }) => setSelectedAnswers(selectedItems.sort())}
+                      selectedItems={selectedAnswers.map((answer) => ({
+                        id: answer.id,
+                        text: answer.text,
+                      }))}
+                      onChange={({ selectedItems }: { selectedItems: Array<{ id: string; text: string }> }) => {
+                        setSelectedAnswers(selectedItems);
+                      }}
                       size="md"
                       titleText={t('selectAnswersToDisplay', 'Select answers to display')}
                     />
@@ -894,25 +915,25 @@ const AddQuestionModal: React.FC<AddQuestionModalProps> = ({
                   */}
                   {selectedConcept && selectedConcept.datatype
                     ? datePickerTypeOptions[selectedConcept.datatype.name.toLowerCase()].map((type) => (
-                      <RadioButton
-                        id={type.value}
-                        labelText={type.label}
-                        onClick={() => setDatePickerType(type.value)}
-                        checked={datePickerType === type.value}
-                        value={type.value}
-                      />
-                    ))
-                    : Object.values(datePickerTypeOptions)
-                      .flat()
-                      .map((type) => (
                         <RadioButton
                           id={type.value}
-                          checked={datePickerType === type.value}
                           labelText={type.label}
                           onClick={() => setDatePickerType(type.value)}
+                          checked={datePickerType === type.value}
                           value={type.value}
                         />
-                      ))}
+                      ))
+                    : Object.values(datePickerTypeOptions)
+                        .flat()
+                        .map((type) => (
+                          <RadioButton
+                            id={type.value}
+                            checked={datePickerType === type.value}
+                            labelText={type.label}
+                            onClick={() => setDatePickerType(type.value)}
+                            value={type.value}
+                          />
+                        ))}
                 </RadioButtonGroup>
               ) : null}
 
diff --git a/src/components/interactive-builder/edit-question.modal.tsx b/src/components/interactive-builder/edit-question.modal.tsx
index 448c282..0608cca 100644
--- a/src/components/interactive-builder/edit-question.modal.tsx
+++ b/src/components/interactive-builder/edit-question.modal.tsx
@@ -200,6 +200,7 @@ const EditQuestionModal: React.FC<EditQuestionModalProps> = ({
     if (datePickerType) {
       setDatePickerType(datePickerType);
     }
+    setAnswer(false);
     setConceptToLookup('');
     setSelectedAnswers([]);
     setSelectedConcept(concept);
@@ -223,8 +224,41 @@ const EditQuestionModal: React.FC<EditQuestionModalProps> = ({
   const clearAnsConcept = () => {
     setaddedAnswers([]);
   };
+
   const handleSaveClick = () => {
-    setSelectedAnswers((prevAnswers) => [...prevAnswers, ...addedAnswers]);
+    const existingAnswers = questionToEdit?.questionOptions?.answers || [];
+
+    const updatedAnswers = [
+      ...existingAnswers,
+      ...addedAnswers
+        .filter((newAnswer) => !existingAnswers.some((prevAnswer) => prevAnswer.concept === newAnswer.id))
+        .map((answer) => ({
+          concept: answer.id,
+          label: answer.text,
+        })),
+    ];
+
+    if (questionToEdit?.questionOptions) {
+      questionToEdit.questionOptions.answers = updatedAnswers;
+    }
+    if (hasConceptChanged) {
+      setAnswersFromConcept((prevAnswers) => [
+        ...prevAnswers,
+        ...addedAnswers.map((answer) => ({
+          concept: answer.id,
+          label: answer.text,
+        })),
+      ]);
+    }
+
+    setSelectedAnswers((prevAnswers) => {
+      const combinedAnswers = [
+        ...prevAnswers,
+        ...addedAnswers.filter((newAnswer) => !prevAnswers.some((prevAnswer) => prevAnswer.id === newAnswer.id)),
+      ];
+      return combinedAnswers;
+    });
+
     setaddedAnswers([]);
   };
 
@@ -788,31 +822,23 @@ const EditQuestionModal: React.FC<EditQuestionModalProps> = ({
                         className={styles.multiSelect}
                         direction="top"
                         id="selectAnswers"
-                        itemToString={(item: Item) => item.text}
-                        initialSelectedItems={questionToEdit?.questionOptions?.answers?.map((answer) => ({
-                          id: answer.concept,
-                          text: answer.label,
+                        itemToString={(item: { id: string; text: string }) => item.text}
+                        selectedItems={selectedAnswers.map((answer) => ({
+                          id: answer.id,
+                          text: answer.text,
                         }))}
                         items={questionToEdit?.questionOptions?.answers?.map((answer) => ({
                           id: answer.concept,
                           text: answer.label ?? '',
                         }))}
-                        onChange={({
-                          selectedItems,
-                        }: {
-                          selectedItems: Array<{
-                            id: string;
-                            text: string;
-                          }>;
-                        }) => {
+                        onChange={({ selectedItems }: { selectedItems: Array<{ id: string; text: string }> }) => {
                           setSelectedAnswers(selectedItems);
-                          // (selectedItems.sort());
                         }}
                         size="md"
                         titleText={t('selectAnswersToDisplay', 'Select answers to display')}
                       />
                     ) : null}
-                    {selectedAnswers.length && questionToEdit.type !== 'programState' ? (
+                    {!hasConceptChanged && selectedAnswers.length && questionToEdit.type !== 'programState' ? (
                       <div>
                         {selectedAnswers?.map((answer) => (
                           <Tag className={styles.tag} key={answer?.id} type={'blue'}>
@@ -831,6 +857,10 @@ const EditQuestionModal: React.FC<EditQuestionModalProps> = ({
                           id: answer.concept,
                           text: answer.label,
                         }))}
+                        selectedItems={selectedAnswers.map((answer) => ({
+                          id: answer.id,
+                          text: answer.text,
+                        }))}
                         onChange={({
                           selectedItems,
                         }: {
@@ -844,6 +874,16 @@ const EditQuestionModal: React.FC<EditQuestionModalProps> = ({
                       />
                     ) : null}
 
+                    {hasConceptChanged && selectedAnswers.length && questionToEdit.type !== 'programState' ? (
+                      <div>
+                        {selectedAnswers?.map((answer) => (
+                          <Tag className={styles.tag} key={answer?.id} type={'blue'}>
+                            {answer?.text}
+                          </Tag>
+                        ))}
+                      </div>
+                    ) : null}
+
                     {(selectedConcept || questionToEdit) && questionToEdit?.questionOptions.answers?.length ? (
                       <div>
                         <Button kind="tertiary" onClick={showAddQuestion} iconDescription="Add" size="sm">