From fd29be149a7ee911658e4b101d04b68f5bbe413c Mon Sep 17 00:00:00 2001
From: Usame Algan <5880855+usame-algan@users.noreply.github.com>
Date: Mon, 4 Nov 2024 15:52:28 +0100
Subject: [PATCH] fix: Refetch submission data when submitting submission
 (#4469)

* fix: Refetch submission data when submitting submission

* fix: Use mutation for createSubmission and invalidate cache
---
 .../components/OutreachPopup/index.tsx        | 24 ++++++++++++-----
 .../targetedOutreach/hooks/useSubmission.tsx  | 27 -------------------
 src/store/api/gateway/index.ts                | 21 ++++++++++++++-
 src/store/api/gateway/safeOverviews.ts        |  2 +-
 4 files changed, 38 insertions(+), 36 deletions(-)
 delete mode 100644 src/features/targetedOutreach/hooks/useSubmission.tsx

diff --git a/src/features/targetedOutreach/components/OutreachPopup/index.tsx b/src/features/targetedOutreach/components/OutreachPopup/index.tsx
index 08b468c436..f635d3947e 100644
--- 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
deleted file mode 100644
index 0f89b099fc..0000000000
--- a/src/features/targetedOutreach/hooks/useSubmission.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { useGetSubmissionQuery } from '@/store/slices'
-import { ACTIVE_OUTREACH } from '../constants'
-import useChainId from '@/hooks/useChainId'
-import useSafeAddress from '@/hooks/useSafeAddress'
-import useWallet from '@/hooks/wallets/useWallet'
-import { skipToken } from '@reduxjs/toolkit/query'
-
-const useSubmission = () => {
-  const currentChainId = useChainId()
-  const safeAddress = useSafeAddress()
-  const wallet = useWallet()
-
-  const { data } = useGetSubmissionQuery(
-    !wallet || !safeAddress
-      ? skipToken
-      : {
-          outreachId: ACTIVE_OUTREACH.id,
-          chainId: currentChainId,
-          safeAddress,
-          signerAddress: wallet?.address,
-        },
-  )
-
-  return data
-}
-
-export default useSubmission
diff --git a/src/store/api/gateway/index.ts b/src/store/api/gateway/index.ts
index d626c91d9f..82f8241c70 100644
--- 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
index 23eaf2d4ca..852ec14a00 100644
--- 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 }) {