[F] Add section break template

For JIRA: "EPO-8545 #IN-PROGRESS #comment add section break template"

app/[locale]/[investigation]/[...uriSegments]/layout.tsx

@@ -0,0 +1,71 @@
+import { PropsWithChildren } from "react";
+import { RootLayoutParams } from "../../layout";
+import { InvestigationParams } from "../layout";
+import { graphql } from "@/gql/public-schema";
+import { queryAPI } from "@/lib/fetch";
+import { ProgressProvider } from "@/contexts/Progress";
+import { notFound } from "next/navigation";
+import Header from "@/components/page/Header/Header";
+import Pager from "@/components/layout/Pager";
+
+export interface UriSegmentsParams {
+  uriSegments: string[];
+}
+
+export interface UriSegmentsProps {
+  params: RootLayoutParams & InvestigationParams & UriSegmentsParams;
+}
+
+const Query = graphql(`
+  query InvestigationChildPage($site: [String], $uri: [String]) {
+    entry(site: $site, uri: $uri) {
+      ...InvestigationChildPageTemplate
+      ...InvestigationSectionBreakTemplate
+    }
+  }
+`);
+
+const UriSegmentsLayout: (
+  props: PropsWithChildren<UriSegmentsProps>
+) => Promise<JSX.Element> = async ({
+  children,
+  params: { locale, investigation, uriSegments },
+}) => {
+  const site = locale === "en" ? "default" : locale;
+  const uri = `${investigation}/${uriSegments.join("/")}`;
+
+  const { data } = await queryAPI({
+    query: Query,
+    variables: {
+      site: [site],
+      uri: [uri],
+    },
+  });
+
+  const { __typename } = data?.entry || {};
+
+  const isValidType =
+    __typename === "investigations_default_Entry" ||
+    __typename === "investigations_investigationSectionBreakChild_Entry";
+
+  if (!isValidType) {
+    notFound();
+  }
+
+  const { id, parent, prev, next } = data?.entry || {};
+
+  const prevUrl = prev?.uri ? `/${prev.uri}` : "#";
+  const nextUrl = next?.uri ? `/${next.uri}` : "#";
+
+  const childPages = parent.children ?? [];
+
+  return (
+    <ProgressProvider pages={childPages} currentPageId={id}>
+      <Header />
+      {children}
+      <Pager leftLink={prevUrl} rightLink={nextUrl} />
+    </ProgressProvider>
+  );
+};
+
+export default UriSegmentsLayout;

app/[locale]/[investigation]/[...uriSegments]/page.tsx

@@ -5,9 +5,13 @@ import {
   getAuthCookies,
   getUserFromJwt,
 } from "@/components/auth/serverHelpers";
-import SignOut from "@/components/auth/buttons/SignOut";
-import InvestigationChildPageTemplate from "@/components/templates/InvestigationChildPage";
 import { queryAPI } from "@/lib/fetch";
+import {
+  InvestigationChildPage,
+  InvestigationSectionBreakPage,
+} from "@/components/templates";
+import { FunctionComponent } from "react";
+import { UriSegmentsProps } from "./layout";
 
 export const revalidate = 60;
 
@@ -22,8 +26,8 @@ const MetadataQuery = graphql(`
 const Query = graphql(`
   query InvestigationChildPage($site: [String], $uri: [String]) {
     entry(site: $site, uri: $uri) {
-      __typename
       ...InvestigationChildPageTemplate
+      ...InvestigationSectionBreakTemplate
     }
   }
 `);
@@ -50,11 +54,8 @@ export async function generateMetadata({
   return title ? { title, twitter: { title } } : {};
 }
 
-const UriSegments: (props: {
-  params: { locale: string; investigation: string; uriSegments: string[] };
-}) => Promise<JSX.Element> = async ({
+const UriSegments: (props: UriSegmentsProps) => Promise<JSX.Element> = async ({
   params: { locale, investigation, uriSegments },
-  // previewData
 }) => {
   const site = locale === "en" ? "default" : locale;
   // // add _es to property names if site is not English
@@ -68,26 +69,30 @@ const UriSegments: (props: {
     },
   });
 
-  if (data?.entry?.__typename !== "investigations_default_Entry") {
+  if (!data) {
+    notFound();
+  }
+
+  const { entry } = data;
+  const { __typename } = entry || {};
+
+  const Templates: Record<string, FunctionComponent<any>> = {
+    investigations_default_Entry: InvestigationChildPage,
+    investigations_investigationSectionBreakChild_Entry:
+      InvestigationSectionBreakPage,
+  };
+
+  const Template = Templates[__typename as string];
+
+  if (!Template) {
     notFound();
   }
 
   const { craftToken, craftUserStatus } = await getAuthCookies();
 
   const user = getUserFromJwt(craftToken);
 
-  return (
-    <InvestigationChildPageTemplate site={site} data={data.entry} user={user}>
-      {user && (
-        <>
-          <p>User: {JSON.stringify(user)}</p>
-          {craftUserStatus && <p>Status: {craftUserStatus}</p>}
-          {/* @ts-expect-error Server Component */}
-          <SignOut redirectTo={`/${investigation}`} />
-        </>
-      )}
-    </InvestigationChildPageTemplate>
-  );
+  return <Template {...{ site, user, locale }} data={entry} />;
 };
 
 export default UriSegments;

app/[locale]/[investigation]/layout.tsx

@@ -40,7 +40,7 @@ const InvestigationIdQuery = graphql(`
 `);
 
 const InvestigationLandingLayout: (
-  props: PropsWithChildren<InvestigationLandingProps>,
+  props: PropsWithChildren<InvestigationLandingProps>
 ) => Promise<JSX.Element> = async ({
   children,
   params: { locale, investigation },
@@ -61,12 +61,9 @@ const InvestigationLandingLayout: (
     user?.group === "educators" ? EducatorStoredAnswers : StudentStoredAnswers;
 
   return (
-    <>
-      {/* <Header /> */}
-      <StoredAnswersComponent investigationId={investigationData?.entry?.id}>
-        {children}
-      </StoredAnswersComponent>
-    </>
+    <StoredAnswersComponent investigationId={investigationData?.entry?.id}>
+      {children}
+    </StoredAnswersComponent>
   );
 };
 

components/content-blocks/Text/styles.ts

@@ -5,8 +5,8 @@ export const Container = styled.section`
   display: block;
 `;
 
-export const TextContent = styled.div<{ $darkMode: boolean }>`
-  ${({ $darkMode }) =>
+export const TextContent = styled.div<{ $darkMode?: boolean }>`
+  ${({ $darkMode = false }) =>
     $darkMode
       ? css`
           color: var(--white, #fff);

components/layout/Pager/Pager.tsx

@@ -1,3 +1,4 @@
+"use client";
 import { FunctionComponent, useContext } from "react";
 import { useTranslation } from "@/lib/i18n/client";
 import useResizeObserver from "use-resize-observer";
@@ -39,8 +40,7 @@ const Pager: FunctionComponent<PagerProps> = ({
   const pageIndex = currentPageNumber - 1;
   const isLastPage = currentPageNumber === totalPages;
   const isFirstPage = currentPageNumber === 1;
-  const currentPageAnswered =
-    answeredBySectionPage[sectionIndex][pageIndex];
+  const currentPageAnswered = answeredBySectionPage[sectionIndex][pageIndex];
   const isNextDisabled =
     !(currentPageAnswered === true || currentPageAnswered === undefined) ||
     isLastPage;

components/templates/InvestigationChildPage/index.tsx

@@ -1,17 +1,14 @@
 "use client";
 import { FunctionComponent } from "react";
 import { graphql, useFragment, FragmentType } from "@/gql/public-schema";
-import { ProgressProvider } from "@/contexts/Progress";
 import ContentBlockFactory from "@/components/factories/ContentBlockFactory";
-import Header from "@/components/page/Header/Header";
-// import { useTranslation } from "@/lib/i18n/client";
 import SaveForm from "@/components/answers/SaveForm/SaveForm";
 import { getUserFromJwt } from "@/components/auth/serverHelpers";
-import Pager from "@/components/layout/Pager";
 import * as Styled from "./styles";
 
 const Fragment = graphql(`
   fragment InvestigationChildPageTemplate on investigations_default_Entry {
+    __typename
     id
     title
     contentBlocks {
@@ -29,6 +26,12 @@ const Fragment = graphql(`
     parent {
       id
       children(section: "investigations", type: "default") {
+        ... on investigations_investigationSectionBreakChild_Entry {
+          __typename
+          id
+          title
+          uri
+        }
         ... on investigations_default_Entry {
           __typename
           id
@@ -127,34 +130,24 @@ const InvestigationChildPage: FunctionComponent<{
   user?: ReturnType<typeof getUserFromJwt>;
   children?: React.ReactNode;
 }> = (props) => {
-  // const { t } = useTranslation();
   const data = useFragment(Fragment, props.data);
 
   if (!data?.title) return null;
 
-  const prevUrl = data.prev?.uri ? `/${data.prev.uri}` : undefined;
-  const nextUrl = data.next?.uri ? `/${data.next.uri}` : undefined;
-
-  const childPages = data.parent?.children ?? [];
-
   return (
-    <ProgressProvider pages={childPages} currentPageId={data.id}>
-      <Header />
-      <Styled.ContentBlocks paddingSize="none" width="wide">
-        <Styled.Title>{data.title}</Styled.Title>
-        {props.children}
-        {data.contentBlocks?.map(
-          (block, i) =>
-            block && (
-              <ContentBlockFactory key={i} site={props.site} data={block} />
-            )
-        )}
-        {data.hasSavePoint && props.user && (
-          <SaveForm investigationId={data.parent?.id} user={props.user} />
-        )}
-      </Styled.ContentBlocks>
-      <Pager leftLink={prevUrl} rightLink={nextUrl} />
-    </ProgressProvider>
+    <Styled.ContentBlocks paddingSize="none" width="wide">
+      <Styled.Title>{data.title}</Styled.Title>
+      {props.children}
+      {data.contentBlocks?.map(
+        (block, i) =>
+          block && (
+            <ContentBlockFactory key={i} site={props.site} data={block} />
+          )
+      )}
+      {data.hasSavePoint && props.user && (
+        <SaveForm investigationId={data.parent?.id} user={props.user} />
+      )}
+    </Styled.ContentBlocks>
   );
 };
 

components/templates/InvestigationChildPage/styles.ts

@@ -12,5 +12,6 @@ export const ContentBlocks = styled(Container)`
 `;
 
 export const Title = styled.h1`
-  padding-block-end: ${fluidScale("57px", "47px")};
+  --title-margin: ${fluidScale("2em", "1em")};
+  margin-block-end: var(--title-margin);
 `;