Стилизация формы создания лекции #12

Merged
alexredux merged 3 commits from feature/#11-styled-form-add-lesson into master 2024-03-31 11:44:45 +03:00
2 changed files with 153 additions and 84 deletions
Showing only changes of commit 0f796fd9bc - Show all commits

View File

@ -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,26 +67,38 @@ 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>
<Container maxW="container.xl">
<Breadcrumb>
<BreadcrumbItem>
<BreadcrumbLink as={Link} to={getNavigationsValue('journal.main')}>Журнал</BreadcrumbLink>
<BreadcrumbLink as={Link} to={getNavigationsValue('journal.main')}>
Журнал
</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbItem isCurrentPage>
@ -72,37 +107,72 @@ const LessonList = () => {
</Breadcrumb>
{isTeacher(user) && (
<>
<Box mt="15" mb="15">
{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"
<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"
/>
<IconButton type="submit">
<ArrowImg src={arrow} />
</IconButton>
</InputWrapper>
{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>
</Papper>
</CardBody>
</Card>
) : (
<AddButton onClick={() => setShowForm(true)}>Добавить</AddButton>
<Box p="2" m="2">
<Button
leftIcon={<AddIcon />}
colorScheme="green"
onClick={() => setShowForm(true)}
>
Добавить
</Button>
</Box>
)}
</>
</Box>
)}
<ul style={{ paddingLeft: 0 }}>
{data?.body?.map((lesson) => (
@ -124,8 +194,7 @@ const LessonList = () => {
</LessonItem>
))}
</ul>
</StartWrapper>
</MainWrapper>
</Container>
)
}