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:
parent
d7f1e6f94a
commit
7237a4de49
36 changed files with 404 additions and 403 deletions
|
|
@ -16,7 +16,7 @@ function NewChapterModal({ submitChapter , closeModal }: any) {
|
|||
const handleSubmit = async (e: any) => {
|
||||
e.preventDefault();
|
||||
console.log({ chapterName, chapterDescription });
|
||||
submitChapter({ name : chapterName, description : chapterDescription , elements : [] });
|
||||
submitChapter({ name : chapterName, description : chapterDescription , lectures : [] });
|
||||
};
|
||||
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -1,36 +0,0 @@
|
|||
import React, { useState } from "react";
|
||||
|
||||
function DynamicCanvaModal({ submitElement, chapterId }: any) {
|
||||
const [elementName, setElementName] = useState("");
|
||||
const [elementDescription, setElementDescription] = useState("");
|
||||
|
||||
const handleElementNameChange = (e: any) => {
|
||||
setElementName(e.target.value);
|
||||
};
|
||||
|
||||
const handleElementDescriptionChange = (e: any) => {
|
||||
setElementDescription(e.target.value);
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: any) => {
|
||||
e.preventDefault();
|
||||
console.log({ elementName, elementDescription, chapterId });
|
||||
submitElement({
|
||||
name: elementName,
|
||||
chapterId: chapterId,
|
||||
type: "dynamic",
|
||||
});
|
||||
};
|
||||
return (
|
||||
<div>
|
||||
<div>
|
||||
<input type="text" onChange={handleElementNameChange} placeholder="Element Name" /> <br />
|
||||
<input type="text" onChange={handleElementDescriptionChange} placeholder="Element Description" />
|
||||
<br />
|
||||
<button onClick={handleSubmit}>Add Element</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default DynamicCanvaModal;
|
||||
|
|
@ -2,10 +2,10 @@ import React, { useState } from "react";
|
|||
import { ArrowLeftIcon, Cross1Icon } from "@radix-ui/react-icons";
|
||||
import Modal from "../Modal";
|
||||
import styled from "styled-components";
|
||||
import DynamicCanvaModal from "./NewElementModal/DynamicCanva";
|
||||
import VideoModal from "./NewElementModal/Video";
|
||||
import DynamicCanvaModal from "./NewLectureModal/DynamicCanva";
|
||||
import VideoModal from "./NewLectureModal/Video";
|
||||
|
||||
function NewElementModal({ closeModal, submitElement, submitFileElement, chapterId }: any) {
|
||||
function NewLectureModal({ closeModal, submitLecture, submitFileLecture, chapterId }: any) {
|
||||
const [selectedView, setSelectedView] = useState("home");
|
||||
|
||||
return (
|
||||
|
|
@ -16,29 +16,29 @@ function NewElementModal({ closeModal, submitElement, submitFileElement, chapter
|
|||
<button onClick={closeModal}>
|
||||
<Cross1Icon />
|
||||
</button>
|
||||
<h1>Add New Element</h1>
|
||||
<h1>Add New Lecture</h1>
|
||||
<br />
|
||||
|
||||
{selectedView === "home" && (
|
||||
<ElementChooserWrapper>
|
||||
<ElementButton onClick={() => {setSelectedView("dynamic")}}>✨📄</ElementButton>
|
||||
<ElementButton onClick={() => {setSelectedView("video")}}>📹</ElementButton>
|
||||
</ElementChooserWrapper>
|
||||
<LectureChooserWrapper>
|
||||
<LectureButton onClick={() => {setSelectedView("dynamic")}}>✨📄</LectureButton>
|
||||
<LectureButton onClick={() => {setSelectedView("video")}}>📹</LectureButton>
|
||||
</LectureChooserWrapper>
|
||||
)}
|
||||
|
||||
{selectedView === "dynamic" && (
|
||||
<DynamicCanvaModal submitElement={submitElement} chapterId={chapterId} />
|
||||
<DynamicCanvaModal submitLecture={submitLecture} chapterId={chapterId} />
|
||||
)}
|
||||
|
||||
{selectedView === "video" && (
|
||||
<VideoModal submitFileElement={submitFileElement} chapterId={chapterId} />
|
||||
<VideoModal submitFileLecture={submitFileLecture} chapterId={chapterId} />
|
||||
)}
|
||||
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
const ElementChooserWrapper = styled.div`
|
||||
const LectureChooserWrapper = styled.div`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
|
@ -46,7 +46,7 @@ const ElementChooserWrapper = styled.div`
|
|||
gap: 20px;
|
||||
`;
|
||||
|
||||
const ElementButton = styled.button`
|
||||
const LectureButton = styled.button`
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
border: none;
|
||||
|
|
@ -58,4 +58,4 @@ const ElementButton = styled.button`
|
|||
}
|
||||
`;
|
||||
|
||||
export default NewElementModal;
|
||||
export default NewLectureModal;
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
import React, { useState } from "react";
|
||||
|
||||
function DynamicCanvaModal({ submitLecture, chapterId }: any) {
|
||||
const [lectureName, setLectureName] = useState("");
|
||||
const [lectureDescription, setLectureDescription] = useState("");
|
||||
|
||||
const handleLectureNameChange = (e: any) => {
|
||||
setLectureName(e.target.value);
|
||||
};
|
||||
|
||||
const handleLectureDescriptionChange = (e: any) => {
|
||||
setLectureDescription(e.target.value);
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: any) => {
|
||||
e.preventDefault();
|
||||
console.log({ lectureName, lectureDescription, chapterId });
|
||||
submitLecture({
|
||||
name: lectureName,
|
||||
chapterId: chapterId,
|
||||
type: "dynamic",
|
||||
});
|
||||
};
|
||||
return (
|
||||
<div>
|
||||
<div>
|
||||
<input type="text" onChange={handleLectureNameChange} placeholder="Lecture Name" /> <br />
|
||||
<input type="text" onChange={handleLectureDescriptionChange} placeholder="Lecture Description" />
|
||||
<br />
|
||||
<button onClick={handleSubmit}>Add Lecture</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default DynamicCanvaModal;
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
import React from "react";
|
||||
|
||||
function VideoModal({ submitFileElement, chapterId }: any) {
|
||||
function VideoModal({ submitFileLecture, chapterId }: any) {
|
||||
const [video, setVideo] = React.useState(null) as any;
|
||||
const [name, setName] = React.useState("");
|
||||
|
||||
|
|
@ -14,11 +14,11 @@ function VideoModal({ submitFileElement, chapterId }: any) {
|
|||
|
||||
const handleSubmit = async (e: any) => {
|
||||
e.preventDefault();
|
||||
let status = await submitFileElement(video, "video", { name, type: "video" }, chapterId);
|
||||
let status = await submitFileLecture(video, "video", { name, type: "video" }, chapterId);
|
||||
};
|
||||
|
||||
/* TODO : implement some sort of progress bar for file uploads, it is not possible yet because i'm not using axios.
|
||||
and the actual upload isn't happening here anyway, it's in the submitFileElement function */
|
||||
and the actual upload isn't happening here anyway, it's in the submitFileLecture function */
|
||||
|
||||
return (
|
||||
<div>
|
||||
Loading…
Add table
Add a link
Reference in a new issue