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: add loading states for activity creation

Browse source
This commit is contained in:
swve 2023-04-13 23:15:17 +02:00
parent bd5a8359ee
commit bf296fc451
3 changed files with 26 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

11
front/components/Pages/CourseEdit/NewActivityModal/DynamicCanva.tsx
View file

@ -5,6 +5,7 @@ import * as Form from '@radix-ui/react-form';
function DynamicCanvaModal({ submitActivity, chapterId }: any) {
const [activityName, setActivityName] = useState("");
const [activityDescription, setActivityDescription] = useState("");
const [isSubmitting, setIsSubmitting] = useState(false);
const handleActivityNameChange = (e: any) => {
setActivityName(e.target.value);
@ -16,14 +17,14 @@ function DynamicCanvaModal({ submitActivity, chapterId }: any) {
const handleSubmit = async (e: any) => {
e.preventDefault();
console.log({ activityName, activityDescription, chapterId });
submitActivity({
setIsSubmitting(true);
await submitActivity({
name: activityName,
chapterId: chapterId,
type: "dynamic",
org_id : "test",
});
setIsSubmitting(false);
};
return (
<FormLayout onSubmit={handleSubmit}>
@ -48,7 +49,9 @@ function DynamicCanvaModal({ submitActivity, chapterId }: any) {
<Flex css={{ marginTop: 25, justifyContent: 'flex-end' }}>
<Form.Submit asChild>
<ButtonBlack type="submit" css={{ marginTop: 10 }}>Create Activity</ButtonBlack>
<ButtonBlack state={isSubmitting ? "loading" : "none"} type="submit" css={{ marginTop: 10 }}>
{isSubmitting ? "Submitting..." : "Create activity"}
</ButtonBlack>
</Form.Submit>
</Flex>
</FormLayout>

7
front/components/Pages/CourseEdit/NewActivityModal/Video.tsx
View file

@ -4,6 +4,7 @@ import * as Form from '@radix-ui/react-form';
function VideoModal({ submitFileActivity, chapterId }: any) {
const [video, setVideo] = React.useState(null) as any;
const [isSubmitting, setIsSubmitting] = useState(false);
const [name, setName] = React.useState("");
const handleVideoChange = (event: React.ChangeEvent<any>) => {
@ -16,7 +17,9 @@ function VideoModal({ submitFileActivity, chapterId }: any) {
const handleSubmit = async (e: any) => {
e.preventDefault();
setIsSubmitting(true);
let status = await submitFileActivity(video, "video", { name, type: "video" }, chapterId);
setIsSubmitting(false);
};
/* TODO : implement some sort of progress bar for file uploads, it is not possible yet because i'm not using axios.
@ -45,7 +48,9 @@ function VideoModal({ submitFileActivity, chapterId }: any) {
<Flex css={{ marginTop: 25, justifyContent: 'flex-end' }}>
<Form.Submit asChild>
<ButtonBlack type="submit" css={{ marginTop: 10 }}>Create Activity</ButtonBlack>
<ButtonBlack state={isSubmitting ? "loading" : "none"} type="submit" css={{ marginTop: 10 }}>
{isSubmitting ? "Uploading..." : "Create activity"}
</ButtonBlack>
</Form.Submit>
</Flex>
</FormLayout>