feature/additionally fetch header and footer to the context in previe…

…w mode to resolve header ad footer later (#57)

apps/storyblok/src/components/CoreLayout/index.tsx

@@ -1,15 +1,31 @@
+import type { ISbStoryData } from "@storyblok/react/rsc";
+
+import { fetchStoriesByParams, isDraftModeEnv } from "@/lib/api";
 import { DataContextProvider } from "@/components/DataContext";
 import StoryblokProvider from "@/components/StoryblokProvider";
 
 import type { ICoreLayoutProps } from "./types";
 
-export default function CoreLayout({
+export default async function CoreLayout({
   children,
   allResolvedLinks,
 }: ICoreLayoutProps) {
+  let headersAndFooters: ISbStoryData[] = [];
+
+  if (isDraftModeEnv) {
+    const { data } = await fetchStoriesByParams(isDraftModeEnv, {
+      by_slugs: "headers/*,footers/*",
+    });
+
+    headersAndFooters = data;
+  }
+
   return (
     <StoryblokProvider>
-      <DataContextProvider allResolvedLinks={allResolvedLinks}>
+      <DataContextProvider
+        headersAndFooters={headersAndFooters}
+        allResolvedLinks={allResolvedLinks}
+      >
         {children}
       </DataContextProvider>
     </StoryblokProvider>

apps/storyblok/src/components/DataContext/index.tsx

@@ -6,16 +6,19 @@ import type { IDataContextProviderProps, IDataContextValues } from "./types";
 
 export const DataContext = createContext<IDataContextValues>({
   allResolvedLinks: [],
+  headersAndFooters: [],
 });
 
 export function DataContextProvider({
   children,
   allResolvedLinks,
+  headersAndFooters,
 }: IDataContextProviderProps) {
   return (
     <DataContext.Provider
       value={{
         allResolvedLinks,
+        headersAndFooters,
       }}
     >
       {children}

apps/storyblok/src/components/DataContext/types.ts

@@ -1,7 +1,10 @@
+import type { ISbStoryData } from "@storyblok/react/rsc";
+
 import type { IResolvedLink } from "@/lib/api";
 
 export interface IDataContextValues {
   allResolvedLinks: IResolvedLink[];
+  headersAndFooters: ISbStoryData[];
 }
 
 export interface IDataContextProviderProps extends IDataContextValues {

apps/storyblok/src/components/Page/index.tsx

@@ -2,20 +2,30 @@ import { StoryblokComponent, StoryblokStory } from "@storyblok/react/rsc";
 
 import { cn, CookieBanner } from "@shared/ui";
 
+import { useDataContext } from "../DataContext";
 import type { IPageContainerProps } from "./types";
+import { getHeaderAndFooterStories } from "./utils";
 
 export default function PageContainer({ blok }: IPageContainerProps) {
+  const { headersAndFooters } = useDataContext();
+
   const { sections, showCookieBanner, theme } = blok;
 
   if (!sections) return null;
 
+  const { header, footer } = getHeaderAndFooterStories(
+    headersAndFooters,
+    blok.header,
+    blok.footer,
+  );
+
   return (
     <div className={cn("bg-bgColor", theme)}>
-      <StoryblokStory story={blok.header} />
+      <StoryblokStory story={header} />
       {sections.map((s) => (
         <StoryblokComponent blok={s} key={s._uid} />
       ))}
-      <StoryblokStory story={blok.footer} />
+      <StoryblokStory story={footer} />
       {showCookieBanner && <CookieBanner />}
     </div>
   );

apps/storyblok/src/components/Page/utils.ts

@@ -0,0 +1,27 @@
+import type { ISbStoryData } from "@storyblok/react/rsc";
+
+export function getHeaderAndFooterStories(
+  stories: ISbStoryData[],
+  header: string | ISbStoryData,
+  footer: string | ISbStoryData,
+) {
+  let resolvedHeader: ISbStoryData | undefined;
+  let resolvedFooter: ISbStoryData | undefined;
+
+  if (typeof header === "string") {
+    resolvedHeader = stories.find((s) => s.uuid === header);
+  } else {
+    resolvedHeader = header;
+  }
+
+  if (typeof footer === "string") {
+    resolvedFooter = stories.find((s) => s.uuid === footer);
+  } else {
+    resolvedFooter = footer;
+  }
+
+  return {
+    header: resolvedHeader,
+    footer: resolvedFooter,
+  };
+}

apps/storyblok/src/lib/api.ts

@@ -6,7 +6,7 @@ import { SB_CACHE_VERSION_TAG } from "@/constants/cacheTags";
 
 const API_GATE = process.env.NEXT_PUBLIC_API_GATE;
 const isDevMode = process.env.NODE_ENV === "development";
-const isDraftModeEnv =
+export const isDraftModeEnv =
   process.env.NEXT_PUBLIC_IS_PREVIEW === "true" || isDevMode;
 
 // Get the actual SB cache version