AT57 homework indicator

src/components/Util/Assignment.ts

@@ -0,0 +1,9 @@
+/**
+ * Checks to see wether the provided markdown content has a portfolio assignment attached to it.
+ * @param txtContent the video text content in markdown
+ * @param partial wether the function should start searching from the middle of the text onwards
+ * @returns true if txtContent contains a portfolio assignment, false otherwise
+ */
+export function hasHomework(txtContent: string, partial = true): boolean {
+  return txtContent.indexOf("## Portfolio", partial ? txtContent.length / 2 : 0) !== -1;
+}

src/components/Util/SvgSprite.tsx

@@ -198,4 +198,9 @@ export const SvgSprite = {
       <path d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z" />
     </svg>
   ),
+  'file-word': (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
+      <path d="M224 128L224 0H48C21.49 0 0 21.49 0 48v416C0 490.5 21.49 512 48 512h288c26.51 0 48-21.49 48-48V160h-127.1C238.3 160 224 145.7 224 128zM281.5 240h23.37c7.717 0 13.43 7.18 11.69 14.7l-42.46 184C272.9 444.1 268 448 262.5 448h-29.26c-5.426 0-10.18-3.641-11.59-8.883L192 329.1l-29.61 109.1C160.1 444.4 156.2 448 150.8 448H121.5c-5.588 0-10.44-3.859-11.69-9.305l-42.46-184C65.66 247.2 71.37 240 79.08 240h23.37c5.588 0 10.44 3.859 11.69 9.301L137.8 352L165.6 248.9C167 243.6 171.8 240 177.2 240h29.61c5.426 0 10.18 3.641 11.59 8.883L246.2 352l23.7-102.7C271.1 243.9 275.1 240 281.5 240zM256 0v128h128L256 0z"/>
+    </svg>
+  )
 };

src/pages/WorldDetail/WorldDetail.tsx

@@ -15,6 +15,8 @@ import { Markdown } from "../../components/Markdown";
 import { ArticlePageLinks } from "../../components/ArticlePageLinks";
 import { compiler } from "markdown-to-jsx";
 import { ContentPlayer } from "../../components/ContentPlayer";
+import { hasHomework } from "../../components/Util/Assignment";
+import { Icon } from "../../components/Util/Icon";
 
 export const WorldDetail = () => {
   const [videoContent, setVideoContent] = useState<SingleVideo>();
@@ -24,6 +26,7 @@ export const WorldDetail = () => {
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const [courseData, setCourseData] = useState<any[]>();
   const [literatureOfVideo, setliteratureOfVideo] = useState<string>();
+  const [videoHasHomework, setVideoHasHomework] = useState<boolean>();
   const [videoList, setVideoList] = useState<any[]>();
   const [extraInfo, setExtraInfo] = useState<any[]>();
   const [quizState, setQuizState] = useState<boolean>(false);
@@ -75,6 +78,7 @@ export const WorldDetail = () => {
     setliteratureOfVideo(literature);
     const getCourseData = await getVideoInfo(courseLevel.data);
     setCourseData(getCourseData);
+    setVideoHasHomework(hasHomework(literature));
     setIsLoading(false);
   };
 
@@ -119,10 +123,10 @@ export const WorldDetail = () => {
   };
 
   const generateTableOfContents = async () => {
-    const compiledMarkdown = await compiler(`${literatureOfVideo}`, {
+    const compiledMarkdown = compiler(`${literatureOfVideo}`, {
       forceBlock: true,
     });
-    const filterHeadings = await compiledMarkdown.props.children.filter(
+    const filterHeadings = compiledMarkdown.props.children.filter(
       (item) =>
         item.type === "h1" ||
         item.type === "h2" ||
@@ -131,7 +135,7 @@ export const WorldDetail = () => {
         item.type === "h5" ||
         item.type === "h6"
     );
-    const headings = await filterHeadings.map((item) => {
+    const headings = filterHeadings.map((item) => {
       return {
         id: item.props.id,
         title: item.props.children[0],
@@ -194,6 +198,16 @@ export const WorldDetail = () => {
                     <p className="cta-button__text">Quiz</p>
                   </button>
                 )}
+
+                {videoHasHomework && (
+                  <button onClick={()=>document.getElementById(
+                    tableOfContents.find(c=>c.title.includes("Portfolio assignment"))?.id
+                  )?.scrollIntoView()} 
+                  className={"cta-button"}>
+                    <Icon type="file-word" className="cta-button__img" />
+                    <p className="cta-button__text">Homework</p>
+                  </button>
+                )}
               </div>
 
               {quizState && <Quiz quizData={quiz} modalState={openQuiz} />}