feat: proper loading / error states

flowergardn · Dec 10, 2023 · 1cb87e8 · 1cb87e8
1 parent 11bd6b9
commit 1cb87e8
Show file tree

Hide file tree

Showing 6 changed files with 116 additions and 32 deletions.
diff --git a/src/components/BasePage.tsx b/src/components/BasePage.tsx
@@ -0,0 +1,15 @@
+import { PropsWithChildren } from "react";
+import Meta from "./Meta";
+import Navbar from "./Navbar";
+
+const BasePage = (props: PropsWithChildren) => {
+  return (
+    <>
+      <Meta />
+      <Navbar />
+      {props.children}
+    </>
+  );
+};
+
+export default BasePage;
diff --git a/src/components/Loader.tsx b/src/components/Loader.tsx
@@ -0,0 +1,9 @@
+const Loader = () => {
+  return (
+    <div className="flex items-center justify-center">
+      <span className="loading loading-dots loading-lg" />
+    </div>
+  );
+};
+
+export default Loader;
diff --git a/src/pages/c/[id]/index.tsx b/src/pages/c/[id]/index.tsx
@@ -6,6 +6,8 @@ import { api } from "~/utils/api";
 import Signatures from "~/components/Signatures";
 import Link from "next/link";
 import Meta from "~/components/Meta";
+import Loader from "~/components/Loader";
+import { PropsWithChildren } from "react";
 
 const CardPage: NextPage<{ id: string }> = ({ id }) => {
   const {
@@ -16,8 +18,39 @@ const CardPage: NextPage<{ id: string }> = ({ id }) => {
     cardId: id,
   });
 
-  if (cardLoading) return <></>;
-  if (cardError || !data) return <></>;
+  const BasePage = (props: PropsWithChildren) => {
+    return (
+      <>
+        <Meta
+          title="Sign this card | bday.quest (beta)"
+          description={data ? data.description : ""}
+        />
+        <Navbar />
+        {props.children}
+      </>
+    );
+  };
+
+  if (cardLoading)
+    return (
+      <BasePage>
+        <main className="flex min-h-screen items-center justify-center bg-base-100">
+          <Loader />
+        </main>
+      </BasePage>
+    );
+
+  if (cardError || !data)
+    return (
+      <BasePage>
+        <main className="flex min-h-screen items-center justify-center bg-base-100">
+          <article className="prose">
+            <h2>Error loading card</h2>
+            <p>Try again later :(</p>
+          </article>
+        </main>
+      </BasePage>
+    );
 
   const CardInfo = () => {
     return (
@@ -45,7 +78,7 @@ const CardPage: NextPage<{ id: string }> = ({ id }) => {
         <article className="prose">
           <h2>Wishes</h2>
         </article>
-        {canShow ? <Signatures signatures={data} /> : <p>Loading...</p>}
+        {canShow ? <Signatures signatures={data} /> : <Loader />}
         <Link href={`/c/${id}/sign`}>
           <button className="btn btn-primary">Create</button>
         </Link>
@@ -54,12 +87,7 @@ const CardPage: NextPage<{ id: string }> = ({ id }) => {
   };
 
   return (
-    <>
-      <Meta
-        title="Sign this card | bday.quest (beta)"
-        description={data.description}
-      />
-      <Navbar />
+    <BasePage>
       <div className="hero flex min-h-screen flex-col items-center bg-base-100">
         <div className="card mb-12 mt-20 w-full max-w-sm shrink-0  p-6 shadow-2xl">
           <CardInfo />
@@ -68,7 +96,7 @@ const CardPage: NextPage<{ id: string }> = ({ id }) => {
           <CardWishes />
         </div>
       </div>
-    </>
+    </BasePage>
   );
 };
 

diff --git a/src/pages/c/[id]/sign.tsx b/src/pages/c/[id]/sign.tsx
@@ -1,11 +1,11 @@
 import type { GetStaticProps, NextPage } from "next";
-import Navbar from "~/components/Navbar";
 import { generateSSGHelper } from "~/server/api/helpers/ssgHelper";
 import { api } from "~/utils/api";
 import { useForm } from "react-hook-form";
 import type { SubmitHandler } from "react-hook-form";
 import { useUser } from "@clerk/nextjs";
-import Meta from "~/components/Meta";
+import Loader from "~/components/Loader";
+import BasePage from "~/components/BasePage";
 
 type FormValues = {
   message: string;
@@ -45,8 +45,26 @@ const CardPage: NextPage<{ id: string }> = ({ id }) => {
     )}`;
   }
 
-  if (cardLoading) return <></>;
-  if (cardError || !data) return <></>;
+  if (cardLoading)
+    return (
+      <BasePage>
+        <main className="flex min-h-screen items-center justify-center bg-base-100">
+          <Loader />
+        </main>
+      </BasePage>
+    );
+
+  if (cardError || !data)
+    return (
+      <BasePage>
+        <main className="flex min-h-screen items-center justify-center bg-base-100">
+          <article className="prose">
+            <h2>Error loading card</h2>
+            <p>Try again later :(</p>
+          </article>
+        </main>
+      </BasePage>
+    );
 
   const onSubmit: SubmitHandler<FormValues> = (data) => {
     mutate({
@@ -110,10 +128,7 @@ const CardPage: NextPage<{ id: string }> = ({ id }) => {
   };
 
   return (
-    <>
-      <Meta />
-
-      <Navbar />
+    <BasePage>
       <div className="hero flex min-h-screen flex-col items-center bg-base-100">
         <div className="card mb-12 mt-20 w-full max-w-sm shrink-0  p-6 shadow-2xl">
           <CardInfo />
@@ -122,7 +137,7 @@ const CardPage: NextPage<{ id: string }> = ({ id }) => {
           <CreateWish />
         </div>
       </div>
-    </>
+    </BasePage>
   );
 };
 

diff --git a/src/pages/manage/[id].tsx b/src/pages/manage/[id].tsx
@@ -2,10 +2,10 @@ import type { GetStaticProps, NextPage } from "next";
 import type { SubmitHandler } from "react-hook-form";
 import { useForm } from "react-hook-form";
 import toast from "react-hot-toast";
+import BasePage from "~/components/BasePage";
 import { Textbox } from "~/components/EditCard";
 import type { CardDataValues } from "~/components/EditCard";
-import Meta from "~/components/Meta";
-import Navbar from "~/components/Navbar";
+import Loader from "~/components/Loader";
 import Signatures from "~/components/Signatures";
 import { generateSSGHelper } from "~/server/api/helpers/ssgHelper";
 import { api } from "~/utils/api";
@@ -35,10 +35,27 @@ const ManageCard: NextPage<{ id: string }> = ({ id }) => {
     },
   });
 
-  if (cardLoading) return <></>;
-  if (isCardError || !data) {
+  if (cardLoading)
+    return (
+      <BasePage>
+        <main className="flex min-h-screen items-center justify-center bg-base-100">
+          <Loader />
+        </main>
+      </BasePage>
+    );
+
+  if (cardError || !data) {
     toast.error(cardError?.message ?? "");
-    return <></>;
+    return (
+      <BasePage>
+        <main className="flex min-h-screen items-center justify-center bg-base-100">
+          <article className="prose">
+            <h2>Error loading mangement settings</h2>
+            <p>{cardError?.message ?? ""}</p>
+          </article>
+        </main>
+      </BasePage>
+    );
   }
 
   const onSubmit: SubmitHandler<CardDataValues> = (data) => {
@@ -57,24 +74,21 @@ const ManageCard: NextPage<{ id: string }> = ({ id }) => {
       cardId: id,
     });
 
-    if (wishesLoading) return <></>;
+    const canShow = !wishesLoading && !wishError && data;
     if (wishError || !data) return <></>;
 
     return (
       <>
         <article className="prose">
           <h2>Wishes</h2>
         </article>
-        <Signatures signatures={data} admin={true} />
+        {canShow ? <Signatures signatures={data} admin={true} /> : <Loader />}
       </>
     );
   };
 
   return (
-    <>
-      <Meta />
-
-      <Navbar />
+    <BasePage>
       <div className="hero flex min-h-screen items-center justify-center  bg-base-200">
         <div className="flex">
           <div className="card w-full max-w-sm shrink-0 bg-base-100 shadow-2xl">
@@ -104,7 +118,7 @@ const ManageCard: NextPage<{ id: string }> = ({ id }) => {
           </div>
         </div>
       </div>
-    </>
+    </BasePage>
   );
 };
 

diff --git a/src/pages/manage/index.tsx b/src/pages/manage/index.tsx
@@ -8,6 +8,8 @@ import toast from "react-hot-toast";
 import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
 import Meta from "~/components/Meta";
+import BasePage from "~/components/BasePage";
+import Loader from "~/components/Loader";
 dayjs.extend(relativeTime);
 
 export default function ManageCards() {
@@ -102,7 +104,8 @@ export default function ManageCards() {
   };
 
   const Cards = () => {
-    if (cardsLoading) return <></>;
+    if (cardsLoading) return <Loader />;
+
     if (cardsError || !data) return <></>;
 
     return (