2.0.0

Reviewed-on: https://git.inno-js.ru/bro-js/journal.pl/pulls/17

.eslintrc.js

@@ -0,0 +1,25 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+  },
+  extends: 'plugin:react/recommended',
+  overrides: [
+    {
+      env: {
+        node: true,
+      },
+      files: ['.eslintrc.{js,cjs}'],
+      parserOptions: {
+        sourceType: 'script',
+      },
+    },
+  ],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+  },
+  plugins: ['@typescript-eslint', 'react'],
+  rules: {},
+}

.gitignore

@@ -9,6 +9,8 @@ pids
 *.pid
 *.seed
 
+*prom.json
+
 # Directory for instrumented libs generated by jscoverage/JSCover
 lib-cov
 

Jenkinsfile

@@ -0,0 +1,37 @@
+pipeline {
+  agent {
+    docker {
+      image 'node:18'
+    }
+  }
+
+  stages {
+    stage('install') {
+      steps {
+        sh 'node -v'
+        sh 'npm -v'
+        sh 'npm ci'
+      }
+    }
+
+    stage('eslint') {
+      steps {
+        sh 'npm run eslint'
+      }
+    }
+
+    stage('build') {
+      steps {
+        sh 'npm run build'
+      }
+    }
+
+    stage('clean-all') {
+      steps {
+        sh 'rm -rf .[!.]*'
+        sh 'rm -rf ./*'
+        sh 'ls -a'
+      }
+    }
+  }
+}

README.md

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

package.json

@@ -1,13 +1,15 @@
 {
     "name": "journal.pl",
-    "version": "1.2.0",
-    "description": "",
+    "version": "2.0.0",
+    "description": "inno-js platform journal ui repo",
     "main": "./src/index.tsx",
     "scripts": {
-        "start": "ijl-cli server --port=80 --with-open-browser",
+        "start": "start chrome http://ift-b1.kc.inno-js.test/journal.pl && ijl-cli server --port=80",
         "build": "npm run clean && ijl-cli build --dev",
         "build:prod": "npm run clean && ijl-cli build",
-        "clean": "rimraf dist"
+        "clean": "rimraf dist",
+        "test": "echo ok",
+        "eslint": "npx eslint ."
     },
     "repository": {
         "type": "git",
@@ -17,9 +19,14 @@
     "author": "",
     "license": "MIT",
     "devDependencies": {
-        "@ijl/cli": "^5.0.3"
+        "@ijl/cli": "^5.0.3",
+        "@typescript-eslint/eslint-plugin": "^7.4.0",
+        "@typescript-eslint/parser": "^7.4.0",
+        "eslint": "^8.57.0",
+        "eslint-plugin-react": "^7.34.1"
     },
     "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 +42,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",

src/__data__/api/api.ts

@@ -1,80 +1,112 @@
-import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
-import { getConfigValue } from "@ijl/cli";
+import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
+import { getConfigValue } from '@ijl/cli'
 
-import { keycloak } from "../kc";
-import { AccessCode, BaseResponse, Course, Lesson, User, UserData } from "../model";
+import { keycloak } from '../kc'
+import {
+  AccessCode,
+  BaseResponse,
+  Course,
+  Lesson,
+  User,
+  UserData,
+} from '../model'
 
 export const api = createApi({
-  reducerPath: "auth",
+  reducerPath: 'auth',
   baseQuery: fetchBaseQuery({
-    baseUrl: getConfigValue("journal.back.url"),
-    fetchFn: async (input: RequestInfo | URL, init?: RequestInit | undefined) => {
-      const response = await fetch(input, init);
+    baseUrl: getConfigValue('journal.back.url'),
+    fetchFn: async (
+      input: RequestInfo | URL,
+      init?: RequestInit | undefined,
+    ) => {
+      const response = await fetch(input, init)
 
       if (response.status === 403) keycloak.login()
 
-      return response;
+      return response
     },
     headers: {
-      "Content-Type": "application/json;charset=utf-8",
+      'Content-Type': 'application/json;charset=utf-8',
     },
     prepareHeaders: (headers) => {
       headers.set('Authorization', `Bearer ${keycloak.token}`)
-    }
+    },
   }),
   tagTypes: ['LessonList', 'CourseList'],
   endpoints: (builder) => ({
     coursesList: builder.query<BaseResponse<Course[]>, void>({
       query: () => '/course/list',
-      providesTags: ['CourseList']
+      providesTags: ['CourseList'],
     }),
-    createUpdateCourse: builder.mutation<BaseResponse<Course>, Partial<Course> & Pick<Course, 'name'>>({
+    createUpdateCourse: builder.mutation<
+      BaseResponse<Course>,
+      Partial<Course> & Pick<Course, 'name'>
+    >({
       query: (course) => ({
         url: '/course',
         method: 'POST',
         body: course,
       }),
-      invalidatesTags: ['CourseList']
+      invalidatesTags: ['CourseList'],
     }),
     courseAllStudents: builder.query<BaseResponse<User[]>, string>({
-      query: (courseId) => `/course/students/${courseId}`
+      query: (courseId) => `/course/students/${courseId}`,
     }),
-    manualAddStudent: builder.mutation<BaseResponse<void>, { lessonId: string, user: User }>({
-      query: ({lessonId, user}) => ({
+    manualAddStudent: builder.mutation<
+      BaseResponse<void>,
+      { lessonId: string; user: User }
+    >({
+      query: ({ lessonId, user }) => ({
         url: `/lesson/add-student/${lessonId}`,
         method: 'POST',
-        body: user
-      })
+        body: user,
+      }),
     }),
 
     lessonList: builder.query<BaseResponse<Lesson[]>, string>({
       query: (courseId) => `/lesson/list/${courseId}`,
-      providesTags: ['LessonList']
+      providesTags: ['LessonList'],
     }),
-    createLesson: builder.mutation<BaseResponse<Lesson>, Pick<Lesson, 'name'> & { courseId: string }>({
-      query: ({ name, courseId }) => ({
+    createLesson: builder.mutation<
+      BaseResponse<Lesson>,
+      Partial<Lesson> & Pick<Lesson, 'name' | 'date'> & { courseId: string }
+    >({
+      query: (data) => ({
         url: '/lesson',
         method: 'POST',
-        body: { name, courseId },
+        body: data,
       }),
-      invalidatesTags: ['LessonList']
+      invalidatesTags: ['LessonList'],
+    }),
+    deleteLesson: builder.mutation<null, string>({
+      query: (lessonId) => ({
+        url: `/lesson/${lessonId}`,
+        method: 'DELETE',
+      }),
+      invalidatesTags: ['LessonList'],
     }),
     lessonById: builder.query<BaseResponse<Lesson>, string>({
-      query: (lessonId: string) => `/lesson/${lessonId}`
+      query: (lessonId: string) => `/lesson/${lessonId}`,
     }),
 
-    createAccessCode: builder.query<BaseResponse<AccessCode>, { lessonId: string }>({
+    createAccessCode: builder.query<
+      BaseResponse<AccessCode>,
+      { lessonId: string }
+    >({
       query: ({ lessonId }) => ({
         url: '/lesson/access-code',
         method: 'POST',
         body: { lessonId },
-      })
+      }),
     }),
-    getAccess: builder.query<BaseResponse<{ user: UserData, accessCode: AccessCode }>, { accessCode: string }>({
+    getAccess: builder.query<
+      BaseResponse<{ user: UserData; accessCode: AccessCode }>,
+      { accessCode: string }
+    >({
       query: ({ accessCode }) => ({
         url: `/lesson/access-code/${accessCode}`,
         method: 'GET',
-      })
-    })
+      }),
+    }),
   }),
-});
+})

src/app.tsx

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

src/dashboard.tsx

@@ -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>
-);
+)

src/pages/course-list.tsx

@@ -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,155 +11,309 @@ import {
   Stack,
   StackDivider,
   Button,
-  UnorderedList,
+  Card,
   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 {
-  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'
+import { Course } from '../__data__/model'
+
+interface NewCourseForm {
+  startDt: string
+  name: string
+}
 
 const CoursesList = () => {
+  const toast = useToast()
   const user = useAppSelector((s) => s.user)
-  const { data, isLoading, error } = api.useCoursesListQuery()
-  const [createCourse, crcQuery] = api.useCreateUpdateCourseMutation()
-  const [value, setValue] = useState('')
+  const { data, isLoading } = api.useCoursesListQuery()
+  const [createUpdateCourse, crucQuery] = api.useCreateUpdateCourseMutation()
   const [showForm, setShowForm] = useState(false)
-  const [showDetails, setShowDetails] = useState(false)
+  const [courseDetailsOpenedId, setCourseDetailsOpenedId] = useState<
+    string | null
+  >(null)
+  const toastRef = useRef(null)
 
-  const handleChange = useCallback(
-    (event) => {
-      setValue(event.target.value.toUpperCase())
+  const {
+    control,
+    handleSubmit,
+    reset,
+    formState: { errors },
+    getValues,
+  } = useForm<NewCourseForm>({
+    defaultValues: {
+      startDt: '',
+      name: '',
     },
-    [setValue],
-  )
-  const handleSubmit = useCallback(
-    (event) => {
-      event.preventDefault()
-      createCourse({ name: value })
-    },
-    [value],
-  )
+  })
+
+  const onSubmit = ({ startDt, name }) => {
+    toastRef.current = toast({
+      title: 'Отправляем',
+      status: 'loading',
+      duration: 9000,
+    })
+    createUpdateCourse({ name, startDt })
+  }
 
   useEffect(() => {
-    if (crcQuery.isSuccess) {
-      setValue('')
+    if (crucQuery.isSuccess) {
+      const values = getValues()
+      if (toastRef.current) {
+        toast.update(toastRef.current, {
+          title: 'Курс создан.',
+          description: `Курс ${values.name} успешно создан`,
+          status: 'success',
+          duration: 9000,
+          isClosable: true,
+        })
+      }
+      reset()
     }
-  }, [crcQuery.isSuccess])
+  }, [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>
+    )
+  }
 
   return (
-    <MainWrapper>
-      <StartWrapper>
-        {isTeacher(user) && (
-          <>
-            {showForm ? (
-              <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"
+    <Container maxW="container.xl">
+      {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="date"
+                          />
+                          {errors.startDt ? (
+                            <FormErrorMessage>
+                              {errors.startDt?.message}
+                            </FormErrorMessage>
+                          ) : (
+                            <FormHelperText>
+                              Укажите дату начала курса
+                            </FormHelperText>
+                          )}
+                        </FormControl>
+                      )}
                     />
-                    <IconButton type="submit">
-                      <ArrowImg src={arrow} />
-                    </IconButton>
-                  </InputWrapper>
-                  {crcQuery?.error && (
-                    <ErrorSpan>{(crcQuery?.error as any).error}</ErrorSpan>
+                    <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>
                   )}
                 </form>
-              </Papper>
+              </CardBody>
+            </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,
+}: {
+  course: Course
+  isOpened: boolean
+  openDetails: () => void
+}) => {
+  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>
-            )}
-          </>
-        )}
-        <UnorderedList spacing={3}>
-          {data?.body?.map((course) => (
-            <StyledCard key={course._id} align="left">
-              <CardHeader>
-                <Heading as="h2" mt="0">
-                  {course.name}
+              <>
+                <Heading as="h3" mt={4} mb={3} size="lg">
+                  Список занятий:
                 </Heading>
-              </CardHeader>
-              {showDetails && (
-                <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>
-                  </Stack>
-                </CardBody>
-              )}
-              <CardFooter>
-                <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
-                      variant="ghost"
-                      border="none"
-                      bg="#ffffff"
-                      onClick={() => {
-                        showDetails
-                          ? setShowDetails(null)
-                          : setShowDetails(true)
-                      }}
-                      cursor="pointer"
+                <Stack>
+                  {lessonList.data?.body?.map((lesson) => (
+                    <Link
+                      as={ConnectedLink}
+                      key={lesson._id}
+                      to={
+                        isTeacher(user)
+                          ? `${getNavigationsValue('journal.main')}/lesson/${course._id}/${lesson._id}`
+                          : ''
+                      }
                     >
-                      <img src={moreDetails} alt="Просмотреть детали" />
-                    </Button>
-                  </Tooltip>
-                </ButtonGroup>
-              </CardFooter>
-            </StyledCard>
-          ))}
-        </UnorderedList>
-      </StartWrapper>
-    </MainWrapper>
+                      {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"
+              to={`${getNavigationsValue('journal.main')}/lessons-list/${course._id}`}
+            >
+              Открыть
+            </Button>
+          </Tooltip>
+          <Tooltip label="Детали" fontSize="12px" top="16px">
+            <Button
+              colorScheme="blue"
+              variant="outline"
+              leftIcon={isOpened ? <ArrowUpIcon /> : <ArrowDownIcon />}
+              loadingText="Загрузка"
+              isLoading={lessonList.isFetching}
+              onClick={openDetails}
+            >
+              Просмотреть детали
+            </Button>
+          </Tooltip>
+        </ButtonGroup>
+      </CardFooter>
+    </Card>
   )
 }
 

src/pages/lesson-details.tsx

@@ -3,17 +3,24 @@ import { useParams, Link } from 'react-router-dom'
 import dayjs from 'dayjs'
 import QRCode from 'qrcode'
 import { getConfigValue, getNavigationsValue } from '@ijl/cli'
-import { Breadcrumb, BreadcrumbItem, BreadcrumbLink } from '@chakra-ui/react'
+import {
+  Box,
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  Container,
+  HStack,
+  VStack,
+  Heading,
+} from '@chakra-ui/react'
 
 import {
-  MainWrapper,
-  StartWrapper,
   QRCanvas,
   LessonItem,
   Lessonname,
   AddMissedButton,
-  Wrapper,
   UnorderList,
+  BreadcrumbsWrapper,
 } from './style'
 import { api } from '../__data__/api/api'
 import { User } from '../__data__/model'
@@ -80,37 +87,45 @@ const LessonDetail = () => {
   }, [accessCode?.body, AllStudents.data])
 
   return (
-    <MainWrapper>
-      <StartWrapper>
+    <>
+      <BreadcrumbsWrapper>
         <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>
             <BreadcrumbLink href="#">Лекция</BreadcrumbLink>
           </BreadcrumbItem>
         </Breadcrumb>
-
-        <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}{' '}
-          {AllStudents.isSuccess ? `/ ${AllStudents?.data?.body?.length}` : ''}{' '}
-          человек
-        </span>
-        <Wrapper>
+      </BreadcrumbsWrapper>
+      <Container maxW="container.xl" centerContent px="200">
+        <VStack align="left">
+          <Heading as="h3" mt="4" mb="3">
+            Тема занятия:
+          </Heading>
+          <Box as="span">{accessCode?.body?.lesson?.name}</Box>
+          <Box as="span">
+            {dayjs(accessCode?.body?.lesson?.date).format('DD MMMM YYYYг.')}{' '}
+            Отмечено - {accessCode?.body?.lesson?.students?.length}{' '}
+            {AllStudents.isSuccess
+              ? `/ ${AllStudents?.data?.body?.length}`
+              : ''}{' '}
+            человек
+          </Box>
+        </VStack>
+        <HStack spacing="8">
           <a href={userUrl}>
             <QRCanvas ref={canvRef} />
           </a>
@@ -130,9 +145,9 @@ const LessonDetail = () => {
               </LessonItem>
             ))}
           </UnorderList>
-        </Wrapper>
-      </StartWrapper>
-    </MainWrapper>
+        </HStack>
+      </Container>
+    </>
   )
 }
 

src/pages/lesson-list.tsx

@@ -2,130 +2,375 @@ import React, { useCallback, useEffect, useRef, useState } from 'react'
 import dayjs from 'dayjs'
 import { Link, useParams } from 'react-router-dom'
 import { getNavigationsValue } from '@ijl/cli'
+import { useForm, Controller } from 'react-hook-form'
 import {
   Breadcrumb,
   BreadcrumbItem,
   BreadcrumbLink,
+  Container,
+  Box,
+  Card,
+  CardBody,
+  CardHeader,
+  Heading,
+  Button,
+  CloseButton,
+  useToast,
+  VStack,
+  FormControl,
+  FormLabel,
+  Toast,
+  FormHelperText,
+  FormErrorMessage,
+  Input,
+  TableContainer,
+  Table,
+  Thead,
+  Tr,
+  Th,
+  Tbody,
+  Td,
+  Menu,
+  MenuButton,
+  MenuItem,
+  Text,
+  MenuList,
+  Center,
+  Spinner,
+  AlertDialog,
+  AlertDialogBody,
+  AlertDialogContent,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogOverlay,
 } from '@chakra-ui/react'
+import { AddIcon, EditIcon } from '@chakra-ui/icons'
 
-import {
-  ArrowImg,
-  IconButton,
-  InputElement,
-  InputLabel,
-  InputWrapper,
-  StartWrapper,
-  LessonItem,
-  Lessonname,
-  Papper,
-  ErrorSpan,
-  Cross,
-  AddButton,
-  MainWrapper,
-} from './style'
+import { ErrorSpan, BreadcrumbsWrapper } from './style'
 
-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 { qrCode } from '../assets'
+import { Lesson } from '../__data__/model'
+
+interface NewLessonForm {
+  name: string
+  date: string
+}
 
 const LessonList = () => {
   const { courseId } = useParams()
   const user = useAppSelector((s) => s.user)
   const { data, isLoading, error } = api.useLessonListQuery(courseId)
   const [createLesson, crLQuery] = api.useCreateLessonMutation()
-  const [value, setValue] = useState('')
+  const [deleteLesson, deletingRqst] = api.useDeleteLessonMutation()
   const [showForm, setShowForm] = useState(false)
+  const [lessonToDelete, setlessonToDelete] = useState<Lesson>(null)
+  const cancelRef = React.useRef()
+  const {
+    control,
+    handleSubmit,
+    reset,
+    formState: { errors },
+    getValues,
+  } = useForm<NewLessonForm>({
+    defaultValues: {
+      name: '',
+      date: '',
+    },
+  })
+  const toast = useToast()
+  const toastRef = useRef(null)
 
-  const handleChange = useCallback(
-    (event) => {
-      setValue(event.target.value.toUpperCase())
-    },
-    [setValue],
-  )
-  const handleSubmit = useCallback(
-    (event) => {
-      event.preventDefault()
-      createLesson({ name: value, courseId })
-    },
-    [value],
-  )
+  const onSubmit = ({ name, date }) => {
+    toastRef.current = toast({
+      title: 'Отправляем',
+      status: 'loading',
+      duration: 9000,
+    })
+    createLesson({ name, courseId, date })
+  }
+
+  useEffect(() => {
+    if (deletingRqst.isError) {
+      toast({
+        title: (deletingRqst.error as any)?.error,
+        status: 'error',
+        duration: 3000,
+      })
+    }
+
+    if (deletingRqst.isSuccess) {
+      const lesson = { ...lessonToDelete }
+      toast({
+        status: 'warning',
+        duration: 9000,
+        render(props) {
+          return (
+            <Toast
+              {...props}
+              title={
+                <>
+                  <Box pb={3}>
+                    <Text fontSize="xl">{`Удалена лекция ${lesson.name}`}</Text>
+                  </Box>
+                  <Button
+                    onClick={() =>
+                      createLesson({ courseId, ...lesson })
+                    }
+                  >
+                    Восстановить
+                  </Button>
+                </>
+              }
+            />
+          )
+        },
+      })
+      setlessonToDelete(null)
+    }
+  }, [deletingRqst.isLoading, deletingRqst.isSuccess, deletingRqst.isError])
 
   useEffect(() => {
     if (crLQuery.isSuccess) {
-      setValue('')
+      const values = getValues()
+      if (toastRef.current) {
+        toast.update(toastRef.current, {
+          title: 'Лекция создана',
+          description: `Лекция ${values.name} успешно создана`,
+          status: 'success',
+          duration: 9000,
+          isClosable: true,
+        })
+      }
+      reset()
     }
   }, [crLQuery.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 (
-    <MainWrapper>
-      <StartWrapper>
+    <>
+      <AlertDialog
+        isOpen={Boolean(lessonToDelete)}
+        leastDestructiveRef={cancelRef}
+        onClose={() => setlessonToDelete(null)}
+      >
+        <AlertDialogOverlay>
+          <AlertDialogContent>
+            <AlertDialogHeader fontSize="lg" fontWeight="bold">
+              Удалить занятие от{' '}
+              {dayjs(lessonToDelete?.date).format('DD.MM.YY')}?
+            </AlertDialogHeader>
+
+            <AlertDialogBody>
+              Все данные о посещении данного занятия будут удалены
+            </AlertDialogBody>
+
+            <AlertDialogFooter>
+              <Button
+                isDisabled={deletingRqst.isLoading}
+                ref={cancelRef}
+                onClick={() => setlessonToDelete(null)}
+              >
+                Cancel
+              </Button>
+              <Button
+                colorScheme="red"
+                loadingText=""
+                isLoading={deletingRqst.isLoading}
+                onClick={() => deleteLesson(lessonToDelete._id)}
+                ml={3}
+              >
+                Delete
+              </Button>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialogOverlay>
+      </AlertDialog>
+      <BreadcrumbsWrapper>
         <Breadcrumb>
           <BreadcrumbItem>
-            <Link as={BreadcrumbLink} to={getNavigationsValue('journal.main')}>Журнал</Link>
+            <BreadcrumbLink as={Link} to={getNavigationsValue('journal.main')}>
+              Журнал
+            </BreadcrumbLink>
           </BreadcrumbItem>
 
           <BreadcrumbItem isCurrentPage>
             <BreadcrumbLink href="#">Курс</BreadcrumbLink>
           </BreadcrumbItem>
         </Breadcrumb>
-
+      </BreadcrumbsWrapper>
+      <Container maxW="container.xl">
         {isTeacher(user) && (
-          <>
+          <Box mt="15" mb="15">
             {showForm ? (
-              <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"
-                    />
-                    <IconButton type="submit">
-                      <ArrowImg src={arrow} />
-                    </IconButton>
-                  </InputWrapper>
-                  {crLQuery.error && (
-                    <ErrorSpan>{(crLQuery.error as any).error}</ErrorSpan>
-                  )}
-                </form>
-              </Papper>
+              <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="date"
+                        rules={{ required: 'Обязательное поле' }}
+                        render={({ field }) => (
+                          <FormControl>
+                            <FormLabel>Дата</FormLabel>
+                            <Input
+                              {...field}
+                              required={false}
+                              placeholder="Укажите дату лекции"
+                              size="md"
+                              type="datetime-local"
+                            />
+                            {errors.date ? (
+                              <FormErrorMessage>
+                                {errors.date?.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="Название лекции"
+                              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>
+
+                    {crLQuery.error && (
+                      <ErrorSpan>{(crLQuery.error as any).error}</ErrorSpan>
+                    )}
+                  </form>
+                </CardBody>
+              </Card>
             ) : (
-              <AddButton onClick={() => setShowForm(true)}>Добавить</AddButton>
+              <Box p="2" m="2">
+                <Button
+                  leftIcon={<AddIcon />}
+                  colorScheme="green"
+                  onClick={() => setShowForm(true)}
+                >
+                  Добавить
+                </Button>
+              </Box>
             )}
-          </>
+          </Box>
         )}
-        <ul style={{ paddingLeft: 0 }}>
-          {data?.body?.map((lesson) => (
-            <LessonItem key={lesson._id}>
-              <Link
-                to={
-                  isTeacher(user)
-                    ? `${getNavigationsValue('journal.main')}/lesson/${courseId}/${lesson._id}`
-                    : ''
-                }
-                style={{ display: 'flex' }}
-              >
-                <Lessonname>{lesson.name}</Lessonname>
-                <span>{dayjs(lesson.date).format('DD MMMM YYYYг.')}</span>
-                <span style={{ marginLeft: 'auto' }}>
-                  Участников - {lesson.students.length}
-                </span>
-              </Link>
-            </LessonItem>
-          ))}
-        </ul>
-      </StartWrapper>
-    </MainWrapper>
+        <TableContainer whiteSpace="wrap">
+          <Table variant="striped" colorScheme="cyan">
+            <Thead>
+              <Tr>
+                {isTeacher(user) && (
+                  <Th align="center" width={1}>
+                    ссылка
+                  </Th>
+                )}
+                <Th textAlign="center" width={1}>
+                  Дата
+                </Th>
+                <Th>Название</Th>
+                <Th>action</Th>
+                <Th isNumeric>Отмечено</Th>
+              </Tr>
+            </Thead>
+            <Tbody>
+              {data?.body?.map((lesson) => (
+                <Tr key={lesson._id}>
+                  {isTeacher(user) && (
+                    <Td>
+                      <Link
+                        to={`${getNavigationsValue('journal.main')}/lesson/${courseId}/${lesson._id}`}
+                        style={{ display: 'flex' }}
+                      >
+                        <img
+                          width={24}
+                          src={qrCode}
+                          style={{ margin: '0 auto' }}
+                        />
+                      </Link>
+                    </Td>
+                  )}
+                  <Td textAlign="center">
+                    {dayjs(lesson.date).format('H:mm DD.MM.YY')}
+                  </Td>
+                  <Td>{lesson.name}</Td>
+                  <Td>
+                    <Menu>
+                      <MenuButton as={Button}>
+                        <EditIcon />
+                      </MenuButton>
+                      <MenuList>
+                        <MenuItem isDisabled>Edit</MenuItem>
+                        <MenuItem onClick={() => setlessonToDelete(lesson)}>
+                          Delete
+                        </MenuItem>
+                      </MenuList>
+                    </Menu>
+                  </Td>
+                  <Td isNumeric>{lesson.students.length}</Td>
+                </Tr>
+              ))}
+            </Tbody>
+          </Table>
+        </TableContainer>
+      </Container>
+    </>
   )
 }
 

src/pages/style.ts

@@ -4,6 +4,9 @@ import {
   Card
 } from '@chakra-ui/react'
 
+export const BreadcrumbsWrapper = styled.div`
+  padding: 12px;
+`;
 
 export const MainWrapper = styled.main`
   display: flex;

stubs/api/index.js

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

stubs/mocks/courses/list/success.json

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

stubs/mocks/lessons/access-code/create/success.json

@@ -4,7 +4,7 @@
       "expires": "2024-03-01T07:52:16.374Z",
       "lesson": {
           "_id": "65df996c584b172772d69706",
-          "name": "ВВЕДЕНИЕ В ВЕБ-РАЗРАБОТКУ. ИНСТРУМЕНТАРИЙ, ОБЗОР ВЕБ-ТЕХНОЛОГИЙ",
+          "name": "ВВОДНАЯ ПО JS.ПРИМЕНЕНИЕ И СПОСОБЫ ПОДКЛЮЧЕНИЯ НА СТРАНИЦЕ. LET, CONST. БАЗОВЫЕ ТИПЫ ДАННЫХ, ПРИВЕДЕНИЕ ТИПОВ. ПЕРЕМЕННЫЕ, ОБЛАСТЬ ВИДИМОСТИ ПЕРЕМЕННЫХ",
           "students": [
               {
                   "sub": "f62905b1-e223-40ca-910f-c8d84c6137c1",

stubs/mocks/lessons/access-code/get/success.json

@@ -20,7 +20,7 @@
           "expires": "2024-03-01T07:52:09.233Z",
           "lesson": {
               "_id": "65df996c584b172772d69706",
-              "name": "ВВЕДЕНИЕ В ВЕБ-РАЗРАБОТКУ. ИНСТРУМЕНТАРИЙ, ОБЗОР ВЕБ-ТЕХНОЛОГИЙ",
+              "name": "ВВОДНАЯ ПО JS.ПРИМЕНЕНИЕ И СПОСОБЫ ПОДКЛЮЧЕНИЯ НА СТРАНИЦЕ. LET, CONST. БАЗОВЫЕ ТИПЫ ДАННЫХ, ПРИВЕДЕНИЕ ТИПОВ. ПЕРЕМЕННЫЕ, ОБЛАСТЬ ВИДИМОСТИ ПЕРЕМЕННЫХ",
               "students": [],
               "date": "2024-02-28T20:37:00.057Z",
               "created": "2024-02-28T20:37:00.057Z",

stubs/mocks/lessons/list/success.json

@@ -592,6 +592,155 @@
                 "email": "sharova@mail.ru"
             }
             
+        ],
+          "date": "2024-03-08T21:18:07.033Z",
+          "created": "2024-03-05T21:18:07.033Z",
+          "__v": 22
+      },
+      {
+          "_id": "65e78c0fced789d2f6791tt5",
+          "name": "ВВОДНАЯ ПО JS.ПРИМЕНЕНИЕ И СПОСОБЫ ПОДКЛЮЧЕНИЯ НА СТРАНИЦЕ. LET, CONST. БАЗОВЫЕ ТИПЫ ДАННЫХ, ПРИВЕДЕНИЕ ТИПОВ. ПЕРЕМЕННЫЕ, ОБЛАСТЬ ВИДИМОСТИ ПЕРЕМЕННЫХ",
+          "students": [
+            {
+                "sub": "fcde3f22-d9ba-412a-a572-c59e515a290f",
+                "email_verified": true,
+                "name": "Мария Капитанова",
+                "preferred_username": "maryaKapitan@gmail.com",
+                "given_name": "Мария",
+                "family_name": "Капитанова",
+                "email": "maryaKapitan@gmail.com",
+                "picture": "https://lh3.googleusercontent.com/a/ACg8ocJgIjjOFD2YUSyRF5kH4jaysE6X5p-kq0Cg0CFncfMi=s96-c"
+            },
+            {
+                "sub": "5b072deb-33ee-443e-9718-3b5720a3dfb7",
+                "email_verified": true,
+                "name": "Евгений Кореной",
+                "preferred_username": "koren@gmail.com",
+                "given_name": "Кореной",
+                "family_name": "Евгений",
+                "email": "koren@gmail.com",
+                "picture": "https://lh3.googleusercontent.com/a/ACg8ocJpVhDeG-Rpjjm2Un6r8ACz_s_injuIFKpzXf3qmyCn3Cg=s96-c"
+            },
+            {
+                "sub": "7adf0cd1-cf07-4079-88d8-1a5c9b8f42c2",
+                "email_verified": true,
+                "name": "Ирина Игнатьева",
+                "preferred_username": "irign@gmailcom",
+                "given_name": "Ирина",
+                "family_name": "Игнатьева",
+                "email": "irign@gmailcom",
+                "picture": "https://lh3.googleusercontent.com/a/ACg8ocL45E4Gt8D5oyIl3ipkcGsv4ShWGs3bdlwEMA_1rzGZ=s96-c"
+            },
+            {
+                "sub": "95ccc005-95b9-4305-9447-364a32033911",
+                "email_verified": true,
+                "name": "Иван Петров",
+                "preferred_username": "petrov@mail.ru",
+                "given_name": "Иван",
+                "family_name": "Петров",
+                "email": "petrov@mail.ru",
+                "picture": "https://lh3.googleusercontent.com/a/ACg8ocIgQn5mfDAh2djx-3ofG9z1Em26ZyuUgVPd-6rDOl6z=s96-c"
+            },
+            {
+                "sub": "ede1ef2c-6ecf-484a-8fb8-282a77e1caa1",
+                "email_verified": true,
+                "name": "Константин Тимуров",
+                "preferred_username": "konstantK@gmail.com",
+                "given_name": "Константин",
+                "family_name": "Тимуров",
+                "email": "konstantK@gmail.com",
+                "picture": "https://lh3.googleusercontent.com/a/ACg8ocJjnOfqaoAU_D4STrJPN9fPOeJ8tv60WbWVZu2ZWcHs=s96-c"
+            },
+            {
+                "sub": "92cc6a15-805c-4439-b592-b23f32d6d208",
+                "email_verified": true,
+                "name": "Александра Питерская",
+                "preferred_username": "piteralex@gmail.com",
+                "given_name": "Александра",
+                "family_name": "Питерская",
+                "email": "piteralex@gmail.com",
+                "picture": "https://lh3.googleusercontent.com/a/ACg8ocKhbCbWvBBc_m7bjU5sLCE-dQ-KygBk-aUCSR8XaYtq=s96-c"
+            },
+            {
+                "sub": "4a3ba8b8-4120-4877-a160-be9ba4d5b3e3",
+                "email_verified": true,
+                "name": "Анастасия Светлых",
+                "preferred_username": "anastasya@gmail.ocm",
+                "given_name": "Анастасия",
+                "family_name": "Светлых",
+                "email": "anastasya@gmail.ocm",
+                "picture": "https://lh3.googleusercontent.com/a/ACg8ocJnsM8UGhbH806yLVgWZ17g3-gJFVcG0Uz5kvqT7dvC=s96-c"
+            },
+            {
+                "sub": "b4634921-00b3-4082-9284-8ac47f269394",
+                "email_verified": true,
+                "name": "Эмилия Снежко",
+                "preferred_username": "emi@mail.ru",
+                "given_name": "Эмилия",
+                "family_name": "Снежко",
+                "email": "emi@mail.ru",
+                "picture": "https://lh3.googleusercontent.com/a/ACg8ocI98dzSFQDPr2LXMPFEUX8KLY6bY2m08O_aAj2B5KVNKg=s96-c"
+            },
+            {
+                "sub": "bf1a95aa-39a2-4528-9b8d-319409995df5",
+                "email_verified": true,
+                "name": "Юлия Бобова",
+                "preferred_username": "bobova@gmail.com",
+                "given_name": "Юлия",
+                "family_name": "Бобова",
+                "email": "bobova@gmail.com",
+                "picture": "https://lh3.googleusercontent.com/a/ACg8ocJ_Ud4iI-jgqcJ3QJcWpESbRLX_C1BnB8_7uTTC-4Dn=s96-c"
+            },
+            {
+                "sub": "c273a3e3-f7ba-4057-8c57-a1f43b6174a5",
+                "email_verified": true,
+                "name": "Анна Самоварова",
+                "preferred_username": "samovar@gmail.com",
+                "given_name": "Анна",
+                "family_name": "Самоварова",
+                "email": "samovar@gmail.com",
+                "picture": "https://lh3.googleusercontent.com/a/ACg8ocJOhIMdQkXPd55wTMgTTkUCnqbsu4EncgEPm67iz_mK=s96-c"
+            },
+            {
+                "sub": "8555885b-715c-4dee-a7c5-9563a6a05211",
+                "email_verified": true,
+                "name": "Евгения Жужова",
+                "preferred_username": "zhuzhova@gmail.com",
+                "given_name": "Евгения",
+                "family_name": "Жужова",
+                "email": "zhuzhova@gmail.com",
+                "picture": "https://lh3.googleusercontent.com/a/ACg8ocJUtJBAVBm642AxoGpMDDMV8CPu3MEoLjU3hmO7oisG=s96-c"
+            },
+            {
+                "sub": "12dee54f-64e9-4be3-9cb0-02ff07ab24fe",
+                "email_verified": true,
+                "name": "Эдгар Петренко",
+                "preferred_username": "petrenk@mail.ru",
+                "given_name": "Эдгар",
+                "family_name": "Петренко",
+                "email": "petrenk@mail.ru",
+                "picture": "https://lh3.googleusercontent.com/a/ACg8ocLgKAZag32kpGVHMVbh_GsU-rX_MAtmeVIPoov0ZPBYIA=s96-c"
+            },
+            {
+                "sub": "4082b72a-4730-4841-ad68-06a0e19263df",
+                "email_verified": true,
+                "name": "Елена Вавилон",
+                "preferred_username": "elenvavil@mail.ru",
+                "given_name": "Елена",
+                "family_name": "Вавилон",
+                "email": "elenvavil@mail.ru",
+                "picture": "https://lh3.googleusercontent.com/a/ACg8ocKXcmzcqRch2--j2Ge2m9e8MIOZ8y1MjsQ0cSEoXOmW=s96-c"
+            },
+            {
+                "sub": "9e8a08d8-d76a-4f26-99c5-9a1d3c067104",
+                "email_verified": true,
+                "name": "Ольга Шарова",
+                "preferred_username": "julyashap",
+                "given_name": "Ольга",
+                "family_name": "Шарова",
+                "email": "sharova@mail.ru"
+            }
+            
         ],
           "date": "2024-03-08T21:18:07.033Z",
           "created": "2024-03-05T21:18:07.033Z",
@@ -599,3 +748,4 @@
       }
   ]
 }
+