fix: squad post moderation list not updating

packages/shared/src/components/modals/squads/PostModerationModal.tsx

@@ -63,7 +63,7 @@ function PostModerationModal({
     post: sharedPost,
   });
   const isModerator = verifyPermission(squad, SourcePermissions.ModeratePost);
-  const { onDelete } = useSourceModerationList({ squad });
+  const { onDelete } = useSourceModerationList();
   const onDeleteClick = (postId: string) =>
     onDelete(postId).then(() => modalProps.onRequestClose(null));
 

packages/shared/src/components/sidebar/sections/NetworkSection.tsx

@@ -57,7 +57,7 @@ export const NetworkSection = ({
               bold
               className="rounded-6 bg-background-subtle px-1.5"
             >
-              {count}
+              {count >= 15 ? '15+' : count}
             </Typography>
           ),
         },

packages/shared/src/components/squads/SquadTabs.tsx

@@ -5,6 +5,7 @@ import { webappUrl } from '../../lib/constants';
 import { SourcePermissions } from '../../graphql/sources';
 import { verifyPermission } from '../../graphql/squads';
 import { useSquad } from '../../hooks';
+import { useSquadPendingPosts } from '../../hooks/squads/useSquadPendingPosts';
 
 export enum SquadTab {
   Settings = 'Settings',
@@ -20,10 +21,13 @@ export function SquadTabs({ active, handle }: SquadTabsProps): ReactElement {
   const { squad } = useSquad({
     handle,
   });
+  const { count } = useSquadPendingPosts({
+    squadId: squad?.id,
+  });
   const isModerator = verifyPermission(squad, SourcePermissions.ModeratePost);
   const squadLink = `${webappUrl}squads/${handle}`;
-  const pendingTabLabel = squad?.moderationPostCount
-    ? `${SquadTab.PendingPosts} (${squad?.moderationPostCount})`
+  const pendingTabLabel = count
+    ? `${SquadTab.PendingPosts} (${count})`
     : SquadTab.PendingPosts;
 
   const links = [

packages/shared/src/components/squads/moderation/SquadModerationList.tsx

@@ -20,9 +20,7 @@ export function SquadModerationList({
   squad,
   isModerator,
 }: SquadModerationListProps): ReactElement {
-  const moderate = useSourceModerationList({
-    squad,
-  });
+  const moderate = useSourceModerationList();
 
   const { data, isFetched, fetchNextPage, hasNextPage, isPending } =
     useSquadPendingPosts({

packages/shared/src/components/squads/moderation/useSourceModerationItem.ts

@@ -50,7 +50,7 @@ export const useSourceModerationItem = ({
     verifyPermission(squad, SourcePermissions.ModeratePost) ||
     !searchParams?.get('handle');
 
-  const { onDelete } = useSourceModerationList({ squad });
+  const { onDelete } = useSourceModerationList();
 
   return {
     context: {

packages/shared/src/hooks/squads/useSourceModerationList.ts

@@ -1,4 +1,3 @@
-import type { InfiniteData } from '@tanstack/react-query';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import type { MouseEventHandler } from 'react';
 import { useCallback } from 'react';
@@ -18,12 +17,10 @@ import { LazyModal } from '../../components/modals/common/types';
 import { usePrompt } from '../usePrompt';
 import { useToastNotification } from '../useToastNotification';
 import { generateQueryKey, RequestKey } from '../../lib/query';
-import type { Squad } from '../../graphql/sources';
 import { LogEvent } from '../../lib/log';
 import { useLogContext } from '../../contexts/LogContext';
 import { postLogEvent } from '../../lib/feed';
 import type { Post } from '../../graphql/posts';
-import type { Connection } from '../../graphql/common';
 import { useAuthContext } from '../../contexts/AuthContext';
 
 export const rejectReasons: { value: PostModerationReason; label: string }[] = [
@@ -33,7 +30,7 @@ export const rejectReasons: { value: PostModerationReason; label: string }[] = [
   },
   {
     value: PostModerationReason.Violation,
-    label: 'Violates the Squad’s code of conduct',
+    label: "Violates the Squad's code of conduct",
   },
   {
     value: PostModerationReason.Promotional,
@@ -88,66 +85,14 @@ const getLogPostsFromModerationArray = (data: SourcePostModeration[]) => {
   }));
 };
 
-export const useSourceModerationList = ({
-  squad,
-}: {
-  squad?: Squad;
-}): UseSourceModerationList => {
+export const useSourceModerationList = (): UseSourceModerationList => {
   const { openModal, closeModal } = useLazyModal();
   const { displayToast } = useToastNotification();
   const { showPrompt } = usePrompt();
   const { logEvent } = useLogContext();
   const { user } = useAuthContext();
   const queryClient = useQueryClient();
-  const listQueryKey = generateQueryKey(
-    RequestKey.SquadPostRequests,
-    user,
-    squad?.id,
-  );
-  const squadQueryKey = generateQueryKey(RequestKey.Squad, user, squad?.handle);
-
-  const handleOptimistic = useCallback(
-    (data: SquadPostModerationProps) => {
-      const currentData =
-        queryClient.getQueryData<
-          InfiniteData<Connection<SourcePostModeration>>
-        >(listQueryKey);
-
-      const currentSquad = queryClient.getQueryData<Squad | null>(
-        squadQueryKey,
-      );
-      if (currentSquad) {
-        queryClient.setQueryData<Squad>(squadQueryKey, (sqd) => {
-          return {
-            ...sqd,
-            moderationPostCount:
-              currentSquad.moderationPostCount - data.postIds.length,
-          };
-        });
-      }
-
-      queryClient.setQueryData<InfiniteData<Connection<SourcePostModeration>>>(
-        listQueryKey,
-        (oldData) => {
-          if (!oldData) {
-            return oldData;
-          }
-          return {
-            ...oldData,
-            pages: oldData.pages.map((page) => ({
-              ...page,
-              edges: page.edges.filter(
-                (edge) => !data.postIds.includes(edge.node.id),
-              ),
-            })),
-          };
-        },
-      );
-
-      return { currentData, currentSquad };
-    },
-    [queryClient, listQueryKey, squadQueryKey],
-  );
+  const queryKey = generateQueryKey(RequestKey.SquadPostRequests, user);
 
   const {
     mutateAsync: onApprove,
@@ -156,22 +101,22 @@ export const useSourceModerationList = ({
   } = useMutation({
     mutationFn: ({ postIds }: SquadPostModerationProps) =>
       squadApproveMutation(postIds),
-    onMutate: (data) => handleOptimistic(data),
     onSuccess: (data) => {
       displayToast('Post(s) approved successfully');
+      queryClient.invalidateQueries({
+        queryKey,
+      });
       getLogPostsFromModerationArray(data).forEach((post) => {
         logEvent(postLogEvent(LogEvent.ApprovePost, post));
       });
     },
-    onError: (_, variables, context) => {
+    onError: (_, variables) => {
       if (variables.postIds.length > 50) {
         displayToast(
           'Failed to approve post(s). Please approve maximum 50 posts at a time',
         );
         return;
       }
-      queryClient.setQueryData(listQueryKey, context?.currentData);
-      queryClient.setQueryData(squadQueryKey, context?.currentSquad);
       displayToast('Failed to approve post(s)');
     },
   });
@@ -204,16 +149,17 @@ export const useSourceModerationList = ({
     isSuccess: isSuccessReject,
   } = useMutation({
     mutationFn: (props: SquadPostRejectionProps) => squadRejectMutation(props),
-    onMutate: (data) => handleOptimistic(data),
     onSuccess: (data) => {
       displayToast('Post(s) declined successfully');
+      queryClient.invalidateQueries({
+        queryKey,
+      });
       getLogPostsFromModerationArray(data).forEach((post) => {
         logEvent(postLogEvent(LogEvent.RejectPost, post));
       });
     },
-    onError: (_, __, context) => {
-      queryClient.setQueryData(listQueryKey, context.currentData);
-      queryClient.setQueryData(squadQueryKey, context.currentSquad);
+    onError: () => {
+      displayToast('Failed to decline post(s)');
     },
   });
 
@@ -241,6 +187,12 @@ export const useSourceModerationList = ({
     mutationFn: (postId: string) => deletePendingPostMutation(postId),
     onSuccess: () => {
       displayToast('Post deleted successfully');
+      queryClient.invalidateQueries({
+        queryKey,
+      });
+    },
+    onError: () => {
+      displayToast('Failed to delete post');
     },
   });