Added paging to dashboard.

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 (
     <Page loading={isLoading} error={error}>
@@ -48,19 +49,17 @@ export function Dashboard() {
       )}
       {hasData && (
         <>
-          {editing && <DashboardEdit websites={data?.data} />}
+          {editing && <DashboardEdit />}
           {!editing && (
-            <WebsiteChartList websites={data?.data} showCharts={showCharts} limit={max} />
-          )}
-          {max < data.length && (
-            <Flexbox justifyContent="center">
-              <Button onClick={handleMore}>
-                <Icon rotate={dir === 'rtl' ? 180 : 0}>
-                  <Icons.More />
-                </Icon>
-                <Text>{formatMessage(labels.more)}</Text>
-              </Button>
-            </Flexbox>
+            <>
+              <WebsiteChartList websites={data} showCharts={showCharts} limit={pageSize} />
+              <Pager
+                page={page}
+                pageSize={pageSize}
+                count={count}
+                onPageChange={handlePageChange}
+              />
+            </>
           )}
         </>
       )}

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 (
-    <>
+    <Page loading={isLoading} error={error}>
       <div className={styles.buttons}>
         <Button onClick={handleSave} variant="action" size="small">
           {formatMessage(labels.save)}
@@ -95,7 +105,7 @@ export function DashboardEdit({ websites }) {
           </Droppable>
         </DragDropContext>
       </div>
-    </>
+    </Page>
   );
 }
 

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);
   }

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,
   });

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 };

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 };
 }