From a4594392290a573385807c8929dbde9e4d0ea782 Mon Sep 17 00:00:00 2001
From: Patrik Zita <patrik.zitaa@gmail.com>
Date: Thu, 11 Jan 2024 07:24:43 +0100
Subject: [PATCH] feat: remove fetching from page pagination-with-filters

---
 src/pages/offset-pagination/index.tsx       |  50 ++++--
 src/pages/pagination-with-filters/index.tsx | 161 +++++++++++++-------
 2 files changed, 136 insertions(+), 75 deletions(-)

diff --git a/src/pages/offset-pagination/index.tsx b/src/pages/offset-pagination/index.tsx
index 6b8f95f..f6c5a84 100644
--- a/src/pages/offset-pagination/index.tsx
+++ b/src/pages/offset-pagination/index.tsx
@@ -1,3 +1,4 @@
+import ExampleExplanation from "@/components/ExampleExplanation";
 import { Button } from "@/components/ui/button";
 import {
   GetDealsOffsetBasedDocument,
@@ -5,8 +6,14 @@ import {
 } from "@/generated/graphql";
 import { addApolloState, initializeApollo } from "@/utils/apolloClient";
 
+const EXPLANATION = {
+  title: "Offset Pagination - single field query",
+  description:
+    "Nejjednodušší způsob offset-based paginace, pro sprváný cachování je potřeba nastavit typePolicy v InMemoryCache.",
+};
+
 export default function BasedPagitanionPage() {
-  const { data, fetchMore, loading } = useGetDealsOffsetBasedQuery({
+  const { data, fetchMore, loading, error } = useGetDealsOffsetBasedQuery({
     variables: {
       limit: 3,
       offset: 0,
@@ -23,26 +30,38 @@ export default function BasedPagitanionPage() {
     });
   };
 
-  console.log(data);
+  if (data?.dealsOffsetBased && data?.dealsOffsetBased.length !== 0) {
+    return (
+      <main className="max-w-5xl mx-auto px-3">
+        <ExampleExplanation
+          title={EXPLANATION.title}
+          description={EXPLANATION.description}
+        />
+
+        <div className="py-10">
+          {data.dealsOffsetBased.map((deal) => (
+            <div key={deal.id}>
+              <h1>{deal.title}</h1>
+            </div>
+          ))}
+        </div>
+        <Button onClick={loadMore}>Načíst další</Button>
+      </main>
+    );
+  }
+
   if (loading) {
     return <div>loading</div>;
   }
 
-  return (
-    <main className="max-w-5xl mx-auto px-3">
-      <div className="py-10">
-        {data.dealsOffsetBased.map((deal) => (
-          <div key={deal.id}>
-            <h1>{deal.title}</h1>
-          </div>
-        ))}
-      </div>
-      <Button onClick={loadMore}>Načíst další</Button>
-    </main>
-  );
+  if (error) {
+    return <div>Error</div>;
+  }
+
+  return <div>Nic tu není</div>;
 }
 
-/* export async function getServerSideProps() {
+export async function getServerSideProps() {
   const apolloClient = initializeApollo();
 
   await apolloClient.query({
@@ -57,4 +76,3 @@ export default function BasedPagitanionPage() {
     props: {},
   });
 }
- */
diff --git a/src/pages/pagination-with-filters/index.tsx b/src/pages/pagination-with-filters/index.tsx
index 17e9901..53f8539 100644
--- a/src/pages/pagination-with-filters/index.tsx
+++ b/src/pages/pagination-with-filters/index.tsx
@@ -1,74 +1,117 @@
+import ExampleExplanation from "@/components/ExampleExplanation";
 import { Button } from "@/components/ui/button";
-import { useGetDealsOffsetWithFilterQuery } from "@/generated/graphql";
+import {
+  GetDealsOffsetWithFilterDocument,
+  useGetDealsOffsetWithFilterQuery,
+} from "@/generated/graphql";
 import { cn } from "@/lib/utils";
+import { addApolloState, initializeApollo } from "@/utils/apolloClient";
+import { useState } from "react";
+
+const EXPLANATION = {
+  title: "Offset Pagination - s filtry",
+  description: "Trošku náročnější koncept paginace s filtry",
+};
 
 export default function BasedPaginationWithFiltersPage() {
-  const { data, loading, refetch } = useGetDealsOffsetWithFilterQuery({
+  const [filter, setFilter] = useState<boolean | undefined>();
+
+  const { data, loading, error, fetchMore } = useGetDealsOffsetWithFilterQuery({
     variables: {
       limit: 3,
       offset: 0,
+      isActive: filter,
     },
-    fetchPolicy: "cache-first",
   });
 
+  const loadMore = () => {
+    // TODO: merge cache objects
+    const currentLength = data.dealsOffsetWithFilter.deals.length || 0;
+    fetchMore({
+      variables: {
+        offset: currentLength,
+        limit: 3,
+      },
+    });
+  };
+
+  if (data?.dealsOffsetWithFilter?.deals) {
+    return (
+      <main className="max-w-5xl mx-auto px-3">
+        <ExampleExplanation
+          title={EXPLANATION.title}
+          description={EXPLANATION.description}
+        >
+          <div className="py-1">
+            <h3 className="font-semibold">Poznámky</h3>
+            <ul className="text-xs">
+              <li>
+                - Mění se zde data, díky tomu že se změní state filters a celá
+                komponenta se re-renderuje
+              </li>
+              <li>
+                - Nepoužívá se zde refetch pro změnu filtrů, protože nebere v
+                potaz cache.
+              </li>
+            </ul>
+          </div>
+        </ExampleExplanation>
+        <div className="space-x-2">
+          <Button onClick={() => setFilter(undefined)}>All</Button>
+          <Button onClick={() => setFilter(true)}>Data with isActive</Button>
+          <Button onClick={() => setFilter(false)}>
+            Data with isActive = false
+          </Button>
+        </div>
+        <div className="py-10">
+          {data.dealsOffsetWithFilter.deals &&
+            data.dealsOffsetWithFilter.deals.map((deal) => (
+              <div key={deal.id}>
+                <h1>
+                  {deal.title}
+                  <span
+                    className={cn("text-sm text-green-400", {
+                      "text-red-500": !deal.isActive,
+                    })}
+                  >
+                    ({deal.isActive ? "true" : "false"})
+                  </span>
+                </h1>
+              </div>
+            ))}
+        </div>
+        <div className="flex gap-2">
+          <Button variant="destructive" onClick={loadMore}>
+            Show More
+          </Button>
+        </div>
+      </main>
+    );
+  }
+
   if (loading) {
     return <div>loading</div>;
   }
 
-  return (
-    <main className="max-w-5xl mx-auto px-3">
-      <div className="py-10">
-        {data.dealsOffsetWithFilter.deals &&
-          data.dealsOffsetWithFilter.deals.map((deal) => (
-            <div key={deal.id}>
-              <h1>
-                {deal.title}{" "}
-                <span
-                  className={cn("text-sm text-green-400", {
-                    "text-red-500": !deal.isActive,
-                  })}
-                >
-                  ({deal.isActive ? "true" : "false"})
-                </span>
-              </h1>
-            </div>
-          ))}
-      </div>
-      <div className="space-x-2">
-        <Button
-          onClick={() =>
-            refetch({
-              isActive: undefined,
-              limit: 3,
-              offset: 0,
-            })
-          }
-        >
-          All
-        </Button>
-        <Button
-          onClick={() =>
-            refetch({
-              isActive: true,
-              limit: 3,
-              offset: 0,
-            })
-          }
-        >
-          Refetch data with isActive
-        </Button>
-        <Button
-          onClick={() =>
-            refetch({
-              isActive: false,
-              limit: 3,
-              offset: 0,
-            })
-          }
-        >
-          Refetch data with isActive = false
-        </Button>
-      </div>
-    </main>
-  );
+  if (error) {
+    return <div>Error</div>;
+  }
+
+  return <div>Asi se sem nedostanu</div>;
+}
+
+export async function getServerSideProps() {
+  const apolloClient = initializeApollo();
+
+  await apolloClient.query({
+    query: GetDealsOffsetWithFilterDocument,
+    variables: {
+      limit: 3,
+      offset: 0,
+    },
+  });
+
+  return addApolloState(apolloClient, {
+    props: {},
+  });
 }