fix: Refetch submission data when submitting submission (#4469)

* fix: Refetch submission data when submitting submission * fix: Use mutation for createSubmission and invalidate cache
safe-global · Nov 4, 2024 · fd29be1 · fd29be1
1 parent 8397b23
commit fd29be1
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 36 deletions.
diff --git a/src/features/targetedOutreach/components/OutreachPopup/index.tsx b/src/features/targetedOutreach/components/OutreachPopup/index.tsx
@@ -1,3 +1,5 @@
+import { useCreateSubmissionMutation, useGetSubmissionQuery } from '@/store/api/gateway'
+import { skipToken } from '@reduxjs/toolkit/query'
 import { useEffect, type ReactElement } from 'react'
 import { Avatar, Box, Button, Chip, IconButton, Link, Paper, Stack, ThemeProvider, Typography } from '@mui/material'
 import { Close } from '@mui/icons-material'
@@ -14,8 +16,6 @@ import SafeThemeProvider from '@/components/theme/SafeThemeProvider'
 import useChainId from '@/hooks/useChainId'
 import useSafeAddress from '@/hooks/useSafeAddress'
 import useWallet from '@/hooks/wallets/useWallet'
-import { createSubmission } from '@safe-global/safe-client-gateway-sdk'
-import useSubmission from '@/features/targetedOutreach/hooks/useSubmission'
 
 const OutreachPopup = (): ReactElement | null => {
   const dispatch = useAppDispatch()
@@ -24,7 +24,17 @@ const OutreachPopup = (): ReactElement | null => {
   const currentChainId = useChainId()
   const safeAddress = useSafeAddress()
   const wallet = useWallet()
-  const submission = useSubmission()
+  const [createSubmission] = useCreateSubmissionMutation()
+  const { data: submission } = useGetSubmissionQuery(
+    !wallet || !safeAddress
+      ? skipToken
+      : {
+          outreachId: ACTIVE_OUTREACH.id,
+          chainId: currentChainId,
+          safeAddress,
+          signerAddress: wallet?.address,
+        },
+  )
 
   const [askAgainLaterTimestamp, setAskAgainLaterTimestamp] = useSessionStorage<number>(OUTREACH_SS_KEY)
 
@@ -54,10 +64,10 @@ const OutreachPopup = (): ReactElement | null => {
   const handleOpenSurvey = async () => {
     if (wallet) {
       await createSubmission({
-        params: {
-          path: { outreachId: ACTIVE_OUTREACH.id, chainId: currentChainId, safeAddress, signerAddress: wallet.address },
-        },
-        body: { completed: true },
+        outreachId: ACTIVE_OUTREACH.id,
+        chainId: currentChainId,
+        safeAddress,
+        signerAddress: wallet.address,
       })
     }
     dispatch(closeOutreachBanner())

diff --git a/src/features/targetedOutreach/hooks/useSubmission.tsx b/src/features/targetedOutreach/hooks/useSubmission.tsx
diff --git a/src/store/api/gateway/index.ts b/src/store/api/gateway/index.ts
@@ -5,7 +5,7 @@ import { asError } from '@/services/exceptions/utils'
 import { getDelegates } from '@safe-global/safe-gateway-typescript-sdk'
 import type { DelegateResponse } from '@safe-global/safe-gateway-typescript-sdk/dist/types/delegates'
 import { safeOverviewEndpoints } from './safeOverviews'
-import { getSubmission } from '@safe-global/safe-client-gateway-sdk'
+import { createSubmission, getSubmission } from '@safe-global/safe-client-gateway-sdk'
 
 async function buildQueryFn<T>(fn: () => Promise<T>) {
   try {
@@ -18,6 +18,7 @@ async function buildQueryFn<T>(fn: () => Promise<T>) {
 export const gatewayApi = createApi({
   reducerPath: 'gatewayApi',
   baseQuery: fakeBaseQuery<Error>(),
+  tagTypes: ['Submissions'],
   endpoints: (builder) => ({
     getTransactionDetails: builder.query<TransactionDetails, { chainId: string; txId: string }>({
       queryFn({ chainId, txId }) {
@@ -43,6 +44,23 @@ export const gatewayApi = createApi({
           getSubmission({ params: { path: { outreachId, chainId, safeAddress, signerAddress } } }),
         )
       },
+      providesTags: ['Submissions'],
+    }),
+    createSubmission: builder.mutation<
+      createSubmission,
+      { outreachId: number; chainId: string; safeAddress: string; signerAddress: string }
+    >({
+      queryFn({ outreachId, chainId, safeAddress, signerAddress }) {
+        return buildQueryFn(() =>
+          createSubmission({
+            params: {
+              path: { outreachId, chainId, safeAddress, signerAddress },
+            },
+            body: { completed: true },
+          }),
+        )
+      },
+      invalidatesTags: ['Submissions'],
     }),
     ...safeOverviewEndpoints(builder),
   }),
@@ -54,6 +72,7 @@ export const {
   useLazyGetTransactionDetailsQuery,
   useGetDelegatesQuery,
   useGetSubmissionQuery,
+  useCreateSubmissionMutation,
   useGetSafeOverviewQuery,
   useGetMultipleSafeOverviewsQuery,
 } = gatewayApi
diff --git a/src/store/api/gateway/safeOverviews.ts b/src/store/api/gateway/safeOverviews.ts
@@ -113,7 +113,7 @@ type MultiOverviewQueryParams = {
   safes: SafeItem[]
 }
 
-export const safeOverviewEndpoints = (builder: EndpointBuilder<any, never, 'gatewayApi'>) => ({
+export const safeOverviewEndpoints = (builder: EndpointBuilder<any, 'Submissions', 'gatewayApi'>) => ({
   getSafeOverview: builder.query<SafeOverview | null, { safeAddress: string; walletAddress?: string; chainId: string }>(
     {
       async queryFn({ safeAddress, walletAddress, chainId }, { getState }) {