rzmk/learnhouse
1
0
Fork 0
mirror of https://github.com/rzmk/learnhouse.git synced 2025-12-19 04:19:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: use swr for lecture page

Browse source
This commit is contained in:
swve 2023-01-29 18:36:46 +01:00
parent ab851fb918
commit 4ccb253e71
2 changed files with 40 additions and 51 deletions
Download patch file Download diff file Expand all files Collapse all files

87
front/app/_orgs/[orgslug]/course/[courseid]/lecture/[lectureid]/page.tsx
View file

@ -4,52 +4,35 @@ import Link from "next/link";
import React, { useMemo } from "react"; import React, { useMemo } from "react";
import Layout from "@components/UI/Layout"; import Layout from "@components/UI/Layout";
import { getLecture } from "@services/courses/lectures"; 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 Canva from "@components/LectureViews/DynamicCanva/DynamicCanva";
import styled from "styled-components"; import styled from "styled-components";
import { getCourse } from "@services/courses/courses"; import { getCourse } from "@services/courses/courses";
import VideoLecture from "@components/LectureViews/Video/Video"; import VideoLecture from "@components/LectureViews/Video/Video";
import useSWR, { mutate } from "swr";
import { Check } from "lucide-react"; import { Check } from "lucide-react";
import { maskLectureAsComplete } from "@services/courses/activity"; import { maskLectureAsComplete } from "@services/courses/activity";
import { swrFetcher } from "@services/utils/requests";
function LecturePage(params: any) { function LecturePage(params: any) {
const router = useRouter();
const lectureid = params.params.lectureid; const lectureid = params.params.lectureid;
const courseid = params.params.courseid; const courseid = params.params.courseid;
const orgslug = params.params.orgslug; 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() { const { data: course, error: error_course } = useSWR(`${getAPIUrl()}courses/meta/course_${courseid}`, swrFetcher);
setIsLoading(true); const { data: lecture, error: error_lecture } = useSWR(`${getAPIUrl()}lectures/lecture_${lectureid}`, swrFetcher);
const lecture = await getLecture("lecture_" + lectureid);
setLecture(lecture);
}
async function fetchCourseData() { console.log(course, lecture);
const course = await getCourseMetadata("course_" + courseid);
setCourse(course);
setIsLoading(false);
}
async function markLectureAsCompleteFront() { async function markLectureAsCompleteFront() {
const activity = await maskLectureAsComplete("" + lectureid, courseid, lecture.lecture_id.replace("lecture_", "")); 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 ( return (
<> <>
{isLoading ? ( {error_course && <p>Failed to load</p>}
{!course || !lecture ? (
<div>Loading...</div> <div>Loading...</div>
) : ( ) : (
<LectureLayout> <LectureLayout>
@ -85,30 +68,36 @@ function LecturePage(params: any) {
})} })}
</ChaptersWrapper> </ChaptersWrapper>
<CourseContent> {lecture ? (
{lecture.type == "dynamic" && <Canva content={lecture.content} lecture={lecture} />} <CourseContent>
{/* todo : use apis & streams instead of this */} {lecture.type == "dynamic" && <Canva content={lecture.content} lecture={lecture} />}
{lecture.type == "video" && <VideoLecture course={course} lecture={lecture} />} {/* todo : use apis & streams instead of this */}
{lecture.type == "video" && <VideoLecture course={course} lecture={lecture} />}
<ActivityMarkerWrapper> <ActivityMarkerWrapper>
{course.activity.lectures_marked_complete.includes("lecture_"+lectureid) && course.activity.status == "ongoing" ? ( {course.activity.lectures_marked_complete &&
<button style={{ backgroundColor: "green" }}> course.activity.lectures_marked_complete.includes("lecture_" + lectureid) &&
<i> course.activity.status == "ongoing" ? (
<Check size={20}></Check> <button style={{ backgroundColor: "green" }}>
</i>{" "} <i>
Already completed <Check size={20}></Check>
</button> </i>{" "}
) : ( Already completed
<button onClick={markLectureAsCompleteFront}> </button>
{" "} ) : (
<i> <button onClick={markLectureAsCompleteFront}>
<Check size={20}></Check> {" "}
</i>{" "} <i>
Mark as complete <Check size={20}></Check>
</button> </i>{" "}
)} Mark as complete
</ActivityMarkerWrapper> </button>
</CourseContent> )}
</ActivityMarkerWrapper>
</CourseContent>
) : (
<div>Loading...</div>
)}
</LectureLayout> </LectureLayout>
)} )}
</> </>

4
front/app/_orgs/[orgslug]/course/[courseid]/page.tsx
View file

@ -18,7 +18,7 @@ const CourseIdPage = (params: any) => {
await createActivity("course_" + courseid); await createActivity("course_" + courseid);
// Mutate course // Mutate course
mutate(`${getAPIUrl()}courses/meta/${courseid}`); mutate(`${getAPIUrl()}courses/meta/course_${courseid}`);
} }
async function quitActivity() { async function quitActivity() {
@ -31,7 +31,7 @@ const CourseIdPage = (params: any) => {
console.log(activity); console.log(activity);
// Mutate course // Mutate course
mutate(`${getAPIUrl()}courses/meta/${courseid}`); mutate(`${getAPIUrl()}courses/meta/course_${courseid}`);
} }
return ( return (