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: improve course page

Browse source
This commit is contained in:
swve 2022-11-15 00:14:14 +01:00
parent a8bad0427b
commit 6c12ee17f5
4 changed files with 138 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

6
front/pages/org/[orgslug]/course/[courseid]/edit/index.tsx
View file

@ -66,16 +66,16 @@ function CourseEdit() {
// Submit new chapter
const submitChapter = async (chapter: any) => {
await createChapter(chapter, courseid);
getCourseChapters();
await getCourseChapters();
setNewChapterModal(false);
};
// Submit new element
const submitElement = async (element: any) => {
console.log("submitElement", element);
updateChaptersMetadata(courseid, data);
await updateChaptersMetadata(courseid, data);
await createElement(element, element.chapterId);
getCourseChapters();
await getCourseChapters();
setNewElementModal(false);
};

22
front/pages/org/[orgslug]/course/[courseid]/element/[elementid]/index.tsx
View file

@ -31,9 +31,25 @@ function ElementPage() {
const output = useMemo(() => {
if (router.isReady) {
console.log("element", element.content);
console.log( "el",element.content);
let content = Object.keys(element.content).length > 0 ? element.content : {
"type": "doc",
"content": [
{
"type": "paragraph",
"content": [
{
"type": "text",
"text": "Hello world, this is a example Canva ⚡️"
}
]
}
]
}
console.log("element", content);
return generateHTML(element.content, [Document, StarterKit, Paragraph, Text, Bold]);
return generateHTML(content, [Document, StarterKit, Paragraph, Text, Bold]);
}
}, [element.content]);
@ -44,7 +60,7 @@ function ElementPage() {
) : (
<div>
<p>element</p>
<h1>{element.name}</h1>
<h1>{element.name} </h1>
<hr />
<div dangerouslySetInnerHTML={{ __html: output } as any}></div>
</div>

113
front/pages/org/[orgslug]/course/[courseid]/index.tsx
View file

@ -1,25 +1,25 @@
import { EyeOpenIcon, Pencil2Icon } from "@radix-ui/react-icons";
import Link from "next/link";
import { useRouter } from "next/router";
import React from "react";
import styled from "styled-components";
import Layout from "../../../../../components/ui/Layout";
import { getAPIUrl, getBackendUrl } from "../../../../../services/config";
import { getCourse } from "../../../../../services/courses/courses";
import { getCourse, getCourseMetadata } from "../../../../../services/courses/courses";
import { getOrganizationContextInfo } from "../../../../../services/orgs";
const CourseIdPage = () => {
const router = useRouter();
const { courseid } = router.query;
const { courseid, orgslug } = router.query;
const [isLoading, setIsLoading] = React.useState(true);
const [courseInfo, setCourseInfo] = React.useState({}) as any;
async function fetchCourseInfo() {
const course = await getCourse("course_" + courseid);
const course = await getCourseMetadata("course_" + courseid);
setCourseInfo(course);
console.log("courseinfo" , courseInfo);
setIsLoading(false);
}
@ -29,7 +29,7 @@ const CourseIdPage = () => {
fetchCourseInfo();
}
return () => {};
// eslint-disable-next-line react-hooks/exhaustive-deps
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [router.isReady]);
return (
@ -37,23 +37,82 @@ const CourseIdPage = () => {
{isLoading ? (
<div>Loading...</div>
) : (
<div>
<CoursePageLayout>
<br></br>
<p>Course</p>
<h1>{courseInfo.name}</h1>
<CourseWrapper>
<img src={`${getBackendUrl()}content/uploads/img/${courseInfo.thumbnail}`} alt="" />
</CourseWrapper>
</div>
<h1>
{courseInfo.course.name}{" "}
<Link href={`/org/${orgslug}/course/${courseid}/edit`}>
<a target="_blank" rel="noopener noreferrer">
&nbsp; <Pencil2Icon />
</a>
</Link>{" "}
</h1>
<br />
<ChaptersWrapper>
{courseInfo.chapters.map((chapter: any) => {
return (
<>
{chapter.elements.map((element: any) => {
return (
<>
<Link href={`/org/${orgslug}/course/${courseid}/element/${element.id.replace("element_", "")}`}>
<a target="_blank" rel="noopener noreferrer">
<ChapterIndicator />
</a>
</Link>{" "}
</>
);
})}
&nbsp;&nbsp;&nbsp;&nbsp;
</>
);
})}
</ChaptersWrapper>
<CourseThumbnailWrapper>
<img src={`${getBackendUrl()}content/uploads/img/${courseInfo.course.thumbnail}`} alt="" />
</CourseThumbnailWrapper>
<h2>Description</h2>
<p>{courseInfo.course.description}</p>
<h2>What you will learn</h2>
<p>{courseInfo.course.learnings == ![] ? "no data" : courseInfo.course.learnings}</p>
<h2>Course Lessons</h2>
{courseInfo.chapters.map((chapter: any) => {
return (
<>
<h3>Chapter : {chapter.name}</h3>
{chapter.elements.map((element: any) => {
return (
<>
<p>
Element {element.name}
<Link href={`/org/${orgslug}/course/${courseid}/element/${element.id.replace("element_", "")}`}>
<a target="_blank" rel="noopener noreferrer">
&nbsp; <EyeOpenIcon />
</a>
</Link>{" "}
</p>
</>
);
})}
&nbsp;&nbsp;&nbsp;&nbsp;
</>
);
})}
</CoursePageLayout>
)}
</Layout>
);
};
const CourseWrapper = styled.div`
const CourseThumbnailWrapper = styled.div`
display: flex;
img {
position: absolute;
width: 794px;
height: 224.28px;
object-fit: cover;
@ -65,5 +124,29 @@ const CourseWrapper = styled.div`
border-radius: 7px;
}
`;
const CoursePageLayout = styled.div`
margin-left: 40px;
margin-right: 40px;
`;
const ChaptersWrapper = styled.div`
display: flex;
`;
const ChapterIndicator = styled.div`
border-radius: 20px;
height: 5px;
background: #151515;
border-radius: 3px;
width: 40px;
background-color: black;
margin: 10px;
margin-left: 0px;
transition: all 0.2s ease;
&:hover {
width: 50px;
cursor: pointer;
}
`;
export default CourseIdPage;