Добавил спиннер (#5)
This commit is contained in:
parent
f09536f4aa
commit
b858d70675
@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -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>
|
||||
);
|
||||
)
|
||||
|
||||
@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user