From f1b740f3928ecba7f2206473346dc06ba22e1204 Mon Sep 17 00:00:00 2001
From: barshathakuri <barshathakuri708@gmail.com>
Date: Mon, 21 Aug 2023 17:48:30 +0545
Subject: [PATCH] Add pillar option to a new component

---
 src/components/PillarSelectInput/index.tsx    | 92 +++++++++++++++++++
 .../SelectOneQuestionPreview/index.module.css |  1 +
 .../SelectMultipleQuestionsForm/index.tsx     | 66 ++-----------
 .../SelectOneQuestionForm/index.tsx           | 72 +++------------
 4 files changed, 111 insertions(+), 120 deletions(-)
 create mode 100644 src/components/PillarSelectInput/index.tsx

diff --git a/src/components/PillarSelectInput/index.tsx b/src/components/PillarSelectInput/index.tsx
new file mode 100644
index 0000000..7033ee4
--- /dev/null
+++ b/src/components/PillarSelectInput/index.tsx
@@ -0,0 +1,92 @@
+import { useMemo } from 'react';
+import { gql, useQuery } from '@apollo/client';
+import { SelectInput } from '@the-deep/deep-ui';
+import { isNotDefined } from '@togglecorp/fujs';
+
+import { PillarsQuery, PillarsQueryVariables } from '#generated/types';
+
+const PILLARS = gql`
+    query Pillars (
+        $projectId: ID!,
+        $questionnaireId: ID!,
+    ) {
+        private {
+            projectScope(pk: $projectId) {
+                groups (filters: {questionnaire: {pk: $questionnaireId}}){
+                    items {
+                        id
+                        name
+                        label
+                        parentId
+                        questionnaireId
+                    }
+                }
+            }
+        }
+    }
+`;
+
+interface PillarProps<T>{
+    projectId: string;
+    name: T;
+    questionnaireId: string | null;
+    value: string | null | undefined;
+    error: string | undefined;
+    onChange: (value: string | undefined, name: T) => void;
+}
+
+type Pillar = NonNullable<PillarsQuery['private']['projectScope']>['groups']['items'][number];
+
+function PillarSelectInput<T extends string>(props: PillarProps<T>) {
+    const {
+        projectId,
+        questionnaireId,
+        value,
+        error,
+        onChange,
+        name,
+    } = props;
+
+    const pillarsVariables = useMemo(() => {
+        if (isNotDefined(projectId) || isNotDefined(questionnaireId)) {
+            return undefined;
+        }
+        return ({
+            projectId,
+            questionnaireId,
+        });
+    }, [
+        projectId,
+        questionnaireId,
+    ]);
+
+    const {
+        data: pillarsResponse,
+    } = useQuery<PillarsQuery, PillarsQueryVariables>(
+        PILLARS,
+        {
+            skip: isNotDefined(pillarsVariables),
+            variables: pillarsVariables,
+        },
+    );
+
+    const pillarsOptions = pillarsResponse?.private?.projectScope?.groups.items || [];
+
+    const pillarKeySelector = (data: Pillar) => data.id;
+    const pillarLabelSelector = (data: Pillar) => data.label;
+
+    return (
+        <SelectInput
+            name={name}
+            label="Pillar and Sub pillar"
+            value={value}
+            error={error}
+            onChange={onChange}
+            keySelector={pillarKeySelector}
+            labelSelector={pillarLabelSelector}
+            options={pillarsOptions}
+        />
+    );
+}
+
+export default PillarSelectInput;
diff --git a/src/components/questionPreviews/SelectOneQuestionPreview/index.module.css b/src/components/questionPreviews/SelectOneQuestionPreview/index.module.css
index 2508075..8a243df 100644
--- a/src/components/questionPreviews/SelectOneQuestionPreview/index.module.css
+++ b/src/components/questionPreviews/SelectOneQuestionPreview/index.module.css
@@ -6,6 +6,7 @@
 
     .question-list {
         display: flex;
+        align-items: flex-start;
         flex-direction: column;
         gap: var(--dui-spacing-small);
         width: 10rem;
diff --git a/src/views/QuestionnaireEdit/SelectMultipleQuestionsForm/index.tsx b/src/views/QuestionnaireEdit/SelectMultipleQuestionsForm/index.tsx
index 44deb6e..b79747f 100644
--- a/src/views/QuestionnaireEdit/SelectMultipleQuestionsForm/index.tsx
+++ b/src/views/QuestionnaireEdit/SelectMultipleQuestionsForm/index.tsx
@@ -15,7 +15,6 @@ import {
 import {
     Button,
     SearchSelectInput,
-    SelectInput,
     TextInput,
     useAlert,
 } from '@the-deep/deep-ui';
@@ -31,13 +30,12 @@ import {
     CreateTextQuestionMutationVariables,
     ChoiceCollectionsQuery,
     ChoiceCollectionsQueryVariables,
-    PillarsQuery,
-    PillarsQueryVariables,
     QuestionCreateInput,
     QuestionTypeEnum,
     CreateMultipleSelectionQuestionMutation,
 } from '#generated/types';
 import SelectMultipleQuestionPreview from '#components/SelectMultipleQuestionsPreview';
+import PillarSelectInput from '#components/PillarSelectInput';
 
 import styles from './index.module.css';
 
@@ -59,26 +57,6 @@ const CREATE_MULTIPLE_SELECTION_QUESTION = gql`
     }
 `;
 
-const PILLARS = gql`
-    query Pillars (
-        $projectId: ID!
-    ) {
-        private {
-            projectScope(pk: $projectId) {
-                groups {
-                    items {
-                        id
-                        name
-                        label
-                        parentId
-                        questionnaireId
-                    }
-                }
-            }
-        }
-    }
-`;
-
 const CHOICE_COLLECTIONS = gql`
     query ChoiceCollections(
         $projectId: ID!,
@@ -91,7 +69,7 @@ const CHOICE_COLLECTIONS = gql`
             choiceCollections(
                 filters: {
                     questionnaire: {pk: $questionnaireId},
-                     name: {iContains: $search }
+                    name: {iContains: $search }
                     }
             ) {
                 count
@@ -141,7 +119,6 @@ const schema: FormSchema = {
     }),
 };
 
-type Pillar = NonNullable<PillarsQuery['private']['projectScope']>['groups']['items'][number];
 type ChoiceCollection = NonNullable<ChoiceCollectionsQuery['private']['projectScope']>['choiceCollections']['items'][number];
 
 const choiceCollectionKeySelector = (d: ChoiceCollection) => d.id;
@@ -159,28 +136,6 @@ function SelectMultipleQuestionsForm(props: Props) {
     } = props;
 
     const alert = useAlert();
-
-    const pillarsVariables = useMemo(() => {
-        if (isNotDefined(projectId)) {
-            return undefined;
-        }
-        return ({
-            projectId,
-        });
-    }, [
-        projectId,
-    ]);
-
-    const {
-        data: pillarsResponse,
-    } = useQuery<PillarsQuery, PillarsQueryVariables>(
-        PILLARS,
-        {
-            skip: isNotDefined(pillarsVariables),
-            variables: pillarsVariables,
-        },
-    );
-
     const [opened, setOpened] = useState(false);
     const [search, setSearch] = useState<string>();
     const [
@@ -213,11 +168,6 @@ function SelectMultipleQuestionsForm(props: Props) {
         variables: optionsVariables,
     });
 
-    const pillarsOptions = pillarsResponse?.private?.projectScope?.groups.items || [];
-
-    const pillarKeySelector = (data: Pillar) => data.id;
-    const pillarLabelSelector = (data: Pillar) => data.label;
-
     const [
         triggerQuestionCreate,
         { loading: createQuestionPending },
@@ -326,15 +276,13 @@ function SelectMultipleQuestionsForm(props: Props) {
                     onShowDropdownChange={setOpened}
                     value={formValue.choiceCollection}
                 />
-                <SelectInput
-                    name="label"
-                    label="Pillar and Sub pillar"
+                <PillarSelectInput
+                    name="group"
+                    projectId={projectId}
+                    questionnaireId={questionnaireId}
                     value={formValue.group}
-                    error={fieldError?.label}
+                    error={fieldError?.group}
                     onChange={setFieldValue}
-                    keySelector={pillarKeySelector}
-                    labelSelector={pillarLabelSelector}
-                    options={pillarsOptions}
                 />
             </div>
             <Button
diff --git a/src/views/QuestionnaireEdit/SelectOneQuestionForm/index.tsx b/src/views/QuestionnaireEdit/SelectOneQuestionForm/index.tsx
index 8341baf..baee291 100644
--- a/src/views/QuestionnaireEdit/SelectOneQuestionForm/index.tsx
+++ b/src/views/QuestionnaireEdit/SelectOneQuestionForm/index.tsx
@@ -15,7 +15,6 @@ import {
 import {
     Button,
     SearchSelectInput,
-    SelectInput,
     TextInput,
     useAlert,
 } from '@the-deep/deep-ui';
@@ -32,13 +31,12 @@ import {
     CreateTextQuestionMutationVariables,
     QuestionCreateInput,
     QuestionTypeEnum,
-    PillarsQuery,
-    PillarsQueryVariables,
-    ChoiceCollectionsQuery,
     ChoiceCollectionsQueryVariables,
     CreateSingleSelectionQuestionMutation,
+    ChoiceCollectionsQuery,
 } from '#generated/types';
 import SelectOneQuestionPreview from '#components/questionPreviews/SelectOneQuestionPreview';
+import PillarSelectInput from '#components/PillarSelectInput';
 
 import styles from './index.module.css';
 
@@ -60,26 +58,6 @@ const CREATE_SINGLE_SELECTION_QUESTION = gql`
     }
 `;
 
-const PILLARS = gql`
-    query Pillars (
-        $projectId: ID!
-    ) {
-        private {
-            projectScope(pk: $projectId) {
-                groups {
-                    items {
-                        id
-                        name
-                        label
-                        parentId
-                        questionnaireId
-                    }
-                }
-            }
-        }
-    }
-`;
-
 const CHOICE_COLLECTIONS = gql`
     query ChoiceCollections(
         $projectId: ID!,
@@ -92,7 +70,7 @@ const CHOICE_COLLECTIONS = gql`
             choiceCollections(
                 filters: {
                     questionnaire: {pk: $questionnaireId},
-                     name: {iContains: $search }
+                    name: {iContains: $search }
                     }
             ) {
                 count
@@ -142,15 +120,11 @@ const schema: FormSchema = {
     }),
 };
 
-type Pillars = NonNullable<PillarsQuery['private']['projectScope']>['groups']['items'][number];
 type ChoiceCollection = NonNullable<ChoiceCollectionsQuery['private']['projectScope']>['choiceCollections']['items'][number];
 
 const choiceCollectionKeySelector = (d: ChoiceCollection) => d.id;
 const choiceCollectionLabelSelector = (d: ChoiceCollection) => d.label;
 
-const pillarKeySelector = (d: Pillars) => d.id;
-const pillarLabelSelector = (d: Pillars) => d.label;
-
 interface Props {
     projectId: string;
     questionnaireId: string;
@@ -163,29 +137,6 @@ function SelectOneQuestionForm(props: Props) {
     } = props;
 
     const alert = useAlert();
-
-    const pillarsVariables = useMemo(() => {
-        if (isNotDefined(projectId)) {
-            return undefined;
-        }
-        return ({
-            projectId,
-        });
-    }, [
-        projectId,
-    ]);
-
-    const {
-        data: pillarsResponse,
-    } = useQuery<PillarsQuery, PillarsQueryVariables>(
-        PILLARS,
-        {
-            variables: pillarsVariables,
-        },
-    );
-
-    const pillarsOptions = pillarsResponse?.private?.projectScope?.groups.items || [];
-
     const [
         triggerQuestionCreate,
         { loading: createQuestionPending },
@@ -266,7 +217,8 @@ function SelectOneQuestionForm(props: Props) {
     ] = useState<ChoiceCollection[] | undefined | null>();
 
     const optionsVariables = useMemo(() => {
-        if (isNotDefined(projectId) || isNotDefined(questionnaireId)) {
+        if (isNotDefined(projectId) || isNotDefined(questionnaireId)
+        ) {
             return undefined;
         }
         return ({
@@ -329,15 +281,13 @@ function SelectOneQuestionForm(props: Props) {
                     onShowDropdownChange={setOpened}
                     value={formValue.choiceCollection}
                 />
-                <SelectInput
-                    name="label"
-                    label="Pillar and Sub pillar"
-                    value={formValue.label}
-                    error={fieldError?.label}
+                <PillarSelectInput
+                    name="group"
+                    projectId={projectId}
+                    questionnaireId={questionnaireId}
+                    value={formValue.group}
+                    error={fieldError?.group}
                     onChange={setFieldValue}
-                    keySelector={pillarKeySelector}
-                    labelSelector={pillarLabelSelector}
-                    options={pillarsOptions}
                 />
             </div>
             <Button