From 1c6139a251d5cdb1e0e8061044b2b3c5353e44aa Mon Sep 17 00:00:00 2001
From: Aamir Azad <aamirmazad@gmail.com>
Date: Sat, 29 Jun 2024 21:10:29 +0530
Subject: [PATCH 1/3] feat: show a fun fact while pdf is loading

---
 src/components/document-viewer.tsx | 34 +++++++++++++++++++++++++++---
 src/types/index.ts                 |  7 ++++++
 2 files changed, 38 insertions(+), 3 deletions(-)

diff --git a/src/components/document-viewer.tsx b/src/components/document-viewer.tsx
index 96b9d3e..5c0fd60 100644
--- a/src/components/document-viewer.tsx
+++ b/src/components/document-viewer.tsx
@@ -4,6 +4,7 @@ import { useState, useEffect, useRef } from "react";
 import { Button } from "./ui/button";
 import { useRouter } from "next/navigation";
 import { getUserData } from "@/app/actions";
+import type { AdviceAPIType } from "@/types";
 
 export async function getPaperlessDocument(
   documentId: number,
@@ -40,16 +41,43 @@ export default function DocumentViewer(props: { id: number }) {
   const [pdfUrl, setPdfUrl] = useState<string | null>(null);
   const [loading, setLoading] = useState(true);
   const fetchDataCalledRef = useRef(false);
+  const [advice, setAdvice] = useState<string | null>(null);
+
+  useEffect(() => {
+    const fetchAdvice = async () => {
+      try {
+        const response = await fetch("https://api.adviceslip.com/advice");
+        if (!response.ok) {
+          throw new Error("Network response was not ok");
+        }
+        const data = (await response.json()) as AdviceAPIType;
+        setAdvice(data.slip.advice);
+      } catch (error) {
+        console.error("Failed to fetch advice:", error);
+      }
+    };
+
+    void fetchAdvice();
+  }, []);
 
   const SkeletonLoader = () => (
     <div className="flex h-4/5 w-full justify-center">
       <div className="flex h-full min-w-0 justify-center md:w-1/2">
         <div className="flex h-full w-full flex-col rounded-xl bg-slate-600/50">
-          <div className="m-4 flex flex-grow animate-pulse flex-col justify-center gap-8 md:m-8 md:flex-row md:gap-16">
+          <div className="m-4 flex h-full flex-grow flex-col justify-center gap-8 md:m-8 md:flex-row md:gap-16">
             {/* PDF Skeleton */}
-            <div className="h-full flex-shrink flex-grow rounded-lg bg-gray-400"></div>
+            <div className="relative flex h-full flex-shrink flex-grow items-center justify-center rounded-lg">
+              {/* Pulsing Background */}
+              <div className="absolute inset-0 animate-pulse rounded-lg bg-gray-400"></div>
+              {/* Text Overlay */}
+              <div className="z-10 flex items-center justify-center">
+                <div className="text-center text-black">
+                  {advice ? advice : "Loading advice..."}
+                </div>
+              </div>
+            </div>
             {/* Button Skeleton */}
-            <div className="flex flex-shrink-0 flex-col gap-8">
+            <div className="flex flex-shrink-0 animate-pulse flex-col gap-8">
               <div className="h-10 w-24 rounded-md bg-gray-400"></div>
               <div className="h-10 w-24 rounded-md bg-gray-400"></div>
               <div className="h-10 w-24 rounded-md bg-gray-400"></div>
diff --git a/src/types/index.ts b/src/types/index.ts
index 6966b0f..ed86760 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -67,3 +67,10 @@ export type PaperlessDocumentsType = {
     };
   }[];
 };
+
+export type AdviceAPIType = {
+  slip: {
+    slip_id: number;
+    advice: string;
+  };
+};

From 3a5623d79e3991874fad96d3a517e8b34af559d2 Mon Sep 17 00:00:00 2001
From: Aamir Azad <aamirmazad@gmail.com>
Date: Sun, 30 Jun 2024 22:32:08 +0530
Subject: [PATCH 2/3] It's not done but I want to do something else and I can't
 figure it out

---
 src/app/actions.ts                 | 15 +++++++
 src/components/document-viewer.tsx | 65 +++++++++++++++++-------------
 2 files changed, 52 insertions(+), 28 deletions(-)

diff --git a/src/app/actions.ts b/src/app/actions.ts
index e1b17e7..0441bd4 100644
--- a/src/app/actions.ts
+++ b/src/app/actions.ts
@@ -5,6 +5,7 @@ import type { UsersTableType } from "@/server/db/schema";
 import { users } from "@/server/db/schema";
 import type { PaperlessDocumentsType } from "@/types";
 import { auth } from "@clerk/nextjs/server";
+import type { AdviceAPIType } from "@/types";
 
 export async function setUserProperty<K extends keyof UsersTableType>(
   propertyName: K,
@@ -63,3 +64,17 @@ export async function getPaperlessDocuments(query: string) {
 
   return data;
 }
+
+export async function getAdvice() {
+  try {
+    const response = await fetch("https://api.adviceslip.com/advice");
+    if (!response.ok) {
+      return null;
+    }
+    const data = (await response.json()) as { slip: { advice: string } };
+    return data.slip.advice;
+  } catch (error) {
+    console.error("Failed to fetch advice:", error);
+    return null;
+  }
+}
diff --git a/src/components/document-viewer.tsx b/src/components/document-viewer.tsx
index 5c0fd60..21f71dd 100644
--- a/src/components/document-viewer.tsx
+++ b/src/components/document-viewer.tsx
@@ -3,10 +3,16 @@
 import { useState, useEffect, useRef } from "react";
 import { Button } from "./ui/button";
 import { useRouter } from "next/navigation";
-import { getUserData } from "@/app/actions";
-import type { AdviceAPIType } from "@/types";
+import { getAdvice, getUserData } from "@/app/actions";
+import {
+  useQuery,
+  QueryClientProvider,
+  QueryClient,
+} from "@tanstack/react-query";
 
-export async function getPaperlessDocument(
+const queryClient = new QueryClient();
+
+async function getPaperlessDocument(
   documentId: number,
 ): Promise<string | null> {
   const userData = await getUserData();
@@ -35,32 +41,15 @@ export async function getPaperlessDocument(
   }
 }
 
-export default function DocumentViewer(props: { id: number }) {
-  const router = useRouter();
+function SkeletonLoader() {
+  const { data: advice, isLoading } = useQuery({
+    queryKey: ["advice"],
+    queryFn: getAdvice,
+  });
 
-  const [pdfUrl, setPdfUrl] = useState<string | null>(null);
-  const [loading, setLoading] = useState(true);
-  const fetchDataCalledRef = useRef(false);
-  const [advice, setAdvice] = useState<string | null>(null);
+  console.log(advice);
 
-  useEffect(() => {
-    const fetchAdvice = async () => {
-      try {
-        const response = await fetch("https://api.adviceslip.com/advice");
-        if (!response.ok) {
-          throw new Error("Network response was not ok");
-        }
-        const data = (await response.json()) as AdviceAPIType;
-        setAdvice(data.slip.advice);
-      } catch (error) {
-        console.error("Failed to fetch advice:", error);
-      }
-    };
-
-    void fetchAdvice();
-  }, []);
-
-  const SkeletonLoader = () => (
+  return (
     <div className="flex h-4/5 w-full justify-center">
       <div className="flex h-full min-w-0 justify-center md:w-1/2">
         <div className="flex h-full w-full flex-col rounded-xl bg-slate-600/50">
@@ -72,7 +61,11 @@ export default function DocumentViewer(props: { id: number }) {
               {/* Text Overlay */}
               <div className="z-10 flex items-center justify-center">
                 <div className="text-center text-black">
-                  {advice ? advice : "Loading advice..."}
+                  {isLoading
+                    ? "Loading advice..."
+                    : advice === null
+                      ? "Unable to fetch advice"
+                      : advice}
                 </div>
               </div>
             </div>
@@ -91,6 +84,14 @@ export default function DocumentViewer(props: { id: number }) {
       </div>
     </div>
   );
+}
+
+function DocumentViewer(props: { id: number }) {
+  const router = useRouter();
+
+  const [pdfUrl, setPdfUrl] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+  const fetchDataCalledRef = useRef(false);
 
   useEffect(() => {
     if (!fetchDataCalledRef.current) {
@@ -159,3 +160,11 @@ export default function DocumentViewer(props: { id: number }) {
     </div>
   );
 }
+
+export default function Page(props: { id: number }) {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <DocumentViewer id={props.id} />
+    </QueryClientProvider>
+  );
+}

From 4c72edda3d3e0d19549d4a6b3e23b78bfd4c7b01 Mon Sep 17 00:00:00 2001
From: Aamir Azad <aamirmazad@gmail.com>
Date: Sat, 6 Jul 2024 13:03:18 -0400
Subject: [PATCH 3/3] Mostly working advice

---
 src/app/actions.ts                 | 14 --------------
 src/components/document-viewer.tsx | 13 +++++++++----
 2 files changed, 9 insertions(+), 18 deletions(-)

diff --git a/src/app/actions.ts b/src/app/actions.ts
index 0441bd4..3908076 100644
--- a/src/app/actions.ts
+++ b/src/app/actions.ts
@@ -64,17 +64,3 @@ export async function getPaperlessDocuments(query: string) {
 
   return data;
 }
-
-export async function getAdvice() {
-  try {
-    const response = await fetch("https://api.adviceslip.com/advice");
-    if (!response.ok) {
-      return null;
-    }
-    const data = (await response.json()) as { slip: { advice: string } };
-    return data.slip.advice;
-  } catch (error) {
-    console.error("Failed to fetch advice:", error);
-    return null;
-  }
-}
diff --git a/src/components/document-viewer.tsx b/src/components/document-viewer.tsx
index 21f71dd..17de816 100644
--- a/src/components/document-viewer.tsx
+++ b/src/components/document-viewer.tsx
@@ -8,7 +8,9 @@ import {
   useQuery,
   QueryClientProvider,
   QueryClient,
+  useQueryClient,
 } from "@tanstack/react-query";
+import { AdviceAPIType } from "@/types";
 
 const queryClient = new QueryClient();
 
@@ -44,10 +46,13 @@ async function getPaperlessDocument(
 function SkeletonLoader() {
   const { data: advice, isLoading } = useQuery({
     queryKey: ["advice"],
-    queryFn: getAdvice,
+    queryFn: async () => {
+      const response = await fetch("https://api.adviceslip.com/advice");
+      return (await response.json()) as AdviceAPIType;
+    },
   });
 
-  console.log(advice);
+  console.log(advice?.slip);
 
   return (
     <div className="flex h-4/5 w-full justify-center">
@@ -63,9 +68,9 @@ function SkeletonLoader() {
                 <div className="text-center text-black">
                   {isLoading
                     ? "Loading advice..."
-                    : advice === null
+                    : advice?.slip.advice === null
                       ? "Unable to fetch advice"
-                      : advice}
+                      : advice?.slip.advice}
                 </div>
               </div>
             </div>