feature/paging github events

package.json

@@ -16,13 +16,13 @@
   "dependencies": {
     "@primer/octicons-react": "19.1.0",
     "@tailwindcss/forms": "0.5.3",
+    "@tanstack/react-query": "^4.29.12",
     "@vercel/og": "0.5.6",
     "dayjs": "1.11.7",
     "next": "13.4.4",
     "next-pwa": "5.6.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-hooks-fetch": "0.16.1",
     "react-use": "17.4.0",
     "sharp": "0.32.1",
     "uuid": "9.0.0"

pages/kusa/[username].tsx

@@ -1,9 +1,11 @@
 import Head from 'next/head';
 import { GetServerSidePropsContext, GetServerSidePropsResult } from 'next';
-import { FetchProvider, useFetch } from 'react-hooks-fetch';
-import { Suspense } from 'react';
+import { useEffect } from 'react';
+import { useInfiniteQuery, useQueryClient, QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import Contributions from '@components/kusa/contributions/contributions';
 
+const queryClient = new QueryClient();
+
 type Props = {
   username: string;
   todayContributionCount: number;
@@ -34,17 +36,52 @@ export const getServerSideProps = async (
   return { props: { username, todayContributionCount, yesterdayContributionCount, currentStreak } };
 };
 
-const fetchFunc = async (username: string) => {
-  const res = await fetch(`https://api.github.com/users/${username}/events?per_page=100&page=1`);
-  const data = await res.json();
+const createQueryFn = (username: string) => {
+  const fetchEvents = async ({ pageParam = 1 }) => {
+    const res = await fetch(`https://api.github.com/users/${username}/events?per_page=100&page=${pageParam}`);
+    return res.json();
+  };
 
-  return data;
+  return fetchEvents;
 };
 
 const Detail = ({ username }: { username: string }) => {
-  const { result, refetch } = useFetch(fetchFunc);
+  const queryClient = useQueryClient();
+  const queryFn = createQueryFn(username);
+
+  const { status, data, error, isFetching, isFetchingNextPage, fetchNextPage, hasNextPage } = useInfiniteQuery(
+    ['events'],
+    queryFn,
+    {
+      getNextPageParam: (lastPage, allPages) => (allPages.length >= 3 ? undefined : allPages.length + 1),
+    },
+  );
 
-  return <Contributions result={result} username={username}></Contributions>;
+  useEffect(() => {
+    fetchNextPage();
+  }, [fetchNextPage]);
+
+  return status === 'loading' ? (
+    <div>Loading...</div>
+  ) : status === 'error' ? (
+    <div>Eerror</div>
+  ) : (
+    <>
+      <div className="flex justify-start sm:justify-end">
+      <button
+        className="basis-full rounded border border-gray-400 bg-white px-2 py-1 font-semibold text-gray-800 shadow hover:bg-gray-100 disabled:border-gray-300 disabled:bg-white disabled:text-gray-300 sm:basis-1/6"
+        onClick={() => {
+          fetchNextPage();
+        }}
+        disabled={!hasNextPage}
+      >
+        Load More
+      </button>
+      </div>
+
+      <Contributions result={data.pages.flat()} username={username}></Contributions>
+    </>
+  );
 };
 
 const Kusa = (props: Props) => {
@@ -79,13 +116,10 @@ const Kusa = (props: Props) => {
         </span>
 
         <img src={imgUrl} alt="GitHub Contribution" />
-        <span>{desc}</span>
-        {/* @ts-ignore */}
-        <FetchProvider initialInputs={[[fetchFunc, username]]}>
-          <Suspense fallback={<span>Loading...</span>}>
-            <Detail username={username}></Detail>
-          </Suspense>
-        </FetchProvider>
+        <div>{desc}</div>
+        <QueryClientProvider client={queryClient}>
+          <Detail username={username}></Detail>
+        </QueryClientProvider>
       </div>
     </>
   );

src/components/kusa/contributions/contributions.tsx

@@ -42,7 +42,7 @@ const Contributions = (props: Props) => {
     } else {
       setApiResult(props.result);
     }
-  }, [exclude]);
+  }, [exclude, props.result]);
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setExclude(e.target.checked);

yarn.lock

@@ -4689,6 +4689,19 @@
   dependencies:
     mini-svg-data-uri "^1.2.3"
 
+"@tanstack/query-core@4.29.11":
+  version "4.29.11"
+  resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-4.29.11.tgz#fa338f7d6897c6be5de6d8dabd603d9b78ee48c7"
+  integrity sha512-8C+hF6SFAb/TlFZyS9FItgNwrw4PMa7YeX+KQYe2ZAiEz6uzg6yIr+QBzPkUwZ/L0bXvGd1sufTm3wotoz+GwQ==
+
+"@tanstack/react-query@^4.29.12":
+  version "4.29.12"
+  resolved "https://registry.yarnpkg.com/@tanstack/react-query/-/react-query-4.29.12.tgz#de111cf1d6c389b86acacfaf972302914cfa1208"
+  integrity sha512-zhcN6+zF6cxprxhTHQajHGlvxgK8npnp9uLe9yaWhGc6sYcPWXzyO4raL4HomUzQOPzu3jLvkriJQ7BOrDM8vA==
+  dependencies:
+    "@tanstack/query-core" "4.29.11"
+    use-sync-external-store "^1.2.0"
+
 "@testing-library/dom@^8.3.0":
   version "8.18.1"
   resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-8.18.1.tgz#80f91be02bc171fe5a3a7003f88207be31ac2cf3"
@@ -12677,13 +12690,6 @@ react-element-to-jsx-string@^15.0.0:
     is-plain-object "5.0.0"
     react-is "18.1.0"
 
-react-hooks-fetch@0.16.1:
-  version "0.16.1"
-  resolved "https://registry.yarnpkg.com/react-hooks-fetch/-/react-hooks-fetch-0.16.1.tgz#21a3ffda3060aeb82b6655b49280f42ea4d608c7"
-  integrity sha512-f5CQPjtl2gTV4tLv2YooGrbihjLoHqlWZd7+0bM8z14txdHv2r53obFlouPcLnUpY6y3V+hcMyCDhh4A8KIQyg==
-  dependencies:
-    use-context-selector "1.4.0"
-
 react-inspector@^6.0.0:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/react-inspector/-/react-inspector-6.0.1.tgz#1a37f0165d9df81ee804d63259eaaeabe841287d"
@@ -14771,18 +14777,18 @@ url@^0.11.0:
     punycode "1.3.2"
     querystring "0.2.0"
 
-use-context-selector@1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/use-context-selector/-/use-context-selector-1.4.0.tgz#fd46afe322e4f7e2d8fba91d806af075d646ef85"
-  integrity sha512-1vaCjBq/ryq9y79qwh1tkqrUNLYlSLXNHClUkpgBWPvnUV5jqAJvRSsK77mG80uBwNF9HF/kuRyPtXEQhlJ4Jw==
-
 use-resize-observer@^9.1.0:
   version "9.1.0"
   resolved "https://registry.yarnpkg.com/use-resize-observer/-/use-resize-observer-9.1.0.tgz#14735235cf3268569c1ea468f8a90c5789fc5c6c"
   integrity sha512-R25VqO9Wb3asSD4eqtcxk8sJalvIOYBqS8MNZlpDSQ4l4xMQxC/J7Id9HoTqPq8FwULIn0PVW+OAqF2dyYbjow==
   dependencies:
     "@juggle/resize-observer" "^3.3.1"
 
+use-sync-external-store@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"
+  integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==
+
 use@^3.1.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"