From 9bb89c7e8b9464eb8bf5fcd354e9e08be7143308 Mon Sep 17 00:00:00 2001 From: Mike Cao Date: Sun, 1 Oct 2023 16:11:12 -0700 Subject: [PATCH] Replaced SettingsTable with DataTable. --- src/app/(app)/dashboard/DashboardEdit.js | 12 +-- src/app/(app)/layout.tsx | 1 - src/app/(app)/reports/ReportsTable.js | 5 +- src/app/(app)/settings/layout.module.css | 2 + src/app/(app)/settings/teams/TeamsTable.js | 6 +- .../(app)/settings/teams/[id]/TeamMembers.js | 49 +++------ .../settings/teams/[id]/TeamMembersTable.js | 75 ++++--------- .../(app)/settings/teams/[id]/TeamSettings.js | 6 +- .../(app)/settings/teams/[id]/TeamWebsites.js | 94 ++++++---------- .../settings/teams/[id]/TeamWebsitesTable.js | 82 +++++--------- src/app/(app)/settings/users/UsersTable.js | 6 +- .../websites/{WebsitesList.js => Websites.js} | 4 +- ...tesList.module.css => Websites.module.css} | 0 .../(app)/settings/websites/WebsitesTable.js | 6 +- src/app/(app)/settings/websites/page.js | 4 +- src/app/(app)/websites/WebsitesBrowse.js | 2 +- src/components/common/DataTable.module.css | 3 + src/components/common/SettingsTable.js | 100 ------------------ .../common/SettingsTable.module.css | 44 -------- src/components/layout/Page.tsx | 1 + src/components/layout/PageHeader.tsx | 2 +- src/index.ts | 3 +- src/lib/prisma.ts | 2 +- src/pages/api/users/[id]/websites.ts | 6 +- 24 files changed, 134 insertions(+), 381 deletions(-) rename src/app/(app)/settings/websites/{WebsitesList.js => Websites.js} (94%) rename src/app/(app)/settings/websites/{WebsitesList.module.css => Websites.module.css} (100%) delete mode 100644 src/components/common/SettingsTable.js delete mode 100644 src/components/common/SettingsTable.module.css diff --git a/src/app/(app)/dashboard/DashboardEdit.js b/src/app/(app)/dashboard/DashboardEdit.js index f628599fed..3af3386705 100644 --- 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 ( - + <>
- + ); } diff --git a/src/app/(app)/layout.tsx b/src/app/(app)/layout.tsx index c579f2c4dd..1c9cc27792 100644 --- 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 index 72b0c273ce..4c81faa701 100644 --- 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 ( - + <> {formatMessage(labels.view)} {(user.id === userId || user.id === website?.userId) && ( @@ -64,7 +63,7 @@ export function ReportsTable({ data = [], onDelete, showDomain }) { )} - + ); }} diff --git a/src/app/(app)/settings/layout.module.css b/src/app/(app)/settings/layout.module.css index ef31160da9..b87f75d004 100644 --- 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 index 2254e5f7fd..ca5a7fa743 100644 --- 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 ( - + <> - - {close => } - - - ); - return ( -
- {addButton} - {hasData && ( - - )} -
+ <> + + + + + {close => ( + + )} + + + + {({ data }) => } + ); } diff --git a/src/app/(app)/settings/teams/[id]/TeamWebsitesTable.js b/src/app/(app)/settings/teams/[id]/TeamWebsitesTable.js index 47d3af41f1..8a6c6ebe5d 100644 --- a/src/app/(app)/settings/teams/[id]/TeamWebsitesTable.js +++ b/src/app/(app)/settings/teams/[id]/TeamWebsitesTable.js @@ -1,65 +1,41 @@ import useMessages from 'components/hooks/useMessages'; import useUser from 'components/hooks/useUser'; import Link from 'next/link'; -import { Button, Icon, Icons, Text } from 'react-basics'; +import { Button, GridColumn, GridTable, Icon, Icons, Text } from 'react-basics'; import TeamWebsiteRemoveButton from '../TeamWebsiteRemoveButton'; -import SettingsTable from 'components/common/SettingsTable'; -export function TeamWebsitesTable({ - data = [], - onSave, - filterValue, - onFilterChange, - onPageChange, - onPageSizeChange, - openExternal = false, -}) { +export function TeamWebsitesTable({ data = [], onSave }) { const { formatMessage, labels } = useMessages(); - const { user } = useUser(); - const columns = [ - { name: 'name', label: formatMessage(labels.name) }, - { name: 'domain', label: formatMessage(labels.domain) }, - { name: 'action', label: ' ' }, - ]; return ( - - {row => { - const { id: teamId, teamUser } = row.teamWebsite[0].team; - const { id: websiteId, name, domain, userId } = row; - const owner = teamUser[0]; - const canRemove = user.id === userId || user.id === owner.userId; - - row.name = name; - row.domain = domain; - - return ( - <> - - - - {canRemove && ( - - )} - - ); - }} - + + + + + {row => { + const { id: teamId, teamUser } = row.teamWebsite[0].team; + const { id: websiteId, userId } = row; + const owner = teamUser[0]; + const canRemove = user.id === userId || user.id === owner.userId; + return ( + <> + + + + {canRemove && ( + + )} + + ); + }} + + ); } diff --git a/src/app/(app)/settings/users/UsersTable.js b/src/app/(app)/settings/users/UsersTable.js index 16cf065a0d..6712e4a503 100644 --- a/src/app/(app)/settings/users/UsersTable.js +++ b/src/app/(app)/settings/users/UsersTable.js @@ -1,4 +1,4 @@ -import { Button, Text, Icon, Icons, GridTable, GridColumn, Flexbox } from 'react-basics'; +import { Button, Text, Icon, Icons, GridTable, GridColumn } from 'react-basics'; import { formatDistance } from 'date-fns'; import Link from 'next/link'; import { ROLES } from 'lib/constants'; @@ -36,7 +36,7 @@ export function UsersTable({ data = [] }) { {row => { const { id, username } = row; return ( - + <> - + ); }} diff --git a/src/app/(app)/settings/websites/WebsitesList.js b/src/app/(app)/settings/websites/Websites.js similarity index 94% rename from src/app/(app)/settings/websites/WebsitesList.js rename to src/app/(app)/settings/websites/Websites.js index 45f839ecc7..5680506233 100644 --- a/src/app/(app)/settings/websites/WebsitesList.js +++ b/src/app/(app)/settings/websites/Websites.js @@ -6,7 +6,7 @@ import DataTable from 'components/common/DataTable'; import useFilterQuery from 'components/hooks/useFilterQuery'; import WebsitesHeader from './WebsitesHeader'; -export function WebsitesList({ +export function Websites({ showHeader = true, showEditButton = true, showTeam, @@ -40,4 +40,4 @@ export function WebsitesList({ ); } -export default WebsitesList; +export default Websites; diff --git a/src/app/(app)/settings/websites/WebsitesList.module.css b/src/app/(app)/settings/websites/Websites.module.css similarity index 100% rename from src/app/(app)/settings/websites/WebsitesList.module.css rename to src/app/(app)/settings/websites/Websites.module.css diff --git a/src/app/(app)/settings/websites/WebsitesTable.js b/src/app/(app)/settings/websites/WebsitesTable.js index 3739de646d..6ac977abc8 100644 --- a/src/app/(app)/settings/websites/WebsitesTable.js +++ b/src/app/(app)/settings/websites/WebsitesTable.js @@ -1,5 +1,5 @@ import Link from 'next/link'; -import { Button, Text, Icon, Icons, GridTable, GridColumn, Flexbox } from 'react-basics'; +import { Button, Text, Icon, Icons, GridTable, GridColumn } from 'react-basics'; import useMessages from 'components/hooks/useMessages'; import useUser from 'components/hooks/useUser'; @@ -29,7 +29,7 @@ export function WebsitesTable({ data = [], showTeam, showEditButton }) { } = row; return ( - + <> {showEditButton && (!showTeam || ownerId === user.id) && ( - + ); }} diff --git a/src/app/(app)/settings/websites/page.js b/src/app/(app)/settings/websites/page.js index ade3e3adfe..3cd5afa756 100644 --- a/src/app/(app)/settings/websites/page.js +++ b/src/app/(app)/settings/websites/page.js @@ -1,9 +1,9 @@ -import WebsitesList from 'app/(app)/settings/websites/WebsitesList'; +import Websites from './Websites'; export default function () { if (process.env.cloudMode) { return null; } - return ; + return ; } diff --git a/src/app/(app)/websites/WebsitesBrowse.js b/src/app/(app)/websites/WebsitesBrowse.js index 006d0a40d7..96a25743d9 100644 --- a/src/app/(app)/websites/WebsitesBrowse.js +++ b/src/app/(app)/websites/WebsitesBrowse.js @@ -1,5 +1,5 @@ 'use client'; -import WebsiteList from 'app/(app)/settings/websites/WebsitesList'; +import WebsiteList from '../settings/websites/Websites'; import { useMessages } from 'components/hooks'; import { useState } from 'react'; import { Item, Tabs } from 'react-basics'; diff --git a/src/components/common/DataTable.module.css b/src/components/common/DataTable.module.css index b7426a7cbf..4ca52b744d 100644 --- a/src/components/common/DataTable.module.css +++ b/src/components/common/DataTable.module.css @@ -23,6 +23,9 @@ } .body td { + display: flex; + gap: 10px; + min-height: 70px; align-items: center; } diff --git a/src/components/common/SettingsTable.js b/src/components/common/SettingsTable.js deleted file mode 100644 index 701dbe13b6..0000000000 --- a/src/components/common/SettingsTable.js +++ /dev/null @@ -1,100 +0,0 @@ -import Empty from 'components/common/Empty'; -import useMessages from 'components/hooks/useMessages'; -import { useState } from 'react'; -import { - SearchField, - Table, - TableBody, - TableCell, - TableColumn, - TableHeader, - TableRow, -} from 'react-basics'; -import styles from './SettingsTable.module.css'; -import Pager from 'components/common/Pager'; - -export function SettingsTable({ - columns = [], - data, - children, - cellRender, - showSearch, - showPaging, - onFilterChange, - onPageChange, - onPageSizeChange, - filterValue, -}) { - const { formatMessage, labels, messages } = useMessages(); - const [filter, setFilter] = useState(filterValue); - const { data: value, page, count, pageSize } = data; - - const handleFilterChange = value => { - setFilter(value); - onFilterChange(value); - }; - - return ( - <> - {showSearch && (value.length > 0 || filterValue) && ( - - )} - {value.length === 0 && filterValue && ( - - )} - {value.length > 0 && ( - - - {(column, index) => { - return ( - - {column.label} - - ); - }} - - - {(row, keys, rowIndex) => { - row.action = children(row, keys, rowIndex); - - return ( - - {(data, key, colIndex) => { - return ( - - - {cellRender ? cellRender(row, data, key, colIndex) : data[key]} - - ); - }} - - ); - }} - - {showPaging && ( - - )} -
- )} - - ); -} - -export default SettingsTable; diff --git a/src/components/common/SettingsTable.module.css b/src/components/common/SettingsTable.module.css deleted file mode 100644 index fd6cddfad4..0000000000 --- a/src/components/common/SettingsTable.module.css +++ /dev/null @@ -1,44 +0,0 @@ -.cell { - align-items: center; -} - -.row .cell:last-child { - gap: 10px; - justify-content: flex-end; -} - -.label { - display: none; - font-weight: 700; -} - -@media screen and (max-width: 992px) { - .header .cell { - display: none; - } - - .label { - display: block; - min-width: 100px; - } - - .row .cell { - padding-left: 0; - flex-basis: 100%; - } -} - -@media screen and (max-width: 1200px) { - .row { - flex-wrap: wrap; - } - - .header .cell:last-child { - display: none; - } - - .row .cell:last-child { - padding-left: 0; - flex-basis: 100%; - } -} diff --git a/src/components/layout/Page.tsx b/src/components/layout/Page.tsx index a96e5a4c9d..2f7020128d 100644 --- a/src/components/layout/Page.tsx +++ b/src/components/layout/Page.tsx @@ -1,3 +1,4 @@ +'use client'; import { ReactNode } from 'react'; import classNames from 'classnames'; import { Banner, Loading } from 'react-basics'; diff --git a/src/components/layout/PageHeader.tsx b/src/components/layout/PageHeader.tsx index d1ea9bf909..c92a89a033 100644 --- a/src/components/layout/PageHeader.tsx +++ b/src/components/layout/PageHeader.tsx @@ -5,7 +5,7 @@ import styles from './PageHeader.module.css'; export interface PageHeaderProps { title?: string; className?: string; - children: ReactNode; + children?: ReactNode; } export function PageHeader({ title, className, children }: PageHeaderProps) { diff --git a/src/index.ts b/src/index.ts index 72fe733b2d..aeaf318af8 100644 --- a/src/index.ts +++ b/src/index.ts @@ -12,7 +12,6 @@ export * from 'components/common/HoverTooltip'; export * from 'components/common/LinkButton'; export * from 'components/common/MobileMenu'; export * from 'components/common/Pager'; -export * from 'components/common/SettingsTable'; export * from 'components/common/UpdateNotice'; export * from 'components/common/WorldMap'; @@ -113,5 +112,5 @@ export * from 'app/(app)/settings/websites/[id]/WebsiteDeleteForm'; export * from 'app/(app)/settings/websites/[id]/WebsiteEditForm'; export * from 'app/(app)/settings/websites/[id]/WebsiteResetForm'; export * from 'app/(app)/settings/websites/WebsiteSettings'; -export * from 'app/(app)/settings/websites/WebsitesList'; +export * from './app/(app)/settings/websites/Websites'; export * from 'app/(app)/settings/websites/WebsitesTable'; diff --git a/src/lib/prisma.ts b/src/lib/prisma.ts index 442ee20228..4b910f003f 100644 --- a/src/lib/prisma.ts +++ b/src/lib/prisma.ts @@ -189,7 +189,7 @@ function getPageFilters(filters: SearchFilter): [ return [ { - ...(pageSize > 0 && { take: pageSize, skip: pageSize * (page - 1) }), + ...(pageSize > 0 && { take: +pageSize, skip: +pageSize * (page - 1) }), ...(orderBy && { orderBy: [ { diff --git a/src/pages/api/users/[id]/websites.ts b/src/pages/api/users/[id]/websites.ts index ede2673870..2617047231 100644 --- a/src/pages/api/users/[id]/websites.ts +++ b/src/pages/api/users/[id]/websites.ts @@ -30,7 +30,7 @@ export default async ( await useValidate(schema, req, res); const { user } = req.auth; - const { id: userId, page, query, includeTeams, onlyTeams } = req.query; + const { id: userId, page = 1, query = '', includeTeams, onlyTeams } = req.query; if (req.method === 'GET') { if (!user.isAdmin && user.id !== userId) { @@ -38,8 +38,8 @@ export default async ( } const websites = await getWebsitesByUserId(userId, { - page: +page, - query: query as string, + page, + query, includeTeams, onlyTeams, });