Форма создания лекции (#1)

src/pages/course-list.tsx

@@ -25,6 +25,7 @@ import {
   FormHelperText,
   Center,
   FormErrorMessage,
+  useToast,
 } from '@chakra-ui/react'
 import { useForm, Controller } from 'react-hook-form'
 
@@ -41,25 +42,50 @@ interface NewCourseForm {
 }
 
 const CoursesList = () => {
+  const toast = useToast()
   const user = useAppSelector((s) => s.user)
-  const { data, isLoading, error } = api.useCoursesListQuery()
+  const { data, isLoading } = api.useCoursesListQuery()
   const [createUpdateCourse, crucQuery] = api.useCreateUpdateCourseMutation()
-  const [value, setValue] = useState('')
   const [showForm, setShowForm] = useState(false)
   const [courseDetailsOpenedId, setCourseDetailsOpenedId] = useState<
     string | null
   >(null)
+  const toastRef = useRef(null)
 
-  const { control, handleSubmit, reset } = useForm<NewCourseForm>({
-    mode: 'all',
+  const {
+    control,
+    handleSubmit,
+    reset,
+    formState: { errors },
+    getValues,
+  } = useForm<NewCourseForm>({
+    defaultValues: {
+      startDt: '',
+      name: '',
+    },
   })
 
   const onSubmit = ({ startDt, name }) => {
+    toastRef.current = toast({
+      title: 'Отправляем',
+      status: 'loading',
+      duration: 9000,
+    })
     createUpdateCourse({ name, startDt })
   }
 
   useEffect(() => {
     if (crucQuery.isSuccess) {
+      const values = getValues()
+      if (toastRef.current) {
+        toast.update(toastRef.current, {
+          title: 'Курс создан.',
+          description: `Курс ${values.name} успешно создан`,
+          status: 'success',
+          duration: 9000,
+          isClosable: true,
+        })
+      }
       reset()
     }
   }, [crucQuery.isSuccess])
@@ -84,7 +110,7 @@ const CoursesList = () => {
     <Container maxW="container.xl">
       {isTeacher(user) && (
         <Box mt="15" mb="15">
-          {!showForm ? (
+          {showForm ? (
             <Card align="left">
               <CardHeader display="flex">
                 <Heading as="h2" mt="0">
@@ -99,18 +125,22 @@ const CoursesList = () => {
                       control={control}
                       name="startDt"
                       rules={{ required: 'Обязательное поле' }}
-                      render={({ field, fieldState }) => (
-                        <FormControl isRequired>
+                      render={({ field }) => (
+                        <FormControl
+                          isRequired
+                          isInvalid={Boolean(errors.startDt)}
+                        >
                           <FormLabel>Дата начала</FormLabel>
                           <Input
                             {...field}
+                            required={false}
                             placeholder="Select Date and Time"
                             size="md"
                             type="datetime-local"
                           />
-                          {fieldState.error ? (
+                          {errors.startDt ? (
                             <FormErrorMessage>
-                              {fieldState.error.message}
+                              {errors.startDt?.message}
                             </FormErrorMessage>
                           ) : (
                             <FormHelperText>
@@ -120,20 +150,37 @@ const CoursesList = () => {
                         </FormControl>
                       )}
                     />
-                    <FormControl isRequired>
-                      <FormLabel>Название новой лекции:</FormLabel>
-                      <Input
-                        value={value}
-                        onChange={handleChange}
-                        placeholder="КФУ-24-2"
-                        size="md"
-                      />
-                      <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="КФУ-24-2"
+                            size="md"
+                          />
+                          {errors.name && (
+                            <FormErrorMessage>
+                              {errors.name.message}
+                            </FormErrorMessage>
+                          )}
+                        </FormControl>
+                      )}
+                    />
 
                     <Box mt={10}>
                       <Button
                         size="lg"
+                        type="submit"
                         leftIcon={<AddIcon />}
                         colorScheme="blue"
                       >
@@ -142,8 +189,8 @@ const CoursesList = () => {
                     </Box>
                   </VStack>
 
-                  {crcQuery?.error && (
-                    <ErrorSpan>{(crcQuery?.error as any).error}</ErrorSpan>
+                  {crucQuery?.error && (
+                    <ErrorSpan>{(crucQuery?.error as any).error}</ErrorSpan>
                   )}
                 </form>
               </CardBody>

src/pages/lesson-details.tsx

@@ -84,18 +84,18 @@ const LessonDetail = () => {
       <StartWrapper>
         <Breadcrumb>
           <BreadcrumbItem>
-            <Link as={BreadcrumbLink} to={getNavigationsValue('journal.main')}>
+            <BreadcrumbLink as={Link} to={getNavigationsValue('journal.main')}>
               Журнал
-            </Link>
+            </BreadcrumbLink>
           </BreadcrumbItem>
 
           <BreadcrumbItem>
-            <Link
-              as={BreadcrumbLink}
+            <BreadcrumbLink
+              as={Link}
               to={`${getNavigationsValue('journal.main')}/lessons-list/${courseId}`}
             >
               Курс
-            </Link>
+            </BreadcrumbLink>
           </BreadcrumbItem>
 
           <BreadcrumbItem isCurrentPage>
@@ -103,8 +103,10 @@ const LessonDetail = () => {
           </BreadcrumbItem>
         </Breadcrumb>
 
-        <h1 style={{ width: '70%' }} >Тема занятия - {accessCode?.body?.lesson?.name}</h1>
-        <span  style={{ display: 'flex' }}>
+        <h1 style={{ width: '70%' }}>
+          Тема занятия - {accessCode?.body?.lesson?.name}
+        </h1>
+        <span style={{ display: 'flex' }}>
           {dayjs(accessCode?.body?.lesson?.date).format('DD MMMM YYYYг.')}{' '}
           Отмечено - {accessCode?.body?.lesson?.students?.length}{' '}
           {AllStudents.isSuccess ? `/ ${AllStudents?.data?.body?.length}` : ''}{' '}

src/pages/lesson-list.tsx

@@ -63,7 +63,7 @@ const LessonList = () => {
       <StartWrapper>
         <Breadcrumb>
           <BreadcrumbItem>
-            <Link as={BreadcrumbLink} to={getNavigationsValue('journal.main')}>Журнал</Link>
+            <BreadcrumbLink as={Link} to={getNavigationsValue('journal.main')}>Журнал</BreadcrumbLink>
           </BreadcrumbItem>
 
           <BreadcrumbItem isCurrentPage>