refactor: Zmiana systemu paginacji (#153)

* in progress - simplify pagination * new buttons and props * sitemap generation with new pagination * refactor, delete unused encodings * fix: last PR errors fixed Co-authored-by: Michał Miszczyszyn <michal@mmiszy.pl>
typeofweb-org · Jun 7, 2021 · 42ec248 · 42ec248
1 parent 2bcff95
commit 42ec248
Show file tree

Hide file tree

Showing 15 changed files with 134 additions and 165 deletions.
diff --git a/api-helpers/articles.ts b/api-helpers/articles.ts
@@ -1,38 +1,18 @@
 import type { PrismaClient } from '@prisma/client';
 
-import { isIsoDate } from '../utils/date-utils';
+import {
+  LIST_ARTICLES_PER_PAGE,
+  TILES_ARTICLES_PER_BLOG,
+  TILES_BLOGS_PER_PAGE,
+} from '../constants';
 
-import { cursorToText, textToCursor } from './cursor-encoding';
 import { HTTPNotFound } from './errors';
 
-export const TILES_BLOGS_PER_PAGE = 4;
-export const TILES_ARTICLES_PER_BLOG = 5;
-export const LIST_ARTICLES_PER_PAGE = 20;
-
-function last<T extends readonly R[], R>(arr: readonly [R, ...T]): R;
-function last<T>(arr: readonly T[]): T | undefined;
-function last<T>(arr: readonly T[]): T | undefined {
-  return arr[arr.length - 1];
-}
-
-export const getArticlesForGrid = async (prisma: PrismaClient, cursor?: string) => {
-  const date = cursor && cursorToText(cursor);
-
-  if (date && !isIsoDate(date)) {
-    throw new HTTPNotFound();
-  }
-
-  const where = date
-    ? {
-        lastArticlePublishedAt: {
-          lt: date,
-          not: null,
-        },
-      }
-    : {};
-
+export const getArticlesForGrid = async (prisma: PrismaClient, page: number) => {
+  const pageNumber = reversePageNumber(page, await getLastBlogPage(prisma));
   const blogs = await prisma.blog.findMany({
-    where: { ...where, isPublic: true },
+    where: { isPublic: true },
+    skip: pageNumber * TILES_BLOGS_PER_PAGE,
     take: TILES_BLOGS_PER_PAGE,
     orderBy: {
       lastArticlePublishedAt: 'desc',
@@ -46,52 +26,34 @@ export const getArticlesForGrid = async (prisma: PrismaClient, cursor?: string)
       },
     },
   });
+  if (blogs.length === 0) throw new HTTPNotFound();
 
-  const lastBlog = last(blogs);
   return {
     data: blogs,
-    nextCursor:
-      lastBlog?.lastArticlePublishedAt &&
-      textToCursor(lastBlog?.lastArticlePublishedAt.toISOString()),
   };
 };
 
-export const getArticlesPaginationForGrid = async (prisma: PrismaClient) => {
-  const blogs = (await prisma.blog.findMany({
-    where: { isPublic: true, lastArticlePublishedAt: { not: null } },
-    orderBy: {
-      lastArticlePublishedAt: 'desc',
-    },
-    select: {
-      lastArticlePublishedAt: true,
-    },
-  })) as ReadonlyArray<{ readonly lastArticlePublishedAt: Date }>;
-
-  const cursors = blogs.flatMap((blog, index) => {
-    if (index % TILES_BLOGS_PER_PAGE === TILES_BLOGS_PER_PAGE - 1) {
-      return [textToCursor(blog.lastArticlePublishedAt.toISOString())];
-    }
-    return [];
+export const getLastArticlePage = async (prisma: PrismaClient) => {
+  const articlesCount = await prisma.article.count({
+    where: { blog: { isPublic: true } },
   });
-  return cursors;
+  return Math.ceil(articlesCount / LIST_ARTICLES_PER_PAGE);
 };
 
-export const getArticlesForList = async (prisma: PrismaClient, cursor?: string) => {
-  const date = cursor && cursorToText(cursor);
-
-  if (date && !isIsoDate(date)) {
-    throw new HTTPNotFound();
-  }
-
-  const where = date
-    ? {
-        publishedAt: {
-          lt: date,
-        },
-      }
-    : {};
+export const getLastBlogPage = async (prisma: PrismaClient) => {
+  const blogCount = await prisma.blog.count({
+    where: { isPublic: true, lastArticlePublishedAt: { not: null } },
+  });
+  return Math.ceil(blogCount / TILES_BLOGS_PER_PAGE);
+};
+const reversePageNumber = (page: number, lastPage: number): number => {
+  return lastPage - page;
+};
+export const getArticlesForList = async (prisma: PrismaClient, page: number) => {
+  const pageNumber = reversePageNumber(page, await getLastArticlePage(prisma));
   const articles = await prisma.article.findMany({
-    where: { ...where, blog: { isPublic: true } },
+    skip: pageNumber * LIST_ARTICLES_PER_PAGE,
+    where: { blog: { isPublic: true } },
     take: LIST_ARTICLES_PER_PAGE,
     orderBy: {
       publishedAt: 'desc',
@@ -100,36 +62,12 @@ export const getArticlesForList = async (prisma: PrismaClient, cursor?: string)
       blog: true,
     },
   });
-
-  const lastArticle = last(articles);
+  if (articles.length === 0) throw new HTTPNotFound();
   return {
     data: articles,
-    nextCursor: lastArticle?.publishedAt && textToCursor(lastArticle?.publishedAt.toISOString()),
   };
 };
 
-export const getArticlesPaginationForList = async (prisma: PrismaClient) => {
-  const articles = await prisma.article.findMany({
-    where: {
-      blog: { isPublic: true },
-    },
-    orderBy: {
-      publishedAt: 'desc',
-    },
-    select: {
-      publishedAt: true,
-    },
-  });
-
-  const cursors = articles.flatMap((article, index) => {
-    if (index % LIST_ARTICLES_PER_PAGE === LIST_ARTICLES_PER_PAGE - 1) {
-      return [textToCursor(article.publishedAt.toISOString())];
-    }
-    return [];
-  });
-  return cursors;
-};
-
 export const getArticlesSlugs = async (prisma: PrismaClient, limit?: number) => {
   const articles = await prisma.article.findMany({
     where: {

diff --git a/api-helpers/cursor-encoding.ts b/api-helpers/cursor-encoding.ts
diff --git a/api-helpers/sitemap.ts b/api-helpers/sitemap.ts
@@ -1,10 +1,8 @@
 import type { PrismaClient } from '@prisma/client';
 
-import {
-  getArticlesPaginationForGrid,
-  getArticlesPaginationForList,
-  getArticlesSlugs,
-} from './articles';
+import { getPagesArray } from '../utils/array-utils';
+
+import { getLastArticlePage, getLastBlogPage, getArticlesSlugs } from './articles';
 
 type Item = {
   readonly path: string;
@@ -22,25 +20,27 @@ const staticItems: readonly Item[] = [
 ];
 
 export async function getSitemap(prisma: PrismaClient) {
-  const [gridCursors, listCursors, articleSlugs] = await Promise.all([
-    getArticlesPaginationForGrid(prisma),
-    getArticlesPaginationForList(prisma),
+  const [gridLastPage, listLastPage, articleSlugs] = await Promise.all([
+    getLastBlogPage(prisma),
+    getLastArticlePage(prisma),
     getArticlesSlugs(prisma),
   ]);
+  const gridPages = getPagesArray(gridLastPage);
+  const listPages = getPagesArray(listLastPage);
 
   const dynamicItems: readonly Item[] = [
     ...articleSlugs.map(({ slug }) => ({
       path: `/artykuly/${slug}`,
       changefreq: 'monthly' as const,
       priority: 0.5,
     })),
-    ...gridCursors.map((cursor) => ({
-      path: `/grid/${cursor}`,
+    ...gridPages.map((page) => ({
+      path: `/grid/${page}`,
       changefreq: 'hourly' as const,
       priority: 0.4,
     })),
-    ...listCursors.map((cursor) => ({
-      path: `/list/${cursor}`,
+    ...listPages.map((page) => ({
+      path: `/list/${page}`,
       changefreq: 'hourly' as const,
       priority: 0.4,
     })),

diff --git a/components/Main/Main.tsx b/components/Main/Main.tsx
@@ -1,7 +1,7 @@
 import dynamic from 'next/dynamic';
 import { memo, useState } from 'react';
 
-import type { HomePageProps } from '../../pages/[displayStyle]/[cursor]';
+import type { HomePageProps } from '../../pages/[displayStyle]/[page]';
 import type { AlgoliaSearchProps, SearchState } from '../AlgoliaSearch/AlgoliaSearch';
 import { MainTiles } from '../MainTiles/MainTiles';
 

diff --git a/components/MainTiles/BlogsGrid.tsx b/components/MainTiles/BlogsGrid.tsx
@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import { memo } from 'react';
 
-import type { HomePageProps } from '../../pages/[displayStyle]/[cursor]';
+import type { HomePageProps } from '../../pages/[displayStyle]/[page]';
 import { ArticleTile } from '../ArticleTile/ArticleTile';
 
 import styles from './blogsGrid.module.scss';

diff --git a/components/MainTiles/BlogsList.tsx b/components/MainTiles/BlogsList.tsx
@@ -1,6 +1,6 @@
 import { memo } from 'react';
 
-import type { HomePageProps } from '../../pages/[displayStyle]/[cursor]';
+import type { HomePageProps } from '../../pages/[displayStyle]/[page]';
 import { ArticleTile } from '../ArticleTile/ArticleTile';
 
 import styles from './blogsList.module.scss';

diff --git a/components/MainTiles/MainTiles.tsx b/components/MainTiles/MainTiles.tsx
@@ -6,7 +6,7 @@ import { useCallback, memo } from 'react';
 import { useDidMount } from '../../hooks/useDidMount';
 import type { DisplayPreferences } from '../../hooks/useDisplayPreferences';
 import { useDisplayPreferences } from '../../hooks/useDisplayPreferences';
-import type { HomePageProps } from '../../pages/[displayStyle]/[cursor]';
+import type { HomePageProps } from '../../pages/[displayStyle]/[page]';
 import { Button } from '../Button/Button';
 import { DisplayStyleSwitch } from '../DisplayStyleSwitch/DisplayStyleSwitch';
 
@@ -26,6 +26,9 @@ export const MainTiles = memo<MainTilesProps>((props) => {
     },
     [changeDisplay],
   );
+  const nextPage = Number(props.pageNumber) - 1;
+  const previousPage = Number(props.pageNumber) + 1;
+  const isFirstPage = Number(props.pageNumber) === 1;
 
   useDidMount(() => {
     void router.prefetch(`/grid`);
@@ -49,8 +52,27 @@ export const MainTiles = memo<MainTilesProps>((props) => {
         <BlogsGrid blogs={props.blogs} />
       )}
       <div className={styles.pagination}>
-        {props.nextCursor && (
-          <Link passHref href={`/${props.displayStyle}/${props.nextCursor}`}>
+        {!props.isLastPage && (
+          <>
+            <Link passHref href={`/${props.displayStyle}/${previousPage}`}>
+              <Button
+                className={styles.nextPageButton}
+                as="a"
+                iconPosition="left"
+                icon="icon-arrow-left2"
+              >
+                Poprzednia strona
+              </Button>
+            </Link>
+            <Link passHref href={`/${props.displayStyle}`}>
+              <Button className={styles.nextPageButton} as="a">
+                Najnowsze
+              </Button>
+            </Link>
+          </>
+        )}
+        {!isFirstPage && (
+          <Link passHref href={`/${props.displayStyle}/${nextPage}`}>
             <Button
               className={styles.nextPageButton}
               as="a"

diff --git a/components/MainTiles/mainTiles.module.scss b/components/MainTiles/mainTiles.module.scss
@@ -20,7 +20,18 @@
 
 .pagination {
   display: flex;
+  flex: 1 0 100%;
+  flex-direction: column;
   justify-content: flex-end;
+  & > a:only-child {
+    flex-grow: 0;
+  }
+  & > a {
+    flex-grow: 1;
+  }
+  @media screen and (min-width: 45em) {
+    flex-direction: row;
+  }
 }
 
 .nextPageButton {

diff --git a/constants/index.ts b/constants/index.ts
@@ -0,0 +1,8 @@
+// PAGE [displayStyle]/[page]
+export const REVALIDATION_TIME = 15 * 60; // 15 minutes
+export const MAX_PAGES = 5;
+
+//api-helpers / articles
+export const TILES_BLOGS_PER_PAGE = 4;
+export const TILES_ARTICLES_PER_BLOG = 5;
+export const LIST_ARTICLES_PER_PAGE = 20;