Replaced SettingsTable with DataTable.

umami-software · Oct 1, 2023 · 9bb89c7 · 9bb89c7
1 parent 0d9b6e8
commit 9bb89c7
Show file tree

Hide file tree

Showing 24 changed files with 134 additions and 381 deletions.
diff --git a/src/app/(app)/dashboard/DashboardEdit.js b/src/app/(app)/dashboard/DashboardEdit.js
@@ -1,3 +1,4 @@
+'use client';
 import { useState, useMemo } from 'react';
 import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
 import classNames from 'classnames';
@@ -7,7 +8,6 @@ import useDashboard, { saveDashboard } from 'store/dashboard';
 import useMessages from 'components/hooks/useMessages';
 import useApi from 'components/hooks/useApi';
 import styles from './DashboardEdit.module.css';
-import Page from 'components/layout/Page';
 
 const dragId = 'dashboard-website-ordering';
 
@@ -17,11 +17,7 @@ export function DashboardEdit() {
   const { formatMessage, labels } = useMessages();
   const [order, setOrder] = useState(websiteOrder || []);
   const { get, useQuery } = useApi();
-  const {
-    data: result,
-    isLoading,
-    error,
-  } = useQuery(['websites'], () => get('/websites', { includeTeams: 1 }));
+  const { data: result } = useQuery(['websites'], () => get('/websites', { includeTeams: 1 }));
   const { data: websites } = result || {};
 
   const ordered = useMemo(() => {
@@ -59,7 +55,7 @@ export function DashboardEdit() {
   }
 
   return (
-    <Page loading={isLoading} error={error}>
+    <>
       <div className={styles.buttons}>
         <Button onClick={handleSave} variant="action" size="small">
           {formatMessage(labels.save)}
@@ -105,7 +101,7 @@ export function DashboardEdit() {
           </Droppable>
         </DragDropContext>
       </div>
-    </Page>
+    </>
   );
 }
 

diff --git a/src/app/(app)/layout.tsx b/src/app/(app)/layout.tsx
@@ -1,4 +1,3 @@
-'use client';
 import Shell from './Shell';
 import NavBar from './NavBar';
 import Page from 'components/layout/Page';

diff --git a/src/app/(app)/reports/ReportsTable.js b/src/app/(app)/reports/ReportsTable.js
@@ -4,7 +4,6 @@ import { useMessages } from 'components/hooks';
 import useUser from 'components/hooks/useUser';
 import {
   Button,
-  Flexbox,
   GridColumn,
   GridTable,
   Icon,
@@ -43,7 +42,7 @@ export function ReportsTable({ data = [], onDelete, showDomain }) {
         {row => {
           const { id, name, userId, website } = row;
           return (
-            <Flexbox gap={10}>
+            <>
               <LinkButton href={`/reports/${id}`}>{formatMessage(labels.view)}</LinkButton>
               {(user.id === userId || user.id === website?.userId) && (
                 <ModalTrigger>
@@ -64,7 +63,7 @@ export function ReportsTable({ data = [], onDelete, showDomain }) {
                   </Modal>
                 </ModalTrigger>
               )}
-            </Flexbox>
+            </>
           );
         }}
       </GridColumn>

diff --git a/src/app/(app)/settings/layout.module.css b/src/app/(app)/settings/layout.module.css
@@ -11,6 +11,8 @@
 }
 
 .content {
+  display: flex;
+  flex-direction: column;
   min-height: 50vh;
 }
 

diff --git a/src/app/(app)/settings/teams/TeamsTable.js b/src/app/(app)/settings/teams/TeamsTable.js
@@ -3,7 +3,7 @@ import useMessages from 'components/hooks/useMessages';
 import useUser from 'components/hooks/useUser';
 import { ROLES } from 'lib/constants';
 import Link from 'next/link';
-import { Button, Flexbox, GridColumn, GridTable, Icon, Icons, Text } from 'react-basics';
+import { Button, GridColumn, GridTable, Icon, Icons, Text } from 'react-basics';
 import TeamDeleteButton from './TeamDeleteButton';
 import TeamLeaveButton from './TeamLeaveButton';
 
@@ -24,7 +24,7 @@ export function TeamsTable({ data = [] }) {
           const showDelete = user.id === owner?.userId;
 
           return (
-            <Flexbox gap={10}>
+            <>
               <Link href={`/settings/teams/${id}`}>
                 <Button>
                   <Icon>
@@ -35,7 +35,7 @@ export function TeamsTable({ data = [] }) {
               </Link>
               {showDelete && <TeamDeleteButton teamId={id} teamName={name} />}
               {!showDelete && <TeamLeaveButton teamId={id} teamName={name} />}
-            </Flexbox>
+            </>
           );
         }}
       </GridColumn>

diff --git a/src/app/(app)/settings/teams/[id]/TeamMembers.js b/src/app/(app)/settings/teams/[id]/TeamMembers.js
@@ -1,46 +1,25 @@
-import { Loading, useToasts } from 'react-basics';
 import useApi from 'components/hooks/useApi';
-import useMessages from 'components/hooks/useMessages';
-import useApiFilter from 'components/hooks/useApiFilter';
 import TeamMembersTable from './TeamMembersTable';
+import useFilterQuery from 'components/hooks/useFilterQuery';
+import DataTable from 'components/common/DataTable';
 
 export function TeamMembers({ teamId, readOnly }) {
-  const { showToast } = useToasts();
-  const { formatMessage, messages } = useMessages();
-  const { filter, page, pageSize, handleFilterChange, handlePageChange, handlePageSizeChange } =
-    useApiFilter();
-  const { get, useQuery } = useApi();
-  const { data, isLoading, refetch } = useQuery(
-    ['teams:users', teamId, filter, page, pageSize],
-    () =>
-      get(`/teams/${teamId}/users`, {
-        filter,
-        page,
-        pageSize,
-      }),
+  const { get } = useApi();
+  const { getProps } = useFilterQuery(
+    ['team:users', teamId],
+    params => {
+      return get(`/teams/${teamId}/users`, {
+        ...params,
+      });
+    },
+    { enabled: !!teamId },
   );
 
-  if (isLoading) {
-    return <Loading icon="dots" style={{ minHeight: 300 }} />;
-  }
-
-  const handleSave = async () => {
-    await refetch();
-    showToast({ message: formatMessage(messages.saved), variant: 'success' });
-  };
-
   return (
     <>
-      <TeamMembersTable
-        onSave={handleSave}
-        teamId={teamId}
-        data={data}
-        readOnly={readOnly}
-        onFilterChange={handleFilterChange}
-        onPageChange={handlePageChange}
-        onPageSizeChange={handlePageSizeChange}
-        filterValue={filter}
-      />
+      <DataTable {...getProps()}>
+        {({ data }) => <TeamMembersTable data={data} readOnly={readOnly} />}
+      </DataTable>
     </>
   );
 }

diff --git a/src/app/(app)/settings/teams/[id]/TeamMembersTable.js b/src/app/(app)/settings/teams/[id]/TeamMembersTable.js
@@ -1,67 +1,36 @@
+import { GridColumn, GridTable } from 'react-basics';
 import useMessages from 'components/hooks/useMessages';
 import useUser from 'components/hooks/useUser';
 import { ROLES } from 'lib/constants';
 import TeamMemberRemoveButton from './TeamMemberRemoveButton';
-import SettingsTable from 'components/common/SettingsTable';
 
-export function TeamMembersTable({
-  data = [],
-  teamId,
-  onSave,
-  readOnly,
-  filterValue,
-  onFilterChange,
-  onPageChange,
-  onPageSizeChange,
-}) {
+export function TeamMembersTable({ data = [], teamId, readOnly, onChange }) {
   const { formatMessage, labels } = useMessages();
   const { user } = useUser();
 
-  const columns = [
-    { name: 'username', label: formatMessage(labels.username) },
-    { name: 'role', label: formatMessage(labels.role) },
-    { name: 'action', label: ' ' },
-  ];
-
-  const cellRender = (row, data, key) => {
-    if (key === 'username') {
-      return row?.username;
-    }
-    if (key === 'role') {
-      return formatMessage(
-        labels[
-          Object.keys(ROLES).find(key => ROLES[key] === row?.teamUser[0]?.role) || labels.unknown
-        ],
-      );
-    }
-    return data[key];
+  const roles = {
+    [ROLES.teamOwner]: formatMessage(labels.teamOwner),
+    [ROLES.teamMember]: formatMessage(labels.teamMember),
   };
 
   return (
-    <SettingsTable
-      data={data}
-      columns={columns}
-      cellRender={cellRender}
-      showSearch={true}
-      showPaging={true}
-      onFilterChange={onFilterChange}
-      onPageChange={onPageChange}
-      onPageSizeChange={onPageSizeChange}
-      filterValue={filterValue}
-    >
-      {row => {
-        return (
-          !readOnly && (
-            <TeamMemberRemoveButton
-              teamId={teamId}
-              userId={row.id}
-              disabled={user.id === row?.user?.id || row.role === ROLES.teamOwner}
-              onSave={onSave}
-            />
-          )
-        );
-      }}
-    </SettingsTable>
+    <GridTable data={data}>
+      <GridColumn name="username" label={formatMessage(labels.username)} />
+      <GridColumn name="role" label={formatMessage(labels.role)}>
+        {row => roles[row?.teamUser?.[0]?.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} onSave={onChange} />
+            )
+          );
+        }}
+      </GridColumn>
+    </GridTable>
   );
 }
 

diff --git a/src/app/(app)/settings/teams/[id]/TeamSettings.js b/src/app/(app)/settings/teams/[id]/TeamSettings.js
@@ -1,6 +1,6 @@
 'use client';
 import { useEffect, useState } from 'react';
-import { Item, Loading, Tabs, useToasts } from 'react-basics';
+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';
@@ -46,7 +46,7 @@ export function TeamSettings({ teamId }) {
   }
 
   return (
-    <>
+    <Flexbox direction="column">
       <PageHeader title={values?.name} />
       <Tabs selectedKey={tab} onSelect={setTab} style={{ marginBottom: 30 }}>
         <Item key="details">{formatMessage(labels.details)}</Item>
@@ -58,7 +58,7 @@ export function TeamSettings({ teamId }) {
       )}
       {tab === 'members' && <TeamMembers teamId={teamId} readOnly={!canEdit} />}
       {tab === 'websites' && <TeamWebsites teamId={teamId} readOnly={!canEdit} />}
-    </>
+    </Flexbox>
   );
 }
 

diff --git a/src/app/(app)/settings/teams/[id]/TeamWebsites.js b/src/app/(app)/settings/teams/[id]/TeamWebsites.js
@@ -1,75 +1,49 @@
-import {
-  ActionForm,
-  Button,
-  Icon,
-  Icons,
-  Loading,
-  Modal,
-  ModalTrigger,
-  Text,
-  useToasts,
-} from 'react-basics';
+import { ActionForm, Button, Icon, Icons, Modal, ModalTrigger, Text } from 'react-basics';
 import TeamWebsitesTable from './TeamWebsitesTable';
 import TeamAddWebsiteForm from './TeamAddWebsiteForm';
 import useApi from 'components/hooks/useApi';
 import useMessages from 'components/hooks/useMessages';
-import useApiFilter from 'components/hooks/useApiFilter';
+import useUser from 'components/hooks/useUser';
+import useFilterQuery from 'components/hooks/useFilterQuery';
+import DataTable from 'components/common/DataTable';
 
 export function TeamWebsites({ teamId }) {
-  const { showToast } = useToasts();
   const { formatMessage, labels, messages } = useMessages();
-  const { filter, page, pageSize, handleFilterChange, handlePageChange, handlePageSizeChange } =
-    useApiFilter();
-  const { get, useQuery } = useApi();
-  const { data, isLoading, refetch } = useQuery(
-    ['teams:websites', teamId, filter, page, pageSize],
-    () =>
-      get(`/teams/${teamId}/websites`, {
-        filter,
-        page,
-        pageSize,
-      }),
+  const { user } = useUser();
+  const { get } = useApi();
+  const { getProps, refetch } = useFilterQuery(
+    ['team:websites', teamId],
+    params => {
+      return get(`/teams/${teamId}/websites`, {
+        ...params,
+      });
+    },
+    { enabled: !!user },
   );
-  const hasData = data && data.length !== 0;
 
-  if (isLoading) {
-    return <Loading icon="dots" style={{ minHeight: 300 }} />;
-  }
-
-  const handleSave = async () => {
-    await refetch();
-    showToast({ message: formatMessage(messages.saved), variant: 'success' });
+  const handleWebsiteAdd = () => {
+    refetch();
   };
 
-  const addButton = (
-    <ModalTrigger>
-      <Button variant="primary">
-        <Icon>
-          <Icons.Plus />
-        </Icon>
-        <Text>{formatMessage(labels.addWebsite)}</Text>
-      </Button>
-      <Modal title={formatMessage(labels.addWebsite)}>
-        {close => <TeamAddWebsiteForm teamId={teamId} onSave={handleSave} onClose={close} />}
-      </Modal>
-    </ModalTrigger>
-  );
-
   return (
-    <div>
-      <ActionForm description={formatMessage(messages.teamWebsitesInfo)}>{addButton}</ActionForm>
-      {hasData && (
-        <TeamWebsitesTable
-          teamId={teamId}
-          data={data}
-          onSave={handleSave}
-          onFilterChange={handleFilterChange}
-          onPageChange={handlePageChange}
-          onPageSizeChange={handlePageSizeChange}
-          filterValue={filter}
-        />
-      )}
-    </div>
+    <>
+      <ActionForm description={formatMessage(messages.teamWebsitesInfo)}>
+        <ModalTrigger>
+          <Button variant="primary">
+            <Icon>
+              <Icons.Plus />
+            </Icon>
+            <Text>{formatMessage(labels.addWebsite)}</Text>
+          </Button>
+          <Modal title={formatMessage(labels.addWebsite)}>
+            {close => (
+              <TeamAddWebsiteForm teamId={teamId} onSave={handleWebsiteAdd} onClose={close} />
+            )}
+          </Modal>
+        </ModalTrigger>
+      </ActionForm>
+      <DataTable {...getProps()}>{({ data }) => <TeamWebsitesTable data={data} />}</DataTable>
+    </>
   );
 }