fix: invalidate queries better

apps/start/src/components/settings/delete-project.tsx

@@ -1,12 +1,10 @@
-'use client';
-
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 import { Button } from '@/components/ui/button';
 import { Widget, WidgetBody, WidgetHead } from '@/components/widget';
 import { handleError, useTRPC } from '@/integrations/trpc/react';
 import { showConfirm } from '@/modals';
 import type { IServiceProjectWithClients } from '@openpanel/db';
-import { useMutation } from '@tanstack/react-query';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { useRouter } from '@tanstack/react-router';
 import { addHours, format, startOfHour } from 'date-fns';
 import { TrashIcon } from 'lucide-react';
@@ -18,12 +16,17 @@ export default function DeleteProject({ project }: Props) {
   const router = useRouter();
   const trpc = useTRPC();
 
+  const queryClient = useQueryClient();
   const mutation = useMutation(
     trpc.project.delete.mutationOptions({
       onError: handleError,
       onSuccess: () => {
-        toast.success('Project updated');
-        router.invalidate();
+        toast.success('Project is scheduled for deletion');
+        queryClient.invalidateQueries(
+          trpc.project.getProjectWithClients.queryFilter({
+            projectId: project.id,
+          }),
+        );
       },
     }),
   );
@@ -32,8 +35,12 @@ export default function DeleteProject({ project }: Props) {
     trpc.project.cancelDeletion.mutationOptions({
       onError: handleError,
       onSuccess: () => {
-        toast.success('Project updated');
-        router.invalidate();
+        toast.success('Project deletion cancelled');
+        queryClient.invalidateQueries(
+          trpc.project.getProjectWithClients.queryFilter({
+            projectId: project.id,
+          }),
+        );
       },
     }),
   );

apps/start/src/components/settings/edit-project-details.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import AnimateHeight from '@/components/animate-height';
 import { InputWithLabel, WithLabel } from '@/components/forms/input-with-label';
 import TagInput from '@/components/forms/tag-input';
@@ -13,7 +11,7 @@ import { handleError, useTRPC } from '@/integrations/trpc/react';
 import { zodResolver } from '@hookform/resolvers/zod';
 import type { IServiceProjectWithClients } from '@openpanel/db';
 import { zProject } from '@openpanel/validation';
-import { useMutation } from '@tanstack/react-query';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { SaveIcon } from 'lucide-react';
 import { useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
@@ -44,11 +42,22 @@ export default function EditProjectDetails({ project }: Props) {
     },
   });
   const trpc = useTRPC();
+  const queryClient = useQueryClient();
   const mutation = useMutation(
     trpc.project.update.mutationOptions({
       onError: handleError,
       onSuccess: () => {
         toast.success('Project updated');
+        queryClient.invalidateQueries(
+          trpc.project.list.queryFilter({
+            organizationId: project.organizationId,
+          }),
+        );
+        queryClient.invalidateQueries(
+          trpc.project.getProjectWithClients.queryFilter({
+            projectId: project.id,
+          }),
+        );
       },
     }),
   );

apps/start/src/components/settings/edit-project-filters.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { WithLabel } from '@/components/forms/input-with-label';
 import TagInput from '@/components/forms/tag-input';
 import { Button } from '@/components/ui/button';