From e2835f2d26f70342c43594bb6392afc3a4661bbe Mon Sep 17 00:00:00 2001 From: Aditya Khatri Date: Fri, 18 Oct 2024 16:45:43 +0545 Subject: [PATCH] Add delete pillar analysis mutation --- .../Analysis/AnalysisPillar/index.tsx | 9 +- .../Analysis/PillarList/index.tsx | 82 +++++++++++++++++-- app/views/AnalysisDashboard/index.tsx | 7 -- 3 files changed, 79 insertions(+), 19 deletions(-) diff --git a/app/views/AnalysisDashboard/Analysis/AnalysisPillar/index.tsx b/app/views/AnalysisDashboard/Analysis/AnalysisPillar/index.tsx index dd4a90bba..a44c6bb09 100644 --- a/app/views/AnalysisDashboard/Analysis/AnalysisPillar/index.tsx +++ b/app/views/AnalysisDashboard/Analysis/AnalysisPillar/index.tsx @@ -18,13 +18,13 @@ import SmartButtonLikeLink from '#base/components/SmartButtonLikeLink'; import routes from '#base/configs/routes'; import { ProjectContext } from '#base/context/ProjectContext'; -import { AnalysisSummaryQuery } from '#generated/types'; +import { AnalysisPillarsQuery } from '#generated/types'; import { calcPercent } from '#utils/common'; import _ts from '#ts'; import styles from './styles.css'; -type AnalyticalStatement = NonNullable['analyticalStatements']>['results']>[number]; +type AnalyticalStatement = NonNullable['analysisPillars']>['results']>[number]>['statements']>[number]; const statementKeySelector = (item: AnalyticalStatement) => Number(item.id); @@ -34,7 +34,7 @@ export interface Props { statements?: AnalyticalStatement[] | null; title: string; createdAt: string; - onDelete: (value: number) => void; + onDelete: (value: string) => void; pendingPillarDelete: boolean; pillarId: string; projectId: string; @@ -75,8 +75,7 @@ function AnalysisPillar(props: Props) { } const onDeleteConfirmClick = useCallback(() => { - // TODO: Remove Number in pillarId - onDelete(Number(pillarId)); + onDelete(pillarId); }, [onDelete, pillarId]); const statementRendererParams = useCallback((_: number, data: AnalyticalStatement) => ({ diff --git a/app/views/AnalysisDashboard/Analysis/PillarList/index.tsx b/app/views/AnalysisDashboard/Analysis/PillarList/index.tsx index 9c6ccbdf9..7d58b3419 100644 --- a/app/views/AnalysisDashboard/Analysis/PillarList/index.tsx +++ b/app/views/AnalysisDashboard/Analysis/PillarList/index.tsx @@ -3,14 +3,21 @@ import { _cs } from '@togglecorp/fujs'; import { Pager, Container, + useAlert, ListView, Kraken, } from '@the-deep/deep-ui'; -import { gql, useQuery } from '@apollo/client'; +import { + gql, + useQuery, + useMutation, +} from '@apollo/client'; import { AnalysisPillarsQuery, AnalysisPillarsQueryVariables, + DeletePillarAnalysisMutation, + DeletePillarAnalysisMutationVariables, } from '#generated/types'; import AnalysisPillar, { Props as PillarComponentProps } from '../AnalysisPillar'; @@ -54,6 +61,21 @@ export const ANALYSIS_PILLARS = gql` } `; +const DELETE_PILLAR_ANALYSIS = gql` + mutation DeletePillarAnalysis( + $projectId: ID!, + $analysisPillarId: ID!, + ) { + project(id: $projectId) { + id + analysisPillarDelete(id: $analysisPillarId) { + ok + errors + } + } + } +`; + const MAX_ITEMS_PER_PAGE = 5; const keySelector = (item: PillarItem) => item.id; @@ -76,13 +98,10 @@ function AnalysisDetails(props: Props) { const [activePage, setActivePage] = useState(1); - const handleAnalysisPillarDelete = useCallback(() => { - console.log('here'); - }, []); - const { data: analysisPillarsData, loading: pillarsPending, + refetch: refetchPillarAnalyses, } = useQuery( ANALYSIS_PILLARS, { @@ -95,6 +114,55 @@ function AnalysisDetails(props: Props) { }, ); + const alert = useAlert(); + + const [ + deletePillarAnalysis, + { + loading: deletePillarAnalysisPending, + }, + ] = useMutation( + DELETE_PILLAR_ANALYSIS, + { + onCompleted: (response) => { + if (response?.project?.analysisPillarDelete?.ok) { + alert.show( + 'Successfully deleted pillar analysis.', + { variant: 'success' }, + ); + refetchPillarAnalyses(); + } else { + alert.show( + 'Failed to delete pillar analysis.', + { + variant: 'error', + }, + ); + } + }, + onError: () => { + alert.show( + 'Failed to delete pillar analysis.', + { + variant: 'error', + }, + ); + }, + }, + ); + + const handleAnalysisPillarDelete = useCallback((analysisPillarId: string) => { + deletePillarAnalysis({ + variables: { + projectId, + analysisPillarId, + }, + }); + }, [ + projectId, + deletePillarAnalysis, + ]); + const analysisPillarRendererParams = useCallback( (_: string, data: PillarItem): PillarComponentProps => ({ className: styles.pillar, @@ -108,14 +176,14 @@ function AnalysisDetails(props: Props) { projectId, title: data.title, totalEntries, - pendingPillarDelete: pillarsPending, + pendingPillarDelete: deletePillarAnalysisPending, }), [ + deletePillarAnalysisPending, handleAnalysisPillarDelete, totalEntries, createdAt, analysisId, projectId, - pillarsPending, ], ); diff --git a/app/views/AnalysisDashboard/index.tsx b/app/views/AnalysisDashboard/index.tsx index 6bbd0232c..f9d57d93f 100644 --- a/app/views/AnalysisDashboard/index.tsx +++ b/app/views/AnalysisDashboard/index.tsx @@ -120,13 +120,6 @@ export const ANALYSIS_SUMMARY = gql` title } } - analyticalStatements { - results { - id - entriesCount - statement - } - } } } `;