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 a14eaab..26d9e3e 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 + date: string +} + const LessonList = () => { const { courseId } = useParams() const user = useAppSelector((s) => s.user) @@ -37,6 +47,20 @@ 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: '', + date: '', + }, + }) + const toast = useToast() + const toastRef = useRef(null) const handleChange = useCallback( (event) => { @@ -44,88 +68,161 @@ const LessonList = () => { }, [setValue], ) - const handleSubmit = useCallback( - (event) => { - event.preventDefault() - createLesson({ name: value, courseId }) - }, - [value], - ) + const onSubmit = ({ name, date }) => { + toastRef.current = toast({ + title: 'Отправляем', + status: 'loading', + duration: 9000, + }) + createLesson({ name, courseId, date }) + } 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.date ? ( + + {errors.date?.message} + + ) : ( + + Укажите дату и время лекции + + )} + + )} /> - - - - + + ( + + Название новой лекции: + + {errors.name && ( + + {errors.name.message} + + )} + + )} + /> + + + + + {crLQuery.error && ( {(crLQuery.error as any).error} )} -
- ) : ( - setShowForm(true)}>Добавить - )} - - )} -
    - {data?.body?.map((lesson) => ( - - + + ) : ( + +
- - + Добавить + + + )} + + )} +
    + {data?.body?.map((lesson) => ( + + + {lesson.name} + {dayjs(lesson.date).format('DD MMMM YYYYг.')} + + Участников - {lesson.students.length} + + + + ))} +
+ ) } diff --git a/stubs/mocks/lessons/list/success.json b/stubs/mocks/lessons/list/success.json index e3cb258..2117cdf 100644 --- a/stubs/mocks/lessons/list/success.json +++ b/stubs/mocks/lessons/list/success.json @@ -592,10 +592,160 @@ "email": "sharova@mail.ru" } + ], + "date": "2024-03-08T21:18:07.033Z", + "created": "2024-03-05T21:18:07.033Z", + "__v": 22 + }, + { + "_id": "65e78c0fced789d2f6791tt5", + "name": "ВВОДНАЯ ПО JS.ПРИМЕНЕНИЕ И СПОСОБЫ ПОДКЛЮЧЕНИЯ НА СТРАНИЦЕ. LET, CONST. БАЗОВЫЕ ТИПЫ ДАННЫХ, ПРИВЕДЕНИЕ ТИПОВ. ПЕРЕМЕННЫЕ, ОБЛАСТЬ ВИДИМОСТИ ПЕРЕМЕННЫХ", + "students": [ + { + "sub": "fcde3f22-d9ba-412a-a572-c59e515a290f", + "email_verified": true, + "name": "Мария Капитанова", + "preferred_username": "maryaKapitan@gmail.com", + "given_name": "Мария", + "family_name": "Капитанова", + "email": "maryaKapitan@gmail.com", + "picture": "https://lh3.googleusercontent.com/a/ACg8ocJgIjjOFD2YUSyRF5kH4jaysE6X5p-kq0Cg0CFncfMi=s96-c" + }, + { + "sub": "5b072deb-33ee-443e-9718-3b5720a3dfb7", + "email_verified": true, + "name": "Евгений Кореной", + "preferred_username": "koren@gmail.com", + "given_name": "Кореной", + "family_name": "Евгений", + "email": "koren@gmail.com", + "picture": "https://lh3.googleusercontent.com/a/ACg8ocJpVhDeG-Rpjjm2Un6r8ACz_s_injuIFKpzXf3qmyCn3Cg=s96-c" + }, + { + "sub": "7adf0cd1-cf07-4079-88d8-1a5c9b8f42c2", + "email_verified": true, + "name": "Ирина Игнатьева", + "preferred_username": "irign@gmailcom", + "given_name": "Ирина", + "family_name": "Игнатьева", + "email": "irign@gmailcom", + "picture": "https://lh3.googleusercontent.com/a/ACg8ocL45E4Gt8D5oyIl3ipkcGsv4ShWGs3bdlwEMA_1rzGZ=s96-c" + }, + { + "sub": "95ccc005-95b9-4305-9447-364a32033911", + "email_verified": true, + "name": "Иван Петров", + "preferred_username": "petrov@mail.ru", + "given_name": "Иван", + "family_name": "Петров", + "email": "petrov@mail.ru", + "picture": "https://lh3.googleusercontent.com/a/ACg8ocIgQn5mfDAh2djx-3ofG9z1Em26ZyuUgVPd-6rDOl6z=s96-c" + }, + { + "sub": "ede1ef2c-6ecf-484a-8fb8-282a77e1caa1", + "email_verified": true, + "name": "Константин Тимуров", + "preferred_username": "konstantK@gmail.com", + "given_name": "Константин", + "family_name": "Тимуров", + "email": "konstantK@gmail.com", + "picture": "https://lh3.googleusercontent.com/a/ACg8ocJjnOfqaoAU_D4STrJPN9fPOeJ8tv60WbWVZu2ZWcHs=s96-c" + }, + { + "sub": "92cc6a15-805c-4439-b592-b23f32d6d208", + "email_verified": true, + "name": "Александра Питерская", + "preferred_username": "piteralex@gmail.com", + "given_name": "Александра", + "family_name": "Питерская", + "email": "piteralex@gmail.com", + "picture": "https://lh3.googleusercontent.com/a/ACg8ocKhbCbWvBBc_m7bjU5sLCE-dQ-KygBk-aUCSR8XaYtq=s96-c" + }, + { + "sub": "4a3ba8b8-4120-4877-a160-be9ba4d5b3e3", + "email_verified": true, + "name": "Анастасия Светлых", + "preferred_username": "anastasya@gmail.ocm", + "given_name": "Анастасия", + "family_name": "Светлых", + "email": "anastasya@gmail.ocm", + "picture": "https://lh3.googleusercontent.com/a/ACg8ocJnsM8UGhbH806yLVgWZ17g3-gJFVcG0Uz5kvqT7dvC=s96-c" + }, + { + "sub": "b4634921-00b3-4082-9284-8ac47f269394", + "email_verified": true, + "name": "Эмилия Снежко", + "preferred_username": "emi@mail.ru", + "given_name": "Эмилия", + "family_name": "Снежко", + "email": "emi@mail.ru", + "picture": "https://lh3.googleusercontent.com/a/ACg8ocI98dzSFQDPr2LXMPFEUX8KLY6bY2m08O_aAj2B5KVNKg=s96-c" + }, + { + "sub": "bf1a95aa-39a2-4528-9b8d-319409995df5", + "email_verified": true, + "name": "Юлия Бобова", + "preferred_username": "bobova@gmail.com", + "given_name": "Юлия", + "family_name": "Бобова", + "email": "bobova@gmail.com", + "picture": "https://lh3.googleusercontent.com/a/ACg8ocJ_Ud4iI-jgqcJ3QJcWpESbRLX_C1BnB8_7uTTC-4Dn=s96-c" + }, + { + "sub": "c273a3e3-f7ba-4057-8c57-a1f43b6174a5", + "email_verified": true, + "name": "Анна Самоварова", + "preferred_username": "samovar@gmail.com", + "given_name": "Анна", + "family_name": "Самоварова", + "email": "samovar@gmail.com", + "picture": "https://lh3.googleusercontent.com/a/ACg8ocJOhIMdQkXPd55wTMgTTkUCnqbsu4EncgEPm67iz_mK=s96-c" + }, + { + "sub": "8555885b-715c-4dee-a7c5-9563a6a05211", + "email_verified": true, + "name": "Евгения Жужова", + "preferred_username": "zhuzhova@gmail.com", + "given_name": "Евгения", + "family_name": "Жужова", + "email": "zhuzhova@gmail.com", + "picture": "https://lh3.googleusercontent.com/a/ACg8ocJUtJBAVBm642AxoGpMDDMV8CPu3MEoLjU3hmO7oisG=s96-c" + }, + { + "sub": "12dee54f-64e9-4be3-9cb0-02ff07ab24fe", + "email_verified": true, + "name": "Эдгар Петренко", + "preferred_username": "petrenk@mail.ru", + "given_name": "Эдгар", + "family_name": "Петренко", + "email": "petrenk@mail.ru", + "picture": "https://lh3.googleusercontent.com/a/ACg8ocLgKAZag32kpGVHMVbh_GsU-rX_MAtmeVIPoov0ZPBYIA=s96-c" + }, + { + "sub": "4082b72a-4730-4841-ad68-06a0e19263df", + "email_verified": true, + "name": "Елена Вавилон", + "preferred_username": "elenvavil@mail.ru", + "given_name": "Елена", + "family_name": "Вавилон", + "email": "elenvavil@mail.ru", + "picture": "https://lh3.googleusercontent.com/a/ACg8ocKXcmzcqRch2--j2Ge2m9e8MIOZ8y1MjsQ0cSEoXOmW=s96-c" + }, + { + "sub": "9e8a08d8-d76a-4f26-99c5-9a1d3c067104", + "email_verified": true, + "name": "Ольга Шарова", + "preferred_username": "julyashap", + "given_name": "Ольга", + "family_name": "Шарова", + "email": "sharova@mail.ru" + } + ], "date": "2024-03-08T21:18:07.033Z", "created": "2024-03-05T21:18:07.033Z", "__v": 22 } ] -} \ No newline at end of file +} +