#11 styled form add lesson

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<NewLessonForm>({
+    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 (
-    <MainWrapper>
-      <StartWrapper>
-        <Breadcrumb>
-          <BreadcrumbItem>
-            <BreadcrumbLink as={Link} to={getNavigationsValue('journal.main')}>Журнал</BreadcrumbLink>
-          </BreadcrumbItem>
+    <Container maxW="container.xl">
+      <Breadcrumb>
+        <BreadcrumbItem>
+          <BreadcrumbLink as={Link} to={getNavigationsValue('journal.main')}>
+            Журнал
+          </BreadcrumbLink>
+        </BreadcrumbItem>
 
-          <BreadcrumbItem isCurrentPage>
-            <BreadcrumbLink href="#">Курс</BreadcrumbLink>
-          </BreadcrumbItem>
-        </Breadcrumb>
+        <BreadcrumbItem isCurrentPage>
+          <BreadcrumbLink href="#">Курс</BreadcrumbLink>
+        </BreadcrumbItem>
+      </Breadcrumb>
 
-        {isTeacher(user) && (
-          <>
-            {showForm ? (
-              <Papper>
-                <Cross role="button" onClick={() => setShowForm(false)}>
-                  X
-                </Cross>
-                <form onSubmit={handleSubmit}>
-                  <InputWrapper>
-                    <InputLabel htmlFor="input">
-                      Название новой лекции:
-                    </InputLabel>
-                    <InputElement
-                      value={value}
-                      onChange={handleChange}
-                      id="input"
-                      type="text"
-                      autoComplete="off"
+      {isTeacher(user) && (
+        <Box mt="15" mb="15">
+          {showForm ? (
+            <Card align="left">
+              <CardHeader display="flex">
+                <Heading as="h2" mt="0">
+                  Создание лекции
+                </Heading>
+                <CloseButton ml="auto" onClick={() => setShowForm(false)} />
+              </CardHeader>
+              <CardBody>
+                <form onSubmit={handleSubmit(onSubmit)}>
+                  <VStack spacing="10" align="left">
+                    <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>
+                      )}
                     />
-                    <IconButton type="submit">
-                      <ArrowImg src={arrow} />
-                    </IconButton>
-                  </InputWrapper>
+                    <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>
-              </Papper>
-            ) : (
-              <AddButton onClick={() => setShowForm(true)}>Добавить</AddButton>
-            )}
-          </>
-        )}
-        <ul style={{ paddingLeft: 0 }}>
-          {data?.body?.map((lesson) => (
-            <LessonItem key={lesson._id}>
-              <Link
-                to={
-                  isTeacher(user)
-                    ? `${getNavigationsValue('journal.main')}/lesson/${courseId}/${lesson._id}`
-                    : ''
-                }
-                style={{ display: 'flex' }}
+              </CardBody>
+            </Card>
+          ) : (
+            <Box p="2" m="2">
+              <Button
+                leftIcon={<AddIcon />}
+                colorScheme="green"
+                onClick={() => setShowForm(true)}
               >
-                <Lessonname>{lesson.name}</Lessonname>
-                <span>{dayjs(lesson.date).format('DD MMMM YYYYг.')}</span>
-                <span style={{ marginLeft: 'auto' }}>
-                  Участников - {lesson.students.length}
-                </span>
-              </Link>
-            </LessonItem>
-          ))}
-        </ul>
-      </StartWrapper>
-    </MainWrapper>
+                Добавить
+              </Button>
+            </Box>
+          )}
+        </Box>
+      )}
+      <ul style={{ paddingLeft: 0 }}>
+        {data?.body?.map((lesson) => (
+          <LessonItem key={lesson._id}>
+            <Link
+              to={
+                isTeacher(user)
+                  ? `${getNavigationsValue('journal.main')}/lesson/${courseId}/${lesson._id}`
+                  : ''
+              }
+              style={{ display: 'flex' }}
+            >
+              <Lessonname>{lesson.name}</Lessonname>
+              <span>{dayjs(lesson.date).format('DD MMMM YYYYг.')}</span>
+              <span style={{ marginLeft: 'auto' }}>
+                Участников - {lesson.students.length}
+              </span>
+            </Link>
+          </LessonItem>
+        ))}
+      </ul>
+    </Container>
   )
 }