Refactored forms and pages.

src/app/(main)/settings/teams/TeamAddForm.js

@@ -8,6 +8,7 @@ import {
   Button,
   SubmitButton,
 } from 'react-basics';
+import { setValue } from 'store/cache';
 import useApi from 'components/hooks/useApi';
 import useMessages from 'components/hooks/useMessages';
 
@@ -20,8 +21,9 @@ export function TeamAddForm({ onSave, onClose }) {
   const handleSubmit = async data => {
     mutate(data, {
       onSuccess: async () => {
-        onSave();
-        onClose();
+        setValue('teams', Date.now());
+        onSave?.();
+        onClose?.();
       },
     });
   };

src/app/(main)/settings/teams/TeamDeleteForm.js

@@ -1,6 +1,7 @@
 import { Button, Form, FormButtons, SubmitButton } from 'react-basics';
 import useApi from 'components/hooks/useApi';
 import useMessages from 'components/hooks/useMessages';
+import { setValue } from 'store/cache';
 
 export function TeamDeleteForm({ teamId, teamName, onSave, onClose }) {
   const { formatMessage, labels, messages, FormattedMessage } = useMessages();
@@ -10,8 +11,9 @@ export function TeamDeleteForm({ teamId, teamName, onSave, onClose }) {
   const handleSubmit = async data => {
     mutate(data, {
       onSuccess: async () => {
-        onSave();
-        onClose();
+        setValue('teams', Date.now());
+        onSave?.();
+        onClose?.();
       },
     });
   };

src/app/(main)/settings/teams/TeamsTable.js

@@ -25,16 +25,16 @@ export function TeamsTable({ data = [] }) {
 
           return (
             <>
+              {showDelete && <TeamDeleteButton teamId={id} teamName={name} />}
+              {!showDelete && <TeamLeaveButton teamId={id} teamName={name} />}
               <Link href={`/settings/teams/${id}`}>
                 <Button>
                   <Icon>
                     <Icons.Edit />
                   </Icon>
-                  <Text>{formatMessage(labels.view)}</Text>
+                  <Text>{formatMessage(labels.edit)}</Text>
                 </Button>
               </Link>
-              {showDelete && <TeamDeleteButton teamId={id} teamName={name} />}
-              {!showDelete && <TeamLeaveButton teamId={id} teamName={name} />}
             </>
           );
         }}

src/app/(main)/settings/teams/[id]/TeamWebsiteAddForm.js

@@ -4,7 +4,7 @@ import { Button, Form, FormButtons, GridColumn, Loading, SubmitButton, Toggle }
 import useMessages from 'components/hooks/useMessages';
 import WebsitesDataTable from '../../websites/WebsitesDataTable';
 
-export function TeamAddWebsiteForm({ teamId, onSave, onClose }) {
+export function TeamWebsiteAddForm({ teamId, onSave, onClose }) {
   const { formatMessage, labels } = useMessages();
   const { get, post, useQuery, useMutation } = useApi();
   const { mutate, error } = useMutation(data => post(`/teams/${teamId}/websites`, data));
@@ -57,4 +57,4 @@ export function TeamAddWebsiteForm({ teamId, onSave, onClose }) {
   );
 }
 
-export default TeamAddWebsiteForm;
+export default TeamWebsiteAddForm;

src/app/(main)/settings/teams/[id]/TeamWebsiteRemoveButton.js

@@ -7,15 +7,12 @@ export function TeamWebsiteRemoveButton({ teamId, websiteId, onSave }) {
   const { del, useMutation } = useApi();
   const { mutate, isLoading } = useMutation(() => del(`/teams/${teamId}/websites/${websiteId}`));
 
-  const handleRemoveTeamMember = () => {
-    mutate(
-      {},
-      {
-        onSuccess: () => {
-          onSave();
-        },
+  const handleRemoveTeamMember = async () => {
+    await mutate(null, {
+      onSuccess: () => {
+        onSave();
       },
-    );
+    });
   };
 
   return (

src/app/(main)/settings/teams/[id]/TeamWebsites.js

@@ -1,6 +1,6 @@
 import { ActionForm, Button, Icon, Icons, Modal, ModalTrigger, Text } from 'react-basics';
 import TeamWebsitesTable from './TeamWebsitesTable';
-import TeamAddWebsiteForm from './TeamAddWebsiteForm';
+import TeamWebsiteAddForm from './TeamWebsiteAddForm';
 import useApi from 'components/hooks/useApi';
 import useMessages from 'components/hooks/useMessages';
 import useUser from 'components/hooks/useUser';
@@ -36,7 +36,7 @@ export function TeamWebsites({ teamId }) {
             <Text>{formatMessage(labels.addWebsite)}</Text>
           </Button>
           <Modal title={formatMessage(labels.addWebsite)}>
-            {close => <TeamAddWebsiteForm teamId={teamId} onSave={handleChange} onClose={close} />}
+            {close => <TeamWebsiteAddForm teamId={teamId} onSave={handleChange} onClose={close} />}
           </Modal>
         </ModalTrigger>
       </ActionForm>

src/app/(main)/settings/websites/WebsiteAddButton.js

@@ -1,6 +1,7 @@
 import { Button, Icon, Icons, Modal, ModalTrigger, Text, useToasts } from 'react-basics';
 import WebsiteAddForm from './WebsiteAddForm';
 import useMessages from 'components/hooks/useMessages';
+import { setValue } from 'store/cache';
 
 export function WebsiteAddButton({ onSave }) {
   const { formatMessage, labels, messages } = useMessages();
@@ -8,6 +9,7 @@ export function WebsiteAddButton({ onSave }) {
 
   const handleSave = async () => {
     showToast({ message: formatMessage(messages.saved), variant: 'success' });
+    setValue('websites', Date.now());
     onSave?.();
   };
 

src/app/(main)/settings/websites/WebsitesDataTable.js

@@ -4,13 +4,15 @@ import useUser from 'components/hooks/useUser';
 import useApi from 'components/hooks/useApi';
 import DataTable from 'components/common/DataTable';
 import useFilterQuery from 'components/hooks/useFilterQuery';
-import WebsitesHeader from './WebsitesHeader';
+import useCache from 'store/cache';
 
 function useWebsites({ includeTeams, onlyTeams }) {
   const { user } = useUser();
   const { get } = useApi();
+  const modified = useCache(state => state?.websites);
+
   return useFilterQuery(
-    ['websites', { includeTeams, onlyTeams }],
+    ['websites', { includeTeams, onlyTeams, modified }],
     params => {
       return get(`/users/${user?.id}/websites`, {
         includeTeams,
@@ -23,9 +25,8 @@ function useWebsites({ includeTeams, onlyTeams }) {
 }
 
 export function WebsitesDataTable({
-  showHeader = true,
-  showEditButton = true,
-  showViewButton = true,
+  allowEdit = true,
+  allowView = true,
   showActions = true,
   showTeam,
   includeTeams,
@@ -35,22 +36,19 @@ export function WebsitesDataTable({
   const queryResult = useWebsites({ includeTeams, onlyTeams });
 
   return (
-    <>
-      {showHeader && <WebsitesHeader />}
-      <DataTable queryResult={queryResult}>
-        {({ data }) => (
-          <WebsitesTable
-            data={data}
-            showTeam={showTeam}
-            showActions={showActions}
-            showEditButton={showEditButton}
-            showViewButton={showViewButton}
-          >
-            {children}
-          </WebsitesTable>
-        )}
-      </DataTable>
-    </>
+    <DataTable queryResult={queryResult}>
+      {({ data }) => (
+        <WebsitesTable
+          data={data}
+          showTeam={showTeam}
+          showActions={showActions}
+          allowEdit={allowEdit}
+          allowView={allowView}
+        >
+          {children}
+        </WebsitesTable>
+      )}
+    </DataTable>
   );
 }
 

src/app/(main)/settings/websites/WebsitesTable.js

@@ -7,8 +7,8 @@ export function WebsitesTable({
   data = [],
   showTeam,
   showActions,
-  showEditButton,
-  showViewButton,
+  allowEdit,
+  allowView,
   children,
 }) {
   const { formatMessage, labels } = useMessages();
@@ -37,7 +37,7 @@ export function WebsitesTable({
 
           return (
             <>
-              {showActions && showEditButton && (!showTeam || ownerId === user.id) && (
+              {showActions && allowEdit && (!showTeam || ownerId === user.id) && (
                 <Link href={`/settings/websites/${id}`}>
                   <Button>
                     <Icon>
@@ -47,7 +47,7 @@ export function WebsitesTable({
                   </Button>
                 </Link>
               )}
-              {showActions && showViewButton && (
+              {showActions && allowView && (
                 <Link href={`/websites/${id}`}>
                   <Button>
                     <Icon>

src/app/(main)/settings/websites/page.js

@@ -1,9 +1,15 @@
 import WebsitesDataTable from './WebsitesDataTable';
+import WebsitesHeader from './WebsitesHeader';
 
 export default function () {
   if (process.env.cloudMode) {
     return null;
   }
 
-  return <WebsitesDataTable />;
+  return (
+    <>
+      <WebsitesHeader />
+      <WebsitesDataTable />
+    </>
+  );
 }