refactor: fetch builder data

aleph-im · May 30, 2024 · 86d9cc7 · 86d9cc7
1 parent eda8d8b
commit 86d9cc7
Show file tree

Hide file tree

Showing 6 changed files with 87 additions and 55 deletions.
diff --git a/src/hooks/blog/useFetchBlogArticles.tsx b/src/hooks/blog/useFetchBlogArticles.tsx
@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import { GetContentOptions } from "@builder.io/sdk";
-import { fetchBuilderData } from "@/utils/blog/fetchBuilderData";
+import { fetchBuilderData } from "@/utils/fetchBuilderData";
 
 interface UseFetchBlogArticlesArgs {
   builderRequestOptions: GetContentOptions;

diff --git a/src/hooks/useFetchBuilderContent.tsx b/src/hooks/useFetchBuilderContent.tsx
@@ -0,0 +1,75 @@
+import { fetchBuilderData } from "@/utils/fetchBuilderData";
+import { BuilderContent } from "@builder.io/sdk";
+import { useRouter } from "next/router";
+import { useCallback, useEffect, useState } from "react";
+
+interface FetchBuilderContentArgs {
+  pageModel: string;
+  preloadedPage: BuilderContent | null;
+  fetchContentFrom?: string;
+}
+
+interface FetchBuilderContentResponse {
+  content: BuilderContent | null;
+  isUpToDate: boolean;
+  isNotFound: boolean;
+  loading: boolean;
+}
+
+export function useFetchBuilderContent({
+  pageModel,
+  preloadedPage,
+  fetchContentFrom,
+}: FetchBuilderContentArgs): FetchBuilderContentResponse {
+  const [content, setContent] = useState<BuilderContent | null>(preloadedPage);
+  const [isUpToDate, setIsUpToDate] = useState(false);
+  const [isNotFound, setIsNotFound] = useState(false);
+  const [loading, setLoading] = useState(true);
+  const router = useRouter();
+
+  const fetchBuilderContent = useCallback(async () => {
+    const [urlPath, _hash] =
+      (fetchContentFrom || router.asPath).split("#") || "/";
+
+    try {
+      setLoading(true);
+
+      const fetchedContent = await fetchBuilderData("get", [
+        pageModel,
+        { userAttributes: { urlPath } },
+      ]);
+
+      if (fetchedContent) {
+        setContent(fetchedContent);
+        setIsUpToDate(true);
+        setIsNotFound(false);
+      } else if (preloadedPage) {
+        setContent(preloadedPage);
+        setIsUpToDate(false);
+        setIsNotFound(false);
+      } else {
+        setContent(null);
+        setIsUpToDate(false);
+        setIsNotFound(true);
+      }
+    } catch (e) {
+      if (preloadedPage) {
+        setContent(preloadedPage);
+        setIsUpToDate(false);
+        setIsNotFound(false);
+      } else {
+        setContent(null);
+        setIsUpToDate(false);
+        setIsNotFound(true);
+      }
+    } finally {
+      setLoading(false);
+    }
+  }, [fetchContentFrom, router.asPath, pageModel, preloadedPage]);
+
+  useEffect(() => {
+    fetchBuilderContent();
+  }, [fetchBuilderContent]);
+
+  return { content, isUpToDate, isNotFound, loading };
+}
diff --git a/src/pages/_dynamicPage.tsx b/src/pages/_dynamicPage.tsx
@@ -8,6 +8,7 @@ import "../builder-registry";
 import StickyComponent from "@/components/StickyComponent";
 import { Loading } from "./_loading";
 import MainContentContainer from "@/components/MainContentContainer";
+import { useFetchBuilderContent } from "@/hooks/useFetchBuilderContent";
 
 export type DynamicPageProps = {
   pageModel?: string;
@@ -23,10 +24,11 @@ export default function DynamicPage({
   const router = useRouter();
   const isPreviewing = useIsPreviewing();
 
-  const [content, setContent] = useState<BuilderContent | null>(page);
-  const [updated, setUpdated] = useState(false);
-  const [notFound, setNotFound] = useState(false);
-  const [loading, setLoading] = useState(true);
+  const { content, isUpToDate, isNotFound, loading } = useFetchBuilderContent({
+    pageModel,
+    preloadedPage: page,
+    fetchContentFrom,
+  });
 
   useEffect(() => {
     async function scrollToElement() {
@@ -50,55 +52,10 @@ export default function DynamicPage({
     scrollToElement();
   }, [router.asPath]);
 
-  useEffect(() => {
-    async function fetchContent() {
-      const [urlPath, _hash] =
-        (fetchContentFrom || router.asPath).split("#") || "/";
-
-      try {
-        setLoading(true);
-
-        const fetchedContent = await builder
-          .get("page", {
-            userAttributes: { urlPath },
-          })
-          .toPromise();
-
-        if (fetchedContent) {
-          setContent(fetchedContent);
-          setUpdated(true);
-          setNotFound(false);
-        } else if (page) {
-          setContent(page);
-          setUpdated(false);
-          setNotFound(false);
-        } else {
-          setContent(null);
-          setUpdated(false);
-          setNotFound(true);
-        }
-      } catch (e) {
-        if (page) {
-          setContent(page);
-          setUpdated(false);
-          setNotFound(false);
-        } else {
-          setContent(null);
-          setUpdated(false);
-          setNotFound(true);
-        }
-      } finally {
-        setLoading(false);
-      }
-    }
-
-    fetchContent();
-  }, [fetchContentFrom, router.asPath, page]);
-
   return (
     <>
       <Head>
-        <title>{content?.data?.title}</title>
+        <title>{content?.data?.metadata?.title}</title>
       </Head>
       {content?.data?.header && (
         <StickyComponent placed_at="top">
@@ -110,7 +67,7 @@ export default function DynamicPage({
       )}
       <MainContentContainer>
         <Loading show={loading} />
-        {notFound && !isPreviewing ? (
+        {isNotFound && !isPreviewing ? (
           <DefaultErrorPage statusCode={404} />
         ) : (
           <BuilderComponent
@@ -128,7 +85,7 @@ export default function DynamicPage({
           />
         </div>
       )}
-      {!loading && !updated && content?.lastUpdated && (
+      {!loading && !isUpToDate && content?.lastUpdated && (
         <div
           tw="flex flex-col justify-center items-center opacity-80"
           className="bg-main2"

diff --git a/src/utils/blog/fetchAllCategories.tsx b/src/utils/blog/fetchAllCategories.tsx
@@ -1,5 +1,5 @@
 import { BlogCategoryProps } from "@/types/blog/BlogCategoryProps";
-import { fetchBuilderData } from "./fetchBuilderData";
+import { fetchBuilderData } from "../fetchBuilderData";
 
 export const fetchAllCategories = async () => {
   const allCategories = new Set<BlogCategoryProps>();

diff --git a/src/utils/blog/fetchAllTags.tsx b/src/utils/blog/fetchAllTags.tsx
@@ -1,5 +1,5 @@
 import { BlogTagProps } from "@/types/blog/BlogTagProps";
-import { fetchBuilderData } from "./fetchBuilderData";
+import { fetchBuilderData } from "../fetchBuilderData";
 
 export const fetchAllTags = async () => {
   const allTags = new Set<BlogTagProps>();

diff --git a/src/utils/blog/fetchBuilderData.tsx → src/utils/fetchBuilderData.tsx b/src/utils/blog/fetchBuilderData.tsx → src/utils/fetchBuilderData.tsx