From 87c08e18bd814bc1072037cb59bcd54248c3ce77 Mon Sep 17 00:00:00 2001 From: Primakov Alexandr Alexandrovich Date: Mon, 12 Aug 2024 16:30:01 +0300 Subject: [PATCH] =?UTF-8?q?fix:=20=D0=BF=D0=BE=D0=BF=D1=80=D0=B0=D0=B2?= =?UTF-8?q?=D0=B8=D0=BB=20=D0=B0=D0=B2=D1=82=D0=BE=D0=BF=D0=BE=D0=B4=D1=81?= =?UTF-8?q?=D1=82=D0=B0=D0=BD=D0=BE=D0=B2=D0=BA=D1=83=20=D0=B4=D0=B0=D1=82?= =?UTF-8?q?=D1=8B=20=D0=B2=20=D1=84=D0=BE=D1=80=D0=BC=D1=83=20=D1=80=D0=B5?= =?UTF-8?q?=D0=B4=D0=B0=D0=BA=D1=82=D0=B8=D1=80=D0=BE=D0=B2=D0=B0=D0=BD?= =?UTF-8?q?=D0=B8=D1=8F=20=D0=BB=D0=B5=D0=BA=D1=86=D0=B8=D0=B8=20[#29]?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/xl-spinner/index.ts | 1 + src/components/xl-spinner/xl-spinner.tsx | 20 ++ src/pages/course-list.tsx | 4 +- src/pages/index.ts | 10 +- src/pages/lesson-list/components/bar.tsx | 28 +++ .../lesson-list/components/lessons-form.tsx | 137 +++++++++++++ src/pages/lesson-list/index.ts | 3 + src/pages/{ => lesson-list}/lesson-list.tsx | 186 +----------------- src/pages/lesson-list/style.ts | 13 ++ src/pages/user-page.tsx | 2 - src/utils/time.ts | 3 + 11 files changed, 221 insertions(+), 186 deletions(-) create mode 100644 src/components/xl-spinner/index.ts create mode 100644 src/components/xl-spinner/xl-spinner.tsx create mode 100644 src/pages/lesson-list/components/bar.tsx create mode 100644 src/pages/lesson-list/components/lessons-form.tsx create mode 100644 src/pages/lesson-list/index.ts rename src/pages/{ => lesson-list}/lesson-list.tsx (70%) create mode 100644 src/pages/lesson-list/style.ts create mode 100644 src/utils/time.ts diff --git a/src/components/xl-spinner/index.ts b/src/components/xl-spinner/index.ts new file mode 100644 index 0000000..45e6126 --- /dev/null +++ b/src/components/xl-spinner/index.ts @@ -0,0 +1 @@ +export { XlSpinner } from './xl-spinner'; diff --git a/src/components/xl-spinner/xl-spinner.tsx b/src/components/xl-spinner/xl-spinner.tsx new file mode 100644 index 0000000..644a4a5 --- /dev/null +++ b/src/components/xl-spinner/xl-spinner.tsx @@ -0,0 +1,20 @@ +import React from 'react' +import { + Container, + Center, + Spinner, +} from '@chakra-ui/react' + +export const XlSpinner = () => ( + +
+ +
+ +) \ No newline at end of file diff --git a/src/pages/course-list.tsx b/src/pages/course-list.tsx index 40d4af9..78097bd 100644 --- a/src/pages/course-list.tsx +++ b/src/pages/course-list.tsx @@ -61,8 +61,8 @@ const CoursesList = () => { getValues, } = useForm({ defaultValues: { - startDt: '', - name: '', + startDt: dayjs().format('YYYY-MM-DD'), + name: 'Название', }, }) diff --git a/src/pages/index.ts b/src/pages/index.ts index 68b7e7d..640cc52 100644 --- a/src/pages/index.ts +++ b/src/pages/index.ts @@ -1,8 +1,6 @@ import { lazy } from 'react' -export const CourseListPage = lazy(/* chank-name="course-details" */() => import('./course-list')); - -export const LessonDetailsPage = lazy(/* chank-name="course-details" */() => import('./lesson-details')); -export const LessonListPage = lazy(/* chank-name="course-details" */() => import('./lesson-list')); - -export const UserPage = lazy(/* chank-name="course-details" */() => import('./user-page')); +export const CourseListPage = lazy(() => import(/* webpackChunkName: "course-list" */ './course-list')); +export const LessonDetailsPage = lazy(() => import(/* webpackChunkName: "lesson-details" */ './lesson-details')); +export const LessonListPage = lazy(() => import(/* webpackChunkName: "lesson-list" */ './lesson-list')); +export const UserPage = lazy(() => import(/* webpackChunkName: "user-page" */ './user-page')); diff --git a/src/pages/lesson-list/components/bar.tsx b/src/pages/lesson-list/components/bar.tsx new file mode 100644 index 0000000..af2a5bd --- /dev/null +++ b/src/pages/lesson-list/components/bar.tsx @@ -0,0 +1,28 @@ +import React from 'react' +import { ResponsiveBar } from '@nivo/bar' + +export const Bar = ({ data }) => ( + + e.id + ': ' + e.formattedValue + ' on lection: ' + e.indexValue + } + /> +) diff --git a/src/pages/lesson-list/components/lessons-form.tsx b/src/pages/lesson-list/components/lessons-form.tsx new file mode 100644 index 0000000..7c0cf88 --- /dev/null +++ b/src/pages/lesson-list/components/lessons-form.tsx @@ -0,0 +1,137 @@ +import React from 'react' +import { useForm, Controller } from 'react-hook-form' +import { + Box, + Card, + CardBody, + CardHeader, + Heading, + Button, + CloseButton, + VStack, + FormControl, + FormLabel, + FormHelperText, + FormErrorMessage, + Input, +} from '@chakra-ui/react' +import { AddIcon } from '@chakra-ui/icons' + +import { dateToCalendarFormat } from '../../../utils/time' +import { Lesson } from '../../../__data__/model' +import { ErrorSpan } from '../style' + +interface NewLessonForm { + name: string; + date: string; +} + +interface LessonFormProps { + lesson?: Partial + isLoading: boolean + onCancel: () => void + onSubmit: (lesson: Lesson) => void + error?: string + title: string + nameButton: string +} + +export const LessonForm = ({ + lesson, + isLoading, + onCancel, + onSubmit, + error, + title, + nameButton, +}: LessonFormProps) => { + const { + control, + handleSubmit, + reset, + formState: { errors }, + } = useForm({ + defaultValues: (lesson && { ...lesson, date: dateToCalendarFormat(lesson.date) }) || { + name: '', + date: dateToCalendarFormat(), + }, + }) + + return ( + + + + {title} + + { + reset() + onCancel() + }} + /> + + +
+ + ( + + Дата + + {errors.date ? ( + {errors.date?.message} + ) : ( + Укажите дату и время лекции + )} + + )} + /> + + ( + + Название новой лекции: + + {errors.name && ( + {errors.name.message} + )} + + )} + /> + + + + + + {error && {error}} +
+ + + ) +} diff --git a/src/pages/lesson-list/index.ts b/src/pages/lesson-list/index.ts new file mode 100644 index 0000000..268e42c --- /dev/null +++ b/src/pages/lesson-list/index.ts @@ -0,0 +1,3 @@ +import LessonsList from './lesson-list'; + +export default LessonsList; diff --git a/src/pages/lesson-list.tsx b/src/pages/lesson-list/lesson-list.tsx similarity index 70% rename from src/pages/lesson-list.tsx rename to src/pages/lesson-list/lesson-list.tsx index db5a14e..6227661 100644 --- a/src/pages/lesson-list.tsx +++ b/src/pages/lesson-list/lesson-list.tsx @@ -4,31 +4,18 @@ import React, { useRef, useState, } from 'react' -import { ResponsiveBar } from '@nivo/bar' import dayjs from 'dayjs' import { Link, useParams } from 'react-router-dom' import { getNavigationsValue, getFeatures } from '@brojs/cli' -import { useForm, Controller } from 'react-hook-form' import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, Container, Box, - Card, - CardBody, - CardHeader, - Heading, Button, - CloseButton, useToast, - VStack, - FormControl, - FormLabel, Toast, - FormHelperText, - FormErrorMessage, - Input, TableContainer, Table, Thead, @@ -41,8 +28,6 @@ import { MenuItem, Text, MenuList, - Center, - Spinner, AlertDialog, AlertDialogBody, AlertDialogContent, @@ -52,134 +37,22 @@ import { } from '@chakra-ui/react' import { AddIcon, EditIcon } from '@chakra-ui/icons' -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 { 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 { XlSpinner } from '../../components/xl-spinner' -import { ErrorSpan, BreadcrumbsWrapper } from './style' +import { LessonForm } from './components/lessons-form' +import { BreadcrumbsWrapper } from './style' +import { Bar } from './components/bar' const features = getFeatures('journal') const barFeature = features?.['lesson.bar'] const groupByDate = features?.['group.by.date'] -interface NewLessonForm { - name: string - date: string -} - -interface LessonFormProps { - lesson?: Partial - isLoading: boolean - onCancel: () => void - onSubmit: (lesson: Lesson) => void - error?: string - title: string - nameButton: string -} - -const LessonForm = ({ - lesson, - isLoading, - onCancel, - onSubmit, - error, - title, - nameButton, -}: LessonFormProps) => { - const { - control, - handleSubmit, - reset, - formState: { errors }, - } = useForm({ - defaultValues: lesson || { - name: '', - date: '', - }, - }) - - return ( - - - - {title} - - { - 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) @@ -201,7 +74,6 @@ const LessonList = () => { return [] } - if (!groupByDate) { return [{ date: '', data: sorted }] } @@ -308,19 +180,7 @@ const LessonList = () => { }, [updateLessonRqst.isSuccess]) if (isLoading) { - return ( - -
- -
- - ) + return ; } return ( @@ -494,29 +354,3 @@ const LessonList = () => { } export default LessonList - -const Bar = ({ data }) => ( - - e.id + ': ' + e.formattedValue + ' on lection: ' + e.indexValue - } - /> -) diff --git a/src/pages/lesson-list/style.ts b/src/pages/lesson-list/style.ts new file mode 100644 index 0000000..2e7317b --- /dev/null +++ b/src/pages/lesson-list/style.ts @@ -0,0 +1,13 @@ +import styled from '@emotion/styled'; + +export const BreadcrumbsWrapper = styled.div` + padding: 12px; +`; + +export const ErrorSpan = styled.span` + color: #f9e2e2; + display: block; + padding: 16px; + background-color: #d32f0b; + border-radius: 11px; +` diff --git a/src/pages/user-page.tsx b/src/pages/user-page.tsx index d163de3..1fc8e51 100644 --- a/src/pages/user-page.tsx +++ b/src/pages/user-page.tsx @@ -9,10 +9,8 @@ import { Box, Center, Container, - Heading, Spinner, Text, - Stack, } from '@chakra-ui/react' import { UserCard } from '../components/user-card' diff --git a/src/utils/time.ts b/src/utils/time.ts new file mode 100644 index 0000000..5806637 --- /dev/null +++ b/src/utils/time.ts @@ -0,0 +1,3 @@ +import dayjs from "dayjs"; + +export const dateToCalendarFormat = (date?: string) => dayjs(date).format('YYYY-MM-DDTHH:mm')