9 changed files with 218 additions and 477 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -9,7 +9,6 @@
            "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",
@ -25,7 +24,6 @@
                "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",
@ -2215,18 +2213,6 @@
                "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",
@ -8560,21 +8546,6 @@
                "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",
--- a/package.json
+++ b/package.json
@ -20,7 +20,6 @@
        "@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",
@ -36,7 +35,6 @@
        "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",
--- a/src/app.tsx
+++ b/src/app.tsx
@ -4,7 +4,6 @@ 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';

@ -12,7 +11,6 @@ dayjs.locale('ru', ruLocale);

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

--- a/src/dashboard.tsx
+++ b/src/dashboard.tsx
@ -1,82 +1,34 @@
-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 { Box, Container, Spinner, VStack } from '@chakra-ui/react'
+import { getNavigationsValue } from "@ijl/cli";

 const Redirect = ({ path }) => {
-  const navigate = useNavigate()
+  const navigate = useNavigate();

  useEffect(() => {
-    navigate(path)
-  }, [])
+    navigate(path);
+  }, []);

-  return null
-}
+  return null;
+};

-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>
-)
+const Wrapper = ({ children }) => <Suspense fallback="...">{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>
-)
+);
--- a/src/pages/course-list.tsx
+++ b/src/pages/course-list.tsx
@ -1,7 +1,8 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 import dayjs from 'dayjs'
-import { Link as ConnectedLink } from 'react-router-dom'
-import { getNavigationsValue } from '@ijl/cli'
+import { Link } from 'react-router-dom'
+import { getConfigValue, getNavigationsValue } from '@ijl/cli'
+
 import {
  Box,
  CardHeader,
@ -11,238 +12,107 @@ import {
  Stack,
  StackDivider,
  Button,
-  Card,
+  UnorderedList,
  Heading,
  Tooltip,
-  Spinner,
-  Container,
-  VStack,
-  Link,
-  Input,
-  CloseButton,
-  FormControl,
-  FormLabel,
-  FormHelperText,
-  Center,
-  FormErrorMessage,
-  useToast,
 } from '@chakra-ui/react'
-import { useForm, Controller } from 'react-hook-form'

-import { ErrorSpan, MainWrapper } from './style'
+import {
+  ArrowImg,
+  IconButton,
+  InputElement,
+  InputLabel,
+  InputWrapper,
+  StartWrapper,
+  Papper,
+  ErrorSpan,
+  Cross,
+  AddButton,
+  MainWrapper,
+  StyledCard,
+} 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 toast = useToast()
  const user = useAppSelector((s) => s.user)
-  const { data, isLoading } = api.useCoursesListQuery()
-  const [createUpdateCourse, crucQuery] = api.useCreateUpdateCourseMutation()
+  const { data, isLoading, error } = api.useCoursesListQuery()
+  const [createCourse, crcQuery] = api.useCreateUpdateCourseMutation()
+  const [value, setValue] = useState('')
  const [showForm, setShowForm] = useState(false)
-  const [courseDetailsOpenedId, setCourseDetailsOpenedId] = useState<
-    string | null
-  >(null)
-  const toastRef = useRef(null)
+  const [showDetails, setShowDetails] = useState(false)

-  const {
-    control,
-    handleSubmit,
-    reset,
-    formState: { errors },
-    getValues,
-  } = useForm<NewCourseForm>({
-    defaultValues: {
-      startDt: '',
-      name: '',
+  const handleChange = useCallback(
+    (event) => {
+      setValue(event.target.value.toUpperCase())
    },
-  })
-
-  const onSubmit = ({ startDt, name }) => {
-    toastRef.current = toast({
-      title: 'Отправляем',
-      status: 'loading',
-      duration: 9000,
-    })
-    createUpdateCourse({ name, startDt })
-  }
+    [setValue],
+  )
+  const handleSubmit = useCallback(
+    (event) => {
+      event.preventDefault()
+      createCourse({ name: value })
+    },
+    [value],
+  )

  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])
-
-  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>
-    )
+    if (crcQuery.isSuccess) {
+      setValue('')
    }
+  }, [crcQuery.isSuccess])

  return (
-    <Container maxW="container.xl">
+    <MainWrapper>
+      <StartWrapper>
        {isTeacher(user) && (
-        <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 }) => (
-                        <FormControl
-                          isRequired
-                          isInvalid={Boolean(errors.startDt)}
-                        >
-                          <FormLabel>Дата начала</FormLabel>
-                          <Input
-                            {...field}
-                            required={false}
-                            placeholder="Select Date and Time"
-                            size="md"
-                            type="datetime-local"
+              <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"
                    />
-                          {errors.startDt ? (
-                            <FormErrorMessage>
-                              {errors.startDt?.message}
-                            </FormErrorMessage>
-                          ) : (
-                            <FormHelperText>
-                              Укажите дату начала курса
-                            </FormHelperText>
-                          )}
-                        </FormControl>
-                      )}
-                    />
-                    <Controller
-                      control={control}
-                      name="name"
-                      rules={{
-                        required: 'Обязательное поле',
-                      }}
-                      render={({ field }) => (
-                        <FormControl
-                          isRequired
-                          isInvalid={Boolean(errors.name)}
-                        >
-                          <FormLabel>Название новой лекции:</FormLabel>
-                          <Input
-                            {...field}
-                            required={false}
-                            placeholder="КФУ-24-2"
-                            size="md"
-                          />
-                          {errors.name && (
-                            <FormErrorMessage>
-                              {errors.name.message}
-                            </FormErrorMessage>
-                          )}
-                        </FormControl>
-                      )}
-                    />
-
-                    <Box mt={10}>
-                      <Button
-                        size="lg"
-                        type="submit"
-                        leftIcon={<AddIcon />}
-                        colorScheme="blue"
-                      >
-                        Создать
-                      </Button>
-                    </Box>
-                  </VStack>
-
-                  {crucQuery?.error && (
-                    <ErrorSpan>{(crucQuery?.error as any).error}</ErrorSpan>
+                    <IconButton type="submit">
+                      <ArrowImg src={arrow} />
+                    </IconButton>
+                  </InputWrapper>
+                  {crcQuery?.error && (
+                    <ErrorSpan>{(crcQuery?.error as any).error}</ErrorSpan>
                  )}
                </form>
-              </CardBody>
-            </Card>
+              </Papper>
            ) : (
-            <Box p="2" m="2">
-              <Button
-                leftIcon={<AddIcon />}
-                colorScheme="green"
-                onClick={() => setShowForm(true)}
-              >
-                Добавить
-              </Button>
-            </Box>
+              <AddButton onClick={() => setShowForm(true)}>Добавить</AddButton>
            )}
-        </Box>
+          </>
        )}
-      <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">
+        <UnorderedList spacing={3}>
+          {data?.body?.map((course) => (
+            <StyledCard key={course._id} align="left">
              <CardHeader>
                <Heading as="h2" mt="0">
                  {course.name}
                </Heading>
              </CardHeader>
-      {isOpened && (
+              {showDetails && (
                <CardBody mt="16px">
                  <Stack divider={<StackDivider />} spacing="8px">
                    <Box as="span" textAlign="left">
@ -251,59 +121,46 @@ const CourseCard = ({ course, isOpened, openDetails }) => {
                    <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="4" mt="16px">
-          <Tooltip label="На страницу с лекциями" fontSize="12px" top="16px">
-            <Button
-              leftIcon={<LinkIcon />}
-              as={ConnectedLink}
-              colorScheme="blue"
+                <ButtonGroup spacing="12" mt="16px">
+                  <Tooltip
+                    label="На страницу с лекциями"
+                    fontSize="12px"
+                    top="16px"
+                  >
+                    <Button variant="ghost" border="none" bg="#ffffff">
+                      <Link
                        to={`${getNavigationsValue('journal.main')}/lessons-list/${course._id}`}
                      >
-              Открыть
+                        <img src={linkOpen} alt="Перейти к лекциям" />
+                      </Link>
                    </Button>
                  </Tooltip>
                  <Tooltip label="Детали" fontSize="12px" top="16px">
                    <Button
-              colorScheme="blue"
-              variant="outline"
-              leftIcon={isOpened ? <ArrowUpIcon /> : <ArrowDownIcon />}
-              loadingText="Загрузка"
-              isLoading={lessonList.isFetching}
-              onClick={openDetails}
+                      variant="ghost"
+                      border="none"
+                      bg="#ffffff"
+                      onClick={() => {
+                        showDetails
+                          ? setShowDetails(null)
+                          : setShowDetails(true)
+                      }}
+                      cursor="pointer"
                    >
-              Просмотреть детали
+                      <img src={moreDetails} alt="Просмотреть детали" />
                    </Button>
                  </Tooltip>
                </ButtonGroup>
              </CardFooter>
-    </Card>
+            </StyledCard>
+          ))}
+        </UnorderedList>
+      </StartWrapper>
+    </MainWrapper>
  )
 }

--- a/src/pages/lesson-details.tsx
+++ b/src/pages/lesson-details.tsx
@ -84,18 +84,18 @@ const LessonDetail = () => {
      <StartWrapper>
        <Breadcrumb>
          <BreadcrumbItem>
-            <BreadcrumbLink as={Link} to={getNavigationsValue('journal.main')}>
+            <Link as={BreadcrumbLink} to={getNavigationsValue('journal.main')}>
              Журнал
-            </BreadcrumbLink>
+            </Link>
          </BreadcrumbItem>

          <BreadcrumbItem>
-            <BreadcrumbLink
-              as={Link}
+            <Link
+              as={BreadcrumbLink}
              to={`${getNavigationsValue('journal.main')}/lessons-list/${courseId}`}
            >
              Курс
-            </BreadcrumbLink>
+            </Link>
          </BreadcrumbItem>

          <BreadcrumbItem isCurrentPage>
@ -103,9 +103,7 @@ 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}{' '}
--- a/src/pages/lesson-list.tsx
+++ b/src/pages/lesson-list.tsx
@ -63,7 +63,7 @@ const LessonList = () => {
      <StartWrapper>
        <Breadcrumb>
          <BreadcrumbItem>
-            <BreadcrumbLink as={Link} to={getNavigationsValue('journal.main')}>Журнал</BreadcrumbLink>
+            <Link as={BreadcrumbLink} to={getNavigationsValue('journal.main')}>Журнал</Link>
          </BreadcrumbItem>

          <BreadcrumbItem isCurrentPage>
--- a/stubs/api/index.js
+++ b/stubs/api/index.js
@ -2,13 +2,6 @@ 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'))
 })
@ -30,9 +23,7 @@ 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)
 })
--- a/stubs/mocks/courses/list/success.json
+++ b/stubs/mocks/courses/list/success.json
@ -23,29 +23,6 @@
            "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
        }
    ]
 }