From 0f796fd9bcc60cf5904a52e46538347aed35a041 Mon Sep 17 00:00:00 2001 From: Alexei Date: Sun, 31 Mar 2024 17:19:04 +1000 Subject: [PATCH 1/3] #11 styled form add lesson --- src/pages/course-list.tsx | 2 +- src/pages/lesson-list.tsx | 235 ++++++++++++++++++++++++-------------- 2 files changed, 153 insertions(+), 84 deletions(-) diff --git a/src/pages/course-list.tsx b/src/pages/course-list.tsx index d985fcb..5d975bc 100644 --- a/src/pages/course-list.tsx +++ b/src/pages/course-list.tsx @@ -51,7 +51,7 @@ const CoursesList = () => { string | null >(null) const toastRef = useRef(null) - + const { control, handleSubmit, diff --git a/src/pages/lesson-list.tsx b/src/pages/lesson-list.tsx index a14eaab..31f8cc5 100644 --- a/src/pages/lesson-list.tsx +++ b/src/pages/lesson-list.tsx @@ -2,34 +2,44 @@ import React, { useCallback, useEffect, useRef, useState } from 'react' import dayjs from 'dayjs' import { Link, useParams } from 'react-router-dom' import { getNavigationsValue } from '@ijl/cli' +import { useForm, Controller } from 'react-hook-form' + import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, + Container, + Box, + Card, + CardBody, + CardHeader, + Heading, + Button, + ButtonGroup, + CloseButton, + useToast, + Stack, + VStack, + FormControl, + FormLabel, + FormHelperText, + FormErrorMessage, + Input, } from '@chakra-ui/react' -import { - ArrowImg, - IconButton, - InputElement, - InputLabel, - InputWrapper, - StartWrapper, - LessonItem, - Lessonname, - Papper, - ErrorSpan, - Cross, - AddButton, - MainWrapper, -} from './style' +import { AddIcon } from '@chakra-ui/icons' + +import { LessonItem, Lessonname, ErrorSpan } from './style' -import arrow from '../assets/36-arrow-right.svg' import { keycloak } from '../__data__/kc' import { useAppSelector } from '../__data__/store' import { api } from '../__data__/api/api' import { isTeacher } from '../utils/user' +interface NewLessonForm { + name: string +} + const LessonList = () => { const { courseId } = useParams() const user = useAppSelector((s) => s.user) @@ -37,6 +47,19 @@ const LessonList = () => { const [createLesson, crLQuery] = api.useCreateLessonMutation() const [value, setValue] = useState('') const [showForm, setShowForm] = useState(false) + const { + control, + handleSubmit, + reset, + formState: { errors }, + getValues, + } = useForm({ + defaultValues: { + name: '', + }, + }) + const toast = useToast() + const toastRef = useRef(null) const handleChange = useCallback( (event) => { @@ -44,88 +67,134 @@ const LessonList = () => { }, [setValue], ) - const handleSubmit = useCallback( - (event) => { - event.preventDefault() - createLesson({ name: value, courseId }) - }, - [value], - ) + const onSubmit = ({ name }) => { + toastRef.current = toast({ + title: 'Отправляем', + status: 'loading', + duration: 9000, + }) + createLesson({ name, courseId }) + } useEffect(() => { if (crLQuery.isSuccess) { - setValue('') + const values = getValues() + if (toastRef.current) { + toast.update(toastRef.current, { + title: 'Лекция создана', + description: `Лекция ${values.name} успешно создана`, + status: 'success', + duration: 9000, + isClosable: true, + }) + } + reset() } }, [crLQuery.isSuccess]) return ( - - - - - Журнал - + + + + + Журнал + + - - Курс - - + + Курс + + - {isTeacher(user) && ( - <> - {showForm ? ( - - setShowForm(false)}> - X - -
- - - Название новой лекции: - - + {showForm ? ( + + + + Создание лекции + + setShowForm(false)} /> + + + + + ( + + Название новой лекции: + + {errors.name && ( + + {errors.name.message} + + )} + + )} /> - - - - + + + + + {crLQuery.error && ( {(crLQuery.error as any).error} )}
- - ) : ( - setShowForm(true)}>Добавить - )} - - )} -
    - {data?.body?.map((lesson) => ( - - + + ) : ( + +
- - + Добавить + + + )} + + )} + + ) } From cf32ba103eeec398b92e6a6ef9654ad6f70010f2 Mon Sep 17 00:00:00 2001 From: Alexei Date: Sun, 31 Mar 2024 18:20:09 +1000 Subject: [PATCH 2/3] add data to form create lesson --- src/__data__/api/api.ts | 6 +- src/pages/lesson-list.tsx | 33 +++++- stubs/mocks/lessons/list/success.json | 152 +++++++++++++++++++++++++- 3 files changed, 185 insertions(+), 6 deletions(-) diff --git a/src/__data__/api/api.ts b/src/__data__/api/api.ts index 68e70f6..49ee857 100644 --- a/src/__data__/api/api.ts +++ b/src/__data__/api/api.ts @@ -51,11 +51,11 @@ export const api = createApi({ query: (courseId) => `/lesson/list/${courseId}`, providesTags: ['LessonList'] }), - createLesson: builder.mutation, Pick & { courseId: string }>({ - query: ({ name, courseId }) => ({ + createLesson: builder.mutation, Pick & { courseId: string }>({ + query: ({ name, courseId, date }) => ({ url: '/lesson', method: 'POST', - body: { name, courseId }, + body: { name, courseId, date }, }), invalidatesTags: ['LessonList'] }), diff --git a/src/pages/lesson-list.tsx b/src/pages/lesson-list.tsx index 31f8cc5..96a0374 100644 --- a/src/pages/lesson-list.tsx +++ b/src/pages/lesson-list.tsx @@ -38,6 +38,7 @@ import { isTeacher } from '../utils/user' interface NewLessonForm { name: string + date: string } const LessonList = () => { @@ -56,6 +57,7 @@ const LessonList = () => { } = useForm({ defaultValues: { name: '', + date: '', }, }) const toast = useToast() @@ -67,13 +69,13 @@ const LessonList = () => { }, [setValue], ) - const onSubmit = ({ name }) => { + const onSubmit = ({ name, date }) => { toastRef.current = toast({ title: 'Отправляем', status: 'loading', duration: 9000, }) - createLesson({ name, courseId }) + createLesson({ name, courseId, date }) } useEffect(() => { @@ -119,6 +121,33 @@ const LessonList = () => {
+ ( + + Дата + + {errors.date ? ( + + {errors.date?.message} + + ) : ( + + Укажите дату и время лекции + + )} + + )} + /> + Date: Sun, 31 Mar 2024 18:37:31 +1000 Subject: [PATCH 3/3] fix another --- src/pages/course-list.tsx | 2 +- src/pages/lesson-list.tsx | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/src/pages/course-list.tsx b/src/pages/course-list.tsx index 5d975bc..d985fcb 100644 --- a/src/pages/course-list.tsx +++ b/src/pages/course-list.tsx @@ -51,7 +51,7 @@ const CoursesList = () => { string | null >(null) const toastRef = useRef(null) - + const { control, handleSubmit, diff --git a/src/pages/lesson-list.tsx b/src/pages/lesson-list.tsx index 96a0374..26d9e3e 100644 --- a/src/pages/lesson-list.tsx +++ b/src/pages/lesson-list.tsx @@ -3,7 +3,6 @@ import dayjs from 'dayjs' import { Link, useParams } from 'react-router-dom' import { getNavigationsValue } from '@ijl/cli' import { useForm, Controller } from 'react-hook-form' - import { Breadcrumb, BreadcrumbItem,