chore: merge session pages (#1190)

components/session/MultipleBonusContent.tsx

@@ -1,17 +1,11 @@
 import LinkIcon from '@mui/icons-material/Link';
 import { ISbRichtext } from '@storyblok/react';
 import { render } from 'storyblok-rich-text-react-renderer';
-import SessionDetail from '../../pages/courses/image-based-abuse-and-rebuilding-ourselves/[sessionSlug]';
 import { EventUserData } from '../../utils/logEvent';
 import { RichTextOptions } from '../../utils/richText';
 import SessionContentCard from '../cards/SessionContentCard';
 import { Dots } from '../common/Dots';
 
-/**
- * This React component is used to render storyblok component "Bonus Block".
- * This is currently used in the following session page: {@link SessionDetail}
- */
-
 export type BonusContent = {
   _uid: string;
   title: string;

components/session/SessionHeader.tsx

@@ -1,12 +1,13 @@
-import Header from '../layout/Header';
-import { Button, Typography } from '@mui/material';
-import theme from '../../styles/theme';
-import Link from '../common/Link';
 import CircleIcon from '@mui/icons-material/Circle';
-import illustrationPerson4Peach from '../../public/illustration_person4_peach.svg';
+import { Button, Typography } from '@mui/material';
 import { ISbRichtext, ISbStoryData } from '@storyblok/react';
-import { PROGRESS_STATUS } from '../../constants/enums';
 import { useTranslations } from 'next-intl';
+import { useEffect, useState } from 'react';
+import { PROGRESS_STATUS } from '../../constants/enums';
+import illustrationPerson4Peach from '../../public/illustration_person4_peach.svg';
+import theme from '../../styles/theme';
+import Link from '../common/Link';
+import Header from '../layout/Header';
 
 const sessionSubtitleStyle = {
   marginTop: '0.75rem !important',
@@ -21,20 +22,34 @@ interface SessionHeaderProps {
   name: string;
   sessionProgress: PROGRESS_STATUS;
   course: ISbStoryData;
-  weekString: string;
   subtitle?: string;
+  storyUuid: string;
   storyPosition?: number;
 }
+
 export const SessionHeader = (props: SessionHeaderProps) => {
+  const { description, name, sessionProgress, course, subtitle, storyUuid, storyPosition } = props;
+  const [weekString, setWeekString] = useState<string>('');
+
   const t = useTranslations('Courses');
-  const { description, name, sessionProgress, course, weekString, subtitle, storyPosition } = props;
+
   const headerProps = {
     title: name,
     introduction: description,
     imageSrc: illustrationPerson4Peach,
     imageAlt: 'alt.personTea',
   };
 
+  useEffect(() => {
+    course.content.weeks.map((week: any) => {
+      week.sessions.map((session: any) => {
+        if (session === storyUuid) {
+          setWeekString(week.name);
+        }
+      });
+    });
+  }, [storyUuid, course.content.weeks]);
+
   return (
     <Header
       title={headerProps.title}