From 32cbd5bb299faaf9186a6f060df8da12f362e2f5 Mon Sep 17 00:00:00 2001
From: naari3 <naari.named@gmail.com>
Date: Sun, 29 Nov 2020 14:53:53 +0900
Subject: [PATCH] Save page per size to cookie

---
 components/PerSwitcher.tsx | 85 +++++++++++++++++---------------------
 pages/search.tsx           |  9 +++-
 reducers/search.ts         |  2 +-
 3 files changed, 47 insertions(+), 49 deletions(-)

diff --git a/components/PerSwitcher.tsx b/components/PerSwitcher.tsx
index 82dbb64..6128cbd 100644
--- a/components/PerSwitcher.tsx
+++ b/components/PerSwitcher.tsx
@@ -1,63 +1,54 @@
-import React, { useEffect } from "react";
+import React, { FC } from "react";
 import Link from "next/link";
 import styles from "./PerSwitcher.module.css";
-import {
-  useDispatch as useSearchDispatch,
-  useGlobalState as useSearchGlobalState,
-} from "../contexts/SearchContext";
-import {
-  useDispatch as useLoadingDispatch,
-  useGlobalState as useLoadingGlobalState,
-} from "../contexts/LoadingContext";
+import { useGlobalState as useSearchGlobalState } from "../contexts/SearchContext";
+import { useGlobalState as useLoadingGlobalState } from "../contexts/LoadingContext";
 import removeEmpty from "../lib/removeEmpty";
+import { setCookie } from "nookies";
 
-const PerSwitcher = React.memo(() => {
+const PerButton: FC<{ per: number }> = ({ children, per }) => {
   const loading = useLoadingGlobalState();
   const options = useSearchGlobalState();
-  const optionsDispatch = useSearchDispatch();
+
+  return loading || options.per === per ? (
+    <span>{children}</span>
+  ) : (
+    <Link
+      href={{
+        pathname: "/search",
+        query: removeEmpty({
+          ...options,
+          page: 1,
+          per: per,
+        }),
+      }}
+    >
+      <a
+        onClick={() => {
+          console.log(per);
+          setCookie(null, "per", per.toString(), {
+            maxAge: 30 * 24 * 60 * 60,
+            path: "/",
+          });
+        }}
+      >
+        <span>{children}</span>
+      </a>
+    </Link>
+  );
+};
+
+const PerSwitcher = React.memo(() => {
+  const options = useSearchGlobalState();
 
   return (
     <div className={styles.perSwitcher}>
       <ul className={styles.perList}>
         <li className={`${options.per === 100 ? styles.selected : ""}`}>
-          {loading || options.per === 100 ? (
-            <span>多</span>
-          ) : (
-            <Link
-              href={{
-                pathname: "/search",
-                query: removeEmpty({
-                  ...options,
-                  page: 1,
-                  per: 100,
-                }),
-              }}
-            >
-              <a>
-                <span>多</span>
-              </a>
-            </Link>
-          )}
+          <PerButton per={100}>多</PerButton>
         </li>
         <li className={`${options.per === 50 ? styles.selected : ""}`}>
-          {loading || options.per === 50 ? (
-            <span>少</span>
-          ) : (
-            <Link
-              href={{
-                pathname: "/search",
-                query: removeEmpty({
-                  ...options,
-                  page: 1,
-                  per: 50,
-                }),
-              }}
-            >
-              <a>
-                <span>少</span>
-              </a>
-            </Link>
-          )}
+          <PerButton per={50}>少</PerButton>
         </li>
       </ul>
     </div>
diff --git a/pages/search.tsx b/pages/search.tsx
index 721dfc6..9301293 100644
--- a/pages/search.tsx
+++ b/pages/search.tsx
@@ -252,7 +252,9 @@ const roundDate = (datestr: string): string => {
 export const getServerSideProps: GetServerSideProps = async (ctx) => {
   const cookies = parseCookies(ctx);
   let viewing = cookies.viewing;
+  let per = parseQueryToInt(cookies.per);
   if (viewing !== "detail" && viewing !== "icon") viewing = "detail";
+  if (!per) per = 50;
   const { query } = ctx;
   const client = new VideoClient({ context: "otomad-search" });
   console.log(query);
@@ -273,8 +275,13 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
     startTimeGte: roundDate(parseQueryToString(query.startTimeGte)),
     startTimeLte: roundDate(parseQueryToString(query.startTimeLte)),
     page: roundNumber(parseQueryToInt(query.page)),
-    per: Math.min(100, roundNumber(parseQueryToInt(query.per)) || 50),
+    per: Math.min(100, roundNumber(parseQueryToInt(query.per)) || per),
   };
+  console.log({
+    cookie: per,
+    query: query.per,
+    final: Math.min(100, roundNumber(parseQueryToInt(query.per)) || per),
+  });
 
   const response = await (async (): Promise<
     Response<Pick<Video, typeof usedFields[number]>>
diff --git a/reducers/search.ts b/reducers/search.ts
index dce2030..21fa84e 100644
--- a/reducers/search.ts
+++ b/reducers/search.ts
@@ -15,7 +15,7 @@ export type SearchOptions = {
   per?: number;
 };
 
-export const initialState: SearchOptions = { _sort: "-startTime", per: 100 };
+export const initialState: SearchOptions = { _sort: "-startTime" };
 
 export type State = SearchOptions;