Add section type

oaknational · Dec 9, 2024 · e33d24b · e33d24b
1 parent e8ff60c
commit e33d24b
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 28 deletions.
diff --git a/apps/nextjs/src/components/AppComponents/Chat/chat-lessonPlanDisplay.tsx b/apps/nextjs/src/components/AppComponents/Chat/chat-lessonPlanDisplay.tsx
@@ -24,7 +24,7 @@ function basedOnTitle(basedOn: string | BasedOnOptional) {
 }
 
 const displayStyles = cva(
-  "relative flex flex-col space-y-10 px-14 pb-28 opacity-100 sm:px-24 ",
+  "relative flex flex-col space-y-10 px-14 pb-28 opacity-100 sm:px-24",
 );
 
 export type LessonPlanDisplayProps = Readonly<{
@@ -143,7 +143,7 @@ export const LessonPlanDisplay = ({
                 return (
                   <DropDownSection
                     key={dependant}
-                    objectKey={dependant}
+                    section={dependant}
                     sectionRefs={sectionRefs}
                     value={value}
                     userHasCancelledAutoScroll={userHasCancelledAutoScroll}

diff --git a/apps/nextjs/src/components/AppComponents/Chat/drop-down-section/chat-section.tsx b/apps/nextjs/src/components/AppComponents/Chat/drop-down-section/chat-section.tsx
@@ -13,42 +13,42 @@ import FlagButton from "./flag-button";
 import ModifyButton from "./modify-button";
 
 export type ChatSectionProps = Readonly<{
-  objectKey: LessonPlanKeys;
+  section: LessonPlanKeys;
   value: LessonPlanSectionWhileStreaming;
 }>;
 
-const ChatSection = ({ objectKey, value }: ChatSectionProps) => {
+const ChatSection = ({ section, value }: ChatSectionProps) => {
   return (
     <OakFlex $flexDirection="column">
       <MemoizedReactMarkdownWithStyles
         lessonPlanSectionDescription={
-          lessonSectionTitlesAndMiniDescriptions[objectKey]?.description
+          lessonSectionTitlesAndMiniDescriptions[section]?.description
         }
-        markdown={`${sectionToMarkdown(objectKey, value)}`}
+        markdown={`${sectionToMarkdown(section, value)}`}
       />
       <OakFlex
         $gap="all-spacing-3"
         $mt="space-between-s"
         $position="relative"
         $display={["none", "flex"]}
       >
-        {objectKey === "additionalMaterials" && value === "None" ? (
+        {section === "additionalMaterials" && value === "None" ? (
           <AddAdditionalMaterialsButton
-            sectionTitle={sectionTitle(objectKey)}
-            sectionPath={objectKey}
+            sectionTitle={sectionTitle(section)}
+            sectionPath={section}
             sectionValue={value}
           />
         ) : (
           <ModifyButton
-            sectionTitle={sectionTitle(objectKey)}
-            sectionPath={objectKey}
+            sectionTitle={sectionTitle(section)}
+            sectionPath={section}
             sectionValue={value}
           />
         )}
 
         <FlagButton
-          sectionTitle={sectionTitle(objectKey)}
-          sectionPath={objectKey}
+          sectionTitle={sectionTitle(section)}
+          sectionPath={section}
           sectionValue={value}
         />
       </OakFlex>

diff --git a/apps/nextjs/src/components/AppComponents/Chat/drop-down-section/index.stories.tsx b/apps/nextjs/src/components/AppComponents/Chat/drop-down-section/index.stories.tsx
@@ -40,7 +40,7 @@ const meta: Meta<typeof DropDownSection> = {
   component: DropDownSection,
   tags: ["autodocs"],
   args: {
-    objectKey: "learningOutcome",
+    section: "learningOutcome",
     value:
       "I can explain the reasons why frogs are so important to British society and culture",
     documentContainerRef: { current: null },
@@ -89,7 +89,7 @@ export const Closed: Story = {
 
 export const AdditionalMaterials: Story = {
   args: {
-    objectKey: "additionalMaterials",
+    section: "additionalMaterials",
     value: "None",
   },
 };
@@ -116,7 +116,7 @@ export const ModifyAdditionalMaterials: Story = {
     },
   },
   args: {
-    objectKey: "additionalMaterials",
+    section: "additionalMaterials",
     value: "None",
   },
   play: async ({ canvasElement }) => {

diff --git a/apps/nextjs/src/components/AppComponents/Chat/drop-down-section/index.tsx b/apps/nextjs/src/components/AppComponents/Chat/drop-down-section/index.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useRef, useState } from "react";
 
+import type { LessonPlanKeys } from "@oakai/aila/src/protocol/schema";
 import { camelCaseToSentenceCase } from "@oakai/core/src/utils/camelCaseConversion";
 import { OakBox, OakFlex, OakP } from "@oaknational/oak-components";
 import { equals } from "ramda";
@@ -15,7 +16,7 @@ import ChatSection from "./chat-section";
 const HALF_SECOND = 500;
 
 export type DropDownSectionProps = Readonly<{
-  objectKey: string;
+  section: LessonPlanKeys;
   sectionRefs: Record<string, React.MutableRefObject<HTMLDivElement | null>>;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   value: any;
@@ -26,7 +27,7 @@ export type DropDownSectionProps = Readonly<{
 }>;
 
 const DropDownSection = ({
-  objectKey,
+  section,
   sectionRefs,
   value,
   documentContainerRef,
@@ -35,7 +36,7 @@ const DropDownSection = ({
   streamingTimeout = HALF_SECOND,
 }: DropDownSectionProps) => {
   const sectionRef = useRef(null);
-  if (sectionRefs) sectionRefs[objectKey] = sectionRef;
+  if (sectionRefs) sectionRefs[section] = sectionRef;
   const [isOpen, setIsOpen] = useState(false);
   const [status, setStatus] = useState<"empty" | "isStreaming" | "isLoaded">(
     "empty",
@@ -56,7 +57,7 @@ const DropDownSection = ({
       setStatus("isStreaming");
 
       if (sectionRef && sectionHasFired === false && status === "isStreaming") {
-        if (objectKey && value) {
+        if (section && value) {
           function scrollToSection() {
             if (!userHasCancelledAutoScroll) {
               scrollToRef({
@@ -86,7 +87,7 @@ const DropDownSection = ({
     sectionRef,
     sectionHasFired,
     status,
-    objectKey,
+    section,
     setIsOpen,
     prevValue,
     documentContainerRef,
@@ -109,7 +110,7 @@ const DropDownSection = ({
 
         <FullWidthButton onClick={() => setIsOpen(!isOpen)} aria-label="toggle">
           <OakFlex $width="100%" $justifyContent="space-between">
-            <OakP $font="heading-6">{sectionTitle(objectKey)}</OakP>
+            <OakP $font="heading-6">{sectionTitle(section)}</OakP>
             <Icon icon={isOpen ? "chevron-up" : "chevron-down"} size="sm" />
           </OakFlex>
         </FullWidthButton>
@@ -118,7 +119,7 @@ const DropDownSection = ({
       {isOpen && (
         <div className="mt-12 w-full">
           {status === "isLoaded" ? (
-            <ChatSection objectKey={objectKey} value={value} />
+            <ChatSection section={section} value={value} />
           ) : (
             <Skeleton loaded={false} numberOfRows={1}>
               <p>Loading</p>

diff --git a/apps/nextjs/src/data/lessonSectionTitlesAndMiniDescriptions.ts b/apps/nextjs/src/data/lessonSectionTitlesAndMiniDescriptions.ts
@@ -1,4 +1,24 @@
-export const lessonSectionTitlesAndMiniDescriptions = {
+import type { LessonPlanKeys } from "@oakai/aila/src/protocol/schema";
+
+export const lessonSectionTitlesAndMiniDescriptions: Record<
+  LessonPlanKeys,
+  { description: string }
+> = {
+  title: {
+    description: "The name of the lesson.",
+  },
+  keyStage: {
+    description: "The educational stage for which the lesson is intended.",
+  },
+  subject: {
+    description: "The subject area of the lesson.",
+  },
+  topic: {
+    description: "An optional topic that this lesson is part of.",
+  },
+  basedOn: {
+    description: "An Oak lesson that this lesson is based on.",
+  },
   learningOutcome: {
     description:
       "A short summary of the knowledge, skills and understanding students are expected to acquire by the end of the lesson.",
@@ -47,8 +67,8 @@ export const lessonSectionTitlesAndMiniDescriptions = {
     description:
       "Extra resources for further study or practice, including worksheets, readings, and interactive activities.",
   },
-  slides: {
-    description:
-      "Visual aids and presentations used throughout the lesson to support teaching and learning.",
-  },
+  // slides: {
+  //   description:
+  //     "Visual aids and presentations used throughout the lesson to support teaching and learning.",
+  // },
 };