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

2024-03-28 18:59:16 +03:00 · 2024-03-28 18:59:16 +03:00 · 97e940b873
commit 97e940b873
parent b858d70675
7 changed files with 142 additions and 30 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -9,6 +9,7 @@
            "version": "1.2.0",
            "license": "MIT",
            "dependencies": {
+                "@chakra-ui/icons": "^2.1.1",
                "@chakra-ui/react": "^2.8.2",
                "@emotion/react": "^11.11.4",
                "@emotion/styled": "^11.11.0",
@ -24,6 +25,7 @@
                "react": "^18.2.0",
                "react-dom": "^18.2.0",
                "react-helmet": "^6.1.0",
+                "react-hook-form": "^7.51.2",
                "react-redux": "^9.1.0",
                "react-router-dom": "^6.22.1",
                "redux": "^5.0.1",
@ -2213,6 +2215,18 @@
                "react": ">=18"
            }
        },
+        "node_modules/@chakra-ui/icons": {
+            "version": "2.1.1",
+            "resolved": "https://registry.npmjs.org/@chakra-ui/icons/-/icons-2.1.1.tgz",
+            "integrity": "sha512-3p30hdo4LlRZTT5CwoAJq3G9fHI0wDc0pBaMHj4SUn0yomO+RcDRlzhdXqdr5cVnzax44sqXJVnf3oQG0eI+4g==",
+            "dependencies": {
+                "@chakra-ui/icon": "3.2.0"
+            },
+            "peerDependencies": {
+                "@chakra-ui/system": ">=2.0.0",
+                "react": ">=18"
+            }
+        },
        "node_modules/@chakra-ui/image": {
            "version": "2.1.0",
            "resolved": "https://registry.npmjs.org/@chakra-ui/image/-/image-2.1.0.tgz",
@ -8546,6 +8560,21 @@
                "react": ">=16.3.0"
            }
        },
+        "node_modules/react-hook-form": {
+            "version": "7.51.2",
+            "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.51.2.tgz",
+            "integrity": "sha512-y++lwaWjtzDt/XNnyGDQy6goHskFualmDlf+jzEZvjvz6KWDf7EboL7pUvRCzPTJd0EOPpdekYaQLEvvG6m6HA==",
+            "engines": {
+                "node": ">=12.22.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/react-hook-form"
+            },
+            "peerDependencies": {
+                "react": "^16.8.0 || ^17 || ^18"
+            }
+        },
        "node_modules/react-i18next": {
            "version": "11.8.5",
            "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-11.8.5.tgz",
--- a/package.json
+++ b/package.json
@ -20,6 +20,7 @@
        "@ijl/cli": "^5.0.3"
    },
    "dependencies": {
+        "@chakra-ui/icons": "^2.1.1",
        "@chakra-ui/react": "^2.8.2",
        "@emotion/react": "^11.11.4",
        "@emotion/styled": "^11.11.0",
@ -35,6 +36,7 @@
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "react-helmet": "^6.1.0",
+        "react-hook-form": "^7.51.2",
        "react-redux": "^9.1.0",
        "react-router-dom": "^6.22.1",
        "redux": "^5.0.1",
--- a/src/pages/course-list.tsx
+++ b/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>
--- a/src/pages/lesson-details.tsx
+++ b/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}` : ''}{' '}
--- a/src/pages/lesson-list.tsx
+++ b/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>
--- a/stubs/api/index.js
+++ b/stubs/api/index.js
@ -2,6 +2,13 @@ const router = require('express').Router()
 const fs = require('node:fs')
 const path = require('node:path')

+const timer =
+  (time = 1000) =>
+  (_req, _res, next) =>
+    setTimeout(next, time)
+
+router.use(timer())
+
 router.get('/course/list', (req, res) => {
  res.send(require('../mocks/courses/list/success.json'))
 })
@ -23,7 +30,9 @@ router.post('/lesson', (req, res) => {
 })

 router.post('/lesson/access-code', (req, res) => {
-  const answer = fs.readFileSync(path.resolve(__dirname, '../mocks/lessons/access-code/create/success.json'))
+  const answer = fs.readFileSync(
+    path.resolve(__dirname, '../mocks/lessons/access-code/create/success.json'),
+  )
  // res.send(require('../mocks/lessons/access-code/create/success.json'))
  res.send(answer)
 })
--- a/stubs/mocks/courses/list/success.json
+++ b/stubs/mocks/courses/list/success.json
@ -23,6 +23,29 @@
            "startDt": "2024-03-02T15:37:05.907Z",
            "created": "2024-03-02T15:37:05.908Z",
            "__v": 2
+        },
+        {
+            "_id": "65e73c21ced789d2f679128z",
+            "name": "KFU-24-2",
+            "teachers": [],
+            "lessons": [
+                "65e2e5fbec37fec650f28489",
+                "65e301c4ec37fec650f2aafe",
+                "65e78bebced789d2f6791315",
+                "65e78c0fced789d2f679131b"
+            ],
+            "creator": {
+                "sub": "f62905b1-e223-40ca-910f-c8d84c6137c1",
+                "email_verified": true,
+                "name": "Александр Примаков",
+                "preferred_username": "primakov",
+                "given_name": "Александр",
+                "family_name": "Примаков",
+                "email": "primakovpro@gmail.com"
+            },
+            "startDt": "2024-03-02T15:37:05.907Z",
+            "created": "2024-03-02T15:37:05.908Z",
+            "__v": 2
        }
    ]
 }