Merge pull request #252 from Anti-Pattern-Inc/develop

20230606リリース
Anti-Pattern-Inc · Jun 6, 2023 · 9f6c710 · 9f6c710 · vercel · Jun 6, 2023
2 parents d3e6281 + f105a89
commit 9f6c710
Show file tree

Hide file tree

Showing 8 changed files with 378 additions and 179 deletions.
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -50,12 +50,12 @@ const Header = () => {
     },
     {
       name: locale === 'ja' ? 'ニュース' : 'News',
-      href: '/news',
+      href: '/news/1',
       icon: NewspaperIcon,
     },
     {
       name: 'Hub',
-      href: '/hub',
+      href: '/hub/1',
       icon: Squares2X2Icon,
     },
   ] as const

diff --git a/src/components/Pagination.tsx b/src/components/Pagination.tsx
@@ -0,0 +1,100 @@
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import React from 'react'
+
+type Props = {
+  totalPages: number
+  currentPage: number
+  documentType: string
+}
+
+const Pagination = ({ totalPages, currentPage, documentType }: Props) => {
+  const router = useRouter()
+  const isFirstPage = currentPage === 1
+  const isLastPage = currentPage === totalPages
+
+  const previousPage = () => {
+    if (!isFirstPage) {
+      router.push(`/${documentType}/${currentPage - 1}`)
+    }
+  }
+
+  const nextPage = () => {
+    if (!isLastPage) {
+      router.push(`/${documentType}/${currentPage + 1}`)
+    }
+  }
+
+  return (
+    <nav className="pt-20 text-center">
+      <ul className="inline-flex items-center -space-x-px">
+        {!isFirstPage && (
+          <li>
+            <button
+              onClick={previousPage}
+              className="block px-3 py-2 ml-0 leading-tight text-gray-500 rounded-l-lg hover:bg-gray-100 hover:text-gray-700"
+            >
+              <span className="sr-only">Previous</span>
+              <svg
+                aria-hidden="true"
+                className="w-5 h-5"
+                fill="currentColor"
+                viewBox="0 0 20 20"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  fillRule="evenodd"
+                  d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
+                  clipRule="evenodd"
+                ></path>
+              </svg>
+            </button>
+          </li>
+        )}
+        {Array.from({ length: totalPages }, (_, index) => {
+          const isActivePage = currentPage === index + 1
+          const className = `px-3 py-2 leading-tight text-gray-500 border border-gray-300 hover:bg-gray-100 hover:text-gray-700 ${
+            isActivePage ? 'bg-blue-100' : 'bg-white'
+          }`
+
+          return (
+            <li key={index}>
+              <Link
+                href={`/${documentType}/${index + 1}`}
+                className={className}
+              >
+                {index + 1}
+              </Link>
+            </li>
+          )
+        })}
+        {!isLastPage && (
+          <li>
+            <button
+              disabled={isLastPage}
+              onClick={nextPage}
+              className="block px-3 py-2 leading-tight text-gray-500 rounded-r-lg hover:bg-gray-100 hover:text-gray-700"
+            >
+              <span className="sr-only">Next</span>
+              <svg
+                aria-hidden="true"
+                className="w-5 h-5"
+                fill="currentColor"
+                viewBox="0 0 20 20"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  fillRule="evenodd"
+                  d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+                  clipRule="evenodd"
+                ></path>
+              </svg>
+            </button>
+          </li>
+        )}
+      </ul>
+    </nav>
+  )
+}
+
+export { Pagination }
diff --git a/src/pages/hub/[page].tsx b/src/pages/hub/[page].tsx
@@ -0,0 +1,148 @@
+import * as prismic from '@prismicio/client'
+import { BaseLayout } from 'components/BaseLayout'
+import { CustomHead } from 'components/CustomHead'
+import { Tags } from 'components/hub/Tags'
+import { Pagination } from 'components/Pagination'
+import { GetStaticPropsContext, InferGetStaticPropsType } from 'next'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { useEffect, useState } from 'react'
+import { getFormattedDate } from 'utils/date'
+
+import { HubDocument } from '@/.slicemachine/prismicio'
+import { createClient } from '@/prismicio'
+
+type PageProps = InferGetStaticPropsType<typeof getStaticProps>
+
+export default function Hub({ pages, totalPages, currentPage }: PageProps) {
+  const router = useRouter()
+  const [sortedPages, setSortedPages] = useState<HubDocument<string>[]>([])
+
+  useEffect(() => {
+    if (!router.isReady) {
+      return
+    }
+    const tag = router.query.tag
+    const filteredPages = pages
+      .filter((page) => {
+        if (!tag) {
+          return true
+        }
+        return page.tags.includes(tag as string)
+      })
+      .sort((a, b) => {
+        if (!a.data.publication_date || !b.data.publication_date) {
+          return 0
+        }
+        if (a.data.publication_date > b.data.publication_date) {
+          return -1
+        } else {
+          return 1
+        }
+      })
+    setSortedPages(filteredPages)
+  }, [router])
+
+  return (
+    <>
+      <CustomHead
+        title="ANTI-PATTERN HUB | Anti-Pattern Inc."
+        description="このページは株式会社アンチパターン(英名:Anti-Pattern Inc.)のコーポレートサイトです。経営理念や事業内容、会社概要などをご紹介しています。"
+      />
+      <BaseLayout headerBgColor="stone-100">
+        <div className="bg-stone-100 pb-10 md:pb-20 pt-8 md:pt-24">
+          <h1 className="text-4xl font-bold sm:text-5xl lg:text-6xl text-center">
+            ANTI-PATTERN HUB
+          </h1>
+          <p className="font-bold text-center mt-6 md:mt-10">
+            アンチパターン情報ポータルサイト
+          </p>
+        </div>
+        <section className="px-6 py-16 lg:py-24">
+          <div className="flex flex-wrap justify-center gap-10">
+            {sortedPages.map((page) => {
+              return (
+                <div
+                  key={page.uid}
+                  className="w-80 lg:w-96 mb-auto flex flex-col justify-center"
+                >
+                  <Link href={`/hub/post/${page.uid}`}>
+                    <img
+                      src={page.data.hero_image.url ?? ''}
+                      alt={page.data.hero_image.alt ?? 'hero_img'}
+                      className="w-full h-56 lg:h-64 object-cover"
+                    ></img>
+                  </Link>
+                  <p className="flex justify-between mt-2 mb-3">
+                    <span className="text-ap-green text-sm">
+                      {getFormattedDate(page.data.publication_date)}
+                    </span>
+                    <span className="flex text-ap-green text-sm gap-2">
+                      <Tags tags={page.tags} />
+                    </span>
+                  </p>
+                  <Link href={`/hub/post/${page.uid}`}>
+                    <p className="text-sm font-bold table text-left mx-auto md:mx-0">
+                      {page.data.title}
+                    </p>
+                  </Link>
+                </div>
+              )
+            })}
+          </div>
+          <Pagination
+            totalPages={totalPages}
+            currentPage={currentPage}
+            documentType="hub"
+          />
+        </section>
+      </BaseLayout>
+    </>
+  )
+}
+
+export async function getStaticProps({
+  previewData,
+  params,
+}: GetStaticPropsContext) {
+  const client = createClient({ previewData })
+
+  const page = params?.page ? parseInt(params?.page as string) : 1
+  const pageSize = 20
+
+  const pages = await client.get({
+    predicates: [prismic.predicate.at('document.type', 'hub')],
+    page: page,
+    pageSize: pageSize,
+  })
+
+  return {
+    props: {
+      pages: pages.results as HubDocument<string>[],
+      totalPages: pages.total_pages,
+      currentPage: page,
+    },
+  }
+}
+
+export async function getStaticPaths() {
+  const client = createClient()
+
+  const response = await client.get({
+    predicates: [prismic.predicate.at('document.type', 'hub')],
+    orderings: ['my.hub.publication_date desc'],
+    pageSize: 1,
+  })
+
+  const totalPages = response.total_pages
+  const paths = []
+
+  for (let i = 1; i <= totalPages; i++) {
+    paths.push({ params: { page: i.toString() } })
+  }
+
+  return {
+    paths,
+    fallback: false,
+  }
+}
diff --git a/src/pages/hub/index.tsx b/src/pages/hub/index.tsx
@@ -1,109 +1,11 @@
-import { BaseLayout } from 'components/BaseLayout'
-import { CustomHead } from 'components/CustomHead'
-import { Tags } from 'components/hub/Tags'
-import { GetStaticPropsContext, InferGetStaticPropsType } from 'next'
-import Link from 'next/link'
-import { useRouter } from 'next/router'
-import { useEffect, useState } from 'react'
-import { getFormattedDate } from 'utils/date'
+import { GetServerSideProps } from 'next'
 
-import { HubDocument } from '@/.slicemachine/prismicio'
-import { createClient } from '@/prismicio'
-
-type PageProps = InferGetStaticPropsType<typeof getStaticProps>
-
-const Hub = ({ pages }: PageProps) => {
-  const router = useRouter()
-  const [sortedPages, setSortedPages] = useState<HubDocument<string>[]>([])
-
-  useEffect(() => {
-    if (!router.isReady) {
-      return
-    }
-    const tag = router.query.tag
-    const filteredPages = pages
-      .filter((page) => {
-        if (!tag) {
-          return true
-        }
-        return page.tags.includes(tag as string)
-      })
-      .sort((a, b) => {
-        if (!a.data.publication_date || !b.data.publication_date) {
-          return 0
-        }
-        if (a.data.publication_date > b.data.publication_date) {
-          return -1
-        } else {
-          return 1
-        }
-      })
-    setSortedPages(filteredPages)
-  }, [router])
-
-  return (
-    <>
-      <CustomHead
-        title="ANTI-PATTERN HUB | Anti-Pattern Inc."
-        description="このページは株式会社アンチパターン(英名:Anti-Pattern Inc.)のコーポレートサイトです。経営理念や事業内容、会社概要などをご紹介しています。"
-      />
-      <BaseLayout headerBgColor="stone-100">
-        <div className="bg-stone-100 pb-10 md:pb-20 pt-8 md:pt-24">
-          <h1 className="text-4xl font-bold sm:text-5xl lg:text-6xl text-center">
-            ANTI-PATTERN HUB
-          </h1>
-          <p className="font-bold text-center mt-6 md:mt-10">
-            アンチパターン情報ポータルサイト
-          </p>
-        </div>
-        <section className="px-6 py-16 lg:py-24 flex flex-wrap justify-center gap-10">
-          {sortedPages.map((page, key) => {
-            return (
-              <div
-                key={key}
-                className="w-80 lg:w-96 mb-auto flex flex-col justify-center"
-              >
-                <Link href={`hub/${page.uid}`}>
-                  <img
-                    src={page.data.hero_image.url ?? ''}
-                    alt={page.data.hero_image.alt ?? 'hero_img'}
-                    className="w-full h-56 lg:h-64 object-cover"
-                  ></img>
-                </Link>
-                <p className="flex justify-between mt-2 mb-3">
-                  <span className="text-ap-green text-sm">
-                    {getFormattedDate(page.data.publication_date)}
-                  </span>
-                  <span className="flex text-ap-green text-sm gap-2">
-                    <Tags tags={page.tags} />
-                  </span>
-                </p>
-                <Link href={`hub/${page.uid}`}>
-                  <p className="text-sm font-bold table text-left mx-auto md:mx-0">
-                    {page.data.title}
-                  </p>
-                </Link>
-              </div>
-            )
-          })}
-        </section>
-      </BaseLayout>
-    </>
-  )
+export const getServerSideProps: GetServerSideProps = async (context) => {
+  context.res.setHeader('Location', '/hub/1')
+  context.res.statusCode = 302
+  return { props: {} }
 }
 
-export default Hub
+const RedirectToFirstPage = () => null
 
-export const getStaticProps = async ({
-  previewData,
-}: GetStaticPropsContext) => {
-  const client = createClient({ previewData })
-
-  const pages = await client.getAllByType('hub')
-
-  return {
-    props: {
-      pages,
-    },
-  }
-}
+export default RedirectToFirstPage
diff --git a/src/pages/hub/[uid].tsx → src/pages/hub/post/[uid].tsx b/src/pages/hub/[uid].tsx → src/pages/hub/post/[uid].tsx