diff --git a/src/components/pages/dashboard/Dashboard.js b/src/components/pages/dashboard/Dashboard.js index 8248cc81..2294b8be 100644 --- a/src/components/pages/dashboard/Dashboard.js +++ b/src/components/pages/dashboard/Dashboard.js @@ -1,8 +1,8 @@ -import { useState } from 'react'; -import { Button, Icon, Icons, Text, Flexbox } from 'react-basics'; +import { Button, Icon, Icons, Text } from 'react-basics'; import Link from 'next/link'; import Page from 'components/layout/Page'; import PageHeader from 'components/layout/PageHeader'; +import Pager from 'components/common/Pager'; import WebsiteChartList from 'components/pages/websites/WebsiteChartList'; import DashboardSettingsButton from 'components/pages/dashboard/DashboardSettingsButton'; import DashboardEdit from 'components/pages/dashboard/DashboardEdit'; @@ -11,23 +11,24 @@ import useApi from 'components/hooks/useApi'; import useDashboard from 'store/dashboard'; import useMessages from 'components/hooks/useMessages'; import useLocale from 'components/hooks/useLocale'; +import useApiFilter from 'components/hooks/useApiFilter'; export function Dashboard() { const { formatMessage, labels, messages } = useMessages(); - const dashboard = useDashboard(); - const { showCharts, limit, editing } = dashboard; - const [max, setMax] = useState(limit); - const { get, useQuery } = useApi(); - const { data, isLoading, error } = useQuery(['websites'], () => - get('/websites', { includeTeams: 1 }), - ); - const hasData = data && data?.data.length !== 0; - + const { showCharts, editing } = useDashboard(); const { dir } = useLocale(); - - function handleMore() { - setMax(max + limit); - } + const { get, useQuery } = useApi(); + const { page, handlePageChange } = useApiFilter(); + const pageSize = 10; + const { + data: result, + isLoading, + error, + } = useQuery(['websites', page, pageSize], () => + get('/websites', { includeTeams: 1, page, pageSize }), + ); + const { data, count } = result || {}; + const hasData = data && data?.length !== 0; return ( @@ -48,19 +49,17 @@ export function Dashboard() { )} {hasData && ( <> - {editing && } + {editing && } {!editing && ( - - )} - {max < data.length && ( - - - + <> + + + )} )} diff --git a/src/components/pages/dashboard/DashboardEdit.js b/src/components/pages/dashboard/DashboardEdit.js index 4eb259d6..f628599f 100644 --- a/src/components/pages/dashboard/DashboardEdit.js +++ b/src/components/pages/dashboard/DashboardEdit.js @@ -5,23 +5,33 @@ import { Button } from 'react-basics'; import { firstBy } from 'thenby'; 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'; -export function DashboardEdit({ websites }) { +export function DashboardEdit() { const settings = useDashboard(); const { websiteOrder } = settings; 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: websites } = result || {}; - const ordered = useMemo( - () => - websites + const ordered = useMemo(() => { + if (websites) { + return websites .map(website => ({ ...website, order: order.indexOf(website.id) })) - .sort(firstBy('order')), - [websites, order], - ); + .sort(firstBy('order')); + } + return []; + }, [websites, order]); function handleWebsiteDrag({ destination, source }) { if (!destination || destination.index === source.index) return; @@ -49,7 +59,7 @@ export function DashboardEdit({ websites }) { } return ( - <> +
- +
); } diff --git a/src/pages/api/websites/index.ts b/src/pages/api/websites/index.ts index d724f12f..d6009caf 100644 --- a/src/pages/api/websites/index.ts +++ b/src/pages/api/websites/index.ts @@ -42,8 +42,13 @@ export default async ( } = req.auth; if (req.method === 'GET') { - req.query.id = userId; - req.query.pageSize = 100; + if (!req.query.id) { + req.query.id = userId; + } + + if (!req.query.pageSize) { + req.query.pageSize = 100; + } return userWebsites(req as any, res); } diff --git a/src/queries/admin/report.ts b/src/queries/admin/report.ts index a053ba92..59eb7035 100644 --- a/src/queries/admin/report.ts +++ b/src/queries/admin/report.ts @@ -142,6 +142,7 @@ export async function getReports( ...pageFilters, ...(options?.include && { include: options.include }), }); + const count = await prisma.client.report.count({ where, }); diff --git a/src/queries/admin/team.ts b/src/queries/admin/team.ts index 284b218e..cf731ad4 100644 --- a/src/queries/admin/team.ts +++ b/src/queries/admin/team.ts @@ -135,6 +135,7 @@ export async function getTeams( ...pageFilters, ...(options?.include && { include: options?.include }), }); + const count = await prisma.client.team.count({ where }); return { data: teams, count, ...getParameters }; diff --git a/src/queries/admin/website.ts b/src/queries/admin/website.ts index 3d0c773b..cf4570cf 100644 --- a/src/queries/admin/website.ts +++ b/src/queries/admin/website.ts @@ -107,7 +107,8 @@ export async function getWebsites( ...pageFilters, ...(options?.include && { include: options.include }), }); - const count = await prisma.client.website.count({ where }); + + const count = await prisma.client.website.count({ where: { ...where, deletedAt: null } }); return { data: websites, count, ...getParameters }; }