From 4ccb253e715bb6af5dca1626ad132986062e9062 Mon Sep 17 00:00:00 2001
From: swve <bdswve@gmail.com>
Date: Sun, 29 Jan 2023 18:36:46 +0100
Subject: [PATCH] feat: use swr for lecture page

---
 .../[courseid]/lecture/[lectureid]/page.tsx   | 87 ++++++++-----------
 .../[orgslug]/course/[courseid]/page.tsx      |  4 +-
 2 files changed, 40 insertions(+), 51 deletions(-)

diff --git a/front/app/_orgs/[orgslug]/course/[courseid]/lecture/[lectureid]/page.tsx b/front/app/_orgs/[orgslug]/course/[courseid]/lecture/[lectureid]/page.tsx
index 61939912..990116e5 100644
--- a/front/app/_orgs/[orgslug]/course/[courseid]/lecture/[lectureid]/page.tsx
+++ b/front/app/_orgs/[orgslug]/course/[courseid]/lecture/[lectureid]/page.tsx
@@ -4,52 +4,35 @@ import Link from "next/link";
 import React, { useMemo } from "react";
 import Layout from "@components/UI/Layout";
 import { getLecture } from "@services/courses/lectures";
-import { getBackendUrl } from "@services/config";
+import { getAPIUrl, getBackendUrl } from "@services/config";
 import Canva from "@components/LectureViews/DynamicCanva/DynamicCanva";
 import styled from "styled-components";
 import { getCourse } from "@services/courses/courses";
 import VideoLecture from "@components/LectureViews/Video/Video";
+import useSWR, { mutate } from "swr";
 import { Check } from "lucide-react";
 import { maskLectureAsComplete } from "@services/courses/activity";
+import { swrFetcher } from "@services/utils/requests";
 
 function LecturePage(params: any) {
-  const router = useRouter();
   const lectureid = params.params.lectureid;
   const courseid = params.params.courseid;
   const orgslug = params.params.orgslug;
-  const [lecture, setLecture] = React.useState<any>({});
-  const [course, setCourse] = React.useState<any>({});
-  const [isLoading, setIsLoading] = React.useState(true);
 
-  async function fetchLectureData() {
-    setIsLoading(true);
-    const lecture = await getLecture("lecture_" + lectureid);
-    setLecture(lecture);
-  }
+  const { data: course, error: error_course } = useSWR(`${getAPIUrl()}courses/meta/course_${courseid}`, swrFetcher);
+  const { data: lecture, error: error_lecture } = useSWR(`${getAPIUrl()}lectures/lecture_${lectureid}`, swrFetcher);
 
-  async function fetchCourseData() {
-    const course = await getCourseMetadata("course_" + courseid);
-    setCourse(course);
-    setIsLoading(false);
-  }
+  console.log(course, lecture);
 
   async function markLectureAsCompleteFront() {
     const activity = await maskLectureAsComplete("" + lectureid, courseid, lecture.lecture_id.replace("lecture_", ""));
-    fetchCourseData();
+    mutate(`${getAPIUrl()}courses/meta/${courseid}`);
   }
 
-  React.useEffect(() => {
-    if (lectureid) {
-      fetchLectureData();
-      fetchCourseData();
-    }
-    return () => {};
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [lectureid]);
-
   return (
     <>
-      {isLoading ? (
+      {error_course && <p>Failed to load</p>}
+      {!course || !lecture ? (
         <div>Loading...</div>
       ) : (
         <LectureLayout>
@@ -85,30 +68,36 @@ function LecturePage(params: any) {
             })}
           </ChaptersWrapper>
 
-          <CourseContent>
-            {lecture.type == "dynamic" && <Canva content={lecture.content} lecture={lecture} />}
-            {/* todo : use apis & streams instead of this */}
-            {lecture.type == "video" && <VideoLecture course={course} lecture={lecture} />}
+          {lecture ? (
+            <CourseContent>
+              {lecture.type == "dynamic" && <Canva content={lecture.content} lecture={lecture} />}
+              {/* todo : use apis & streams instead of this */}
+              {lecture.type == "video" && <VideoLecture course={course} lecture={lecture} />}
 
-            <ActivityMarkerWrapper>
-              {course.activity.lectures_marked_complete.includes("lecture_"+lectureid) && course.activity.status == "ongoing" ? (
-                <button style={{ backgroundColor: "green" }}>
-                  <i>
-                    <Check size={20}></Check>
-                  </i>{" "}
-                  Already completed
-                </button>
-              ) : (
-                <button onClick={markLectureAsCompleteFront}>
-                  {" "}
-                  <i>
-                    <Check size={20}></Check>
-                  </i>{" "}
-                  Mark as complete
-                </button>
-              )}
-            </ActivityMarkerWrapper>
-          </CourseContent>
+              <ActivityMarkerWrapper>
+                {course.activity.lectures_marked_complete &&
+                course.activity.lectures_marked_complete.includes("lecture_" + lectureid) &&
+                course.activity.status == "ongoing" ? (
+                  <button style={{ backgroundColor: "green" }}>
+                    <i>
+                      <Check size={20}></Check>
+                    </i>{" "}
+                    Already completed
+                  </button>
+                ) : (
+                  <button onClick={markLectureAsCompleteFront}>
+                    {" "}
+                    <i>
+                      <Check size={20}></Check>
+                    </i>{" "}
+                    Mark as complete
+                  </button>
+                )}
+              </ActivityMarkerWrapper>
+            </CourseContent>
+          ) : (
+            <div>Loading...</div>
+          )}
         </LectureLayout>
       )}
     </>
diff --git a/front/app/_orgs/[orgslug]/course/[courseid]/page.tsx b/front/app/_orgs/[orgslug]/course/[courseid]/page.tsx
index a4fd7ddd..214b064d 100644
--- a/front/app/_orgs/[orgslug]/course/[courseid]/page.tsx
+++ b/front/app/_orgs/[orgslug]/course/[courseid]/page.tsx
@@ -18,7 +18,7 @@ const CourseIdPage = (params: any) => {
     await createActivity("course_" + courseid);
 
     // Mutate course
-    mutate(`${getAPIUrl()}courses/meta/${courseid}`);
+    mutate(`${getAPIUrl()}courses/meta/course_${courseid}`);
   }
 
   async function quitActivity() {
@@ -31,7 +31,7 @@ const CourseIdPage = (params: any) => {
     console.log(activity);
 
     // Mutate course
-    mutate(`${getAPIUrl()}courses/meta/${courseid}`);
+    mutate(`${getAPIUrl()}courses/meta/course_${courseid}`);
   }
 
   return (