bro-js/journal.pl
bro-js/journal.pl
7
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Добавил спиннер И форма создания курса + перевод вёрстки на chakra-ui (#1)(#5) #6

Merged
primakov merged 2 commits from lection-create-form into master 2024-03-28 22:00:23 +03:00
Conversation 0 Commits 2 Files Changed 9 +142 -30
7 changed files with 142 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 97e940b873 - Show all commits

29
package-lock.json generated
View File

@ -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",

2
package.json
View File

@ -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",

77
src/pages/course-list.tsx
View File

@ -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>
<Controller
control={control}
name="name"
rules={{
required: 'Обязательное поле',
}}
render={({ field }) => (
<FormControl
isRequired
isInvalid={Boolean(errors.name)}
>
<FormLabel>Название новой лекции:</FormLabel>
<Input
value={value}
onChange={handleChange}
{...field}
required={false}
placeholder="КФУ-24-2"
size="md"
/>
<FormHelperText></FormHelperText>
{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>

14
src/pages/lesson-details.tsx
View File

@ -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,7 +103,9 @@ const LessonDetail = () => {
</BreadcrumbItem>
</Breadcrumb>
<h1 style={{ width: '70%' }} >Тема занятия - {accessCode?.body?.lesson?.name}</h1>
<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}{' '}

2
src/pages/lesson-list.tsx
View File

@ -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>

11
stubs/api/index.js
View File

@ -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)
})

23
stubs/mocks/courses/list/success.json
View File

@ -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
}
]
}