diff --git a/src/__data__/api/api.ts b/src/__data__/api/api.ts index acf4884..9a58848 100644 --- a/src/__data__/api/api.ts +++ b/src/__data__/api/api.ts @@ -78,6 +78,14 @@ export const api = createApi({ }), invalidatesTags: ['LessonList'], }), + updateLesson: builder.mutation, Partial & Pick>({ + query: (data) => ({ + method: 'PUT', + url: `/lesson/${data._id}`, + body: data, + }), + invalidatesTags: ['LessonList'], + }), deleteLesson: builder.mutation({ query: (lessonId) => ({ url: `/lesson/${lessonId}`, diff --git a/src/pages/lesson-list.tsx b/src/pages/lesson-list.tsx index a17e9cd..d63f51c 100644 --- a/src/pages/lesson-list.tsx +++ b/src/pages/lesson-list.tsx @@ -46,50 +46,149 @@ import { } from '@chakra-ui/react' import { AddIcon, EditIcon } from '@chakra-ui/icons' -import { ErrorSpan, BreadcrumbsWrapper } from './style' - import { useAppSelector } from '../__data__/store' import { api } from '../__data__/api/api' import { isTeacher } from '../utils/user' import { qrCode } from '../assets' import { Lesson } from '../__data__/model' +import { ErrorSpan, BreadcrumbsWrapper } from './style' + interface NewLessonForm { name: string date: string } +interface LessonFormProps { + lesson?: Partial + isLoading: boolean + onCancel: () => void + onSubmit: (lesson: Lesson) => void + error?: string +} + +const LessonForm = ({ + lesson, + isLoading, + onCancel, + onSubmit, + error, +}: LessonFormProps) => { + const { + control, + handleSubmit, + reset, + formState: { errors }, + } = useForm({ + defaultValues: lesson || { + name: '', + date: '', + }, + }) + + return ( + + + + Создание лекции + + { + reset() + onCancel() + }} + /> + + +
+ + ( + + Дата + + {errors.date ? ( + {errors.date?.message} + ) : ( + Укажите дату и время лекции + )} + + )} + /> + + ( + + Название новой лекции: + + {errors.name && ( + {errors.name.message} + )} + + )} + /> + + + + + + {error && {error}} +
+
+
+ ) +} + const LessonList = () => { const { courseId } = useParams() const user = useAppSelector((s) => s.user) const { data, isLoading, error } = api.useLessonListQuery(courseId) const [createLesson, crLQuery] = api.useCreateLessonMutation() const [deleteLesson, deletingRqst] = api.useDeleteLessonMutation() + const [updateLesson, updateLessonRqst] = api.useUpdateLessonMutation() const [showForm, setShowForm] = useState(false) const [lessonToDelete, setlessonToDelete] = useState(null) const cancelRef = React.useRef() - const { - control, - handleSubmit, - reset, - formState: { errors }, - getValues, - } = useForm({ - defaultValues: { - name: '', - date: '', - }, - }) const toast = useToast() const toastRef = useRef(null) + const createdLessonRef = useRef(null) + const [editLesson, setEditLesson] = useState(null) - const onSubmit = ({ name, date }) => { + const onSubmit = (lessonData) => { toastRef.current = toast({ title: 'Отправляем', status: 'loading', duration: 9000, }) - createLesson({ name, courseId, date }) + createdLessonRef.current = lessonData + if (editLesson) updateLesson(lessonData) + else createLesson({ courseId, ...lessonData }) } useEffect(() => { @@ -106,27 +205,27 @@ const LessonList = () => { toast({ status: 'warning', duration: 9000, - render(props) { - return ( - - - {`Удалена лекция ${lesson.name}`} - - - - } - /> - ) - }, + render: ({ id, ...toastProps }) => ( + + + {`Удалена лекция ${lesson.name}`} + + + + } + /> + ), }) setlessonToDelete(null) } @@ -134,20 +233,34 @@ const LessonList = () => { useEffect(() => { if (crLQuery.isSuccess) { - const values = getValues() - if (toastRef.current) { - toast.update(toastRef.current, { - title: 'Лекция создана', - description: `Лекция ${values.name} успешно создана`, - status: 'success', - duration: 9000, - isClosable: true, - }) + const toastProps = { + title: 'Лекция создана', + description: `Лекция ${createdLessonRef.current.name} успешно создана`, + status: 'success' as 'success', + duration: 9000, + isClosable: true, } - reset() + if (toastRef.current) toast.update(toastRef.current, toastProps) + else toast(toastProps) + setShowForm(false) } }, [crLQuery.isSuccess]) + useEffect(() => { + if (updateLessonRqst.isSuccess) { + const toastProps = { + title: 'Лекция Обновлена', + description: `Лекция ${createdLessonRef.current.name} успешно обновлена`, + status: 'success' as 'success', + duration: 9000, + isClosable: true, + } + if (toastRef.current) toast.update(toastRef.current, toastProps) + else toast(toastProps) + setShowForm(false) + } + }, [updateLessonRqst.isSuccess]) + if (isLoading) { return ( @@ -220,85 +333,17 @@ const LessonList = () => { {isTeacher(user) && ( {showForm ? ( - - - - Создание лекции - - setShowForm(false)} /> - - -
- - ( - - Дата - - {errors.date ? ( - - {errors.date?.message} - - ) : ( - - Укажите дату и время лекции - - )} - - )} - /> - - ( - - Название новой лекции: - - {errors.name && ( - - {errors.name.message} - - )} - - )} - /> - - - - - - {crLQuery.error && ( - {(crLQuery.error as any).error} - )} -
-
-
+ { + setShowForm(false) + setEditLesson(null) + }} + error={(crLQuery.error as any)?.error} + lesson={editLesson} + /> ) : (