Added teams pages. Refactored hooks.

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

@@ -1,9 +1,9 @@
 import { Button, Icon, Icons, Modal, ModalTrigger, Text, useToasts } from 'react-basics';
 import WebsiteAddForm from './WebsiteAddForm';
-import useMessages from 'components/hooks/useMessages';
+import { useMessages } from 'components/hooks';
 import { setValue } from 'store/cache';
 
-export function WebsiteAddButton({ onSave }: { onSave?: () => void }) {
+export function WebsiteAddButton({ teamId, onSave }: { teamId: string; onSave?: () => void }) {
   const { formatMessage, labels, messages } = useMessages();
   const { showToast } = useToasts();
 
@@ -22,7 +22,9 @@ export function WebsiteAddButton({ onSave }: { onSave?: () => void }) {
         <Text>{formatMessage(labels.addWebsite)}</Text>
       </Button>
       <Modal title={formatMessage(labels.addWebsite)}>
-        {(close: () => void) => <WebsiteAddForm onSave={handleSave} onClose={close} />}
+        {(close: () => void) => (
+          <WebsiteAddForm teamId={teamId} onSave={handleSave} onClose={close} />
+        )}
       </Modal>
     </ModalTrigger>
   );

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

@@ -7,18 +7,26 @@ import {
   Button,
   SubmitButton,
 } from 'react-basics';
-import useApi from 'components/hooks/useApi';
+import { useApi } from 'components/hooks';
 import { DOMAIN_REGEX } from 'lib/constants';
-import useMessages from 'components/hooks/useMessages';
+import { useMessages } from 'components/hooks';
 import { useContext } from 'react';
 import SettingsContext from '../SettingsContext';
 
-export function WebsiteAddForm({ onSave, onClose }: { onSave?: () => void; onClose?: () => void }) {
+export function WebsiteAddForm({
+  teamId,
+  onSave,
+  onClose,
+}: {
+  teamId: string;
+  onSave?: () => void;
+  onClose?: () => void;
+}) {
   const { formatMessage, labels, messages } = useMessages();
   const { websitesUrl } = useContext(SettingsContext);
   const { post, useMutation } = useApi();
   const { mutate, error, isPending } = useMutation({
-    mutationFn: (data: any) => post(websitesUrl, data),
+    mutationFn: (data: any) => post(websitesUrl, { ...data, teamId }),
   });
 
   const handleSubmit = async (data: any) => {

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

@@ -8,8 +8,8 @@ import WebsiteEditForm from './[id]/WebsiteEditForm';
 import WebsiteData from './[id]/WebsiteData';
 import TrackingCode from './[id]/TrackingCode';
 import ShareUrl from './[id]/ShareUrl';
-import useApi from 'components/hooks/useApi';
-import useMessages from 'components/hooks/useMessages';
+import { useApi } from 'components/hooks';
+import { useMessages } from 'components/hooks';
 import SettingsContext from '../SettingsContext';
 
 export function WebsiteSettings({ websiteId, openExternal = false }) {

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

@@ -1,14 +1,12 @@
 'use client';
-import { ReactNode, useContext } from 'react';
+import { ReactNode } from 'react';
 import WebsitesTable from 'app/(main)/settings/websites/WebsitesTable';
-import useApi from 'components/hooks/useApi';
 import DataTable from 'components/common/DataTable';
-import useFilterQuery from 'components/hooks/useFilterQuery';
-import useCache from 'store/cache';
-import SettingsContext from '../SettingsContext';
+import useWebsites from 'components/hooks/queries/useWebsites';
 
 export interface WebsitesDataTableProps {
-  userId: string;
+  userId?: string;
+  teamId?: string;
   allowEdit?: boolean;
   allowView?: boolean;
   showActions?: boolean;
@@ -17,24 +15,13 @@ export interface WebsitesDataTableProps {
 
 export function WebsitesDataTable({
   userId,
+  teamId,
   allowEdit = true,
   allowView = true,
   showActions = true,
   children,
 }: WebsitesDataTableProps) {
-  const { get } = useApi();
-  const modified = useCache((state: any) => state?.websites);
-  const { websitesUrl } = useContext(SettingsContext);
-
-  const queryResult = useFilterQuery({
-    queryKey: ['websites', { modified }],
-    queryFn: (params: any) => {
-      return get(websitesUrl, {
-        ...params,
-      });
-    },
-    enabled: !!userId,
-  });
+  const queryResult = useWebsites({ userId, teamId });
 
   return (
     <DataTable queryResult={queryResult}>

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

@@ -1,14 +1,19 @@
 'use client';
-import useMessages from 'components/hooks/useMessages';
+import { useMessages } from 'components/hooks';
 import PageHeader from 'components/layout/PageHeader';
 import WebsiteAddButton from './WebsiteAddButton';
 
-export function WebsitesHeader({ showActions = true }) {
+export interface WebsitesHeaderProps {
+  teamId?: string;
+  showActions?: boolean;
+}
+
+export function WebsitesHeader({ teamId, showActions = true }: WebsitesHeaderProps) {
   const { formatMessage, labels } = useMessages();
 
   return (
     <PageHeader title={formatMessage(labels.websites)}>
-      {!process.env.cloudMode && showActions && <WebsiteAddButton />}
+      {!process.env.cloudMode && showActions && <WebsiteAddButton teamId={teamId} />}
     </PageHeader>
   );
 }

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

@@ -1,15 +1,15 @@
-import { ReactNode, useContext } from 'react';
+import { ReactNode } from 'react';
 import Link from 'next/link';
 import { Button, Text, Icon, Icons, GridTable, GridColumn, useBreakpoint } from 'react-basics';
-import useMessages from 'components/hooks/useMessages';
-import useUser from 'components/hooks/useUser';
-import SettingsContext from '../SettingsContext';
+import { useMessages } from 'components/hooks';
+import { useUser } from 'components/hooks';
 
 export interface WebsitesTableProps {
   data: any[];
   showActions?: boolean;
   allowEdit?: boolean;
   allowView?: boolean;
+  teamId?: string;
   children?: ReactNode;
 }
 
@@ -18,12 +18,12 @@ export function WebsitesTable({
   showActions,
   allowEdit,
   allowView,
+  teamId,
   children,
 }: WebsitesTableProps) {
   const { formatMessage, labels } = useMessages();
   const { user } = useUser();
   const breakpoint = useBreakpoint();
-  const { settingsPath, websitesPath } = useContext(SettingsContext);
 
   return (
     <GridTable data={data} cardMode={['xs', 'sm', 'md'].includes(breakpoint)}>
@@ -32,15 +32,13 @@ export function WebsitesTable({
       {showActions && (
         <GridColumn name="action" label=" " alignment="end">
           {row => {
-            const {
-              id,
-              user: { id: ownerId },
-            } = row;
+            const { id } = row;
+            const isOwner = row.userId === user.id || row.teamId === teamId;
 
             return (
               <>
-                {allowEdit && ownerId === user.id && (
-                  <Link href={`${settingsPath}/${id}`}>
+                {allowEdit && isOwner && (
+                  <Link href={`/settings/${id}`}>
                     <Button>
                       <Icon>
                         <Icons.Edit />
@@ -50,7 +48,7 @@ export function WebsitesTable({
                   </Link>
                 )}
                 {allowView && (
-                  <Link href={`${websitesPath}/${id}`}>
+                  <Link href={teamId ? `/team/${teamId}/websites/${id}` : `/websites/${id}`}>
                     <Button>
                       <Icon>
                         <Icons.External />

src/app/(main)/settings/websites/[id]/ShareUrl.tsx

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

src/app/(main)/settings/websites/[id]/TrackingCode.tsx

@@ -1,6 +1,6 @@
 import { TextArea } from 'react-basics';
-import useMessages from 'components/hooks/useMessages';
-import useConfig from 'components/hooks/useConfig';
+import { useMessages } from 'components/hooks';
+import { useConfig } from 'components/hooks';
 import { useContext } from 'react';
 import SettingsContext from '../../SettingsContext';
 

src/app/(main)/settings/websites/[id]/WebsiteData.tsx

@@ -1,7 +1,7 @@
 import { Button, Modal, ModalTrigger, ActionForm } from 'react-basics';
 import WebsiteDeleteForm from './WebsiteDeleteForm';
 import WebsiteResetForm from './WebsiteResetForm';
-import useMessages from 'components/hooks/useMessages';
+import { useMessages } from 'components/hooks';
 
 export function WebsiteData({
   websiteId,

src/app/(main)/settings/websites/[id]/WebsiteDeleteForm.tsx

@@ -7,8 +7,8 @@ import {
   SubmitButton,
   TextField,
 } 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 { useContext } from 'react';
 import SettingsContext from '../../SettingsContext';
 

src/app/(main)/settings/websites/[id]/WebsiteEditForm.tsx

@@ -1,8 +1,8 @@
 import { SubmitButton, Form, FormInput, FormRow, FormButtons, TextField } from 'react-basics';
 import { useContext, useRef } from 'react';
-import useApi from 'components/hooks/useApi';
+import { useApi } from 'components/hooks';
 import { DOMAIN_REGEX } from 'lib/constants';
-import useMessages from 'components/hooks/useMessages';
+import { useMessages } from 'components/hooks';
 import SettingsContext from '../../SettingsContext';
 
 export function WebsiteEditForm({

src/app/(main)/settings/websites/[id]/WebsiteResetForm.tsx

@@ -7,8 +7,8 @@ import {
   SubmitButton,
   TextField,
 } 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 { useContext } from 'react';
 import SettingsContext from '../../SettingsContext';