From b4d19862d7d9f043d9af5f574a38074da0f9d168 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Fri, 15 Nov 2024 10:02:36 +0100
Subject: [PATCH] 1-3122: refetch CR notifs on actions (#8767)

Refetch actionable change requests whenever you perform an action on a
change request. This ensures that the change request notifications are
up-to-date for you. Of course, it can still get out of sync if someone
else performs an action on the change request, but that's more of an
edge case.
---
 .../ChangeRequestOverview/ChangeRequestOverview.tsx       | 8 ++++++++
 .../useActionableChangeRequests.ts                        | 4 +++-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestOverview.tsx b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestOverview.tsx
index 3dca721f8f..08d42c469d 100644
--- a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestOverview.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestOverview.tsx
@@ -33,6 +33,7 @@ import {
 import { ScheduleChangeRequestDialog } from './ChangeRequestScheduledDialogs/ScheduleChangeRequestDialog';
 import type { PlausibleChangeRequestState } from '../changeRequest.types';
 import { useNavigate } from 'react-router-dom';
+import { useActionableChangeRequests } from 'hooks/api/getters/useActionableChangeRequests/useActionableChangeRequests';
 
 const StyledAsideBox = styled(Box)(({ theme }) => ({
     width: '30%',
@@ -89,6 +90,8 @@ export const ChangeRequestOverview: FC = () => {
     const { user } = useAuthUser();
     const { isAdmin } = useContext(AccessContext);
     const [commentText, setCommentText] = useState('');
+    const { refetch: refetchActionableChangeRequests } =
+        useActionableChangeRequests(projectId);
 
     const id = useRequiredPathParam('id');
     const { data: changeRequest, refetchChangeRequest } = useChangeRequest(
@@ -130,6 +133,7 @@ export const ChangeRequestOverview: FC = () => {
             setShowApplyScheduledDialog(false);
             await refetchChangeRequest();
             refetchChangeRequestOpen();
+            refetchActionableChangeRequests();
             setToastData({
                 type: 'success',
                 title: 'Success',
@@ -152,6 +156,7 @@ export const ChangeRequestOverview: FC = () => {
             setShowScheduleChangeDialog(false);
             refetchChangeRequest();
             refetchChangeRequestOpen();
+            refetchActionableChangeRequests();
             setToastData({
                 type: 'success',
                 title: 'Success',
@@ -191,6 +196,7 @@ export const ChangeRequestOverview: FC = () => {
             setShowCancelDialog(false);
             await refetchChangeRequest();
             refetchChangeRequestOpen();
+            refetchActionableChangeRequests();
             setToastData({
                 type: 'success',
                 title: 'Success',
@@ -219,6 +225,7 @@ export const ChangeRequestOverview: FC = () => {
                 text: 'Changes rejected',
             });
             refetchChangeRequestOpen();
+            refetchActionableChangeRequests();
         } catch (error: unknown) {
             setToastApiError(formatUnknownError(error));
         } finally {
@@ -233,6 +240,7 @@ export const ChangeRequestOverview: FC = () => {
                 state: 'Approved',
             });
             await refetchChangeRequest();
+            refetchActionableChangeRequests();
             refetchChangeRequestOpen();
             setToastData({
                 type: 'success',
diff --git a/frontend/src/hooks/api/getters/useActionableChangeRequests/useActionableChangeRequests.ts b/frontend/src/hooks/api/getters/useActionableChangeRequests/useActionableChangeRequests.ts
index 59f59238a1..0a0ad5a216 100644
--- a/frontend/src/hooks/api/getters/useActionableChangeRequests/useActionableChangeRequests.ts
+++ b/frontend/src/hooks/api/getters/useActionableChangeRequests/useActionableChangeRequests.ts
@@ -5,12 +5,13 @@ import { useEnterpriseSWR } from '../useEnterpriseSWR/useEnterpriseSWR';
 
 interface IUseActionableChangeRequestsOutput {
     total?: number;
+    refetch: () => void;
 }
 
 export const useActionableChangeRequests = (
     projectId: string,
 ): IUseActionableChangeRequestsOutput => {
-    const { data } = useEnterpriseSWR<ActionableChangeRequestsSchema>(
+    const { data, mutate } = useEnterpriseSWR<ActionableChangeRequestsSchema>(
         { total: 0 },
         formatApiPath(
             `api/admin/projects/${projectId}/change-requests/actionable`,
@@ -20,6 +21,7 @@ export const useActionableChangeRequests = (
 
     return {
         total: data?.total,
+        refetch: mutate,
     };
 };