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

chore: refactor components

Browse source
This commit is contained in:
swve 2023-04-08 15:54:02 +02:00
parent ca5110e4f7
commit d6289edb29
21 changed files with 13 additions and 165 deletions
Download patch file Download diff file Expand all files Collapse all files

60
front/components/Modals/CourseEdit/NewActivity.tsx
View file

@ -1,60 +0,0 @@
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 "./NewActivityModal/DynamicCanva";
import VideoModal from "./NewActivityModal/Video";
function NewActivityModal({ closeModal, submitActivity, submitFileActivity, chapterId }: any) {
const [selectedView, setSelectedView] = useState("home");
return (
<div>
<button onClick={() => { setSelectedView("home") }}>
<ArrowLeftIcon />
</button>
<button onClick={closeModal}>
<Cross1Icon />
</button>
{selectedView === "home" && (
<ActivityChooserWrapper>
<ActivityButton onClick={() => { setSelectedView("dynamic") }}>✨📄</ActivityButton>
<ActivityButton onClick={() => { setSelectedView("video") }}>📹</ActivityButton>
</ActivityChooserWrapper>
)}
{selectedView === "dynamic" && (
<DynamicCanvaModal submitActivity={submitActivity} chapterId={chapterId} />
)}
{selectedView === "video" && (
<VideoModal submitFileActivity={submitFileActivity} chapterId={chapterId} />
)}
</div>
);
}
const ActivityChooserWrapper = styled.div`
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 20px;
`;
const ActivityButton = styled.button`
padding: 40px;
border-radius: 10px !important;
border: none;
font-size: 80px !important;
margin: 40px;
background-color: #8c949c33 !important;
cursor: pointer;
&:hover {
background-color: #8c949c7b;
}
`;
export default NewActivityModal;

36
front/components/Modals/CourseEdit/NewActivityModal/DynamicCanva.tsx
View file

@ -1,36 +0,0 @@
import React, { useState } from "react";
function DynamicCanvaModal({ submitActivity, chapterId }: any) {
const [activityName, setActivityName] = useState("");
const [activityDescription, setActivityDescription] = useState("");
const handleActivityNameChange = (e: any) => {
setActivityName(e.target.value);
};
const handleActivityDescriptionChange = (e: any) => {
setActivityDescription(e.target.value);
};
const handleSubmit = async (e: any) => {
e.preventDefault();
console.log({ activityName, activityDescription, chapterId });
submitActivity({
name: activityName,
chapterId: chapterId,
type: "dynamic",
});
};
return (
<div>
<div>
<input type="text" onChange={handleActivityNameChange} placeholder="Activity Name" /> <br />
<input type="text" onChange={handleActivityDescriptionChange} placeholder="Activity Description" />
<br />
<button onClick={handleSubmit}>Add Activity</button>
</div>
</div>
);
}
export default DynamicCanvaModal;

37
front/components/Modals/CourseEdit/NewActivityModal/Video.tsx
View file

@ -1,37 +0,0 @@
import React from "react";
function VideoModal({ submitFileActivity, chapterId }: any) {
const [video, setVideo] = React.useState(null) as any;
const [name, setName] = React.useState("");
const handleVideoChange = (event: React.ChangeEvent<any>) => {
setVideo(event.target.files[0]);
};
const handleNameChange = (event: React.ChangeEvent<HTMLInputElement>) => {
setName(event.target.value);
};
const handleSubmit = async (e: any) => {
e.preventDefault();
let status = await submitFileActivity(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 submitFileActivity function */
return (
<div>
<input type="text" placeholder="video title" onChange={handleNameChange} />
<br />
<br />
<input type="file" onChange={handleVideoChange} name="video" id="" />
<br />
<br />
<button onClick={handleSubmit}>Send</button>
</div>
);
}
export default VideoModal;

33
front/components/Modals/CourseEdit/NewChapter.tsx
View file

@ -1,33 +0,0 @@
import React, { useState } from "react";
import Modal from "../Modal";
function NewChapterModal({ submitChapter , closeModal }: any) {
const [chapterName, setChapterName] = useState("");
const [chapterDescription, setChapterDescription] = useState("");
const handleChapterNameChange = (e: any) => {
setChapterName(e.target.value);
};
const handleChapterDescriptionChange = (e: any) => {
setChapterDescription(e.target.value);
};
const handleSubmit = async (e: any) => {
e.preventDefault();
console.log({ chapterName, chapterDescription });
submitChapter({ name : chapterName, description : chapterDescription , activities : [] });
};
return (
<div>
<button onClick={closeModal}>X</button>
<input type="text" onChange={handleChapterNameChange} placeholder="Chapter Name" /> <br />
<input type="text" onChange={handleChapterDescriptionChange} placeholder="Chapter Description" />
<br />
<button onClick={handleSubmit}>Add Chapter</button>
</div>
);
}
export default NewChapterModal;

54
front/components/Modals/Modal.tsx
View file

@ -1,54 +0,0 @@
import React from "react";
import styled from "styled-components";
import { motion, AnimatePresence } from "framer-motion";
function Modal(props: any) {
return (
<div>
<Overlay>
<AnimatePresence>
<motion.div
initial={{ opacity: 0, left: "50%", top: "50%", scale: 0.9, backdropFilter: "blur(10px)", y: -1, position: "absolute" }}
animate={{ opacity: 1, left: "50%", top: "50%", scale: 1, backdropFilter: "blur(10px)", y: 0, position: "absolute" }}
key="modal"
transition={{
type: "spring",
stiffness: 360,
damping: 70,
delay: 0.02,
}}
exit={{ opacity: 0, left: "50%", top: "46%", backdropFilter: "blur(10px)", y: -1, position: "absolute" }}
>
<Content>{props.children}</Content>
</motion.div>
</AnimatePresence>
</Overlay>
</div>
);
}
const Overlay = styled.div`
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
background-color: #00000029;
backdrop-filter: blur(1px);
`;
const Content = styled.div`
background-color: white;
border-radius: 5px;
padding: 20px;
width: 500px;
height: 500px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0px 64px 84px 15px rgb(0 0 0 / 10%);
`;
export default Modal;