Updated add team website form.

src/app/(main)/reports/ReportsList.js

@@ -7,30 +7,30 @@ import DataTable from 'components/common/DataTable';
 function useReports() {
   const { get, del, useMutation } = useApi();
   const { mutate } = useMutation(reportId => del(`/reports/${reportId}`));
-  const reports = useFilterQuery(['reports'], params => get(`/reports`, params));
+  const queryResult = useFilterQuery(['reports'], params => get(`/reports`, params));
 
   const deleteReport = id => {
     mutate(id, {
       onSuccess: () => {
-        reports.refetch();
+        queryResult.refetch();
       },
     });
   };
 
-  return { reports, deleteReport };
+  return { queryResult, deleteReport };
 }
 
 export default function ReportsList() {
-  const { reports, deleteReport } = useReports();
+  const { queryResult, deleteReport } = useReports();
 
   const handleDelete = async (id, callback) => {
     await deleteReport(id);
-    await reports.refetch();
+    await queryResult.refetch();
     callback?.();
   };
 
   return (
-    <DataTable {...reports.getProps()}>
+    <DataTable queryResult={queryResult}>
       {({ data }) => <ReportsTable data={data} showDomain={true} onDelete={handleDelete} />}
     </DataTable>
   );

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

@@ -4,16 +4,21 @@ import TeamsTable from 'app/(main)/settings/teams/TeamsTable';
 import useApi from 'components/hooks/useApi';
 import useFilterQuery from 'components/hooks/useFilterQuery';
 
-export function TeamsList() {
+export function TeamsDataTable() {
   const { get } = useApi();
-  const filterQuery = useFilterQuery(['teams'], params => {
+  const queryResult = useFilterQuery(['teams'], params => {
     return get(`/teams`, {
       ...params,
     });
   });
-  const { getProps } = filterQuery;
 
-  return <DataTable {...getProps()}>{({ data }) => <TeamsTable data={data} />}</DataTable>;
+  return (
+    <DataTable queryResult={queryResult}>
+      {({ data }) => {
+        return <TeamsTable data={data} />;
+      }}
+    </DataTable>
+  );
 }
 
-export default TeamsList;
+export default TeamsDataTable;

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

@@ -1,22 +1,20 @@
 import useApi from 'components/hooks/useApi';
-import { useRef, useState } from 'react';
+import { useState } from 'react';
-import { Button, Dropdown, Form, FormButtons, FormRow, Item, SubmitButton } from 'react-basics';
+import { Button, Form, FormButtons, GridColumn, Loading, SubmitButton, Toggle } from 'react-basics';
-import WebsiteTags from '../WebsiteTags';
 import useMessages from 'components/hooks/useMessages';
+import WebsitesDataTable from '../../websites/WebsitesDataTable';
 
 export function TeamAddWebsiteForm({ 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 [newWebsites, setNewWebsites] = useState([]);
+  const [selected, setSelected] = useState([]);
-  const formRef = useRef();
-
   const hasData = websites && websites.data.length > 0;
 
   const handleSubmit = () => {
     mutate(
-      { websiteIds: newWebsites },
+      { websiteIds: selected },
       {
         onSuccess: async () => {
           onSave();
@@ -26,34 +24,29 @@ export function TeamAddWebsiteForm({ teamId, onSave, onClose }) {
     );
   };
 
-  const handleAddWebsite = value => {
+  const handleSelect = id => {
-    if (!newWebsites.some(a => a === value)) {
+    setSelected(state => (state.includes(id) ? state.filter(n => n !== id) : state.concat(id)));
-      const nextValue = [...newWebsites];
-
-      nextValue.push(value);
-
-      setNewWebsites(nextValue);
-    }
-  };
-
-  const handleRemoveWebsite = value => {
-    const newValue = newWebsites.filter(a => a !== value);
-
-    setNewWebsites(newValue);
   };
 
   return (
     <>
+      {!hasData && <Loading />}
       {hasData && (
-        <Form onSubmit={handleSubmit} error={error} ref={formRef}>
+        <Form onSubmit={handleSubmit} error={error}>
-          <FormRow label={formatMessage(labels.websites)}>
+          <WebsitesDataTable showHeader={false} showActions={false}>
-            <Dropdown items={websites.data} onChange={handleAddWebsite} style={{ width: 300 }}>
+            <GridColumn name="select" label={formatMessage(labels.selectWebsite)} alignment="end">
-              {({ id, name }) => <Item key={id}>{name}</Item>}
+              {row => (
-            </Dropdown>
+                <Toggle
-          </FormRow>
+                  key={row.id}
-          <WebsiteTags items={websites.data} websites={newWebsites} onClick={handleRemoveWebsite} />
+                  value={row.id}
+                  checked={selected?.includes(row.id)}
+                  onChange={handleSelect.bind(null, row.id)}
+                />
+              )}
+            </GridColumn>
+          </WebsitesDataTable>
           <FormButtons flex>
-            <SubmitButton disabled={newWebsites && newWebsites.length === 0}>
+            <SubmitButton disabled={selected?.length === 0}>
               {formatMessage(labels.addWebsite)}
             </SubmitButton>
             <Button onClick={onClose}>{formatMessage(labels.cancel)}</Button>

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

@@ -5,7 +5,7 @@ import DataTable from 'components/common/DataTable';
 
 export function TeamMembers({ teamId, readOnly }) {
   const { get } = useApi();
-  const { getProps } = useFilterQuery(
+  const queryResult = useFilterQuery(
     ['team:users', teamId],
     params => {
       return get(`/teams/${teamId}/users`, {
@@ -17,7 +17,7 @@ export function TeamMembers({ teamId, readOnly }) {
 
   return (
     <>
-      <DataTable {...getProps()}>
+      <DataTable queryResult={queryResult}>
         {({ data }) => <TeamMembersTable data={data} readOnly={readOnly} />}
       </DataTable>
     </>

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

@@ -19,7 +19,7 @@ export function TeamWebsiteRemoveButton({ teamId, websiteId, onSave }) {
   };
 
   return (
-    <LoadingButton onClick={() => handleRemoveTeamMember()} isLoading={isLoading}>
+    <LoadingButton variant="quiet" onClick={() => handleRemoveTeamMember()} isLoading={isLoading}>
       <Icon>
         <Icons.Close />
       </Icon>

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

@@ -11,7 +11,7 @@ export function TeamWebsites({ teamId }) {
   const { formatMessage, labels, messages } = useMessages();
   const { user } = useUser();
   const { get } = useApi();
-  const { getProps, refetch } = useFilterQuery(
+  const queryResult = useFilterQuery(
     ['team:websites', teamId],
     params => {
       return get(`/teams/${teamId}/websites`, {
@@ -21,8 +21,8 @@ export function TeamWebsites({ teamId }) {
     { enabled: !!user },
   );
 
-  const handleWebsiteAdd = () => {
+  const handleChange = () => {
-    refetch();
+    queryResult.refetch();
   };
 
   return (
@@ -36,13 +36,13 @@ export function TeamWebsites({ teamId }) {
             <Text>{formatMessage(labels.addWebsite)}</Text>
           </Button>
           <Modal title={formatMessage(labels.addWebsite)}>
-            {close => (
+            {close => <TeamAddWebsiteForm teamId={teamId} onSave={handleChange} onClose={close} />}
-              <TeamAddWebsiteForm teamId={teamId} onSave={handleWebsiteAdd} onClose={close} />
-            )}
           </Modal>
         </ModalTrigger>
       </ActionForm>
-      <DataTable {...getProps()}>{({ data }) => <TeamWebsitesTable data={data} />}</DataTable>
+      <DataTable queryResult={queryResult}>
+        {({ data }) => <TeamWebsitesTable data={data} onRemove={handleChange} />}
+      </DataTable>
     </>
   );
 }

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

@@ -1,10 +1,10 @@
-import useMessages from 'components/hooks/useMessages';
-import useUser from 'components/hooks/useUser';
 import Link from 'next/link';
 import { Button, GridColumn, GridTable, Icon, Icons, Text } from 'react-basics';
-import TeamWebsiteRemoveButton from '../TeamWebsiteRemoveButton';
+import useMessages from 'components/hooks/useMessages';
+import useUser from 'components/hooks/useUser';
+import TeamWebsiteRemoveButton from './TeamWebsiteRemoveButton';
 
-export function TeamWebsitesTable({ data = [], onSave }) {
+export function TeamWebsitesTable({ data = [], onRemove }) {
   const { formatMessage, labels } = useMessages();
   const { user } = useUser();
 
@@ -20,6 +20,9 @@ export function TeamWebsitesTable({ data = [], onSave }) {
           const canRemove = user.id === userId || user.id === owner.userId;
           return (
             <>
+              {canRemove && (
+                <TeamWebsiteRemoveButton teamId={teamId} websiteId={websiteId} onSave={onRemove} />
+              )}
               <Link href={`/websites/${websiteId}`}>
                 <Button>
                   <Icon>
@@ -28,9 +31,6 @@ export function TeamWebsitesTable({ data = [], onSave }) {
                   <Text>{formatMessage(labels.view)}</Text>
                 </Button>
               </Link>
-              {canRemove && (
-                <TeamWebsiteRemoveButton teamId={teamId} websiteId={websiteId} onSave={onSave} />
-              )}
             </>
           );
         }}

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

@@ -1,4 +1,4 @@
-import TeamsList from 'app/(main)/settings/teams/TeamsList';
+import TeamsDataTable from './TeamsDataTable';
 import TeamsHeader from './TeamsHeader';
 
 export default function () {
@@ -9,7 +9,7 @@ export default function () {
   return (
     <>
       <TeamsHeader />
-      <TeamsList />
+      <TeamsDataTable />
     </>
   );
 }

src/app/(main)/settings/users/UsersDataTable.js

@@ -5,21 +5,20 @@ import DataTable from 'components/common/DataTable';
 import UsersTable from './UsersTable';
 import UsersHeader from './UsersHeader';
 
-export function UsersList() {
+export function UsersDataTable() {
   const { get } = useApi();
-  const filterQuery = useFilterQuery(['users'], params => {
+  const queryResult = useFilterQuery(['users'], params => {
     return get(`/users`, {
       ...params,
     });
   });
-  const { getProps } = filterQuery;
 
   return (
     <>
       <UsersHeader />
-      <DataTable {...getProps()}>{({ data }) => <UsersTable data={data} />}</DataTable>
+      <DataTable queryResult={queryResult}>{({ data }) => <UsersTable data={data} />}</DataTable>
     </>
   );
 }
 
-export default UsersList;
+export default UsersDataTable;

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

@@ -1,4 +1,4 @@
-import UsersList from 'app/(main)/settings/users/UsersList';
+import UsersDataTable from './UsersDataTable';
 import { Metadata } from 'next';
 
 export default function () {
@@ -6,7 +6,7 @@ export default function () {
     return null;
   }
 
-  return <UsersList />;
+  return <UsersDataTable />;
 }
 export const metadata: Metadata = {
   title: 'Users | umami',

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

@@ -6,16 +6,10 @@ import DataTable from 'components/common/DataTable';
 import useFilterQuery from 'components/hooks/useFilterQuery';
 import WebsitesHeader from './WebsitesHeader';
 
-export function Websites({
+function useWebsites({ includeTeams, onlyTeams }) {
-  showHeader = true,
-  showEditButton = true,
-  showTeam,
-  includeTeams,
-  onlyTeams,
-}) {
   const { user } = useUser();
   const { get } = useApi();
-  const filterQuery = useFilterQuery(
+  return useFilterQuery(
     ['websites', { includeTeams, onlyTeams }],
     params => {
       return get(`/users/${user?.id}/websites`, {
@@ -26,18 +20,38 @@ export function Websites({
     },
     { enabled: !!user },
   );
-  const { getProps } = filterQuery;
+}
+
+export function WebsitesDataTable({
+  showHeader = true,
+  showEditButton = true,
+  showViewButton = true,
+  showActions = true,
+  showTeam,
+  includeTeams,
+  onlyTeams,
+  children,
+}) {
+  const queryResult = useWebsites({ includeTeams, onlyTeams });
 
   return (
     <>
       {showHeader && <WebsitesHeader />}
-      <DataTable {...getProps()}>
+      <DataTable queryResult={queryResult}>
         {({ data }) => (
-          <WebsitesTable data={data} showTeam={showTeam} showEditButton={showEditButton} />
+          <WebsitesTable
+            data={data}
+            showTeam={showTeam}
+            showActions={showActions}
+            showEditButton={showEditButton}
+            showViewButton={showViewButton}
+          >
+            {children}
+          </WebsitesTable>
         )}
       </DataTable>
     </>
   );
 }
 
-export default Websites;
+export default WebsitesDataTable;

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

@@ -3,7 +3,14 @@ import { Button, Text, Icon, Icons, GridTable, GridColumn } from 'react-basics';
 import useMessages from 'components/hooks/useMessages';
 import useUser from 'components/hooks/useUser';
 
-export function WebsitesTable({ data = [], showTeam, showEditButton }) {
+export function WebsitesTable({
+  data = [],
+  showTeam,
+  showActions,
+  showEditButton,
+  showViewButton,
+  children,
+}) {
   const { formatMessage, labels } = useMessages();
   const { user } = useUser();
 
@@ -30,7 +37,7 @@ export function WebsitesTable({ data = [], showTeam, showEditButton }) {
 
           return (
             <>
-              {showEditButton && (!showTeam || ownerId === user.id) && (
+              {showActions && showEditButton && (!showTeam || ownerId === user.id) && (
                 <Link href={`/settings/websites/${id}`}>
                   <Button>
                     <Icon>
@@ -40,18 +47,21 @@ export function WebsitesTable({ data = [], showTeam, showEditButton }) {
                   </Button>
                 </Link>
               )}
-              <Link href={`/websites/${id}`}>
+              {showActions && showViewButton && (
-                <Button>
+                <Link href={`/websites/${id}`}>
-                  <Icon>
+                  <Button>
-                    <Icons.External />
+                    <Icon>
-                  </Icon>
+                      <Icons.External />
-                  <Text>{formatMessage(labels.view)}</Text>
+                    </Icon>
-                </Button>
+                    <Text>{formatMessage(labels.view)}</Text>
-              </Link>
+                  </Button>
+                </Link>
+              )}
             </>
           );
         }}
       </GridColumn>
+      {children}
     </GridTable>
   );
 }

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

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

src/app/(main)/websites/WebsitesBrowse.js

@@ -1,5 +1,5 @@
 'use client';
-import WebsiteList from '../../(main)/settings/websites/Websites';
+import WebsiteList from '../settings/websites/WebsitesDataTable';
 import { useMessages } from 'components/hooks';
 import { useState } from 'react';
 import { Item, Tabs } from 'react-basics';

src/components/common/DataTable.tsx

@@ -9,19 +9,21 @@ import styles from './DataTable.module.css';
 const DEFAULT_SEARCH_DELAY = 600;
 
 export interface DataTableProps {
-  result: {
+  queryResult: {
-    page: number;
+    result: {
-    pageSize: number;
+      page: number;
-    count: number;
+      pageSize: number;
-    data: any[];
+      count: number;
+      data: any[];
+    };
+    params: {
+      query: string;
+      page: number;
+    };
+    setParams: Dispatch<SetStateAction<{ query: string; page: number }>>;
+    isLoading: boolean;
+    error: unknown;
   };
-  params: {
-    query: string;
-    page: number;
-  };
-  setParams: Dispatch<SetStateAction<{ query: string; page: number }>>;
-  isLoading: boolean;
-  error: unknown;
   searchDelay?: number;
   showSearch?: boolean;
   showPaging?: boolean;
@@ -29,20 +31,17 @@ export interface DataTableProps {
 }
 
 export function DataTable({
-  result,
+  queryResult,
-  params,
+  searchDelay = 600,
-  setParams,
-  isLoading,
-  error,
-  searchDelay,
   showSearch = true,
   showPaging = true,
   children,
 }: DataTableProps) {
   const { formatMessage, labels, messages } = useMessages();
-  const { pageSize, count } = result || {};
+  const { result, error, isLoading, params, setParams } = queryResult || {};
-  const { query, page } = params || {};
+  const { page, pageSize, count, data } = result || {};
-  const hasData = Boolean(!isLoading && result?.data?.length);
+  const { query } = params || {};
+  const hasData = Boolean(!isLoading && data?.length);
   const noResults = Boolean(!isLoading && query && !hasData);
 
   const handleSearch = query => {

src/components/hooks/useFilterQuery.ts

@@ -1,4 +1,4 @@
-import { useCallback, useState } from 'react';
+import { useState } from 'react';
 import { useApi } from 'components/hooks/useApi';
 
 export function useFilterQuery(key: any[], fn, options?: any) {
@@ -8,19 +8,19 @@ export function useFilterQuery(key: any[], fn, options?: any) {
   });
   const { useQuery } = useApi();
 
-  const result = useQuery<{
+  const { data, ...other } = useQuery([...key, params], fn.bind(null, params), options);
-    page: number;
-    pageSize: number;
-    count: number;
-    data: any[];
-  }>([...key, params], fn.bind(null, params), options);
 
-  const getProps = useCallback(() => {
+  return {
-    const { data, isLoading, error } = result;
+    result: data as {
-    return { result: data, isLoading, error, params, setParams };
+      page: number;
-  }, [result, params, setParams]);
+      pageSize: number;
-
+      count: number;
-  return { ...result, getProps };
+      data: any[];
+    },
+    ...other,
+    params,
+    setParams,
+  };
 }
 
 export default useFilterQuery;

src/index.ts

@@ -32,9 +32,9 @@ export * from 'app/(main)/settings/teams/[id]/TeamMemberRemoveButton';
 export * from 'app/(main)/settings/teams/[id]/TeamMembers';
 export * from 'app/(main)/settings/teams/[id]/TeamMembersTable';
 export * from 'app/(main)/settings/teams/[id]/TeamSettings';
-export * from 'app/(main)/settings/teams/TeamsList';
+export * from 'app/(main)/settings/teams/TeamsDataTable';
 export * from 'app/(main)/settings/teams/TeamsTable';
-export * from 'app/(main)/settings/teams/TeamWebsiteRemoveButton';
+export * from 'app/(main)/settings/teams/[id]/TeamWebsiteRemoveButton';
 export * from 'app/(main)/settings/teams/[id]/TeamWebsites';
 export * from 'app/(main)/settings/teams/[id]/TeamWebsitesTable';
 export * from 'app/(main)/settings/teams/WebsiteTags';
@@ -46,5 +46,5 @@ export * from 'app/(main)/settings/websites/[id]/WebsiteDeleteForm';
 export * from 'app/(main)/settings/websites/[id]/WebsiteEditForm';
 export * from 'app/(main)/settings/websites/[id]/WebsiteResetForm';
 export * from 'app/(main)/settings/websites/WebsiteSettings';
-export * from 'app/(main)/settings/websites/Websites';
+export * from 'app/(main)/settings/websites/WebsitesDataTable';
 export * from 'app/(main)/settings/websites/WebsitesTable';

src/lib/middleware.ts

@@ -88,7 +88,7 @@ export const useValidate = async (schema, req, res) => {
       const rules = schema[req.method];
 
       if (rules) {
-        rules.validateSync(req.method === 'GET' ? { ...req.query } : { ...req.body });
+        rules.validateSync({ ...req.query, ...req.body });
       }
     } catch (e: any) {
       return badRequest(res, e.message);