From 86d482f18a10cd898fafe86ab62256f887c32d26 Mon Sep 17 00:00:00 2001
From: Francis Cao <franciscao@gmail.com>
Date: Tue, 6 Feb 2024 20:53:13 -0800
Subject: [PATCH] make website/team add consistent

---
 src/app/(main)/settings/teams/TeamAddForm.tsx | 20 +++++++++----------
 .../(main)/settings/teams/TeamsAddButton.tsx  | 15 +++++++++++---
 src/components/hooks/queries/useTeams.ts      |  4 +++-
 src/components/hooks/queries/useWebsites.ts   |  4 +---
 4 files changed, 25 insertions(+), 18 deletions(-)

diff --git a/src/app/(main)/settings/teams/TeamAddForm.tsx b/src/app/(main)/settings/teams/TeamAddForm.tsx
index 9bcf7840..c0fc7513 100644
--- a/src/app/(main)/settings/teams/TeamAddForm.tsx
+++ b/src/app/(main)/settings/teams/TeamAddForm.tsx
@@ -1,14 +1,13 @@
-import {
-  Form,
-  FormRow,
-  FormInput,
-  FormButtons,
-  TextField,
-  Button,
-  SubmitButton,
-} from 'react-basics';
-import { touch } from 'store/modified';
 import { useApi, useMessages } from 'components/hooks';
+import {
+  Button,
+  Form,
+  FormButtons,
+  FormInput,
+  FormRow,
+  SubmitButton,
+  TextField,
+} from 'react-basics';
 
 export function TeamAddForm({ onSave, onClose }: { onSave: () => void; onClose: () => void }) {
   const { formatMessage, labels } = useMessages();
@@ -20,7 +19,6 @@ export function TeamAddForm({ onSave, onClose }: { onSave: () => void; onClose:
   const handleSubmit = async (data: any) => {
     mutate(data, {
       onSuccess: async () => {
-        touch('teams');
         onSave?.();
         onClose?.();
       },
diff --git a/src/app/(main)/settings/teams/TeamsAddButton.tsx b/src/app/(main)/settings/teams/TeamsAddButton.tsx
index 871cdb76..15f541ea 100644
--- a/src/app/(main)/settings/teams/TeamsAddButton.tsx
+++ b/src/app/(main)/settings/teams/TeamsAddButton.tsx
@@ -1,10 +1,19 @@
-import { Button, Icon, Modal, ModalTrigger, Text } from 'react-basics';
+import { Button, Icon, Modal, ModalTrigger, Text, useToasts } from 'react-basics';
 import Icons from 'components/icons';
 import { useMessages } from 'components/hooks';
 import TeamAddForm from './TeamAddForm';
+import { messages } from 'components/messages';
+import { touch } from 'store/modified';
 
-export function TeamsAddButton({ onAdd }: { onAdd?: () => void }) {
+export function TeamsAddButton({ onSave }: { onSave?: () => void }) {
   const { formatMessage, labels } = useMessages();
+  const { showToast } = useToasts();
+
+  const handleSave = async () => {
+    showToast({ message: formatMessage(messages.saved), variant: 'success' });
+    touch('teams');
+    onSave?.();
+  };
 
   return (
     <ModalTrigger>
@@ -15,7 +24,7 @@ export function TeamsAddButton({ onAdd }: { onAdd?: () => void }) {
         <Text>{formatMessage(labels.createTeam)}</Text>
       </Button>
       <Modal title={formatMessage(labels.createTeam)}>
-        {(close: () => void) => <TeamAddForm onSave={onAdd} onClose={close} />}
+        {(close: () => void) => <TeamAddForm onSave={handleSave} onClose={close} />}
       </Modal>
     </ModalTrigger>
   );
diff --git a/src/components/hooks/queries/useTeams.ts b/src/components/hooks/queries/useTeams.ts
index 020c9915..3360a6c4 100644
--- a/src/components/hooks/queries/useTeams.ts
+++ b/src/components/hooks/queries/useTeams.ts
@@ -1,13 +1,15 @@
 import useApi from './useApi';
 import useFilterQuery from './useFilterQuery';
 import { useLogin } from 'components/hooks';
+import useModified from 'store/modified';
 
 export function useTeams(userId?: string) {
   const { get } = useApi();
   const { user } = useLogin();
+  const modified = useModified((state: any) => state?.teams);
 
   return useFilterQuery({
-    queryKey: ['teams', { userId: userId || user?.id }],
+    queryKey: ['teams', { userId: userId || user?.id, modified }],
     queryFn: (params: any) => {
       return get(`/teams`, params);
     },
diff --git a/src/components/hooks/queries/useWebsites.ts b/src/components/hooks/queries/useWebsites.ts
index bb3e9a2d..4f16e4d8 100644
--- a/src/components/hooks/queries/useWebsites.ts
+++ b/src/components/hooks/queries/useWebsites.ts
@@ -3,15 +3,13 @@ import { useFilterQuery } from './useFilterQuery';
 import { useLogin } from './useLogin';
 import useModified from 'store/modified';
 
-const selector = (state: any) => state?.websites;
-
 export function useWebsites(
   { userId, teamId }: { userId?: string; teamId?: string },
   params?: { [key: string]: string | number },
 ) {
   const { get } = useApi();
   const { user } = useLogin();
-  const modified = useModified(selector);
+  const modified = useModified((state: any) => state?.websites);
 
   return useFilterQuery({
     queryKey: ['websites', { userId, teamId, modified, ...params }],