Добавил спиннер (#5)

This commit is contained in:
Primakov Alexandr Alexandrovich 2024-03-28 18:26:26 +03:00
parent f09536f4aa
commit b858d70675
3 changed files with 352 additions and 205 deletions

View File

@ -4,6 +4,7 @@ import { Global, css } from '@emotion/react'
import { BrowserRouter } from 'react-router-dom';
import ruLocale from 'dayjs/locale/ru';
import dayjs from 'dayjs';
import { ChakraProvider } from '@chakra-ui/react'
import { Dashboard } from './dashboard';
@ -11,6 +12,7 @@ dayjs.locale('ru', ruLocale);
const App = ({ store }) => {
return(
<ChakraProvider>
<BrowserRouter>
<Helmet>
<meta name="viewport" content="width=device-width, user-scalable=no" />
@ -18,7 +20,6 @@ const App = ({ store }) => {
</Helmet>
<Global
styles={css`
* { box-sizing: border-box; }
html {
height: 100%;
max-width: 100%;
@ -40,7 +41,8 @@ const App = ({ store }) => {
radial-gradient(
farthest-side at bottom right,
rgba(0, 195, 255, 0.648),
rgba(255, 255, 255, 0) 65%
rgb(239 244 246) 65%
/* rgba(255, 255, 255, 0) 65% */
);
height: 100%;
font-family: KiyosunaSans, Montserrat, RFKrabuler, sans-serif;
@ -77,6 +79,7 @@ const App = ({ store }) => {
/>
<Dashboard store={store} />
</BrowserRouter>
</ChakraProvider>
)
}

View File

@ -1,34 +1,82 @@
import React, { useEffect, Suspense } from "react";
import { Routes, Route, useNavigate } from "react-router-dom";
import { Provider } from "react-redux";
import React, { useEffect, Suspense } from 'react'
import { Routes, Route, useNavigate } from 'react-router-dom'
import { Provider } from 'react-redux'
import {
CourseListPage,
LessonDetailsPage,
LessonListPage,
UserPage
UserPage,
} from './pages'
import { getNavigationsValue } from "@ijl/cli";
import { getNavigationsValue } from '@ijl/cli'
import { Box, Container, Spinner, VStack } from '@chakra-ui/react'
const Redirect = ({ path }) => {
const navigate = useNavigate();
const navigate = useNavigate()
useEffect(() => {
navigate(path);
}, []);
navigate(path)
}, [])
return null;
};
return null
}
const Wrapper = ({ children }) => <Suspense fallback="...">{children}</Suspense>
const Wrapper = ({ children }) => (
<Suspense
fallback={
<Container>
<VStack>
<Box mt="150">
<Spinner
thickness="4px"
speed="0.65s"
emptyColor="gray.200"
color="blue.500"
size="xl"
/></Box>
</VStack>
</Container>
}
>
{children}
</Suspense>
)
export const Dashboard = ({ store }) => (
<Provider store={store}>
<Routes>
<Route path={getNavigationsValue('journal.main')} element={<Wrapper><CourseListPage /></Wrapper>} />
<Route path={`${getNavigationsValue('journal.main')}/lessons-list/:courseId`} element={<Wrapper><LessonListPage /></Wrapper>} />
<Route path={`${getNavigationsValue('journal.main')}/u/:lessonId/:accessId`} element={<Wrapper><UserPage /></Wrapper>} />
<Route path={`${getNavigationsValue('journal.main')}/lesson/:courseId/:lessonId`} element={<Wrapper><LessonDetailsPage /></Wrapper>} />
<Route
path={getNavigationsValue('journal.main')}
element={
<Wrapper>
<CourseListPage />
</Wrapper>
}
/>
<Route
path={`${getNavigationsValue('journal.main')}/lessons-list/:courseId`}
element={
<Wrapper>
<LessonListPage />
</Wrapper>
}
/>
<Route
path={`${getNavigationsValue('journal.main')}/u/:lessonId/:accessId`}
element={
<Wrapper>
<UserPage />
</Wrapper>
}
/>
<Route
path={`${getNavigationsValue('journal.main')}/lesson/:courseId/:lessonId`}
element={
<Wrapper>
<LessonDetailsPage />
</Wrapper>
}
/>
</Routes>
</Provider>
);
)

View File

@ -1,8 +1,7 @@
import React, { useCallback, useEffect, useRef, useState } from 'react'
import dayjs from 'dayjs'
import { Link } from 'react-router-dom'
import { getConfigValue, getNavigationsValue } from '@ijl/cli'
import { Link as ConnectedLink } from 'react-router-dom'
import { getNavigationsValue } from '@ijl/cli'
import {
Box,
CardHeader,
@ -12,107 +11,191 @@ import {
Stack,
StackDivider,
Button,
UnorderedList,
Card,
Heading,
Tooltip,
Spinner,
Container,
VStack,
Link,
Input,
CloseButton,
FormControl,
FormLabel,
FormHelperText,
Center,
FormErrorMessage,
} from '@chakra-ui/react'
import { useForm, Controller } from 'react-hook-form'
import {
ArrowImg,
IconButton,
InputElement,
InputLabel,
InputWrapper,
StartWrapper,
Papper,
ErrorSpan,
Cross,
AddButton,
MainWrapper,
StyledCard,
} from './style'
import { ErrorSpan, MainWrapper } from './style'
import { linkOpen, moreDetails } from '../assets'
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'
import { AddIcon, ArrowDownIcon, ArrowUpIcon, LinkIcon } from '@chakra-ui/icons'
interface NewCourseForm {
startDt: string
name: string
}
const CoursesList = () => {
const user = useAppSelector((s) => s.user)
const { data, isLoading, error } = api.useCoursesListQuery()
const [createCourse, crcQuery] = api.useCreateUpdateCourseMutation()
const [createUpdateCourse, crucQuery] = api.useCreateUpdateCourseMutation()
const [value, setValue] = useState('')
const [showForm, setShowForm] = useState(false)
const [showDetails, setShowDetails] = useState(false)
const [courseDetailsOpenedId, setCourseDetailsOpenedId] = useState<
string | null
>(null)
const handleChange = useCallback(
(event) => {
setValue(event.target.value.toUpperCase())
},
[setValue],
)
const handleSubmit = useCallback(
(event) => {
event.preventDefault()
createCourse({ name: value })
},
[value],
)
const { control, handleSubmit, reset } = useForm<NewCourseForm>({
mode: 'all',
})
const onSubmit = ({ startDt, name }) => {
createUpdateCourse({ name, startDt })
}
useEffect(() => {
if (crcQuery.isSuccess) {
setValue('')
if (crucQuery.isSuccess) {
reset()
}
}, [crucQuery.isSuccess])
if (isLoading) {
return (
<Container maxW="container.xl">
<Center h="300px">
<Spinner
thickness="4px"
speed="0.65s"
emptyColor="gray.200"
color="blue.500"
size="xl"
/>
</Center>
</Container>
)
}
}, [crcQuery.isSuccess])
return (
<MainWrapper>
<StartWrapper>
<Container maxW="container.xl">
{isTeacher(user) && (
<>
{showForm ? (
<Papper>
<Cross role="button" onClick={() => setShowForm(false)}>
X
</Cross>
<form onSubmit={handleSubmit}>
<InputWrapper>
<InputLabel htmlFor="input">
Название новой лекции:
</InputLabel>
<InputElement
<Box mt="15" mb="15">
{!showForm ? (
<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="startDt"
rules={{ required: 'Обязательное поле' }}
render={({ field, fieldState }) => (
<FormControl isRequired>
<FormLabel>Дата начала</FormLabel>
<Input
{...field}
placeholder="Select Date and Time"
size="md"
type="datetime-local"
/>
{fieldState.error ? (
<FormErrorMessage>
{fieldState.error.message}
</FormErrorMessage>
) : (
<FormHelperText>
Укажите дату начала курса
</FormHelperText>
)}
</FormControl>
)}
/>
<FormControl isRequired>
<FormLabel>Название новой лекции:</FormLabel>
<Input
value={value}
onChange={handleChange}
id="input"
type="text"
autoComplete="off"
placeholder="КФУ-24-2"
size="md"
/>
<IconButton type="submit">
<ArrowImg src={arrow} />
</IconButton>
</InputWrapper>
<FormHelperText></FormHelperText>
</FormControl>
<Box mt={10}>
<Button
size="lg"
leftIcon={<AddIcon />}
colorScheme="blue"
>
Создать
</Button>
</Box>
</VStack>
{crcQuery?.error && (
<ErrorSpan>{(crcQuery?.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>
)}
<UnorderedList spacing={3}>
{data?.body?.map((course) => (
<StyledCard key={course._id} align="left">
<VStack as="ul" align="stretch">
{data?.body?.map((c) => (
<CourseCard
isOpened={courseDetailsOpenedId === c._id}
key={c._id}
course={c}
openDetails={() =>
courseDetailsOpenedId === c._id
? setCourseDetailsOpenedId(null)
: setCourseDetailsOpenedId(c._id)
}
/>
))}
</VStack>
</Container>
)
}
const CourseCard = ({ course, isOpened, openDetails }) => {
const [getLessonList, lessonList] = api.useLazyLessonListQuery()
useEffect(() => {
if (isOpened) {
getLessonList(course._id, true)
}
}, [isOpened])
const user = useAppSelector((s) => s.user)
return (
<Card key={course._id} align="left">
<CardHeader>
<Heading as="h2" mt="0">
{course.name}
</Heading>
</CardHeader>
{showDetails && (
{isOpened && (
<CardBody mt="16px">
<Stack divider={<StackDivider />} spacing="8px">
<Box as="span" textAlign="left">
@ -121,46 +204,59 @@ const CoursesList = () => {
<Box as="span" textAlign="left">
Количество занятий - {course.lessons.length}
</Box>
{lessonList.isFetching ? (
<Spinner />
) : (
<>
<Heading as="h3" mt={4} mb={3} size="lg">
Список занятий:
</Heading>
<Stack>
{lessonList.data?.body?.map((lesson) => (
<Link
as={ConnectedLink}
to={
isTeacher(user)
? `${getNavigationsValue('journal.main')}/lesson/${course._id}/${lesson._id}`
: ''
}
>
{lesson.name}
</Link>
))}
</Stack>
</>
)}
</Stack>
</CardBody>
)}
<CardFooter>
<ButtonGroup spacing="12" mt="16px">
<Tooltip
label="На страницу с лекциями"
fontSize="12px"
top="16px"
>
<Button variant="ghost" border="none" bg="#ffffff">
<Link
<ButtonGroup spacing="4" mt="16px">
<Tooltip label="На страницу с лекциями" fontSize="12px" top="16px">
<Button
leftIcon={<LinkIcon />}
as={ConnectedLink}
colorScheme="blue"
to={`${getNavigationsValue('journal.main')}/lessons-list/${course._id}`}
>
<img src={linkOpen} alt="Перейти к лекциям" />
</Link>
Открыть
</Button>
</Tooltip>
<Tooltip label="Детали" fontSize="12px" top="16px">
<Button
variant="ghost"
border="none"
bg="#ffffff"
onClick={() => {
showDetails
? setShowDetails(null)
: setShowDetails(true)
}}
cursor="pointer"
colorScheme="blue"
variant="outline"
leftIcon={isOpened ? <ArrowUpIcon /> : <ArrowDownIcon />}
loadingText="Загрузка"
isLoading={lessonList.isFetching}
onClick={openDetails}
>
<img src={moreDetails} alt="Просмотреть детали" />
Просмотреть детали
</Button>
</Tooltip>
</ButtonGroup>
</CardFooter>
</StyledCard>
))}
</UnorderedList>
</StartWrapper>
</MainWrapper>
</Card>
)
}