Fix caching for case details (#46)

Signed-off-by: Sean Sundberg <[email protected]>
ibm-ecosystem-engineering · Sep 20, 2023 · 341c692 · 341c692
1 parent 11ded2f
commit 341c692
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 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
@@ -402,6 +402,13 @@ export class KycCaseManagementGraphql implements KycCaseManagementApi {
         this.client = getApolloClient();
         this.subject = new BehaviorSubject<KycCaseModel[]>([])
         this.caseNotifySubject = new Subject<string>();
+
+        this.client.onClearStore(async () => {
+            console.log('Store cleared');
+        })
+        this.client.onResetStore(async () => {
+            console.log('Store reset')
+        })
     }
 
     listCases(): Promise<KycCaseModel[]> {
@@ -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<KycCaseModel>
     }
 
+    buildGetCaseQuery(caseId: string) {
+        return {
+            query: GET_CASE,
+            variables: {caseId},
+        }
+    }
+
     getCase(caseId: string): Promise<KycCaseModel> {
         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
@@ -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<KYCCaseReviewProps> = (props: KYCCaseReviewProps) => {
     const navigate = useNavigate();
+    const setSelectedCase = useSetAtom(selectedKycCaseAtom)
     const [updatedCase, setUpdatedCase] = useState<ApproveCaseModel>(createEmptyApproveCase(props.currentCase.id))
     const [fileStatus, setFileStatus] = useState<'edit' | 'complete' | 'uploading'>('edit')
 
@@ -30,7 +33,9 @@ export const KYCCaseOutreach: React.FunctionComponent<KYCCaseReviewProps> = (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
@@ -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<KYCCasePendingProps> = (props: KYCCasePendingProps) => {
     const navigate = useNavigate();
+    const setSelectedCase = useSetAtom(selectedKycCaseAtom)
     const service = kycCaseManagementApi();
 
     const handleCancel = () => {
@@ -30,6 +33,7 @@ export const KYCCasePending: React.FunctionComponent<KYCCasePendingProps> = (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
@@ -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<KYCCaseReviewProps> = (props: KYCCaseReviewProps) => {
     const navigate = useNavigate();
+    const setSelectedCase = useSetAtom(selectedKycCaseAtom)
     const [updatedCase, setUpdatedCase] = useState<ReviewCaseModel>(createEmptyReviewCase(props.currentCase.id))
     const [fileStatus, setFileStatus] = useState<'edit' | 'complete' | 'uploading'>('edit')
 
@@ -31,7 +34,9 @@ export const KYCCaseReview: React.FunctionComponent<KYCCaseReviewProps> = (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);
     }