Refactor index file to handle templates and split queries

src/components/base/experience/experience.graphql.ts → src/components/base/experience/blankexperience/experience.graphql.ts

@@ -1,8 +1,14 @@
 import { graphql } from "@generated/graphql/gql";
 
 export const ExperienceQuery = graphql(/* GraphQL */ `
-  query GetExperience($key: String, $version: String, $locale: String, $url: String, $status: String) {
-    content: _Experience(
+  query GetExperience(
+    $key: String
+    $version: String
+    $locale: String
+    $url: String
+    $status: String
+  ) {
+    content: BlankExperience(
       where: {
         _metadata: {
           url: { default: { eq: $url } }
@@ -14,19 +20,6 @@ export const ExperienceQuery = graphql(/* GraphQL */ `
       }
     ) {
       items {
-        metadata: _metadata {
-          key
-          version
-          locale
-          displayName
-          url {
-            default
-          }
-          published
-          status
-          created
-          lastModified
-        }
         composition {
           key
           displayName
@@ -44,3 +37,21 @@ export const ExperienceQuery = graphql(/* GraphQL */ `
     }
   }
 `);
+
+export const BlankExperienceFragment = graphql(/* GraphQL */ `
+  fragment BlankExperienceFragment on BlankExperience {
+    composition {
+      key
+      displayName
+      displayTemplateKey
+      displaySettings {
+        key
+        value
+      }
+      sections: nodes {
+        key
+        ...SectionNode
+      }
+    }
+  }
+`);

src/components/base/experience/experience.template.tsx → src/components/base/experience/blankexperience/experience.template.tsx

@@ -1,11 +1,16 @@
 import { useQuery } from "@apollo/client";
-import { CompositionDisplaySetting, SectionNodeFragment } from "@generated/graphql";
+import {
+  BlankExperienceFragmentFragment,
+  CompositionDisplaySetting,
+  SectionNodeFragment,
+} from "@generated/graphql";
 import { useContentSaved } from "@hooks";
 import { useEffect, useMemo } from "react";
-import { SectionTemplate } from "../section/section.template";
+import { SectionTemplate } from "../../section/section.template";
 import { ExperienceQuery } from "./experience.graphql";
 import { GetExperienceStyles } from "./experience.style";
 import { useGlobalContext } from "@context";
+import { getContentByPath } from "@components/base/templates/metadata.graphql";
 
 interface ExperienceTemplateProps {
   contentGuid?: string | null; // Content GUID
@@ -15,9 +20,19 @@ interface ExperienceTemplateProps {
   url?: string | null; // Matched against the URL.Default
 }
 
-export const ExperienceTemplate: React.FC<ExperienceTemplateProps> = ({ contentGuid, version, locale, url }) => {
+export const ExperienceTemplate: React.FC<ExperienceTemplateProps> = ({
+  contentGuid,
+  version,
+  locale,
+  url,
+}) => {
   const { setIsLoading } = useGlobalContext();
-  const queryVariables = { key: contentGuid, version, locale, url, status: url ? "Published" : undefined };
+  const queryVariables = {
+    version,
+    locale,
+    url,
+    status: url ? "Published" : undefined,
+  };
 
   const { data, refetch, error, loading } = useQuery(ExperienceQuery, {
     variables: queryVariables,
@@ -27,27 +42,45 @@ export const ExperienceTemplate: React.FC<ExperienceTemplateProps> = ({ contentG
       // refetch(queryVariables);
     },
     onCompleted: (data) => {
-      console.log("[QUERY] Query finished with variables", queryVariables, data);
+      console.log(
+        "[QUERY] Query finished with variables",
+        queryVariables,
+        data
+      );
       setIsLoading(false);
     },
   });
 
+  // const { data, refetch, error, loading } = useQuery(getContentByPath, {
+  //   variables: { url: url! },
+  //   notifyOnNetworkStatusChange: true,
+  //   onError: (error) => {
+  //     console.error("[QUERY] Error fetching Experience", error);
+  //     // refetch(queryVariables);
+  //     setIsLoading(false);
+  //   },
+  //   onCompleted: (data) => {
+  //     console.log("[QUERY] Query finished with variables", {}, data);
+  //     setIsLoading(false);
+  //   },
+  // });
+
   const experience = useMemo(() => {
     const items = data?.content?.items;
     if (!data || !items || items.length === 0) {
       return null;
     }
 
     return items[0];
-  }, [data]);
+  }, [data]) as BlankExperienceFragmentFragment;
 
   useContentSaved((data) => {
     const [contentId, contentVersion] = data.contentLink.split("_");
     if (contentVersion) {
       queryVariables.version = contentVersion;
     }
 
-    refetch(queryVariables);
+    // refetch(queryVariables);
   });
 
   useEffect(() => {
@@ -56,10 +89,15 @@ export const ExperienceTemplate: React.FC<ExperienceTemplateProps> = ({ contentG
     }
   }, [loading]);
 
-  const sections = useMemo(() => experience?.composition?.sections ?? [], [experience]);
+  const sections = useMemo(
+    () => experience?.composition?.sections ?? [],
+    [experience]
+  );
 
   const classes = useMemo(() => {
-    return GetExperienceStyles(experience?.composition?.displaySettings as CompositionDisplaySetting[]);
+    return GetExperienceStyles(
+      experience?.composition?.displaySettings as CompositionDisplaySetting[]
+    );
   }, [experience]);
 
   if (error) {
@@ -72,7 +110,15 @@ export const ExperienceTemplate: React.FC<ExperienceTemplateProps> = ({ contentG
 
   return (
     <article className={classes}>
-      {sections.map((section) => section && <SectionTemplate section={section as SectionNodeFragment} key={section.key} />)}
+      {sections.map(
+        (section) =>
+          section && (
+            <SectionTemplate
+              section={section as SectionNodeFragment}
+              key={section.key}
+            />
+          )
+      )}
     </article>
   );
 };

src/components/base/page/justpage/justpage.graphql.tsx

@@ -0,0 +1,41 @@
+import { graphql } from "@generated/graphql/gql";
+
+export const JustPageQuery = graphql(/* GraphQL */ `
+  query GetJustPage(
+    $key: String
+    $version: String
+    $locale: String
+    $url: String
+    $status: String
+  ) {
+    content: JustPage(
+      where: {
+        _metadata: {
+          url: { default: { eq: $url } }
+          status: { eq: $status }
+          key: { eq: $key }
+          version: { eq: $version }
+          locale: { eq: $locale }
+        }
+      }
+    ) {
+      items {
+        Block {
+          Text {
+            json
+          }
+        }
+      }
+    }
+  }
+`);
+
+export const JustPageFragment = graphql(/* GraphQL */ `
+  fragment JustPageFragment on JustPage {
+    Block {
+      Text {
+        json
+      }
+    }
+  }
+`);

src/components/base/page/justpage/justpage.template.tsx

@@ -0,0 +1,60 @@
+import { useQuery } from "@apollo/client";
+import { useGlobalContext } from "@context";
+import { JustPageQuery } from "./justpage.graphql";
+
+export interface JustPageTemplateProps {
+  contentGuid?: string | null; // Content GUID
+  version?: string | null; // Optional version
+  locale?: string | null; // Optional locale
+  // Or queried by just URL
+  url?: string | null; // Matched against the URL.Default
+}
+
+interface Node {
+  text?: string;
+  children?: Node[];
+}
+
+export function extractText(node: Node): string {
+  if (!node) return "";
+
+  if (typeof node.text === "string" && node.text !== " ") return node.text;
+
+  if (Array.isArray(node.children)) {
+    return node.children.reduce((acc, child) => acc + extractText(child), "");
+  }
+
+  return "";
+}
+
+export const JustPageTemplate: React.FC<JustPageTemplateProps> = ({
+  url,
+  contentGuid,
+}) => {
+  const { setIsLoading } = useGlobalContext();
+  const { data, refetch, error, loading } = useQuery(JustPageQuery, {
+    variables: { url, key: contentGuid },
+    notifyOnNetworkStatusChange: true,
+    onError: (error) => {
+      console.error("[QUERY] Error fetching Experience", error);
+      // refetch(queryVariables);
+    },
+    onCompleted: (data) => {
+      console.log("[QUERY] Query finished with variables", {}, data);
+      setIsLoading(false);
+    },
+  });
+
+  const paragraph =
+    extractText(data?.content?.items?.[0]?.Block?.Text?.json) || "";
+
+  return (
+    <article className="relative experience theme--blue">
+      <section className="opti-container outer-padding padding-top--medium padding-bottom--medium">
+        <div className="opti-container__content container-narrow">
+          <p>{paragraph}</p>
+        </div>
+      </section>
+    </article>
+  );
+};

src/components/base/page/newabout/newabout.graphql.ts

@@ -0,0 +1,39 @@
+import { graphql } from "@generated/graphql/gql";
+
+export const NewAboutQuery = graphql(/* GraphQL */ `
+  query GetNewAboutPage(
+    $key: String
+    $version: String
+    $locale: String
+    $url: String
+    $status: String
+  ) {
+    content: BlankPage(
+      where: {
+        _metadata: {
+          url: { default: { eq: $url } }
+          status: { eq: $status }
+          key: { eq: $key }
+          version: { eq: $version }
+          locale: { eq: $locale }
+        }
+      }
+    ) {
+      items {
+        Title
+        Block {
+          Heading
+        }
+      }
+    }
+  }
+`);
+
+export const NewAboutDataFragment = graphql(/* GraphQL */ `
+  fragment NewAboutData on BlankPage {
+    Title
+    Block {
+      Heading
+    }
+  }
+`);

src/components/base/page/newabout/newabout.template.tsx

@@ -0,0 +1,49 @@
+import { useQuery } from "@apollo/client";
+import { useGlobalContext } from "@context";
+import { NewAboutQuery } from "./newabout.graphql";
+import { ElementTemplate } from "@components/base/element/element.template";
+import { ElementNodeFragment, NewAboutDataFragment } from "@generated/graphql";
+
+export interface NewAboutTemplateProps {
+  contentGuid?: string | null; // Content GUID
+  version?: string | null; // Optional version
+  locale?: string | null; // Optional locale
+  // Or queried by just URL
+  url?: string | null; // Matched against the URL.Default
+}
+
+export const NewAboutTemplate: React.FC<NewAboutTemplateProps> = ({
+  url,
+  contentGuid,
+}) => {
+  const { setIsLoading } = useGlobalContext();
+
+  const { data, refetch, error, loading } = useQuery(NewAboutQuery, {
+    variables: { url, key: contentGuid },
+    notifyOnNetworkStatusChange: true,
+    onError: (error) => {
+      console.error("[QUERY] Error fetching Experience", error);
+      // refetch(queryVariables);
+    },
+    onCompleted: (data) => {
+      console.log("[QUERY] Query finished with variables", {}, data);
+      setIsLoading(false);
+    },
+  });
+
+  const contentItem = data?.content?.items?.[0] as NewAboutDataFragment;
+
+  const title = contentItem?.Title || "No Title";
+  const heading = contentItem?.Block?.Heading || "No Heading";
+
+  return (
+    <article className="relative experience theme--blue">
+      <section className="opti-container outer-padding padding-top--medium padding-bottom--medium">
+        <div className="opti-container__content container-narrow">
+          <h1 className="text-red">{title}</h1>
+          <h2>{heading}</h2>
+        </div>
+      </section>
+    </article>
+  );
+};