chore: use lectures naming

This commit is contained in:
swve 2023-01-15 18:34:47 +01:00
parent d7f1e6f94a
commit 7237a4de49
36 changed files with 404 additions and 403 deletions

View file

@ -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 (

View file

@ -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;

View file

@ -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;

View file

@ -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;

View file

@ -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>