nested structure in CourseProgram implementation

EscolaLMS · Aug 22, 2023 · 59b08d7 · 59b08d7
1 parent 3b6f5ad
commit 59b08d7
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 20 deletions.
diff --git a/src/components/organisms/CourseProgram/CourseProgram.tsx b/src/components/organisms/CourseProgram/CourseProgram.tsx
@@ -5,9 +5,9 @@ import type { API } from "@escolalms/sdk/lib";
 
 import type { ExtendableStyledComponent } from "types/component";
 import { IconTitle, Icon } from "../../../index";
-import type { SharedComponentProps } from "./_components/types";
+import { RecursiveLessons } from "./_components/RecursiveLessons";
 import { StyledSection } from "./_components/styles";
-import { CourseProgramLesson } from "./_components/CourseProgramLesson";
+import type { SharedComponentProps } from "./_components/types";
 
 interface Props extends SharedComponentProps, ExtendableStyledComponent {
   lessons: API.Lesson[];
@@ -33,19 +33,13 @@ export const CourseProgram: React.FC<Props> = ({
           />
         </header>
       )}
-      <article>
-        {lessons.map((lesson, index) => (
-          <CourseProgramLesson
-            defaultOpen={true}
-            key={lesson.id}
-            index={index}
-            {...{
-              lesson,
-              onTopicClick,
-            }}
-          />
-        ))}
-      </article>
+      <ul className="lessons__list">
+        <RecursiveLessons
+          lessons={lessons}
+          onTopicClick={onTopicClick}
+          mobile={mobile}
+        />
+      </ul>
     </StyledSection>
   );
 };

diff --git a/src/components/organisms/CourseProgram/_components/CourseProgramLesson.tsx b/src/components/organisms/CourseProgram/_components/CourseProgramLesson.tsx
@@ -10,23 +10,33 @@ interface Props extends SharedComponentProps {
   lesson: API.Lesson;
   index: number;
   defaultOpen?: boolean;
+  isSubLesson: boolean;
+  children: React.ReactNode;
 }
 
 export const CourseProgramLesson: React.FC<Props> = ({
   lesson,
   index,
   defaultOpen = true,
   onTopicClick,
+  mobile,
+  isSubLesson,
+  children,
 }) => {
   const { t } = useTranslation();
   const [open, setOpen] = useState(defaultOpen);
 
   return (
-    <div className={`lesson__item ${open ? "open" : "closed"}`}>
+    <li
+      className={`lesson__item ${open ? "open" : "closed"} ${
+        isSubLesson ? "sub-lesson" : ""
+      }`}
+    >
       <header>
         <div className="lesson__details">
           <Text noMargin size="12">
-            {t<string>("Course.Lesson")} {index + 1}
+            {t<string>(isSubLesson ? "Course.SubLesson" : "Course.Lesson")}{" "}
+            {index + 1}
           </Text>
           <Text noMargin size="12">
             {lesson.duration && lesson.duration}
@@ -46,16 +56,20 @@ export const CourseProgramLesson: React.FC<Props> = ({
           <Icon name="chevron" />
         </Button>
       </header>
+      {(lesson.lessons?.length ?? 0) > 0 && (
+        <ul className="lesson__lessons">{children}</ul>
+      )}
       <ul className="lesson__topics">
         {lesson.topics?.map((topic, topicIndex) => (
           <CourseProgramTopic
             key={topicIndex}
             topic={topic}
             index={topicIndex + 1}
             onTopicClick={onTopicClick}
+            mobile={mobile}
           />
         ))}
       </ul>
-    </div>
+    </li>
   );
 };
diff --git a/src/components/organisms/CourseProgram/_components/styles.ts b/src/components/organisms/CourseProgram/_components/styles.ts
@@ -30,6 +30,12 @@ export const StyledSection = styled("section")<{ $mobile: boolean }>`
       }
     }
   }
+
+  .lessons__list {
+    list-style-type: none;
+    padding-left: 0;
+  }
+
   .lesson__item {
     background: ${({ theme }) =>
       getStylesBasedOnTheme(
@@ -58,7 +64,7 @@ export const StyledSection = styled("section")<{ $mobile: boolean }>`
       display: flex;
       flex-direction: row;
       flex-wrap: nowrap;
-      align-items: flex-start;
+      align-items: center;
       align-content: flex-start;
 
       button {
@@ -197,12 +203,25 @@ export const StyledSection = styled("section")<{ $mobile: boolean }>`
     }
   }
 
+  .lesson__lessons {
+    list-style: none;
+    padding-left: 0;
+
+    .sub-lesson {
+      padding-inline: 5px;
+      margin-block: 0;
+      border-left: 2px solid transparent;
+      border-bottom: 2px solid rgb(255, 255, 255);
+    }
+  }
+
   .lesson__item.open .lesson__topics {
     max-height: 100vh;
     transition: all 0.35s ease-in;
   }
 
-  .lesson__item.closed .lesson__topics {
+  .lesson__item.closed .lesson__topics,
+  .lesson__item.closed .lesson__lessons {
     max-height: 0;
     overflow: hidden;
     transition: all 0.35s ease-out;