From 341c692dcb8a54ef36d287e5d409b7c73bf1c0d4 Mon Sep 17 00:00:00 2001 From: Sean Sundberg Date: Wed, 20 Sep 2023 12:57:19 -0500 Subject: [PATCH] Fix caching for case details (#46) Signed-off-by: Sean Sundberg --- .../kyc-case-management.graphql.ts | 33 ++++++++++++------- .../KYCCaseOutreach/KYCCaseOutreach.tsx | 7 +++- .../KYCCasePending/KYCCasePending.tsx | 4 +++ .../KYCCaseReview/KYCCaseReview.tsx | 7 +++- 4 files changed, 38 insertions(+), 13 deletions(-) diff --git a/src/services/kyc-case-management/kyc-case-management.graphql.ts b/src/services/kyc-case-management/kyc-case-management.graphql.ts index 6c33302..41b8ed9 100644 --- a/src/services/kyc-case-management/kyc-case-management.graphql.ts +++ b/src/services/kyc-case-management/kyc-case-management.graphql.ts @@ -402,6 +402,13 @@ export class KycCaseManagementGraphql implements KycCaseManagementApi { this.client = getApolloClient(); this.subject = new BehaviorSubject([]) this.caseNotifySubject = new Subject(); + + this.client.onClearStore(async () => { + console.log('Store cleared'); + }) + this.client.onResetStore(async () => { + console.log('Store reset') + }) } listCases(): Promise { @@ -456,7 +463,7 @@ export class KycCaseManagementGraphql implements KycCaseManagementApi { mutation: CREATE_CASE, variables: {customer}, refetchQueries: [{query: LIST_CASES}], - awaitRefetchQueries: true + awaitRefetchQueries: true, }) .then(async (result: FetchResult<{createCase: KycCaseModel}>) => { this.caseNotifySubject.next(result.data?.createCase.id || ''); @@ -470,7 +477,7 @@ export class KycCaseManagementGraphql implements KycCaseManagementApi { .mutate<{addDocumentToCase: DocumentModel}>({ mutation: ADD_DOCUMENT_TO_CASE, variables: {caseId, documentName, document}, - refetchQueries: [{query: LIST_CASES}], + refetchQueries: [{query: LIST_CASES}, this.buildGetCaseQuery(caseId)], awaitRefetchQueries: true }) .then(async (result: FetchResult<{addDocumentToCase: DocumentModel}>) => { @@ -485,7 +492,7 @@ export class KycCaseManagementGraphql implements KycCaseManagementApi { .mutate<{approveCase: KycCaseModel}>({ mutation: APPROVE_CASE, variables: {'case': input}, - refetchQueries: [{query: LIST_CASES}, {query: GET_CASE, variables: {caseId: input.id}}], + refetchQueries: [{query: LIST_CASES}, this.buildGetCaseQuery(input.id)], awaitRefetchQueries: true }) .then(async (result: FetchResult<{approveCase: KycCaseModel}>) => { @@ -500,8 +507,8 @@ export class KycCaseManagementGraphql implements KycCaseManagementApi { .mutate<{reviewCase: KycCaseModel}>({ mutation: REVIEW_CASE, variables: {'case': input}, - refetchQueries: [{query: LIST_CASES}, {query: GET_CASE, variables: {caseId: input.id}}], - awaitRefetchQueries: true + refetchQueries: [{query: LIST_CASES}, this.buildGetCaseQuery(input.id)], + awaitRefetchQueries: true, }) .then(async (result: FetchResult<{reviewCase: KycCaseModel}>) => { this.caseNotifySubject.next(result.data?.reviewCase.id || ''); @@ -510,12 +517,16 @@ export class KycCaseManagementGraphql implements KycCaseManagementApi { }) as Promise } + buildGetCaseQuery(caseId: string) { + return { + query: GET_CASE, + variables: {caseId}, + } + } + getCase(caseId: string): Promise { return this.client - .query<{getCase: KycCaseModel}>({ - query: GET_CASE, - variables: {caseId}, - }) + .query<{getCase: KycCaseModel}>(this.buildGetCaseQuery(caseId)) .then(result => result.data.getCase) .catch(err => { console.log('Error getting case: ' + caseId, err) @@ -541,7 +552,7 @@ export class KycCaseManagementGraphql implements KycCaseManagementApi { .mutate<{removeDocumentFromCase: KycCaseModel}>({ mutation: REMOVE_DOCUMENT_FROM_CASE, variables: {caseId, documentId}, - refetchQueries: [{query: LIST_CASES}, {query: GET_CASE, variables: {caseId}}], + refetchQueries: [{query: LIST_CASES}, this.buildGetCaseQuery(caseId)], awaitRefetchQueries: true }) .then(async (result: FetchResult<{removeDocumentFromCase: KycCaseModel}>) => { @@ -559,7 +570,7 @@ export class KycCaseManagementGraphql implements KycCaseManagementApi { .mutate<{processCase: KycCaseModel}>({ mutation: PROCESS_CASE, variables: {caseId}, - refetchQueries: [{query: LIST_CASES}, {query: GET_CASE, variables: {caseId}}], + refetchQueries: [{query: LIST_CASES}, this.buildGetCaseQuery(caseId)], awaitRefetchQueries: true }) .then(async (result: FetchResult<{processCase: KycCaseModel}>) => { diff --git a/src/views/KYC/KYCCaseDetail/KYCCaseOutreach/KYCCaseOutreach.tsx b/src/views/KYC/KYCCaseDetail/KYCCaseOutreach/KYCCaseOutreach.tsx index 789229e..1cc5aae 100644 --- a/src/views/KYC/KYCCaseDetail/KYCCaseOutreach/KYCCaseOutreach.tsx +++ b/src/views/KYC/KYCCaseDetail/KYCCaseOutreach/KYCCaseOutreach.tsx @@ -10,6 +10,8 @@ import {ApproveCaseModel, createEmptyApproveCase, KycCaseModel,} from "../../../ import {KycCaseManagementApi, kycCaseManagementApi} from "../../../../services"; import {handleFileUploaderChange} from "../util"; import {leftOuter} from "../../../../utils"; +import {useSetAtom} from "jotai"; +import {selectedKycCaseAtom} from "../../../../atoms"; export interface KYCCaseReviewProps { currentCase: KycCaseModel; @@ -18,6 +20,7 @@ export interface KYCCaseReviewProps { export const KYCCaseOutreach: React.FunctionComponent = (props: KYCCaseReviewProps) => { const navigate = useNavigate(); + const setSelectedCase = useSetAtom(selectedKycCaseAtom) const [updatedCase, setUpdatedCase] = useState(createEmptyApproveCase(props.currentCase.id)) const [fileStatus, setFileStatus] = useState<'edit' | 'complete' | 'uploading'>('edit') @@ -30,7 +33,9 @@ export const KYCCaseOutreach: React.FunctionComponent = (pro const handleSubmit = (event: {preventDefault: () => void}) => { event.preventDefault(); - service.approveCase(updatedCase).catch(err => console.error(err)); + service.approveCase(updatedCase) + .then(() => setSelectedCase(undefined)) + .catch(err => console.error(err)); navigate(props.returnUrl); } diff --git a/src/views/KYC/KYCCaseDetail/KYCCasePending/KYCCasePending.tsx b/src/views/KYC/KYCCaseDetail/KYCCasePending/KYCCasePending.tsx index d9815f5..b57c579 100644 --- a/src/views/KYC/KYCCaseDetail/KYCCasePending/KYCCasePending.tsx +++ b/src/views/KYC/KYCCaseDetail/KYCCasePending/KYCCasePending.tsx @@ -14,6 +14,8 @@ import { } from "../../../../components"; import {KycCaseModel} from "../../../../models"; import {kycCaseManagementApi} from "../../../../services"; +import {useSetAtom} from "jotai"; +import {selectedKycCaseAtom} from "../../../../atoms"; export interface KYCCasePendingProps { currentCase: KycCaseModel; @@ -22,6 +24,7 @@ export interface KYCCasePendingProps { export const KYCCasePending: React.FunctionComponent = (props: KYCCasePendingProps) => { const navigate = useNavigate(); + const setSelectedCase = useSetAtom(selectedKycCaseAtom) const service = kycCaseManagementApi(); const handleCancel = () => { @@ -30,6 +33,7 @@ export const KYCCasePending: React.FunctionComponent = (pro const handleRefresh = () => { service.processCase(props.currentCase.id) + .then(kycCase => setSelectedCase(kycCase)) .catch(err => console.error('Error processing case: ', {err})) } diff --git a/src/views/KYC/KYCCaseDetail/KYCCaseReview/KYCCaseReview.tsx b/src/views/KYC/KYCCaseDetail/KYCCaseReview/KYCCaseReview.tsx index 2f282d4..0b35d32 100644 --- a/src/views/KYC/KYCCaseDetail/KYCCaseReview/KYCCaseReview.tsx +++ b/src/views/KYC/KYCCaseDetail/KYCCaseReview/KYCCaseReview.tsx @@ -11,6 +11,8 @@ import {createEmptyReviewCase, KycCaseModel, ReviewCaseModel} from "../../../../ import {KycCaseManagementApi, kycCaseManagementApi} from "../../../../services"; import {handleFileUploaderChange} from "../util"; import {leftOuter} from "../../../../utils"; +import {useSetAtom} from "jotai"; +import {selectedKycCaseAtom} from "../../../../atoms"; export interface KYCCaseReviewProps { currentCase: KycCaseModel; @@ -19,6 +21,7 @@ export interface KYCCaseReviewProps { export const KYCCaseReview: React.FunctionComponent = (props: KYCCaseReviewProps) => { const navigate = useNavigate(); + const setSelectedCase = useSetAtom(selectedKycCaseAtom) const [updatedCase, setUpdatedCase] = useState(createEmptyReviewCase(props.currentCase.id)) const [fileStatus, setFileStatus] = useState<'edit' | 'complete' | 'uploading'>('edit') @@ -31,7 +34,9 @@ export const KYCCaseReview: React.FunctionComponent = (props const handleSubmit = (event: {preventDefault: () => void}) => { event.preventDefault(); - service.reviewCase(updatedCase).catch(err => console.error(err)); + service.reviewCase(updatedCase) + .then(() => setSelectedCase(undefined)) + .catch(err => console.error(err)); navigate(props.returnUrl); }