Added teams pages. Refactored hooks.

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

@@ -8,8 +8,8 @@ import {
   SubmitButton,
 } from 'react-basics';
 import { setValue } from 'store/cache';
-import useApi from 'components/hooks/useApi';
-import useMessages from 'components/hooks/useMessages';
+import { useApi } from 'components/hooks';
+import { useMessages } from 'components/hooks';
 
 export function TeamAddForm({ onSave, onClose }: { onSave: () => void; onClose: () => void }) {
   const { formatMessage, labels } = useMessages();

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

@@ -1,6 +1,6 @@
 import { Button, Form, FormButtons, SubmitButton } from 'react-basics';
-import useApi from 'components/hooks/useApi';
-import useMessages from 'components/hooks/useMessages';
+import { useApi } from 'components/hooks';
+import { useMessages } from 'components/hooks';
 import { setValue } from 'store/cache';
 
 export function TeamDeleteForm({

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

@@ -8,8 +8,8 @@ import {
   Button,
   SubmitButton,
 } from 'react-basics';
-import useApi from 'components/hooks/useApi';
-import useMessages from 'components/hooks/useMessages';
+import { useApi } from 'components/hooks';
+import { useMessages } from 'components/hooks';
 import { setValue } from 'store/cache';
 
 export function TeamJoinForm({ onSave, onClose }: { onSave: () => void; onClose: () => void }) {

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

@@ -1,7 +1,7 @@
 import { Button, Icon, Icons, Modal, ModalTrigger, Text } from 'react-basics';
-import useMessages from 'components/hooks/useMessages';
-import useLocale from 'components/hooks/useLocale';
-import useUser from 'components/hooks/useUser';
+import { useMessages } from 'components/hooks';
+import { useLocale } from 'components/hooks';
+import { useUser } from 'components/hooks';
 import TeamDeleteForm from './TeamLeaveForm';
 
 export function TeamLeaveButton({

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

@@ -1,6 +1,6 @@
 import { Button, Form, FormButtons, SubmitButton } from 'react-basics';
-import useApi from 'components/hooks/useApi';
-import useMessages from 'components/hooks/useMessages';
+import { useApi } from 'components/hooks';
+import { useMessages } from 'components/hooks';
 import { setValue } from 'store/cache';
 
 export function TeamLeaveForm({

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

@@ -1,6 +1,6 @@
 import { Button, Icon, Modal, ModalTrigger, Text } from 'react-basics';
 import Icons from 'components/icons';
-import useMessages from 'components/hooks/useMessages';
+import { useMessages } from 'components/hooks';
 import TeamAddForm from './TeamAddForm';
 
 export function TeamsAddButton({ onAdd }: { onAdd?: () => void }) {

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

@@ -1,8 +1,8 @@
 'use client';
 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 { useApi } from 'components/hooks';
+import { useFilterQuery } from 'components/hooks';
 import useCache from 'store/cache';
 
 export function TeamsDataTable() {

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

@@ -2,8 +2,8 @@
 import { Flexbox } from 'react-basics';
 import PageHeader from 'components/layout/PageHeader';
 import { ROLES } from 'lib/constants';
-import useUser from 'components/hooks/useUser';
-import useMessages from 'components/hooks/useMessages';
+import { useUser } from 'components/hooks';
+import { useMessages } from 'components/hooks';
 import TeamsJoinButton from './TeamsJoinButton';
 import TeamsAddButton from './TeamsAddButton';
 

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

@@ -1,6 +1,6 @@
 import { Button, Icon, Modal, ModalTrigger, Text, useToasts } from 'react-basics';
 import Icons from 'components/icons';
-import useMessages from 'components/hooks/useMessages';
+import { useMessages } from 'components/hooks';
 import TeamJoinForm from './TeamJoinForm';
 
 export function TeamsJoinButton() {

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

@@ -1,10 +1,9 @@
 'use client';
-import useMessages from 'components/hooks/useMessages';
-import useUser from 'components/hooks/useUser';
-import { ROLES } from 'lib/constants';
-import Link from 'next/link';
 import { Button, GridColumn, GridTable, Icon, Icons, Text, useBreakpoint } from 'react-basics';
-import TeamLeaveButton from './TeamLeaveButton';
+import Link from 'next/link';
+import { useMessages } from 'components/hooks';
+import { useUser } from 'components/hooks';
+import { ROLES } from 'lib/constants';
 
 export function TeamsTable({ data = [] }: { data: any[] }) {
   const { formatMessage, labels } = useMessages();
@@ -25,17 +24,28 @@ export function TeamsTable({ data = [] }: { data: any[] }) {
       </GridColumn>
       <GridColumn name="action" label=" " alignment="end">
         {row => {
-          const { id, name, teamUser } = row;
+          const { id, teamUser } = row;
           const owner = teamUser.find(({ role }) => role === ROLES.teamOwner);
           const isOwner = user.id === owner?.userId;
 
           return (
             <>
-              {!isOwner && <TeamLeaveButton teamId={id} teamName={name} />}
-              <Link href={`/settings/teams/${id}`}>
+              {isOwner && (
+                <Link href={`/settings/teams/${id}`}>
+                  <Button>
+                    <Icon>
+                      <Icons.Edit />
+                    </Icon>
+                    <Text>{formatMessage(labels.edit)}</Text>
+                  </Button>
+                </Link>
+              )}
+              <Link href={`/teams/${id}`}>
                 <Button>
-                  <Icon>{isOwner ? <Icons.Edit /> : <Icons.ArrowRight />}</Icon>
-                  <Text>{formatMessage(isOwner ? labels.edit : labels.view)}</Text>
+                  <Icon>
+                    <Icons.External />
+                  </Icon>
+                  <Text>{formatMessage(labels.view)}</Text>
                 </Button>
               </Link>
             </>

src/app/(main)/settings/teams/[id]/TeamData.tsx

@@ -1,5 +1,5 @@
 import { ActionForm, Button, Modal, ModalTrigger } from 'react-basics';
-import useMessages from 'components/hooks/useMessages';
+import { useMessages } from 'components/hooks';
 import TeamDeleteForm from '../TeamDeleteForm';
 
 export function TeamData({ teamId }: { teamId: string; onSave?: (value: string) => void }) {

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

@@ -10,8 +10,8 @@ import {
 } from 'react-basics';
 import { getRandomChars } from 'next-basics';
 import { useRef, useState } from 'react';
-import useApi from 'components/hooks/useApi';
-import useMessages from 'components/hooks/useMessages';
+import { useApi } from 'components/hooks';
+import { useMessages } from 'components/hooks';
 
 const generateId = () => getRandomChars(16);
 

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

@@ -1,5 +1,5 @@
-import useApi from 'components/hooks/useApi';
-import useMessages from 'components/hooks/useMessages';
+import { useApi } from 'components/hooks';
+import { useMessages } from 'components/hooks';
 import { Icon, Icons, LoadingButton, Text } from 'react-basics';
 import { setValue } from 'store/cache';
 

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

@@ -1,5 +1,5 @@
-import useApi from 'components/hooks/useApi';
-import useFilterQuery from 'components/hooks/useFilterQuery';
+import { useApi } from 'components/hooks';
+import { useFilterQuery } from 'components/hooks';
 import DataTable from 'components/common/DataTable';
 import useCache from 'store/cache';
 import TeamMembersTable from './TeamMembersTable';

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

@@ -1,6 +1,6 @@
 import { GridColumn, GridTable, useBreakpoint } from 'react-basics';
-import useMessages from 'components/hooks/useMessages';
-import useUser from 'components/hooks/useUser';
+import { useMessages } from 'components/hooks';
+import { useUser } from 'components/hooks';
 import { ROLES } from 'lib/constants';
 import TeamMemberRemoveButton from './TeamMemberRemoveButton';
 

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

@@ -3,9 +3,9 @@ import { useEffect, useState } from 'react';
 import { Item, Loading, Tabs, useToasts, Flexbox } from 'react-basics';
 import PageHeader from 'components/layout/PageHeader';
 import { ROLES } from 'lib/constants';
-import useUser from 'components/hooks/useUser';
-import useApi from 'components/hooks/useApi';
-import useMessages from 'components/hooks/useMessages';
+import { useUser } from 'components/hooks';
+import { useApi } from 'components/hooks';
+import { useMessages } from 'components/hooks';
 import TeamEditForm from './TeamEditForm';
 import TeamMembers from './TeamMembers';
 import TeamWebsites from './TeamWebsites';

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

@@ -1,5 +1,5 @@
-import useApi from 'components/hooks/useApi';
-import useMessages from 'components/hooks/useMessages';
+import { useApi } from 'components/hooks';
+import { useMessages } from 'components/hooks';
 import { Icon, Icons, LoadingButton, Text } from 'react-basics';
 
 export function TeamWebsiteRemoveButton({ teamId, websiteId, onSave }) {

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

@@ -1,27 +1,7 @@
-import WebsitesTable from 'app/(main)/settings/websites/WebsitesTable';
-import DataTable from 'components/common/DataTable';
-import useFilterQuery from 'components/hooks/useFilterQuery';
-import useApi from 'components/hooks/useApi';
-import useUser from 'components/hooks/useUser';
-import useCache from 'store/cache';
+import WebsitesDataTable from 'app/(main)/settings/websites/WebsitesDataTable';
 
 export function TeamWebsites({ teamId }: { teamId: string; readOnly: boolean }) {
-  const { get } = useApi();
-  const { user } = useUser();
-  const modified = useCache(state => state?.['team:websites']);
-  const queryResult = useFilterQuery({
-    queryKey: ['team:websites', { teamId, modified }],
-    queryFn: params => {
-      return get(`/teams/${teamId}/websites`, {
-        ...params,
-      });
-    },
-    enabled: !!user,
-  });
-
-  return (
-    <DataTable queryResult={queryResult}>{({ data }) => <WebsitesTable data={data} />}</DataTable>
-  );
+  return <WebsitesDataTable teamId={teamId} />;
 }
 
 export default TeamWebsites;

src/app/(main)/settings/teams/[id]/TeamWebsitesTable.tsx

@@ -1,6 +1,6 @@
 import Link from 'next/link';
 import { Button, GridColumn, GridTable, Icon, Icons, Text } from 'react-basics';
-import useMessages from 'components/hooks/useMessages';
+import { useMessages } from 'components/hooks';
 
 export function TeamWebsitesTable({
   data = [],