mirror of
https://github.com/rzmk/learnhouse.git
synced 2025-12-19 04:19:25 +00:00
chore: use lectures naming
This commit is contained in:
swve
parent
d7f1e6f94a
commit
7237a4de49
36 changed files with 404 additions and 403 deletions
|
|
@ -11,8 +11,8 @@ import Chapter from "../../../../../../components/Drags/Chapter";
|
|||
import { createChapter, deleteChapter, getCourseChaptersMetadata, updateChaptersMetadata } from "../../../../../../services/courses/chapters";
|
||||
import { useRouter } from "next/navigation";
|
||||
import NewChapterModal from "../../../../../../components/Modals/CourseEdit/NewChapter";
|
||||
import NewElementModal from "../../../../../../components/Modals/CourseEdit/NewElement";
|
||||
import { createElement, createFileElement } from "../../../../../../services/courses/elements";
|
||||
import NewLectureModal from "../../../../../../components/Modals/CourseEdit/NewLecture";
|
||||
import { createLecture, createFileLecture } from "../../../../../../services/courses/lectures";
|
||||
|
||||
function CourseEdit(params: any) {
|
||||
const router = useRouter();
|
||||
|
|
@ -22,9 +22,9 @@ function CourseEdit(params: any) {
|
|||
|
||||
// New Chapter Modal State
|
||||
const [newChapterModal, setNewChapterModal] = useState(false) as any;
|
||||
// New Element Modal State
|
||||
const [newElementModal, setNewElementModal] = useState(false) as any;
|
||||
const [newElementModalData, setNewElementModalData] = useState("") as any;
|
||||
// New Lecture Modal State
|
||||
const [newLectureModal, setNewLectureModal] = useState(false) as any;
|
||||
const [newLectureModalData, setNewLectureModalData] = useState("") as any;
|
||||
|
||||
// Check window availability
|
||||
const [winReady, setwinReady] = useState(false);
|
||||
|
|
@ -50,16 +50,16 @@ function CourseEdit(params: any) {
|
|||
const chapterOrder = data.chapterOrder ? data.chapterOrder : [];
|
||||
return chapterOrder.map((chapterId: any) => {
|
||||
const chapter = data.chapters[chapterId];
|
||||
let elements = [];
|
||||
if (data.elements) {
|
||||
elements = chapter.elementIds.map((elementId: any) => data.elements[elementId])
|
||||
? chapter.elementIds.map((elementId: any) => data.elements[elementId])
|
||||
let lectures = [];
|
||||
if (data.lectures) {
|
||||
lectures = chapter.lectureIds.map((lectureId: any) => data.lectures[lectureId])
|
||||
? chapter.lectureIds.map((lectureId: any) => data.lectures[lectureId])
|
||||
: [];
|
||||
}
|
||||
return {
|
||||
list: {
|
||||
chapter: chapter,
|
||||
elements: elements,
|
||||
lectures: lectures,
|
||||
},
|
||||
};
|
||||
});
|
||||
|
|
@ -72,22 +72,22 @@ function CourseEdit(params: any) {
|
|||
setNewChapterModal(false);
|
||||
};
|
||||
|
||||
// Submit new element
|
||||
const submitElement = async (element: any) => {
|
||||
console.log("submitElement", element);
|
||||
// Submit new lecture
|
||||
const submitLecture = async (lecture: any) => {
|
||||
console.log("submitLecture", lecture);
|
||||
await updateChaptersMetadata(courseid, data);
|
||||
await createElement(element, element.chapterId);
|
||||
await createLecture(lecture, lecture.chapterId);
|
||||
await getCourseChapters();
|
||||
setNewElementModal(false);
|
||||
setNewLectureModal(false);
|
||||
};
|
||||
|
||||
// Submit File Upload
|
||||
const submitFileElement = async (file: any, type: any, element: any, chapterId: string) => {
|
||||
console.log("submitFileElement", file);
|
||||
const submitFileLecture = async (file: any, type: any, lecture: any, chapterId: string) => {
|
||||
console.log("submitFileLecture", file);
|
||||
await updateChaptersMetadata(courseid, data);
|
||||
await createFileElement(file, type, element, chapterId);
|
||||
await createFileLecture(file, type, lecture, chapterId);
|
||||
await getCourseChapters();
|
||||
setNewElementModal(false);
|
||||
setNewLectureModal(false);
|
||||
};
|
||||
|
||||
const deleteChapterUI = async (chapterId: any) => {
|
||||
|
|
@ -107,10 +107,10 @@ function CourseEdit(params: any) {
|
|||
|
||||
*/
|
||||
|
||||
const openNewElementModal = async (chapterId: any) => {
|
||||
console.log("openNewElementModal", chapterId);
|
||||
setNewElementModal(true);
|
||||
setNewElementModalData(chapterId);
|
||||
const openNewLectureModal = async (chapterId: any) => {
|
||||
console.log("openNewLectureModal", chapterId);
|
||||
setNewLectureModal(true);
|
||||
setNewLectureModalData(chapterId);
|
||||
};
|
||||
|
||||
// Close new chapter modal
|
||||
|
|
@ -118,8 +118,8 @@ function CourseEdit(params: any) {
|
|||
setNewChapterModal(false);
|
||||
};
|
||||
|
||||
const closeNewElementModal = () => {
|
||||
setNewElementModal(false);
|
||||
const closeNewLectureModal = () => {
|
||||
setNewLectureModal(false);
|
||||
};
|
||||
|
||||
/*
|
||||
|
|
@ -130,12 +130,12 @@ function CourseEdit(params: any) {
|
|||
const { destination, source, draggableId, type } = result;
|
||||
console.log(result);
|
||||
|
||||
// check if the element is dropped outside the droppable area
|
||||
// check if the lecture is dropped outside the droppable area
|
||||
if (!destination) {
|
||||
return;
|
||||
}
|
||||
|
||||
// check if the element is dropped in the same place
|
||||
// check if the lecture is dropped in the same place
|
||||
if (destination.droppableId === source.droppableId && destination.index === source.index) {
|
||||
return;
|
||||
}
|
||||
|
|
@ -155,26 +155,26 @@ function CourseEdit(params: any) {
|
|||
return;
|
||||
}
|
||||
|
||||
//////////////////////// ELEMENTS IN SAME CHAPTERS ////////////////////////////
|
||||
// check if the element is dropped in the same chapter
|
||||
//////////////////////// LECTURES IN SAME CHAPTERS ////////////////////////////
|
||||
// check if the lecture is dropped in the same chapter
|
||||
const start = data.chapters[source.droppableId];
|
||||
const finish = data.chapters[destination.droppableId];
|
||||
|
||||
// check if the element is dropped in the same chapter
|
||||
// check if the lecture is dropped in the same chapter
|
||||
if (start === finish) {
|
||||
// create new arrays for chapters and elements
|
||||
// create new arrays for chapters and lectures
|
||||
const chapter = data.chapters[source.droppableId];
|
||||
const newElementIds = Array.from(chapter.elementIds);
|
||||
const newLectureIds = Array.from(chapter.lectureIds);
|
||||
|
||||
// remove the element from the old position
|
||||
newElementIds.splice(source.index, 1);
|
||||
// remove the lecture from the old position
|
||||
newLectureIds.splice(source.index, 1);
|
||||
|
||||
// add the element to the new position
|
||||
newElementIds.splice(destination.index, 0, draggableId);
|
||||
// add the lecture to the new position
|
||||
newLectureIds.splice(destination.index, 0, draggableId);
|
||||
|
||||
const newChapter = {
|
||||
...chapter,
|
||||
elementIds: newElementIds,
|
||||
lectureIds: newLectureIds,
|
||||
};
|
||||
|
||||
const newState = {
|
||||
|
|
@ -189,25 +189,25 @@ function CourseEdit(params: any) {
|
|||
return;
|
||||
}
|
||||
|
||||
//////////////////////// ELEMENTS IN DIFF CHAPTERS ////////////////////////////
|
||||
// check if the element is dropped in a different chapter
|
||||
//////////////////////// LECTURES IN DIFF CHAPTERS ////////////////////////////
|
||||
// check if the lecture is dropped in a different chapter
|
||||
if (start !== finish) {
|
||||
// create new arrays for chapters and elements
|
||||
const startChapterElementIds = Array.from(start.elementIds);
|
||||
// create new arrays for chapters and lectures
|
||||
const startChapterLectureIds = Array.from(start.lectureIds);
|
||||
|
||||
// remove the element from the old position
|
||||
startChapterElementIds.splice(source.index, 1);
|
||||
// remove the lecture from the old position
|
||||
startChapterLectureIds.splice(source.index, 1);
|
||||
const newStart = {
|
||||
...start,
|
||||
elementIds: startChapterElementIds,
|
||||
lectureIds: startChapterLectureIds,
|
||||
};
|
||||
|
||||
// add the element to the new position within the chapter
|
||||
const finishChapterElementIds = Array.from(finish.elementIds);
|
||||
finishChapterElementIds.splice(destination.index, 0, draggableId);
|
||||
// add the lecture to the new position within the chapter
|
||||
const finishChapterLectureIds = Array.from(finish.lectureIds);
|
||||
finishChapterLectureIds.splice(destination.index, 0, draggableId);
|
||||
const newFinish = {
|
||||
...finish,
|
||||
elementIds: finishChapterElementIds,
|
||||
lectureIds: finishChapterLectureIds,
|
||||
};
|
||||
|
||||
const newState = {
|
||||
|
|
@ -245,13 +245,13 @@ function CourseEdit(params: any) {
|
|||
</button>
|
||||
</Title>
|
||||
{newChapterModal && <NewChapterModal closeModal={closeNewChapterModal} submitChapter={submitChapter}></NewChapterModal>}
|
||||
{newElementModal && (
|
||||
<NewElementModal
|
||||
closeModal={closeNewElementModal}
|
||||
submitFileElement={submitFileElement}
|
||||
submitElement={submitElement}
|
||||
chapterId={newElementModalData}
|
||||
></NewElementModal>
|
||||
{newLectureModal && (
|
||||
<NewLectureModal
|
||||
closeModal={closeNewLectureModal}
|
||||
submitFileLecture={submitFileLecture}
|
||||
submitLecture={submitLecture}
|
||||
chapterId={newLectureModalData}
|
||||
></NewLectureModal>
|
||||
)}
|
||||
|
||||
<br />
|
||||
|
|
@ -267,7 +267,7 @@ function CourseEdit(params: any) {
|
|||
<Chapter
|
||||
orgslug={orgslug}
|
||||
courseid={courseid}
|
||||
openNewElementModal={openNewElementModal}
|
||||
openNewLectureModal={openNewLectureModal}
|
||||
deleteChapter={deleteChapterUI}
|
||||
key={index}
|
||||
info={info}
|
||||
|
|
|
|||
|
|
@ -4,23 +4,23 @@ import { default as React, useEffect, useRef } from "react";
|
|||
|
||||
|
||||
import { useRouter } from "next/navigation";
|
||||
import { getElement } from "../../../../../../../../services/courses/elements";
|
||||
import { getLecture } from "../../../../../../../../services/courses/lectures";
|
||||
import AuthProvider from "../../../../../../../../components/Security/AuthProvider";
|
||||
import EditorWrapper from "../../../../../../../../components/Editor/EditorWrapper";
|
||||
import { getCourseMetadata } from "../../../../../../../../services/courses/courses";
|
||||
|
||||
|
||||
function EditElement(params: any) {
|
||||
function EditLecture(params: any) {
|
||||
const router = useRouter();
|
||||
const elementid = params.params.elementid;
|
||||
const lectureid = params.params.lectureid;
|
||||
const courseid = params.params.courseid;
|
||||
const [element, setElement] = React.useState<any>({});
|
||||
const [lecture, setLecture] = React.useState<any>({});
|
||||
const [courseInfo, setCourseInfo] = React.useState({}) as any;
|
||||
const [isLoading, setIsLoading] = React.useState(true);
|
||||
|
||||
async function fetchElementData() {
|
||||
const element = await getElement("element_" + elementid);
|
||||
setElement(element);
|
||||
async function fetchLectureData() {
|
||||
const lecture = await getLecture("lecture_" + lectureid);
|
||||
setLecture(lecture);
|
||||
}
|
||||
|
||||
async function fetchCourseInfo() {
|
||||
|
|
@ -29,24 +29,24 @@ function EditElement(params: any) {
|
|||
}
|
||||
|
||||
async function fetchAllData() {
|
||||
await fetchElementData();
|
||||
await fetchLectureData();
|
||||
await fetchCourseInfo();
|
||||
setIsLoading(false);
|
||||
}
|
||||
|
||||
React.useEffect(() => {
|
||||
if (elementid && courseid) {
|
||||
if (lectureid && courseid) {
|
||||
fetchAllData();
|
||||
}
|
||||
return () => {};
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [elementid, courseid ]);
|
||||
}, [lectureid, courseid ]);
|
||||
|
||||
return (
|
||||
<AuthProvider>
|
||||
{isLoading ? <div>Loading...</div> : <EditorWrapper course={courseInfo} element={element} content={element.content}></EditorWrapper>}
|
||||
{isLoading ? <div>Loading...</div> : <EditorWrapper course={courseInfo} lecture={lecture} content={lecture.content}></EditorWrapper>}
|
||||
</AuthProvider>
|
||||
);
|
||||
}
|
||||
|
||||
export default EditElement;
|
||||
export default EditLecture;
|
||||
|
|
@ -3,26 +3,26 @@ import { useRouter } from "next/navigation";
|
|||
import Link from "next/link";
|
||||
import React, { useMemo } from "react";
|
||||
import Layout from "../../../../../../../components/UI/Layout";
|
||||
import { getElement } from "../../../../../../../services/courses/elements";
|
||||
import { getLecture } from "../../../../../../../services/courses/lectures";
|
||||
import { getBackendUrl } from "../../../../../../../services/config";
|
||||
import Canva from "../../../../../../../components/LectureViews/DynamicCanva/DynamicCanva";
|
||||
import styled from "styled-components";
|
||||
import { getCourse, getCourseMetadata } from "../../../../../../../services/courses/courses";
|
||||
import VideoLecture from "@components/LectureViews/Video/Video";
|
||||
|
||||
function ElementPage(params: any) {
|
||||
function LecturePage(params: any) {
|
||||
const router = useRouter();
|
||||
const elementid = params.params.elementid;
|
||||
const lectureid = params.params.lectureid;
|
||||
const courseid = params.params.courseid;
|
||||
const orgslug = params.params.orgslug;
|
||||
const [element, setElement] = React.useState<any>({});
|
||||
const [lecture, setLecture] = React.useState<any>({});
|
||||
const [course, setCourse] = React.useState<any>({});
|
||||
const [isLoading, setIsLoading] = React.useState(true);
|
||||
|
||||
async function fetchElementData() {
|
||||
async function fetchLectureData() {
|
||||
setIsLoading(true);
|
||||
const element = await getElement("element_" + elementid);
|
||||
setElement(element);
|
||||
const lecture = await getLecture("lecture_" + lectureid);
|
||||
setLecture(lecture);
|
||||
}
|
||||
|
||||
async function fetchCourseData() {
|
||||
|
|
@ -32,13 +32,13 @@ function ElementPage(params: any) {
|
|||
}
|
||||
|
||||
React.useEffect(() => {
|
||||
if (elementid) {
|
||||
fetchElementData();
|
||||
if (lectureid) {
|
||||
fetchLectureData();
|
||||
fetchCourseData();
|
||||
}
|
||||
return () => {};
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [elementid]);
|
||||
}, [lectureid]);
|
||||
|
||||
return (
|
||||
<>
|
||||
|
|
@ -62,11 +62,11 @@ function ElementPage(params: any) {
|
|||
return (
|
||||
<>
|
||||
<div style={{ display: "flex", flexDirection: "row" }} key={chapter.chapter_id}>
|
||||
{chapter.elements.map((element: any) => {
|
||||
{chapter.lectures.map((lecture: any) => {
|
||||
return (
|
||||
<>
|
||||
<Link href={`/org/${orgslug}/course/${courseid}/element/${element.id.replace("element_", "")}`}>
|
||||
<ChapterIndicator key={element.id} />
|
||||
<Link href={`/org/${orgslug}/course/${courseid}/lecture/${lecture.id.replace("lecture_", "")}`}>
|
||||
<ChapterIndicator key={lecture.id} />
|
||||
</Link>{" "}
|
||||
</>
|
||||
);
|
||||
|
|
@ -79,9 +79,9 @@ function ElementPage(params: any) {
|
|||
</ChaptersWrapper>
|
||||
|
||||
<CourseContent>
|
||||
{element.type == "dynamic" && <Canva content={element.content} element={element} />}
|
||||
{lecture.type == "dynamic" && <Canva content={lecture.content} lecture={lecture} />}
|
||||
{/* todo : use apis & streams instead of this */}
|
||||
{element.type == "video" && <VideoLecture course={course} element={element} />}
|
||||
{lecture.type == "video" && <VideoLecture course={course} lecture={lecture} />}
|
||||
</CourseContent>
|
||||
</LectureLayout>
|
||||
)}
|
||||
|
|
@ -154,4 +154,4 @@ const CourseContent = styled.div`
|
|||
background-color: white;
|
||||
min-height: 600px;
|
||||
`;
|
||||
export default ElementPage;
|
||||
export default LecturePage;
|
||||
|
|
@ -50,10 +50,10 @@ const CourseIdPage = (params: any) => {
|
|||
{courseInfo.chapters.map((chapter: any) => {
|
||||
return (
|
||||
<>
|
||||
{chapter.elements.map((element: any) => {
|
||||
{chapter.lectures.map((lecture: any) => {
|
||||
return (
|
||||
<>
|
||||
<Link href={`/org/${orgslug}/course/${courseid}/element/${element.id.replace("element_", "")}`}>
|
||||
<Link href={`/org/${orgslug}/course/${courseid}/lecture/${lecture.id.replace("lecture_", "")}`}>
|
||||
<ChapterIndicator />
|
||||
</Link>{" "}
|
||||
</>
|
||||
|
|
@ -87,12 +87,12 @@ const CourseIdPage = (params: any) => {
|
|||
return (
|
||||
<>
|
||||
<h3>Chapter : {chapter.name}</h3>
|
||||
{chapter.elements.map((element: any) => {
|
||||
{chapter.lectures.map((lecture: any) => {
|
||||
return (
|
||||
<>
|
||||
<p>
|
||||
Element {element.name}
|
||||
<Link href={`/org/${orgslug}/course/${courseid}/element/${element.id.replace("element_", "")}`} rel="noopener noreferrer">
|
||||
Lecture {lecture.name}
|
||||
<Link href={`/org/${orgslug}/course/${courseid}/lecture/${lecture.id.replace("lecture_", "")}`} rel="noopener noreferrer">
|
||||
<EyeOpenIcon />
|
||||
</Link>{" "}
|
||||
</p>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue