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 submit loader

Browse source
This commit is contained in:
swve 2023-04-20 00:23:15 +02:00 • committed by Badr B
parent fef141acbb
commit a3b340c2f5
5 changed files with 33 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

11
front/components/Pages/CourseEdit/NewChapter.tsx
View file

@ -2,10 +2,12 @@ import FormLayout, { Flex, FormField, Input, Textarea, FormLabel, ButtonBlack }
import { FormMessage } from "@radix-ui/react-form";
import * as Form from '@radix-ui/react-form';
import React, { useState } from "react";
import BarLoader from "react-spinners/BarLoader";
function NewChapterModal({ submitChapter, closeModal }: any) {
const [chapterName, setChapterName] = useState("");
const [chapterDescription, setChapterDescription] = useState("");
const [isSubmitting, setIsSubmitting] = useState(false);
const handleChapterNameChange = (e: any) => {
setChapterName(e.target.value);
@ -18,7 +20,9 @@ function NewChapterModal({ submitChapter, closeModal }: any) {
const handleSubmit = async (e: any) => {
e.preventDefault();
console.log({ chapterName, chapterDescription });
submitChapter({ name: chapterName, description: chapterDescription, activities: [] });
setIsSubmitting(true);
await submitChapter({ name: chapterName, description: chapterDescription, activities: [] });
setIsSubmitting(false);
};
return (
@ -45,7 +49,10 @@ function NewChapterModal({ submitChapter, closeModal }: any) {
<Flex css={{ marginTop: 25, justifyContent: 'flex-end' }}>
<Form.Submit asChild>
<ButtonBlack type="submit" css={{ marginTop: 10 }}>Create chapter</ButtonBlack>
<ButtonBlack type="submit" css={{ marginTop: 10 }}>
{isSubmitting ? <BarLoader cssOverride={{borderRadius:60,}} width={60} color="#ffffff" />
: "Create Chapter"}
</ButtonBlack>
</Form.Submit>
</Flex>
</FormLayout>