Refactored teams components.

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

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

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

@@ -13,7 +13,7 @@ export function TeamLeaveButton({ teamId, teamName, onLeave }) {
     <ModalTrigger>
       <Button>
         <Icon rotate={dir === 'rtl' ? 180 : 0}>
-          <Icons.ArrowRight />
+          <Icons.Logout />
         </Icon>
         <Text>{formatMessage(labels.leave)}</Text>
       </Button>

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

@@ -3,10 +3,12 @@ import DataTable from 'components/common/DataTable';
 import TeamsTable from 'app/(main)/settings/teams/TeamsTable';
 import useApi from 'components/hooks/useApi';
 import useFilterQuery from 'components/hooks/useFilterQuery';
+import useCache from 'store/cache';
 
 export function TeamsDataTable() {
   const { get } = useApi();
-  const queryResult = useFilterQuery(['teams'], params => {
+  const modified = useCache(state => state?.websites);
+  const queryResult = useFilterQuery(['teams', { modified }], params => {
     return get(`/teams`, {
       ...params,
     });

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

@@ -21,18 +21,18 @@ export function TeamsTable({ data = [] }) {
         {row => {
           const { id, name, teamUser } = row;
           const owner = teamUser.find(({ role }) => role === ROLES.teamOwner);
-          const showDelete = user.id === owner?.userId;
+          const isOwner = user.id === owner?.userId;
 
           return (
             <>
-              {showDelete && <TeamDeleteButton teamId={id} teamName={name} />}
-              {!showDelete && <TeamLeaveButton teamId={id} teamName={name} />}
+              {isOwner && <TeamDeleteButton teamId={id} teamName={name} />}
+              {!isOwner && <TeamLeaveButton teamId={id} teamName={name} />}
               <Link href={`/settings/teams/${id}`}>
                 <Button>
                   <Icon>
                     <Icons.Edit />
                   </Icon>
-                  <Text>{formatMessage(labels.edit)}</Text>
+                  <Text>{formatMessage(isOwner ? labels.edit : labels.view)}</Text>
                 </Button>
               </Link>
             </>

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

@@ -3,12 +3,13 @@ import { useState } from 'react';
 import { Button, Form, FormButtons, GridColumn, Loading, SubmitButton, Toggle } from 'react-basics';
 import useMessages from 'components/hooks/useMessages';
 import WebsitesDataTable from '../../websites/WebsitesDataTable';
+import Empty from 'components/common/Empty';
 
 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));
-  const { data: websites } = useQuery(['websites'], () => get('/websites'));
+  const { data: websites, isLoading } = useQuery(['websites'], () => get('/websites'));
   const [selected, setSelected] = useState([]);
   const hasData = websites && websites.data.length > 0;
 
@@ -30,7 +31,8 @@ export function TeamWebsiteAddForm({ teamId, onSave, onClose }) {
 
   return (
     <>
-      {!hasData && <Loading />}
+      {isLoading && !hasData && <Loading />}
+      {!isLoading && !hasData && <Empty />}
       {hasData && (
         <Form onSubmit={handleSubmit} error={error}>
           <WebsitesDataTable showHeader={false} showActions={false}>

src/app/(main)/settings/teams/page.tsx

@@ -1,5 +1,6 @@
 import TeamsDataTable from './TeamsDataTable';
 import TeamsHeader from './TeamsHeader';
+import { Metadata } from 'next';
 
 export default function () {
   if (process.env.cloudMode) {
@@ -13,3 +14,7 @@ export default function () {
     </>
   );
 }
+
+export const metadata: Metadata = {
+  title: 'Teams Settings | umami',
+};