mirror of
https://github.com/rzmk/learnhouse.git
synced 2025-12-19 04:19:25 +00:00
feat: add submit loader
This commit is contained in:
swve
Badr B
parent
fef141acbb
commit
a3b340c2f5
5 changed files with 33 additions and 6 deletions
|
|
@ -1,6 +1,7 @@
|
|||
import FormLayout, { ButtonBlack, Flex, FormField, FormLabel, FormMessage, Input, Textarea } from "@components/UI/Form/Form";
|
||||
import React, { useState } from "react";
|
||||
import * as Form from '@radix-ui/react-form';
|
||||
import BarLoader from "react-spinners/BarLoader";
|
||||
|
||||
function DynamicCanvaModal({ submitActivity, chapterId }: any) {
|
||||
const [activityName, setActivityName] = useState("");
|
||||
|
|
@ -49,8 +50,9 @@ function DynamicCanvaModal({ submitActivity, chapterId }: any) {
|
|||
|
||||
<Flex css={{ marginTop: 25, justifyContent: 'flex-end' }}>
|
||||
<Form.Submit asChild>
|
||||
<ButtonBlack state={isSubmitting ? "loading" : "none"} type="submit" css={{ marginTop: 10 }}>
|
||||
{isSubmitting ? "Submitting..." : "Create activity"}
|
||||
<ButtonBlack type="submit" css={{ marginTop: 10 }}>
|
||||
{isSubmitting ? <BarLoader cssOverride={{borderRadius:60,}} width={60} color="#ffffff" />
|
||||
: "Create activity"}
|
||||
</ButtonBlack>
|
||||
</Form.Submit>
|
||||
</Flex>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import FormLayout, { ButtonBlack, Flex, FormField, FormLabel, FormMessage, Input, Textarea } from "@components/UI/Form/Form";
|
||||
import React, { useState } from "react";
|
||||
import * as Form from '@radix-ui/react-form';
|
||||
import BarLoader from "react-spinners/BarLoader";
|
||||
|
||||
function VideoModal({ submitFileActivity, chapterId }: any) {
|
||||
const [video, setVideo] = React.useState(null) as any;
|
||||
|
|
@ -48,8 +49,8 @@ function VideoModal({ submitFileActivity, chapterId }: any) {
|
|||
|
||||
<Flex css={{ marginTop: 25, justifyContent: 'flex-end' }}>
|
||||
<Form.Submit asChild>
|
||||
<ButtonBlack state={isSubmitting ? "loading" : "none"} type="submit" css={{ marginTop: 10 }}>
|
||||
{isSubmitting ? "Uploading..." : "Create activity"}
|
||||
<ButtonBlack type="submit" css={{ marginTop: 10 }}>
|
||||
{isSubmitting ? <BarLoader cssOverride={{borderRadius:60,}} width={60} color="#ffffff" /> : "Create activity"}
|
||||
</ButtonBlack>
|
||||
</Form.Submit>
|
||||
</Flex>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
16
front/package-lock.json
generated
16
front/package-lock.json
generated
|
|
@ -32,6 +32,7 @@
|
|||
"react-beautiful-dnd": "^13.1.1",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-katex": "^3.0.1",
|
||||
"react-spinners": "^0.13.8",
|
||||
"styled-components": "^6.0.0-beta.9",
|
||||
"swr": "^2.0.1",
|
||||
"uuid": "^9.0.0",
|
||||
|
|
@ -7042,6 +7043,15 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"node_modules/react-spinners": {
|
||||
"version": "0.13.8",
|
||||
"resolved": "https://registry.npmjs.org/react-spinners/-/react-spinners-0.13.8.tgz",
|
||||
"integrity": "sha512-3e+k56lUkPj0vb5NDXPVFAOkPC//XyhKPJjvcGjyMNPWsBKpplfeyialP74G7H7+It7KzhtET+MvGqbKgAqpZA==",
|
||||
"peerDependencies": {
|
||||
"react": "^16.0.0 || ^17.0.0 || ^18.0.0",
|
||||
"react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-style-singleton": {
|
||||
"version": "2.2.1",
|
||||
"resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz",
|
||||
|
|
@ -13114,6 +13124,12 @@
|
|||
"tslib": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"react-spinners": {
|
||||
"version": "0.13.8",
|
||||
"resolved": "https://registry.npmjs.org/react-spinners/-/react-spinners-0.13.8.tgz",
|
||||
"integrity": "sha512-3e+k56lUkPj0vb5NDXPVFAOkPC//XyhKPJjvcGjyMNPWsBKpplfeyialP74G7H7+It7KzhtET+MvGqbKgAqpZA==",
|
||||
"requires": {}
|
||||
},
|
||||
"react-style-singleton": {
|
||||
"version": "2.2.1",
|
||||
"resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz",
|
||||
|
|
|
|||
|
|
@ -33,6 +33,7 @@
|
|||
"react-beautiful-dnd": "^13.1.1",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-katex": "^3.0.1",
|
||||
"react-spinners": "^0.13.8",
|
||||
"styled-components": "^6.0.0-beta.9",
|
||||
"swr": "^2.0.1",
|
||||
"uuid": "^9.0.0",
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue