From 14d015dce147b992f8b55cf55a7fd232523ae8fd Mon Sep 17 00:00:00 2001
From: Patrik Zita <patrik.zitaa@gmail.com>
Date: Wed, 10 Jan 2024 07:01:25 +0100
Subject: [PATCH] feat: add description and notes for offset pagination
 expanded

---
 src/components/ExampleExplanation.tsx         |  19 ++++
 src/pages/_app.tsx                            |   4 +-
 .../offset-pagination-expanded/index.tsx      | 104 +++++++++++++-----
 3 files changed, 101 insertions(+), 26 deletions(-)
 create mode 100644 src/components/ExampleExplanation.tsx

diff --git a/src/components/ExampleExplanation.tsx b/src/components/ExampleExplanation.tsx
new file mode 100644
index 0000000..6517c00
--- /dev/null
+++ b/src/components/ExampleExplanation.tsx
@@ -0,0 +1,19 @@
+import { ReactNode } from "react";
+
+type Props = {
+  title: string;
+  description: string;
+  children?: ReactNode;
+};
+
+const ExampleExplanation = ({ title, description, children }: Props) => {
+  return (
+    <div className="py-3">
+      <h1 className="font-bold">{title}</h1>
+      <p className="text-xs">{description}</p>
+      {children}
+    </div>
+  );
+};
+
+export default ExampleExplanation;
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 35d7342..050bc6f 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -9,7 +9,9 @@ export default function App({ Component, pageProps }: AppProps) {
 
   return (
     <ApolloProvider client={apolloClient}>
-      <MainNav />
+      <div className="flex justify-center bg-stone-50 py-3">
+        <MainNav />
+      </div>
       <Component {...pageProps} />
     </ApolloProvider>
   );
diff --git a/src/pages/offset-pagination-expanded/index.tsx b/src/pages/offset-pagination-expanded/index.tsx
index 9025f68..ae97aed 100644
--- a/src/pages/offset-pagination-expanded/index.tsx
+++ b/src/pages/offset-pagination-expanded/index.tsx
@@ -1,3 +1,4 @@
+import ExampleExplanation from "@/components/ExampleExplanation";
 import { Button } from "@/components/ui/button";
 import {
   GetDealsOffsetBasedDocument,
@@ -6,18 +7,29 @@ import {
   useGetDealsOffsetBasedQuery,
 } from "@/generated/graphql";
 import { addApolloState, initializeApollo } from "@/utils/apolloClient";
+import { NetworkStatus } from "@apollo/client";
+
+const EXPLANATION = {
+  title: "Offset Pagination - rozšířené query",
+  description:
+    "Tento příklad demonstruje offset paginaci, která se používá pro načítání dat v určitých intervalech. 'Single field query' znamená, že dotaz je založen pouze na jednom poli, například 'ID'. V tomto případě se však jedná o 'rozšířený dotaz', kde se využívají více fieldů (např. deals a totalCount). Důležité je, že tento pattern funguje efektivně při server-side rendering, protože SSR umožňuje rychlejší načítání komponent na straně serveru předtím, než jsou odeslány klientovi. V případě, že dotaz obsahuje více polí, je potřeba správně nastavit 'type policies' v 'inMemoryCache', aby se zajistilo efektivní cachování dat a optimalizovala se výkon aplikace.",
+};
 
 export default function BasedPagitanionPage() {
-  const { data, fetchMore, loading } = useGetDealsOffsetBasedExpandedQuery({
-    variables: {
-      limitTotal: 3,
-      offsetTotal: 0,
-    },
-  });
+  const { data, fetchMore, loading, error, refetch, networkStatus } =
+    useGetDealsOffsetBasedExpandedQuery({
+      variables: {
+        limitTotal: 3,
+        offsetTotal: 0,
+      },
+      notifyOnNetworkStatusChange: true,
+    });
+
+  const isLoadingMoreDeals = networkStatus === NetworkStatus.fetchMore;
+  const isRefetching = networkStatus === NetworkStatus.refetch;
 
   const loadMore = () => {
     const currentLength = data.dealsOffsetBasedExpanded.deals.length || 0;
-    console.log(currentLength);
     fetchMore({
       variables: {
         offsetTotal: currentLength,
@@ -26,27 +38,70 @@ export default function BasedPagitanionPage() {
     });
   };
 
-  console.log(data);
-  if (loading) {
-    return <div>loading</div>;
-  }
+  const areMoreDeals =
+    data.dealsOffsetBasedExpanded.deals.length <
+    data.dealsOffsetBasedExpanded.totalCount;
 
-  return (
-    <main className="max-w-5xl mx-auto px-3">
-      <div className="py-10">
-        {data.dealsOffsetBasedExpanded.deals &&
-          data.dealsOffsetBasedExpanded.deals.map((deal) => (
-            <div key={deal.id}>
-              <h1>{deal.title}</h1>
+  if (data.dealsOffsetBasedExpanded) {
+    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>refetch defaultně má nastavené variables hooku</li>
+              <li>Pořadí podmínek v tomto příkladu funguje pouze při SSR</li>
+              <li>
+                Musí být nastavený v options hooku notifyOnNetworkStatusChange,
+                jinak networkStatus ukazuje stále na &apos;ready&apos; (7)
+              </li>
+            </ul>
+          </div>
+        </ExampleExplanation>
+        <div className="py-8">
+          {data.dealsOffsetBasedExpanded.deals &&
+            data.dealsOffsetBasedExpanded.deals.map((deal) => (
+              <div key={deal.id}>
+                <h1>{deal.title}</h1>
+              </div>
+            ))}
+          {!areMoreDeals && (
+            <div className="pt-2 text-sm text-red-400">
+              Žádné další výsledky
             </div>
-          ))}
-      </div>
-      <Button onClick={loadMore}>Načíst další</Button>
-    </main>
-  );
+          )}
+        </div>
+        <div className="flex gap-2">
+          {areMoreDeals && (
+            <Button onClick={loadMore} disabled={isLoadingMoreDeals}>
+              {isLoadingMoreDeals ? "Loading..." : "Show More"}
+            </Button>
+          )}
+          <Button
+            variant="outline"
+            onClick={() => refetch()}
+            disabled={isRefetching}
+          >
+            {isRefetching ? "Refetching deals..." : "Refetch"}
+          </Button>
+        </div>
+      </main>
+    );
+  }
+
+  if (loading && !isLoadingMoreDeals) return <div>Loading</div>;
+
+  if (error) {
+    return <div>Něco se pokazilo</div>;
+  }
+
+  return <div className="max-w-5xl mx-auto px-3">Nic tu není</div>;
 }
 
-/* export async function getServerSideProps() {
+export async function getServerSideProps() {
   const apolloClient = initializeApollo();
 
   await apolloClient.query({
@@ -61,4 +116,3 @@ export default function BasedPagitanionPage() {
     props: {},
   });
 }
- */