(#16) Редактирование лекции

src/__data__/api/api.ts

@@ -78,6 +78,14 @@ export const api = createApi({
       }),
       invalidatesTags: ['LessonList'],
     }),
+    updateLesson: builder.mutation<BaseResponse<Lesson>, Partial<Lesson> & Pick<Lesson, '_id'>>({
+      query: (data) => ({
+        method: 'PUT',
+        url: `/lesson/${data._id}`,
+        body: data,
+      }),
+      invalidatesTags: ['LessonList'],
+    }),
     deleteLesson: builder.mutation<null, string>({
       query: (lessonId) => ({
         url: `/lesson/${lessonId}`,

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<Lesson>
+  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<NewLessonForm>({
+    defaultValues: lesson || {
+      name: '',
+      date: '',
+    },
+  })
+
+  return (
+    <Card align="left">
+      <CardHeader display="flex">
+        <Heading as="h2" mt="0">
+          Создание лекции
+        </Heading>
+        <CloseButton
+          ml="auto"
+          onClick={() => {
+            reset()
+            onCancel()
+          }}
+        />
+      </CardHeader>
+      <CardBody>
+        <form onSubmit={handleSubmit(onSubmit)}>
+          <VStack spacing="10" align="left">
+            <Controller
+              control={control}
+              name="date"
+              rules={{ required: 'Обязательное поле' }}
+              render={({ field }) => (
+                <FormControl>
+                  <FormLabel>Дата</FormLabel>
+                  <Input
+                    {...field}
+                    required={false}
+                    placeholder="Укажите дату лекции"
+                    size="md"
+                    type="datetime-local"
+                  />
+                  {errors.date ? (
+                    <FormErrorMessage>{errors.date?.message}</FormErrorMessage>
+                  ) : (
+                    <FormHelperText>Укажите дату и время лекции</FormHelperText>
+                  )}
+                </FormControl>
+              )}
+            />
+
+            <Controller
+              control={control}
+              name="name"
+              rules={{ required: 'Обязательное поле' }}
+              render={({ field }) => (
+                <FormControl isRequired isInvalid={Boolean(errors.name)}>
+                  <FormLabel>Название новой лекции:</FormLabel>
+                  <Input
+                    {...field}
+                    required={false}
+                    placeholder="Название лекции"
+                    size="md"
+                  />
+                  {errors.name && (
+                    <FormErrorMessage>{errors.name.message}</FormErrorMessage>
+                  )}
+                </FormControl>
+              )}
+            />
+            <Box mt="10">
+              <Button
+                size="lg"
+                type="submit"
+                leftIcon={<AddIcon />}
+                colorScheme="blue"
+                isLoading={isLoading}
+              >
+                Создать
+              </Button>
+            </Box>
+          </VStack>
+
+          {error && <ErrorSpan>{error}</ErrorSpan>}
+        </form>
+      </CardBody>
+    </Card>
+  )
+}
+
 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<Lesson>(null)
   const cancelRef = React.useRef()
-  const {
-    control,
-    handleSubmit,
-    reset,
-    formState: { errors },
-    getValues,
-  } = useForm<NewLessonForm>({
-    defaultValues: {
-      name: '',
-      date: '',
-    },
-  })
   const toast = useToast()
   const toastRef = useRef(null)
+  const createdLessonRef = useRef(null)
+  const [editLesson, setEditLesson] = useState<Lesson>(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) {
+        render: ({ id, ...toastProps }) => (
-          return (
           <Toast
-              {...props}
+            {...toastProps}
+            id={id}
             title={
               <>
                 <Box pb={3}>
                   <Text fontSize="xl">{`Удалена лекция ${lesson.name}`}</Text>
                 </Box>
                 <Button
-                    onClick={() =>
+                  onClick={() => {
                     createLesson({ courseId, ...lesson })
-                    }
+                    toast.close(id)
+                  }}
                 >
                   Восстановить
                 </Button>
               </>
             }
           />
-          )
+        ),
-        },
       })
       setlessonToDelete(null)
     }
@@ -134,20 +233,34 @@ const LessonList = () => {
 
   useEffect(() => {
     if (crLQuery.isSuccess) {
-      const values = getValues()
+      const toastProps = {
-      if (toastRef.current) {
-        toast.update(toastRef.current, {
         title: 'Лекция создана',
-          description: `Лекция ${values.name} успешно создана`,
+        description: `Лекция ${createdLessonRef.current.name} успешно создана`,
-          status: 'success',
+        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 (
       <Container maxW="container.xl">
@@ -220,85 +333,17 @@ const LessonList = () => {
         {isTeacher(user) && (
           <Box mt="15" mb="15">
             {showForm ? (
-              <Card align="left">
+              <LessonForm
-                <CardHeader display="flex">
+                key={editLesson?._id}
-                  <Heading as="h2" mt="0">
+                isLoading={crLQuery.isLoading}
-                    Создание лекции
+                onSubmit={onSubmit}
-                  </Heading>
+                onCancel={() => {
-                  <CloseButton ml="auto" onClick={() => setShowForm(false)} />
+                  setShowForm(false)
-                </CardHeader>
+                  setEditLesson(null)
-                <CardBody>
+                }}
-                  <form onSubmit={handleSubmit(onSubmit)}>
+                error={(crLQuery.error as any)?.error}
-                    <VStack spacing="10" align="left">
+                lesson={editLesson}
-                      <Controller
-                        control={control}
-                        name="date"
-                        rules={{ required: 'Обязательное поле' }}
-                        render={({ field }) => (
-                          <FormControl>
-                            <FormLabel>Дата</FormLabel>
-                            <Input
-                              {...field}
-                              required={false}
-                              placeholder="Укажите дату лекции"
-                              size="md"
-                              type="datetime-local"
               />
-                            {errors.date ? (
-                              <FormErrorMessage>
-                                {errors.date?.message}
-                              </FormErrorMessage>
-                            ) : (
-                              <FormHelperText>
-                                Укажите дату и время лекции
-                              </FormHelperText>
-                            )}
-                          </FormControl>
-                        )}
-                      />
-
-                      <Controller
-                        control={control}
-                        name="name"
-                        rules={{ required: 'Обязательное поле' }}
-                        render={({ field }) => (
-                          <FormControl
-                            isRequired
-                            isInvalid={Boolean(errors.name)}
-                          >
-                            <FormLabel>Название новой лекции:</FormLabel>
-                            <Input
-                              {...field}
-                              required={false}
-                              placeholder="Название лекции"
-                              size="md"
-                            />
-                            {errors.name && (
-                              <FormErrorMessage>
-                                {errors.name.message}
-                              </FormErrorMessage>
-                            )}
-                          </FormControl>
-                        )}
-                      />
-                      <Box mt="10">
-                        <Button
-                          size="lg"
-                          type="submit"
-                          leftIcon={<AddIcon />}
-                          colorScheme="blue"
-                        >
-                          Создать
-                        </Button>
-                      </Box>
-                    </VStack>
-
-                    {crLQuery.error && (
-                      <ErrorSpan>{(crLQuery.error as any).error}</ErrorSpan>
-                    )}
-                  </form>
-                </CardBody>
-              </Card>
             ) : (
               <Box p="2" m="2">
                 <Button
@@ -356,7 +401,14 @@ const LessonList = () => {
                         <EditIcon />
                       </MenuButton>
                       <MenuList>
-                        <MenuItem isDisabled>Edit</MenuItem>
+                        <MenuItem
+                          onClick={() => {
+                            setShowForm(true)
+                            setEditLesson(lesson)
+                          }}
+                        >
+                          Edit
+                        </MenuItem>
                         <MenuItem onClick={() => setlessonToDelete(lesson)}>
                           Delete
                         </MenuItem>

stubs/api/index.js

@@ -45,4 +45,12 @@ router.get('/lesson/:lessonId', (req, res) => {
   res.send(require('../mocks/lessons/byid/success.json'))
 })
 
+router.delete('/lesson/:lessonId', (req, res) => {
+  res.send({ success: true, body: { ok: true }})
+})
+
+router.put('/lesson/:lessonId', (req, res) => {
+  res.send({ success: true, body: req.body })
+})
+
 module.exports = router