Merge pull request #63 from the-deep/feature/feedbacks

Fix query refetch issues
the-deep · Sep 29, 2023 · 1698635 · 1698635
2 parents 2edb54a + 15b63e0
commit 1698635
Show file tree

Hide file tree

Showing 12 changed files with 90 additions and 90 deletions.
diff --git a/src/components/EditQuestionnaireModal/index.tsx b/src/components/EditQuestionnaireModal/index.tsx
@@ -133,9 +133,15 @@ const schema: FormSchema = {
             required: true,
             requiredValidation: requiredStringCondition,
         },
-        dataCollectionMethods: {},
-        enumeratorSkills: {},
-        priorityLevels: {},
+        dataCollectionMethods: {
+            defaultValue: [],
+        },
+        enumeratorSkills: {
+            defaultValue: [],
+        },
+        priorityLevels: {
+            defaultValue: [],
+        },
         requiredDuration: {},
     }),
 };

diff --git a/src/components/MetaDataInputs/index.tsx b/src/components/MetaDataInputs/index.tsx
@@ -120,7 +120,7 @@ function MetaDataInputs(props: Props) {
             />
             <NumberInput
                 className={className}
-                label="Maximum duration (in seconds)"
+                label="Maximum duration (in minutes)"
                 name="requiredDuration"
                 value={value?.requiredDuration}
                 error={error?.requiredDuration}

diff --git a/src/components/TocList/index.tsx b/src/components/TocList/index.tsx
@@ -50,7 +50,6 @@ function TocRenderer(props: TocProps) {
             onSelectedGroupsChange(val, childIds);
             return;
         }
-
         onSelectedGroupsChange(val, [item.id]);
     }, [
         item,

diff --git a/src/views/Home/ProjectItem/index.module.css b/src/views/Home/ProjectItem/index.module.css
@@ -16,7 +16,7 @@
         flex-grow: 1;
         cursor: pointer;
         padding: var(--dui-spacing-medium);
-        gap: var(--dui-spacing-medium);
+        gap: var(--dui-spacing-small);
 
         .description {
             display: flex;

diff --git a/src/views/Home/ProjectItem/index.tsx b/src/views/Home/ProjectItem/index.tsx
@@ -115,23 +115,21 @@ function ProjectItem(props: Props) {
                 <Header
                     headingSize="extraSmall"
                     heading={projectItem.title}
-                    actions={(
-                        <div className={styles.description}>
-                            <TextOutput
-                                className={styles.stats}
-                                value={questionnairesCount}
-                                description={questionnairesCount > 1 ? 'Questionnaires' : 'Questionnaire'}
-                                valueType="number"
-                            />
-                            <TextOutput
-                                className={styles.stats}
-                                value={membersCount}
-                                description={membersCount > 1 ? 'Users' : 'User'}
-                                valueType="number"
-                            />
-                        </div>
-                    )}
                 />
+                <div className={styles.description}>
+                    <TextOutput
+                        className={styles.stats}
+                        value={questionnairesCount}
+                        description={questionnairesCount > 1 ? 'Forms' : 'Form'}
+                        valueType="number"
+                    />
+                    <TextOutput
+                        className={styles.stats}
+                        value={membersCount}
+                        description={membersCount > 1 ? 'Users' : 'User'}
+                        valueType="number"
+                    />
+                </div>
                 <div className={styles.description}>
                     <TextOutput
                         className={styles.stats}

diff --git a/src/views/QuestionnaireEdit/IntegerQuestionForm/index.tsx b/src/views/QuestionnaireEdit/IntegerQuestionForm/index.tsx
@@ -167,8 +167,6 @@ function IntegerQuestionForm(props: Props) {
         selectedLeafGroupId,
     } = props;
 
-    console.log('q', questionnaireId);
-
     const alert = useAlert();
 
     const [
@@ -192,8 +190,6 @@ function IntegerQuestionForm(props: Props) {
         setError,
     } = useForm(schema, { value: initialFormValue });
 
-    console.log('form value', questionnaireId, initialFormValue, formValue);
-
     const fieldError = getErrorObject(formError);
 
     const questionInfoVariables = useMemo(() => {

diff --git a/src/views/QuestionnaireEdit/ProgressBar/index.module.css b/src/views/QuestionnaireEdit/ProgressBar/index.module.css
@@ -1,14 +1,14 @@
 .progress-bar{
     display: flex;
     flex-direction: column;
-    gap: var(--dui-spacing-small);
 
     .bar {
         position: relative;
         border-radius: 10px;
         width: 300px;
         height: 10px;
         overflow: hidden;
+
         .total {
             position: absolute;
             background-color: var(--background-color);

diff --git a/src/views/QuestionnaireEdit/ProgressBar/index.tsx b/src/views/QuestionnaireEdit/ProgressBar/index.tsx
@@ -26,9 +26,9 @@ function ProgressBar(props: Props) {
         <div className={styles.progressBar}>
             <div className={styles.label}>
                 <TextOutput
-                    value={`${value} min`}
+                    value={`${value} min / ${total} min`}
                     description="Estimated time"
-                    spacing="loose"
+                    spacing="compact"
                 />
             </div>
             <div className={styles.bar}>

diff --git a/src/views/QuestionnaireEdit/QuestionList/LeafNode/index.tsx b/src/views/QuestionnaireEdit/QuestionList/LeafNode/index.tsx
@@ -7,15 +7,21 @@ import {
     useQuery,
     useMutation,
 } from '@apollo/client';
+import { getOperationName } from 'apollo-link';
 import {
     compareNumber,
     isNotDefined,
+    isDefined,
 } from '@togglecorp/fujs';
 import {
     useAlert,
 } from '@the-deep/deep-ui';
 
+import { apolloClient } from '#configs/apollo';
 import SortableList from '#components/SortableList';
+import {
+    QUESTIONNAIRE,
+} from '#views/QuestionnaireEdit/queries';
 import {
     QuestionsForLeafGroupQuery,
     QuestionsForLeafGroupQueryVariables,
@@ -147,6 +153,11 @@ function LeafNode(props: Props) {
                         'Failed to update questions visibility',
                     );
                 }
+                apolloClient.refetchQueries({
+                    include: [
+                        getOperationName(QUESTIONNAIRE),
+                    ].filter(isDefined),
+                });
             },
             onError: () => {
                 alert.show(

diff --git a/src/views/QuestionnaireEdit/QuestionList/index.tsx b/src/views/QuestionnaireEdit/QuestionList/index.tsx
@@ -54,10 +54,7 @@ function QuestionListRenderer(props: QuestionRendererProps) {
         subSectorsExpanded,
     } = props;
 
-    const [selected, setSelected] = useState<string | undefined>();
-    const handleChange = (_: boolean, name: string) => {
-        setSelected((oldValue) => (oldValue === name ? undefined : name));
-    };
+    const [selected, setSelected] = useState(false);
 
     return (
         <ControlledExpandableContainer
@@ -90,8 +87,8 @@ function QuestionListRenderer(props: QuestionRendererProps) {
             withoutBorder
             spacing="none"
             disabled={!item.leafNode}
-            expanded={!item.leafNode || subSectorsExpanded || selected === item.id}
-            onExpansionChange={handleChange}
+            expanded={!item.leafNode || subSectorsExpanded || selected}
+            onExpansionChange={setSelected}
         >
             {item.leafNode
                 ? (

diff --git a/src/views/QuestionnaireEdit/index.tsx b/src/views/QuestionnaireEdit/index.tsx
@@ -38,7 +38,6 @@ import {
     useQuery,
     useMutation,
 } from '@apollo/client';
-import { getOperationName } from 'apollo-link';
 import {
     AlertContext,
     Button,
@@ -63,10 +62,6 @@ import {
     getChildren,
     flatten,
 } from '#utils/common';
-import {
-    QUESTIONS_FOR_LEAF_GROUP,
-} from '#views/QuestionnaireEdit/QuestionList/LeafNode/queries';
-import { apolloClient } from '#configs/apollo';
 import QuestionnairePreviewModal from '#components/QuestionnairePreviewModal';
 import {
     OrderQuestionGroupMutation,
@@ -97,49 +92,14 @@ import ProgressBar from './ProgressBar';
 import QuestionList from './QuestionList';
 import {
     LEAF_GROUPS_FRAGMENT,
-    CHOICE_COLLECTION_FRAGMENT,
+    QUESTIONNAIRE,
 } from './queries';
 import QuestionTypeItem, { QuestionType } from './QuestionTypeItem';
 
 import styles from './index.module.css';
 
 export type QuestionTabType = 'general' | 'metadata';
 
-const QUESTIONNAIRE = gql`
-    ${LEAF_GROUPS_FRAGMENT}
-    ${CHOICE_COLLECTION_FRAGMENT}
-    query Questionnaire(
-        $projectId: ID!,
-        $questionnaireId: ID!,
-    ) {
-        private {
-            id
-            projectScope(pk: $projectId) {
-                id
-                project {
-                    title
-                    id
-                }
-                questionnaire(pk: $questionnaireId) {
-                    id
-                    title
-                    leafGroups {
-                        ...LeafGroups
-                    }
-                    choiceCollections {
-                        ...ChoiceCollections
-                    }
-                    requiredDuration
-                    totalRequiredDuration
-                    totalQuestions {
-                        visible
-                    }
-                }
-            }
-        }
-    }
-`;
-
 const ORDER_QUESTION_GROUP = gql`
     ${LEAF_GROUPS_FRAGMENT}
     mutation OrderQuestionGroup(
@@ -363,14 +323,6 @@ function transformOptionsByCategory(options: QuestionGroup[]): Node[] {
     const result = options
         .map((g) => ({
             category: [
-                isDefined(g.category1) && isDefined(g.category1Display) ? {
-                    key: g.category1,
-                    label: g.category1Display,
-                } : undefined,
-                isDefined(g.category2) && isDefined(g.category2Display) ? {
-                    key: g.category2,
-                    label: g.category2Display,
-                } : undefined,
                 isDefined(g.category3) && isDefined(g.category3Display) ? {
                     key: g.category3,
                     label: g.category3Display,
@@ -379,6 +331,14 @@ function transformOptionsByCategory(options: QuestionGroup[]): Node[] {
                     key: g.category4,
                     label: g.category4Display,
                 } : undefined,
+                isDefined(g.category1) && isDefined(g.category1Display) ? {
+                    key: g.category1,
+                    label: g.category1Display,
+                } : undefined,
+                isDefined(g.category2) && isDefined(g.category2Display) ? {
+                    key: g.category2,
+                    label: g.category2Display,
+                } : undefined,
             ].filter(isDefined),
             type: g.type,
             id: g.id,
@@ -471,6 +431,7 @@ export function Component() {
 
     const {
         data: questionnaireResponse,
+        refetch: retriggerQuestionnaireResponse,
     } = useQuery<QuestionnaireQuery, QuestionnaireQueryVariables>(
         QUESTIONNAIRE,
         {
@@ -545,6 +506,7 @@ export function Component() {
         if (isNotDefined(projectId) || isNotDefined(questionnaireId)) {
             return;
         }
+        retriggerQuestionnaireResponse();
         setOrderedOptions(newVal);
 
         function getIdFromGroups(key: string) {
@@ -579,6 +541,7 @@ export function Component() {
         projectId,
         questionnaireId,
         triggerGroupOrderChange,
+        retriggerQuestionnaireResponse,
     ]);
 
     const [exportIdToPreview, setExportIdToPreview] = useState<string | undefined>();
@@ -739,13 +702,10 @@ export function Component() {
     const handleQuestionCreateSuccess = useCallback(() => {
         hideAddQuestionPane();
         setSelectedQuestionType(undefined);
-        apolloClient.refetchQueries({
-            include: [
-                getOperationName(QUESTIONS_FOR_LEAF_GROUP),
-            ].filter(isDefined),
-        });
+        retriggerQuestionnaireResponse();
     }, [
         hideAddQuestionPane,
+        retriggerQuestionnaireResponse,
     ]);
 
     const questionTypeRendererParams = useCallback((key: string, data: QuestionType) => ({

diff --git a/src/views/QuestionnaireEdit/queries.ts b/src/views/QuestionnaireEdit/queries.ts
@@ -74,4 +74,37 @@ export const QUESTION_INFO = gql`
     }
 `;
 
-export default QUESTION_INFO;
+export const QUESTIONNAIRE = gql`
+    ${LEAF_GROUPS_FRAGMENT}
+    ${CHOICE_COLLECTION_FRAGMENT}
+    query Questionnaire(
+        $projectId: ID!,
+        $questionnaireId: ID!,
+    ) {
+        private {
+            id
+            projectScope(pk: $projectId) {
+                id
+                project {
+                    title
+                    id
+                }
+                questionnaire(pk: $questionnaireId) {
+                    id
+                    title
+                    leafGroups {
+                        ...LeafGroups
+                    }
+                    choiceCollections {
+                        ...ChoiceCollections
+                    }
+                    requiredDuration
+                    totalRequiredDuration
+                    totalQuestions {
+                        visible
+                    }
+                }
+            }
+        }
+    }
+`;
-Original file line number
+Diff line change
@@ Expand Up / @@ -50,7 +50,6 @@ function TocRenderer(props: TocProps) { @@
                 onSelectedGroupsChange(val, childIds);
                 return;
             }
             onSelectedGroupsChange(val, [item.id]);
         }, [
             item,
@@ Expand Down @@