README.md

@@ -10,22 +10,22 @@ UI позволяет управлять курсам, набором лекци
 
 ### установка зависимостей
 
-```shell
+'''shell
 npm install
-```
+'''
 
 ### Настройка окружения
 
 пропишите в hosts строку
 
-```
+'''
-127.0.0.1 ift-b1.kc.inno-js.test
+127.0.0.1 journal.test
-```
+'''
 
 ## Запуск
 
-```shell
+'''shell
 npm start
-```
+'''
 
-откройте в браузере [проект](http://ift-b1.kc.inno-js.test)
+откройте в браузере [проект](http://journal.test)

package.json

@@ -1,10 +1,10 @@
 {
     "name": "journal.pl",
     "version": "1.2.0",
-    "description": "inno-js platform journal ui repo",
+    "description": "",
     "main": "./src/index.tsx",
     "scripts": {
-        "start": "start chrome http://ift-b1.kc.inno-js.test/journal.pl && ijl-cli server --port=80",
+        "start": "ijl-cli server --port=80 --with-open-browser",
         "build": "npm run clean && ijl-cli build --dev",
         "build:prod": "npm run clean && ijl-cli build",
         "clean": "rimraf dist"

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,74 +11,72 @@ dayjs.locale('ru', ruLocale);
 
 const App = ({ store }) => {
     return(
-      <ChakraProvider>
+        <BrowserRouter>
-          <BrowserRouter>
+            <Helmet>
-              <Helmet>
+                <meta name="viewport" content="width=device-width, user-scalable=no" />
-                  <meta name="viewport" content="width=device-width, user-scalable=no" />
+                <title>Журнал</title>
-                  <title>Журнал</title>
+            </Helmet>
-              </Helmet>
+            <Global
-              <Global
+                styles={css`
-                  styles={css`
+                    * { box-sizing: border-box; }
-                      html {
+                    html {
-                          height: 100%;
+                        height: 100%;
-                          max-width: 100%;
+                        max-width: 100%;
-                          overflow: hidden;
+                        overflow: hidden;
-                      }
+                    }
-                      body {
+                    body {
-                          color: #000;
+                        color: #000;
-                          /* background: radial-gradient(circle at top right, rgb(154 227 33), rgb(33 160 56)); */
+                        /* background: radial-gradient(circle at top right, rgb(154 227 33), rgb(33 160 56)); */
-                          background: radial-gradient(
+                        background: radial-gradient(
-                              farthest-side at bottom left,
+                            farthest-side at bottom left,
-                              rgba(35, 235, 4, 0.709), 
+                            rgba(35, 235, 4, 0.709), 
-                              rgba(255, 255, 255, 0) 65%
+                            rgba(255, 255, 255, 0) 65%
-                          ),
+                        ),
-                          radial-gradient(
+                        radial-gradient(
-                              farthest-corner at bottom center,
+                            farthest-corner at bottom center,
-                              rgba(244, 244, 8, 0.6), 
+                            rgba(244, 244, 8, 0.6), 
-                              rgba(255, 255, 255, 0) 40%
+                            rgba(255, 255, 255, 0) 40%
-                          ),
+                        ),
-                          radial-gradient(
+                        radial-gradient(
-                              farthest-side at bottom right,
+                            farthest-side at bottom right,
-                              rgba(0, 195, 255, 0.648), 
+                            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%;
-                          height: 100%;
+                        font-family: KiyosunaSans, Montserrat, RFKrabuler, sans-serif;
-                          font-family: KiyosunaSans, Montserrat, RFKrabuler, sans-serif;
+                        font-weight: 600;
-                          font-weight: 600;
+                    }
-                      }
+                    #app {
-                      #app {
+                        height: 100%;
-                          height: 100%;
+                        overflow-y: auto;
-                          overflow-y: auto;
+                    }
-                      }
 
-                      @font-face {
+                    @font-face {
-                          font-family: 'KiyosunaSans';
+                        font-family: 'KiyosunaSans';
-                          src: url('${__webpack_public_path__ + '/remote-assets/KiyosunaSans/KiyosunaSans-B.otf'}');
+                        src: url('${__webpack_public_path__ + '/remote-assets/KiyosunaSans/KiyosunaSans-B.otf'}');
-                          font-weight: normal;
+                        font-weight: normal;
-                          font-style: normal;
+                        font-style: normal;
-                      }
+                    }
-                      @font-face {
+                    @font-face {
-                          font-family: 'KiyosunaSans';
+                        font-family: 'KiyosunaSans';
-                          src: url('${__webpack_public_path__ + '/remote-assets/KiyosunaSans/KiyosunaSans-L.otf'}');
+                        src: url('${__webpack_public_path__ + '/remote-assets/KiyosunaSans/KiyosunaSans-L.otf'}');
-                          font-weight: lighter;
+                        font-weight: lighter;
-                          font-style: normal;
+                        font-style: normal;
-                      }
+                    }
-                      @font-face {
+                    @font-face {
-                          font-family: 'RFKrabuler';
+                        font-family: 'RFKrabuler';
-                          src: url('${__webpack_public_path__ + '/remote-assets/RF-Krabuler/WEB/RFKrabuler-Regular.eot'}');
+                        src: url('${__webpack_public_path__ + '/remote-assets/RF-Krabuler/WEB/RFKrabuler-Regular.eot'}');
-                          src:
+                        src:
-                              url('${__webpack_public_path__ + '/remote-assets/RF-Krabuler/WEB/RFKrabuler-Regular.woff2'}') format('woff2'),
+                            url('${__webpack_public_path__ + '/remote-assets/RF-Krabuler/WEB/RFKrabuler-Regular.woff2'}') format('woff2'),
-                              url('${__webpack_public_path__ + '/remote-assets/RF-Krabuler/WEB/RFKrabuler-Regular.woff'}') format('woff'),
+                            url('${__webpack_public_path__ + '/remote-assets/RF-Krabuler/WEB/RFKrabuler-Regular.woff'}') format('woff'),
-                              url('${__webpack_public_path__ + '/remote-assets/RF-Krabuler/TTF/RF-Krabuler-Regular.ttf'}') format('truetype');
+                            url('${__webpack_public_path__ + '/remote-assets/RF-Krabuler/TTF/RF-Krabuler-Regular.ttf'}') format('truetype');
-                          font-weight: normal;
+                        font-weight: normal;
-                          font-style: normal;
+                        font-style: normal;
-                      }
+                    }
-                  `}
+                `}
-              />
+            />
-              <Dashboard store={store} />
+            <Dashboard store={store} />
-          </BrowserRouter>
+        </BrowserRouter>
-        </ChakraProvider>
     )
 }
 

src/dashboard.tsx

@@ -1,82 +1,34 @@
-import React, { useEffect, Suspense } from 'react'
+import React, { useEffect, Suspense } from "react";
-import { Routes, Route, useNavigate } from 'react-router-dom'
+import { Routes, Route, useNavigate } from "react-router-dom";
-import { Provider } from 'react-redux'
+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 }) => (
+const Wrapper = ({ children }) => <Suspense fallback="...">{children}</Suspense>
-  <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
+      <Route path={getNavigationsValue('journal.main')} element={<Wrapper><CourseListPage /></Wrapper>} />
-        path={getNavigationsValue('journal.main')}
+      <Route path={`${getNavigationsValue('journal.main')}/lessons-list/:courseId`} element={<Wrapper><LessonListPage /></Wrapper>} />
-        element={
+      <Route path={`${getNavigationsValue('journal.main')}/u/:lessonId/:accessId`} element={<Wrapper><UserPage /></Wrapper>} />
-          <Wrapper>
+      <Route path={`${getNavigationsValue('journal.main')}/lesson/:courseId/:lessonId`} element={<Wrapper><LessonDetailsPage /></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>
-)
+);

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 { Link } from 'react-router-dom'
-import { getNavigationsValue } from '@ijl/cli'
+import { getConfigValue, getNavigationsValue } from '@ijl/cli'
+
 import {
   Box,
   CardHeader,
@@ -11,252 +12,155 @@ import {
   Stack,
   StackDivider,
   Button,
-  Card,
+  UnorderedList,
   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 { 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 user = useAppSelector((s) => s.user)
   const { data, isLoading, error } = api.useCoursesListQuery()
-  const [createUpdateCourse, crucQuery] = api.useCreateUpdateCourseMutation()
+  const [createCourse, crcQuery] = api.useCreateUpdateCourseMutation()
   const [value, setValue] = useState('')
   const [showForm, setShowForm] = useState(false)
-  const [courseDetailsOpenedId, setCourseDetailsOpenedId] = useState<
+  const [showDetails, setShowDetails] = useState(false)
-    string | null
-  >(null)
 
-  const { control, handleSubmit, reset } = useForm<NewCourseForm>({
+  const handleChange = useCallback(
-    mode: 'all',
+    (event) => {
-  })
+      setValue(event.target.value.toUpperCase())
-
+    },
-  const onSubmit = ({ startDt, name }) => {
+    [setValue],
-    createUpdateCourse({ name, startDt })
+  )
-  }
+  const handleSubmit = useCallback(
+    (event) => {
+      event.preventDefault()
+      createCourse({ name: value })
+    },
+    [value],
+  )
 
   useEffect(() => {
-    if (crucQuery.isSuccess) {
+    if (crcQuery.isSuccess) {
-      reset()
+      setValue('')
     }
-  }, [crucQuery.isSuccess])
+  }, [crcQuery.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>
-    )
-  }
 
   return (
-    <Container maxW="container.xl">
+    <MainWrapper>
-      {isTeacher(user) && (
+      <StartWrapper>
-        <Box mt="15" mb="15">
+        {isTeacher(user) && (
-          {!showForm ? (
+          <>
-            <Card align="left">
+            {showForm ? (
-              <CardHeader display="flex">
+              <Papper>
-                <Heading as="h2" mt="0">
+                <Cross role="button" onClick={() => setShowForm(false)}>
-                  Создание курса
+                  X
-                </Heading>
+                </Cross>
-                <CloseButton ml="auto" onClick={() => setShowForm(false)} />
+                <form onSubmit={handleSubmit}>
-              </CardHeader>
+                  <InputWrapper>
-              <CardBody>
+                    <InputLabel htmlFor="input">
-                <form onSubmit={handleSubmit(onSubmit)}>
+                      Название новой лекции:
-                  <VStack spacing={10} align="left">
+                    </InputLabel>
-                    <Controller
+                    <InputElement
-                      control={control}
+                      value={value}
-                      name="startDt"
+                      onChange={handleChange}
-                      rules={{ required: 'Обязательное поле' }}
+                      id="input"
-                      render={({ field, fieldState }) => (
+                      type="text"
-                        <FormControl isRequired>
+                      autoComplete="off"
-                          <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>
+                    <IconButton type="submit">
-                      <FormLabel>Название новой лекции:</FormLabel>
+                      <ArrowImg src={arrow} />
-                      <Input
+                    </IconButton>
-                        value={value}
+                  </InputWrapper>
-                        onChange={handleChange}
-                        placeholder="КФУ-24-2"
-                        size="md"
-                      />
-                      <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>
-              </CardBody>
+              </Papper>
-            </Card>
-          ) : (
-            <Box p="2" m="2">
-              <Button
-                leftIcon={<AddIcon />}
-                colorScheme="green"
-                onClick={() => setShowForm(true)}
-              >
-                Добавить
-              </Button>
-            </Box>
-          )}
-        </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">
-      <CardHeader>
-        <Heading as="h2" mt="0">
-          {course.name}
-        </Heading>
-      </CardHeader>
-      {isOpened && (
-        <CardBody mt="16px">
-          <Stack divider={<StackDivider />} spacing="8px">
-            <Box as="span" textAlign="left">
-              {`Дата начала курса - ${dayjs(course.startDt).format('DD MMMM YYYYг.')}`}
-            </Box>
-            <Box as="span" textAlign="left">
-              Количество занятий - {course.lessons.length}
-            </Box>
-            {lessonList.isFetching ? (
-              <Spinner />
             ) : (
-              <>
+              <AddButton onClick={() => setShowForm(true)}>Добавить</AddButton>
-                <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>
+        )}
-      )}
+        <UnorderedList spacing={3}>
-      <CardFooter>
+          {data?.body?.map((course) => (
-        <ButtonGroup spacing="4" mt="16px">
+            <StyledCard key={course._id} align="left">
-          <Tooltip label="На страницу с лекциями" fontSize="12px" top="16px">
+              <CardHeader>
-            <Button
+                <Heading as="h2" mt="0">
-              leftIcon={<LinkIcon />}
+                  {course.name}
-              as={ConnectedLink}
+                </Heading>
-              colorScheme="blue"
+              </CardHeader>
-              to={`${getNavigationsValue('journal.main')}/lessons-list/${course._id}`}
+              {showDetails && (
-            >
+                <CardBody mt="16px">
-              Открыть
+                  <Stack divider={<StackDivider />} spacing="8px">
-            </Button>
+                    <Box as="span" textAlign="left">
-          </Tooltip>
+                      {`Дата начала курса - ${dayjs(course.startDt).format('DD MMMM YYYYг.')}`}
-          <Tooltip label="Детали" fontSize="12px" top="16px">
+                    </Box>
-            <Button
+                    <Box as="span" textAlign="left">
-              colorScheme="blue"
+                      Количество занятий - {course.lessons.length}
-              variant="outline"
+                    </Box>
-              leftIcon={isOpened ? <ArrowUpIcon /> : <ArrowDownIcon />}
+                  </Stack>
-              loadingText="Загрузка"
+                </CardBody>
-              isLoading={lessonList.isFetching}
+              )}
-              onClick={openDetails}
+              <CardFooter>
-            >
+                <ButtonGroup spacing="12" mt="16px">
-              Просмотреть детали
+                  <Tooltip
-            </Button>
+                    label="На страницу с лекциями"
-          </Tooltip>
+                    fontSize="12px"
-        </ButtonGroup>
+                    top="16px"
-      </CardFooter>
+                  >
-    </Card>
+                    <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
+                      variant="ghost"
+                      border="none"
+                      bg="#ffffff"
+                      onClick={() => {
+                        showDetails
+                          ? setShowDetails(null)
+                          : setShowDetails(true)
+                      }}
+                      cursor="pointer"
+                    >
+                      <img src={moreDetails} alt="Просмотреть детали" />
+                    </Button>
+                  </Tooltip>
+                </ButtonGroup>
+              </CardFooter>
+            </StyledCard>
+          ))}
+        </UnorderedList>
+      </StartWrapper>
+    </MainWrapper>
   )
 }