Refactored queries.

src/app/(main)/settings/profile/LanguageSetting.tsx

@@ -28,7 +28,7 @@ export function LanguageSetting() {
         items={options}
         value={locale}
         renderValue={renderValue}
-        onChange={saveLocale}
+        onChange={val => saveLocale(val as string)}
         allowSearch={true}
         onSearch={setSearch}
         menuProps={{ className: styles.menu }}

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

@@ -7,7 +7,7 @@ import {
   Button,
   SubmitButton,
 } from 'react-basics';
-import { setValue } from 'store/cache';
+import { touch } from 'store/cache';
 import { useApi, useMessages } from 'components/hooks';
 
 export function TeamAddForm({ onSave, onClose }: { onSave: () => void; onClose: () => void }) {
@@ -17,10 +17,10 @@ export function TeamAddForm({ onSave, onClose }: { onSave: () => void; onClose:
     mutationFn: (data: any) => post('/teams', data),
   });
 
-  const handleSubmit = async data => {
+  const handleSubmit = async (data: any) => {
     mutate(data, {
       onSuccess: async () => {
-        setValue('teams', Date.now());
+        touch('teams');
         onSave?.();
         onClose?.();
       },

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

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

src/app/(main)/settings/teams/[teamId]/TeamEditForm.tsx

@@ -18,11 +18,11 @@ const generateId = () => getRandomChars(16);
 export function TeamEditForm({
   teamId,
   data,
-  readOnly,
+  allowEdit,
 }: {
   teamId: string;
   data?: { name: string; accessCode: string };
-  readOnly?: boolean;
+  allowEdit?: boolean;
 }) {
   const { formatMessage, labels, messages } = useMessages();
   const { post, useMutation } = useApi();
@@ -57,22 +57,24 @@ export function TeamEditForm({
         <TextField value={teamId} readOnly allowCopy />
       </FormRow>
       <FormRow label={formatMessage(labels.name)}>
-        {!readOnly && (
+        {allowEdit && (
           <FormInput name="name" rules={{ required: formatMessage(labels.required) }}>
             <TextField />
           </FormInput>
         )}
-        {readOnly && data.name}
+        {!allowEdit && data.name}
       </FormRow>
-      <FormRow label={formatMessage(labels.accessCode)}>
-        <Flexbox gap={10}>
-          <TextField value={accessCode} readOnly allowCopy />
-          {!readOnly && (
-            <Button onClick={handleRegenerate}>{formatMessage(labels.regenerate)}</Button>
-          )}
-        </Flexbox>
-      </FormRow>
-      {!readOnly && (
+      {allowEdit && (
+        <FormRow label={formatMessage(labels.accessCode)}>
+          <Flexbox gap={10}>
+            <TextField value={accessCode} readOnly allowCopy />
+            {allowEdit && (
+              <Button onClick={handleRegenerate}>{formatMessage(labels.regenerate)}</Button>
+            )}
+          </Flexbox>
+        </FormRow>
+      )}
+      {allowEdit && (
         <FormButtons>
           <SubmitButton variant="primary">{formatMessage(labels.save)}</SubmitButton>
         </FormButtons>

src/app/(main)/settings/teams/[teamId]/TeamMemberRemoveButton.tsx

@@ -1,6 +1,6 @@
 import { useApi, useMessages } from 'components/hooks';
 import { Icon, Icons, LoadingButton, Text } from 'react-basics';
-import { setValue } from 'store/cache';
+import { touch } from 'store/cache';
 
 export function TeamMemberRemoveButton({
   teamId,
@@ -22,7 +22,7 @@ export function TeamMemberRemoveButton({
   const handleRemoveTeamMember = () => {
     mutate(null, {
       onSuccess: () => {
-        setValue('team:members', Date.now());
+        touch('team:members');
         onSave?.();
       },
     });

src/app/(main)/settings/teams/[teamId]/TeamMembers.tsx

@@ -1,24 +1,13 @@
-import { useApi, useFilterQuery } from 'components/hooks';
 import DataTable from 'components/common/DataTable';
-import useCache from 'store/cache';
 import TeamMembersTable from './TeamMembersTable';
+import useTeamMembers from 'components/hooks/queries/useTeamMembers';
 
-export function TeamMembers({ teamId, readOnly }: { teamId: string; readOnly: boolean }) {
-  const { get } = useApi();
-  const modified = useCache(state => state?.['team:members']);
-  const queryResult = useFilterQuery({
-    queryKey: ['team:members', { teamId, modified }],
-    queryFn: params => {
-      return get(`/teams/${teamId}/users`, {
-        ...params,
-      });
-    },
-    enabled: !!teamId,
-  });
+export function TeamMembers({ teamId, allowEdit }: { teamId: string; allowEdit: boolean }) {
+  const queryResult = useTeamMembers(teamId);
 
   return (
     <DataTable queryResult={queryResult}>
-      {({ data }) => <TeamMembersTable data={data} teamId={teamId} readOnly={readOnly} />}
+      {({ data }) => <TeamMembersTable data={data} teamId={teamId} allowEdit={allowEdit} />}
     </DataTable>
   );
 }

src/app/(main)/settings/teams/[teamId]/TeamMembersTable.tsx

@@ -6,11 +6,11 @@ import TeamMemberRemoveButton from './TeamMemberRemoveButton';
 export function TeamMembersTable({
   data = [],
   teamId,
-  readOnly,
+  allowEdit,
 }: {
   data: any[];
   teamId: string;
-  readOnly: boolean;
+  allowEdit: boolean;
 }) {
   const { formatMessage, labels } = useMessages();
   const { user } = useLogin();
@@ -23,16 +23,20 @@ export function TeamMembersTable({
 
   return (
     <GridTable data={data} cardMode={['xs', 'sm', 'md'].includes(breakpoint)}>
-      <GridColumn name="username" label={formatMessage(labels.username)} />
+      <GridColumn name="username" label={formatMessage(labels.username)}>
+        {row => row?.user?.username}
+      </GridColumn>
       <GridColumn name="role" label={formatMessage(labels.role)}>
-        {row => roles[row?.teamUser?.[0]?.role]}
+        {row => roles[row?.role]}
       </GridColumn>
       <GridColumn name="action" label=" " alignment="end">
         {row => {
           return (
-            !readOnly &&
-            row?.teamUser?.[0]?.role !== ROLES.teamOwner &&
-            user?.id !== row?.id && <TeamMemberRemoveButton teamId={teamId} userId={row.id} />
+            allowEdit &&
+            row?.role !== ROLES.teamOwner &&
+            user?.id !== row?.id && (
+              <TeamMemberRemoveButton teamId={teamId} userId={row?.user?.id} />
+            )
           );
         }}
       </GridColumn>

src/app/(main)/settings/teams/[teamId]/TeamSettings.tsx

@@ -47,9 +47,9 @@ export function TeamSettings({ teamId }: { teamId: string }) {
           <Item key="websites">{formatMessage(labels.websites)}</Item>
           <Item key="data">{formatMessage(labels.data)}</Item>
         </Tabs>
-        {tab === 'details' && <TeamEditForm teamId={teamId} data={team} readOnly={!canEdit} />}
-        {tab === 'members' && <TeamMembers teamId={teamId} readOnly={!canEdit} />}
-        {tab === 'websites' && <TeamWebsites teamId={teamId} readOnly={!canEdit} />}
+        {tab === 'details' && <TeamEditForm teamId={teamId} data={team} allowEdit={canEdit} />}
+        {tab === 'members' && <TeamMembers teamId={teamId} allowEdit={canEdit} />}
+        {tab === 'websites' && <TeamWebsites teamId={teamId} allowEdit={canEdit} />}
         {canEdit && tab === 'data' && <TeamData teamId={teamId} />}
       </Flexbox>
     </TeamsContext.Provider>

src/app/(main)/settings/teams/[teamId]/TeamWebsites.tsx

@@ -1,7 +1,7 @@
 import WebsitesDataTable from 'app/(main)/settings/websites/WebsitesDataTable';
 
-export function TeamWebsites({ teamId }: { teamId: string; readOnly: boolean }) {
-  return <WebsitesDataTable teamId={teamId} />;
+export function TeamWebsites({ teamId, allowEdit }: { teamId: string; allowEdit: boolean }) {
+  return <WebsitesDataTable teamId={teamId} allowEdit={allowEdit} />;
 }
 
 export default TeamWebsites;

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

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

src/app/(main)/settings/websites/Websites.tsx

@@ -5,6 +5,7 @@ import WebsitesHeader from './WebsitesHeader';
 
 export default function Websites() {
   const { user } = useLogin();
+
   return (
     <>
       <WebsitesHeader showActions={user.role !== 'view-only'} />

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

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
 import Link from 'next/link';
 import { Button, Text, Icon, Icons, GridTable, GridColumn, useBreakpoint } from 'react-basics';
-import { useMessages, useLogin } from 'components/hooks';
+import { useMessages, useLogin, useNavigation } from 'components/hooks';
 
 export interface WebsitesTableProps {
   data: any[];
@@ -23,6 +23,7 @@ export function WebsitesTable({
   const { formatMessage, labels } = useMessages();
   const { user } = useLogin();
   const breakpoint = useBreakpoint();
+  const { renderTeamUrl } = useNavigation();
 
   return (
     <GridTable data={data} cardMode={['xs', 'sm', 'md'].includes(breakpoint)}>
@@ -46,7 +47,7 @@ export function WebsitesTable({
                   </Link>
                 )}
                 {allowView && (
-                  <Link href={teamId ? `/teams/${teamId}/websites/${id}` : `/websites/${id}`}>
+                  <Link href={renderTeamUrl(`/websites/${id}`)}>
                     <Button>
                       <Icon>
                         <Icons.External />

src/app/(main)/settings/websites/[websiteId]/page.tsx

@@ -1,9 +1,9 @@
 import WebsiteSettings from '../WebsiteSettings';
 
-export default async function WebsiteSettingsPage({ params: { id } }) {
-  if (process.env.cloudMode) {
+export default async function WebsiteSettingsPage({ params: { websiteId } }) {
+  if (process.env.cloudMode || !websiteId) {
     return null;
   }
 
-  return <WebsiteSettings websiteId={id} />;
+  return <WebsiteSettings websiteId={websiteId} />;
 }