[slug].tsx

import type { BuilderContent as BuilderContentType } from '@builder.io/sdk';
import {
  BuilderContent as BuilderContentComponentWrapper,
  Builder,
} from '@builder.io/react/lite';

import { BuilderIoModelIDs } from '@/enums/common';
import { fetchBottomNavigation } from '@/api/fetchBottomNavigation';
import {
  GlobalVariables,
  NavigationDataModel,
  ResourceDataModel,
} from '@/global-types';
import { INSIGHTS_PATH, SITE_MAP_PATH } from '@/constants/paths';
import {
  getResourceImage,
  getResourceTitle,
  getResourceDate,
  getResourceAuthor,
  getResourceDescription,
} from '@/utils/resources';
import { MetaData } from '@/components/meta';
import { fetchGlobalVariables } from '@/api/fetchGlobalVariables';
import { lazy, useEffect, useState } from 'react';
import NotFoundPage from '@/pages/404';
import { useRouter } from 'next/router';
import { Loader } from '@/components/common/Revalidate/Loader/Loader';
import { useUrlRedirectsProceed } from '@/hooks/useUrlRedirectsProceed/useUrlRedirectsProceed';
import withRedirect from '@/components/hoc/withRedirect';
import {
  BuilderContent,
  isPreviewing,
  fetchEntries,
  fetchOneEntry,
} from '@builder.io/sdk-react';
import { customComponents } from '../../../builder-registry';

const LazyBuilderComponent = lazy(() =>
  import('@builder.io/sdk-react').then((module) => ({
    default: module.Content,
  }))
);

Builder.isStatic = true;

export async function getStaticProps({
  params,
}: {
  params: { resource: string; slug: string };
}) {
  const contentData =
    ((await fetchOneEntry({
      apiKey: process.env.NEXT_PUBLIC_BUILDER_API_KEY!,
      model: BuilderIoModelIDs.Resources,
      options: { enrich: true, cachebust: true },
      query: {
        'data.slug': params.slug,
        'data.type': params.resource,
      },
    })) as unknown as ResourceDataModel) || undefined;

  const globalVars = (await fetchGlobalVariables()) as GlobalVariables;

  const commonSEOTitle = globalVars?.data?.seoSiteTitle;

  const title = getResourceTitle(contentData);
  const description = getResourceDescription(contentData);
  const date = getResourceDate(contentData);
  const authors = await getResourceAuthor(contentData);
  const { src, alt } = getResourceImage(contentData);

  const bottomNavigation = await fetchBottomNavigation();

  return {
    props: {
      model: BuilderIoModelIDs.Resources,
      contentData: contentData,
      bottomNavigation,
      slug: params.slug,
      resourceType: params.resource,
      title: title,
      description: description,
      date: date,
      authors: authors,
      imageSrc: src,
      imageAlt: alt,
      commonSEOTitle,
    },
    revalidate: 300,
  };
}

export async function getStaticPaths() {
  const resources = (await fetchEntries({
    apiKey: process.env.NEXT_PUBLIC_BUILDER_API_KEY!,
    model: BuilderIoModelIDs.Resources,
    fields: 'data.slug,data.type',
    options: { noTargeting: true },
    limit: 100,
  })) as { data: { slug: string; type: string } }[];

  return {
    paths: resources.map(
      (d) => `${INSIGHTS_PATH}/${d.data.type}/${d.data.slug}`
    ),
    fallback: true,
  };
}

function Page({
  model,
  contentData,
  bottomNavigation,
  slug,
  resourceType,
  title,
  description,
  date,
  authors,
  imageSrc,
  imageAlt,
  commonSEOTitle,
  waitForRedirect,
}: {
  model: string;
  contentData: BuilderContent | undefined;
  bottomNavigation: NavigationDataModel | null;
  slug: string;
  title: string;
  description: string;
  date: string;
  authors: string[];
  resourceType: string;
  imageSrc: string;
  imageAlt: string;
  commonSEOTitle: string;
  waitForRedirect: boolean;
}) {
  const [rootUrl, setRootUrl] = useState<string>('');
  const router = useRouter();
  const canShowContent = contentData || isPreviewing(router.asPath);
  useUrlRedirectsProceed(router, contentData);

  useEffect(() => {
    if (window !== undefined) {
      const _rootUrl = window.location.origin;
      setRootUrl(_rootUrl);
    }
  }, []);

  if (router.isFallback || waitForRedirect) {
    return (
      <>
        <MetaData
          title={title}
          commonSEOTitle={commonSEOTitle}
          description={description}
          siteMapUrl={`${rootUrl}${SITE_MAP_PATH}`}
          postAuthors={authors}
          url={`${rootUrl}${INSIGHTS_PATH}/${resourceType}/${slug}`}
          imageSrc={imageSrc}
          imageAlt={imageAlt}
        />
        <Loader />
      </>
    );
  }

  if (!contentData && !canShowContent) {
    return <NotFoundPage />;
  }

  return (
    <>
      <MetaData
        title={title}
        commonSEOTitle={commonSEOTitle}
        description={description}
        siteMapUrl={`${rootUrl}${SITE_MAP_PATH}`}
        postAuthors={authors}
        url={`${rootUrl}${INSIGHTS_PATH}/${resourceType}/${slug}`}
        imageSrc={imageSrc}
        imageAlt={imageAlt}
      />
      <BuilderContentComponentWrapper
        key={slug}
        model={model}
        content={contentData as BuilderContentType}
        options={{ enrich: true }}
      >
        {(data) => {
          return (
            <LazyBuilderComponent
              apiKey={process.env.NEXT_PUBLIC_BUILDER_API_KEY!}
              customComponents={customComponents}
              key={slug}
              model={model}
              content={contentData}
              enrich
              data={{
                bottomNavigation,
                resource: {
                  type: data?.type,
                  tags: data?.tags,
                  date: date,
                },
              }}
              context={{
                bottomNavigation,
                resource: {
                  type: data?.type,
                  tags: data?.tags,
                  date: data,
                },
              }}
            />
          );
        }}
      </BuilderContentComponentWrapper>
    </>
  );
}

export default withRedirect(Page);