Fix type issues

the-deep · Sep 20, 2024 · 7ab476d · 7ab476d
1 parent abd44d9
commit 7ab476d
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 39 deletions.
diff --git a/app/views/AnalysisDashboard/AnalysisEditModal/PillarAnalysisRow/index.tsx b/app/views/AnalysisDashboard/AnalysisEditModal/PillarAnalysisRow/index.tsx
@@ -19,7 +19,7 @@ import {
 import _ts from '#ts';
 
 import { MatrixPillar } from '../utils';
-import { AnalysisPillar, UserMembersType } from '..';
+import { AnalysisPillarForm, UserMembersType } from '..';
 
 import styles from './styles.css';
 
@@ -29,14 +29,14 @@ const labelSelector = (d: MatrixPillar) => d.altTitle ?? d.title;
 const userKeySelector = (user: UserMembersType) => user.member.id;
 const userLabelSelector = (user: UserMembersType) => user.member?.displayName ?? '';
 
-type Value = PartialForm<AnalysisPillar>
+type Value = PartialForm<AnalysisPillarForm>
 const defaultValue: Value = {
     filters: [],
 };
 
 export interface Props {
     className?: string;
-    error: Error<AnalysisPillar> | undefined;
+    error: Error<AnalysisPillarForm> | undefined;
     index: number;
     matrixPillars?: MatrixPillar[];
     onChange: (value: SetValueArg<Value>, index: number) => void;
@@ -100,6 +100,7 @@ function PillarAnalysisRow(props: Props) {
                 onChange={onFieldChange}
                 options={matrixPillars}
                 placeholder={_ts('analysis.editModal', 'matrixPillarsPlaceholder')}
+                // FIXME: Need to fix
                 value={value.filters}
                 disabled={pending}
                 optionsPopupClassName={styles.optionsPopup}

diff --git a/app/views/AnalysisDashboard/AnalysisEditModal/index.tsx b/app/views/AnalysisDashboard/AnalysisEditModal/index.tsx
@@ -1,7 +1,6 @@
 import React, {
     useCallback,
     useContext,
-    useEffect,
     useMemo,
 } from 'react';
 import {
@@ -171,15 +170,19 @@ const USER_MEMBERS = gql`
 
 type PartialForm<T> = RawPartialForm<T, 'clientId'>;
 export type AnalysisPillar = NonNullable<NonNullable<NonNullable<NonNullable<UpdateAnalysisMutation['project']>['analysisUpdate']>['result']>['pillars']>[number];
+export type AnalysisPillarForm = Omit<AnalysisPillar, 'assignee' | 'filters'> & {
+    assignee: string,
+    filters: MatrixPillar['uniqueId'][],
+};
 export type UserMembersType = NonNullable<NonNullable<NonNullable<UserMembersQuery['project']>['userMembers']>['results']>[number];
-const analysisPillarKeySelector = (analysis: AnalysisPillar) => analysis.clientId;
+const analysisPillarKeySelector = (analysis: AnalysisPillarForm) => analysis.clientId;
 
 type FormType = {
     title?: string;
-    teamLead?: UserMembersType;
+    teamLead?: string;
     startDate?: string;
     endDate: string;
-    analysisPillar?: AnalysisPillar[];
+    analysisPillar?: AnalysisPillarForm[];
 }
 
 type PartialFormType = PartialForm<FormType>;
@@ -309,7 +312,6 @@ function AnalysisEditModal(props: AnalysisEditModalProps) {
     const alert = useAlert();
 
     const {
-        data: analysisDetailData,
         loading: analysisDetailLoading,
     } = useQuery<AnalysisDetailQuery, AnalysisDetailQueryVariables>(
         ANALYSIS_DETAIL,
@@ -318,34 +320,32 @@ function AnalysisEditModal(props: AnalysisEditModalProps) {
                 projectId,
                 analysisId: analysisToEdit,
             },
-            skip: !analysisToEdit,
+            onCompleted: (response) => {
+                const {
+                    analysis,
+                } = response?.project || {};
+                if (!analysis) {
+                    return;
+                }
+
+                const formData: PartialForm<FormType> = {
+                    title: analysis.title,
+                    startDate: analysis?.startDate || undefined,
+                    endDate: analysis?.endDate,
+                    teamLead: analysis.teamLead.id,
+                    analysisPillar: analysis.pillars?.map((pillar: AnalysisPillar) => ({
+                        analysisId: pillar.analysisId,
+                        clientId: pillar.clientId,
+                        title: pillar.title,
+                        assignee: pillar.assignee.id,
+                        filters: pillar.filters?.map((item) => item.unique_id) as MatrixPillar['uniqueId'][],
+                    })),
+                };
+                setValue(formData);
+            },
         },
     );
 
-    useEffect(() => {
-        if (analysisDetailData?.project?.analysis && analysisToEdit) {
-            const analysis = analysisDetailData.project.analysis;
-            const formData: PartialForm<FormType> = {
-                title: analysis.title,
-                startDate: analysis?.startDate || undefined,
-                endDate: analysis?.endDate,
-                teamLead: analysis.teamLead.id,
-                analysisPillar: analysis.pillars?.map((pillar: AnalysisPillar) => ({
-                    analysisId: pillar.analysisId,
-                    clientId: pillar.clientId,
-                    title: pillar.title,
-                    assignee: pillar.assignee.id,
-                    filters: pillar.filters,
-                })),
-            };
-            setValue(formData);
-        }
-    }, [
-        analysisDetailData,
-        analysisToEdit,
-        setValue,
-    ]);
-
     const variables = useMemo(
         (): UserMembersQueryVariables | undefined => (
             (project) ? ({
@@ -421,7 +421,7 @@ function AnalysisEditModal(props: AnalysisEditModalProps) {
 
     const rowRendererParams: (
         key: string,
-        data: Partial<AnalysisPillar>,
+        data: Partial<AnalysisPillarForm>,
         index: number,
     ) => PillarAnalysisProps = React.useCallback(
         (id, data, index) => ({
@@ -531,7 +531,7 @@ function AnalysisEditModal(props: AnalysisEditModalProps) {
                 name="teamLead"
                 options={usersListResponse?.project?.userMembers?.results}
                 placeholder={_ts('analysis.editModal', 'teamLeadPlaceholder')}
-                value={value.teamLead?.id}
+                value={value.teamLead}
                 error={error?.teamLead}
                 onChange={setFieldValue}
                 disabled={pending}

diff --git a/app/views/AnalysisDashboard/index.tsx b/app/views/AnalysisDashboard/index.tsx
@@ -223,7 +223,7 @@ function AnalysisDashboard(props: AnalysisDashboardProps) {
         project,
     } = useContext(ProjectContext);
 
-    const activeProject = project?.id ? +project.id : undefined;
+    const activeProject = project?.id ? project.id : undefined;
 
     const [
         showAnalysisAddModal,
@@ -233,7 +233,7 @@ function AnalysisDashboard(props: AnalysisDashboardProps) {
 
     const alert = useAlert();
 
-    const [activePage, setActivePage] = useState<number | undefined>();
+    const [activePage, setActivePage] = useState<number | undefined>(1);
     const [analysisToEdit, setAnalysisToEdit] = useState<string>();
     const [dateRangeFilter, setDateRangeFilter] = useState<Filter | undefined>(undefined);
 
@@ -560,11 +560,11 @@ function AnalysisDashboard(props: AnalysisDashboardProps) {
                     messageShown
                 />
             </Container>
-            {showAnalysisAddModal && activeProject && (
+            {showAnalysisAddModal && activeProject && analysisToEdit && (
                 <AnalysisEditModal
                     onSuccess={handleAnalysisEditSuccess}
                     onModalClose={setModalHidden}
-                    projectId={String(activeProject)}
+                    projectId={activeProject}
                     analysisToEdit={analysisToEdit}
                 />
             )}