From a3b340c2f579f7c6796deb3393d61c7a9645534b Mon Sep 17 00:00:00 2001 From: swve Date: Thu, 20 Apr 2023 00:23:15 +0200 Subject: [PATCH] feat: add submit loader --- .../CourseEdit/NewActivityModal/DynamicCanva.tsx | 6 ++++-- .../Pages/CourseEdit/NewActivityModal/Video.tsx | 5 +++-- front/components/Pages/CourseEdit/NewChapter.tsx | 11 +++++++++-- front/package-lock.json | 16 ++++++++++++++++ front/package.json | 1 + 5 files changed, 33 insertions(+), 6 deletions(-) diff --git a/front/components/Pages/CourseEdit/NewActivityModal/DynamicCanva.tsx b/front/components/Pages/CourseEdit/NewActivityModal/DynamicCanva.tsx index 0d5f2d04..c4e711e0 100644 --- a/front/components/Pages/CourseEdit/NewActivityModal/DynamicCanva.tsx +++ b/front/components/Pages/CourseEdit/NewActivityModal/DynamicCanva.tsx @@ -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) { - - {isSubmitting ? "Submitting..." : "Create activity"} + + {isSubmitting ? + : "Create activity"} diff --git a/front/components/Pages/CourseEdit/NewActivityModal/Video.tsx b/front/components/Pages/CourseEdit/NewActivityModal/Video.tsx index 028aa3e8..36d00097 100644 --- a/front/components/Pages/CourseEdit/NewActivityModal/Video.tsx +++ b/front/components/Pages/CourseEdit/NewActivityModal/Video.tsx @@ -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) { - - {isSubmitting ? "Uploading..." : "Create activity"} + + {isSubmitting ? : "Create activity"} diff --git a/front/components/Pages/CourseEdit/NewChapter.tsx b/front/components/Pages/CourseEdit/NewChapter.tsx index 8e03201c..6a73fa98 100644 --- a/front/components/Pages/CourseEdit/NewChapter.tsx +++ b/front/components/Pages/CourseEdit/NewChapter.tsx @@ -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) { - Create chapter + + {isSubmitting ? + : "Create Chapter"} + diff --git a/front/package-lock.json b/front/package-lock.json index 458b972f..f3c41c75 100644 --- a/front/package-lock.json +++ b/front/package-lock.json @@ -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", diff --git a/front/package.json b/front/package.json index 73702491..1182935c 100644 --- a/front/package.json +++ b/front/package.json @@ -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",