builder-fetch-content-utils.ts

import { useContext } from "react";
import { useRouter } from "next/router";
import { builder, useIsPreviewing } from "@builder.io/react";
import { DrawerContext } from "../contexts/DrawerContext";

export type BuilderContent<C = any> = {
  content: C;
  header: any;
  footer: any;
  leftDrawer: any;
  rightDrawer: any;
  projectsForDrawers: any[];
};

const getBuilderContent = (content: Promise<any>) =>
  Promise.all([
    content,
    builder.get("header", { options: { noTargeting: true } }).toPromise(),
    builder.get("footer", { options: { noTargeting: true } }).toPromise(),
    builder
      .get("drawer", { userAttributes: { drawerOrientation: "left" } })
      .toPromise(),
    builder
      .get("drawer", { userAttributes: { drawerOrientation: "right" } })
      .toPromise(),
    builder.getAll("project", {
      fields: "data.url,data.category,data.title",
      options: { noTargeting: true },
      limit: 0,
    }),
  ]);

const getBuilderContentProps = async <C>(page: Promise<any>) => {
  const [content, header, footer, leftDrawer, rightDrawer, projectsForDrawers] =
    await getBuilderContent(page);

  const props: BuilderContent<C> = {
    content: content || null,
    header: header || null,
    footer: footer || null,
    leftDrawer: leftDrawer || null,
    rightDrawer: rightDrawer || null,
    projectsForDrawers: projectsForDrawers || null,
  };

  return props;
};

const getBuilderModelPaths = async (model: string) => {
  const items = await builder.getAll(model, {
    fields: "data.url", // only request the `data.url` field
    options: { noTargeting: true },
    limit: 0,
  });

  return items.map((item) => `${item.data?.url}`);
};

const useLayout = () => {
  return {
    builderContext: { ...useContext(DrawerContext) },
    router: useRouter(),
    isPreviewing: useIsPreviewing(),
  };
};

export {
  getBuilderContent,
  getBuilderContentProps,
  getBuilderModelPaths,
  useLayout,
};