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) { function DynamicCanvaModal({ submitActivity, chapterId }: any) {
const [activityName, setActivityName] = useState(""); const [activityName, setActivityName] = useState("");
const [activityDescription, setActivityDescription] = useState(""); const [activityDescription, setActivityDescription] = useState("");
const [isSubmitting, setIsSubmitting] = useState(false);
const handleActivityNameChange = (e: any) => { const handleActivityNameChange = (e: any) => {
setActivityName(e.target.value); setActivityName(e.target.value);
@ -16,14 +17,14 @@ function DynamicCanvaModal({ submitActivity, chapterId }: any) {
const handleSubmit = async (e: any) => { const handleSubmit = async (e: any) => {
e.preventDefault(); e.preventDefault();
console.log({ activityName, activityDescription, chapterId }); setIsSubmitting(true);
await submitActivity({
submitActivity({
name: activityName, name: activityName,
chapterId: chapterId, chapterId: chapterId,
type: "dynamic", type: "dynamic",
org_id : "test", org_id : "test",
}); });
setIsSubmitting(false);
}; };
return ( return (
<FormLayout onSubmit={handleSubmit}> <FormLayout onSubmit={handleSubmit}>
@ -48,7 +49,9 @@ function DynamicCanvaModal({ submitActivity, chapterId }: any) {
<Flex css={{ marginTop: 25, justifyContent: 'flex-end' }}> <Flex css={{ marginTop: 25, justifyContent: 'flex-end' }}>
<Form.Submit asChild> <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> </Form.Submit>
</Flex> </Flex>
</FormLayout> </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) { function VideoModal({ submitFileActivity, chapterId }: any) {
const [video, setVideo] = React.useState(null) as any; const [video, setVideo] = React.useState(null) as any;
const [isSubmitting, setIsSubmitting] = useState(false);
const [name, setName] = React.useState(""); const [name, setName] = React.useState("");
const handleVideoChange = (event: React.ChangeEvent<any>) => { const handleVideoChange = (event: React.ChangeEvent<any>) => {
@ -16,7 +17,9 @@ function VideoModal({ submitFileActivity, chapterId }: any) {
const handleSubmit = async (e: any) => { const handleSubmit = async (e: any) => {
e.preventDefault(); e.preventDefault();
setIsSubmitting(true);
let status = await submitFileActivity(video, "video", { name, type: "video" }, chapterId); 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. /* 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' }}> <Flex css={{ marginTop: 25, justifyContent: 'flex-end' }}>
<Form.Submit asChild> <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> </Form.Submit>
</Flex> </Flex>
</FormLayout> </FormLayout>

14
front/components/UI/Form/Form.tsx
View file

@ -3,7 +3,7 @@ import * as Form from '@radix-ui/react-form';
import { styled, keyframes } from '@stitches/react'; import { styled, keyframes } from '@stitches/react';
import { blackA, violet, mauve } from '@radix-ui/colors'; import { blackA, violet, mauve } from '@radix-ui/colors';
const FormLayout = (props: any, onSubmit : any ) => ( const FormLayout = (props: any, onSubmit: any) => (
<FormRoot onSubmit={props.onSubmit}> <FormRoot onSubmit={props.onSubmit}>
{props.children} {props.children}
</FormRoot> </FormRoot>
@ -66,6 +66,16 @@ export const Textarea = styled('textarea', {
}); });
export const ButtonBlack = styled('button', { export const ButtonBlack = styled('button', {
variants: {
state: {
"loading": {
pointerEvents: 'none',
backgroundColor: "#808080",
},
"none": {
},
},
},
all: 'unset', all: 'unset',
display: 'inline-flex', display: 'inline-flex',
alignItems: 'center', alignItems: 'center',
@ -79,7 +89,7 @@ export const ButtonBlack = styled('button', {
background: "#000000", background: "#000000",
color: "#FFFFFF", color: "#FFFFFF",
'&:hover': { backgroundColor: "#181818" , cursor: "pointer"}, '&:hover': { backgroundColor: "#181818", cursor: "pointer" },
'&:focus': { boxShadow: `0 0 0 2px black` }, '&:focus': { boxShadow: `0 0 0 2px black` },
}); });