better Jenkins file

Reviewed-on: #28

Jenkinsfile

@@ -1,37 +1,57 @@
 pipeline {
-  agent {
-    docker {
-      image 'node:18'
-    }
-  }
-
-  stages {
-    stage('install') {
-      steps {
-        sh 'node -v'
-        sh 'npm -v'
-        sh 'npm ci'
-      }
+    agent {
+        docker {
+            image 'node:20'
+        }
     }
 
-    stage('eslint') {
-      steps {
-        sh 'npm run eslint'
-      }
-    }
+    stages {
+        stage('install') {
+            steps {
+                sh 'node -v'
+                sh 'npm -v'
+                script {
+                    String tag = sh(returnStdout: true, script: 'git tag --contains').trim()
+                    String branchName = sh(returnStdout: true, script: 'git rev-parse --abbrev-ref HEAD').trim()
+                    String commit = sh(returnStdout: true, script: 'git log -1 --oneline').trim()
+                    String commitMsg = commit.substring(commit.indexOf(' ')).trim()
 
-    stage('build') {
-      steps {
-        sh 'npm run build'
-      }
-    }
+                    if (tag) {
+                        currentBuild.displayName = "#${BUILD_NUMBER}, tag ${tag}"
+                    } else {
+                        currentBuild.displayName = "#${BUILD_NUMBER}, branch ${branchName}"
+                    }
 
-    stage('clean-all') {
-      steps {
-        sh 'rm -rf .[!.]*'
-        sh 'rm -rf ./*'
-        sh 'ls -a'
-      }
+                    String author = sh(returnStdout: true, script: "git log -1 --pretty=format:'%an'").trim()
+                    currentBuild.description = "${author}<br />${commitMsg}"
+                    echo 'starting installing'
+                    sh 'npm ci'
+                }
+            }
+        }
+
+        stage('checks') {
+            parallel {
+                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

@@ -19,7 +19,7 @@ npm install
 пропишите в hosts строку
 
 ```
-127.0.0.1 ift-b1.kc.inno-js.test
+127.0.0.1 journal.test
 ```
 
 ## Запуск
@@ -28,4 +28,4 @@ npm install
 npm start
 ```
 
-откройте в браузере [проект](http://ift-b1.kc.inno-js.test)
+откройте в браузере [проект](http://journal.test)

ijl.config.js

@@ -1,22 +1,31 @@
 const pkg = require('./package')
 
 module.exports = {
-    apiPath: 'stubs/api',
-    webpackConfig: {
-        output: {
-            publicPath: `/static/${pkg.name}/${process.env.VERSION || pkg.version}/`
-        }
+  apiPath: 'stubs/api',
+  webpackConfig: {
+    output: {
+      publicPath: `/static/${pkg.name}/${process.env.VERSION || pkg.version}/`,
     },
-    navigations: {
-        'journal.main': '/journal.pl'
+  },
+  navigations: {
+    'journal.main': '/journal.pl',
+  },
+  features: {
+    journal: {
+      'lesson.bar': {
+        on: true,
+        value: '',
+        key: 'lesson.bar',
+      },
+      'group.by.date': {
+        on: true,
+        value: '',
+        key: 'group.by.date',
+      },
     },
-    features: {
-        'journal': {
-            // add your features here in the format [featureName]: { value: string }
-        },
-    },
-    config: {
-    "journal.back.url": "/api",
-    "journal.polling-interval": "10000"
-  }
+  },
+  config: {
+    'journal.back.url': '/api',
+    'journal.polling-interval': '10000',
+  },
 }

package.json

@@ -1,51 +1,53 @@
 {
     "name": "journal.pl",
-    "version": "2.0.0",
-    "description": "inno-js platform journal ui repo",
+    "version": "2.4.5",
+    "description": "bro-js platform journal ui repo",
     "main": "./src/index.tsx",
     "scripts": {
-        "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",
+        "start": "brojs server --port=8099 --with-open-browser",
+        "build": "npm run clean && brojs build --dev",
+        "build:prod": "npm run clean && brojs build",
         "clean": "rimraf dist",
         "test": "echo ok",
         "eslint": "npx eslint ."
     },
     "repository": {
         "type": "git",
-        "url": "ssh://git@85.143.175.152:10022/omni-tech/journal.pl.git"
+        "url": "ssh://git@85.143.175.152:222/bro-js/journal.pl.git"
     },
     "keywords": [],
     "author": "",
     "license": "MIT",
     "devDependencies": {
-        "@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": {
+        "@brojs/cli": "^0.0.4-alpha.9",
         "@chakra-ui/icons": "^2.1.1",
         "@chakra-ui/react": "^2.8.2",
         "@emotion/react": "^11.11.4",
         "@emotion/styled": "^11.11.0",
+        "@nivo/bar": "^0.85.1",
         "@reduxjs/toolkit": "^2.2.1",
         "@types/react": "^18.2.60",
         "@types/react-dom": "^18.2.19",
         "dayjs": "^1.11.10",
-        "express": "^4.18.2",
+        "express": "^4.19.2",
         "js-sha256": "^0.11.0",
         "keycloak-js": "^23.0.7",
         "prettier": "^3.2.5",
         "qrcode": "^1.5.3",
-        "react": "^18.2.0",
-        "react-dom": "^18.2.0",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
         "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",
-        "typescript": "^5.3.3"
+        "typescript": "^5.3.3",
+        "webpack-hot-middleware": "^2.26.1"
     }
 }

src/__data__/api/api.ts

@@ -1,5 +1,5 @@
 import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
-import { getConfigValue } from '@ijl/cli'
+import { getConfigValue } from '@brojs/cli'
 
 import { keycloak } from '../kc'
 import {
@@ -81,7 +81,7 @@ export const api = createApi({
     updateLesson: builder.mutation<BaseResponse<Lesson>, Partial<Lesson> & Pick<Lesson, '_id'>>({
       query: (data) => ({
         method: 'PUT',
-        url: `/lesson/${data._id}`,
+        url: '/lesson',
         body: data,
       }),
       invalidatesTags: ['LessonList'],

src/__data__/kc.ts

@@ -1,8 +1,8 @@
 import Keycloak from 'keycloak-js';
 
 export const keycloak = new Keycloak({
-  url: 'https://kc.inno-js.ru',
-  realm: 'inno-js',
+  url: 'https://kc.bro-js.ru',
+  realm: 'bro-js',
   clientId: 'journal'
 });
 

src/__data__/model.ts

@@ -74,6 +74,7 @@ export interface User {
   given_name: string;
   family_name: string;
   email: string;
+  picture?: string;
 }
 
 export interface Course {

src/app.tsx

@@ -45,7 +45,7 @@ const App = ({ store }) => {
                               /* rgba(255, 255, 255, 0) 65% */
                           );
                           height: 100%;
-                          font-family: KiyosunaSans, Montserrat, RFKrabuler, sans-serif;
+                          /* font-family: KiyosunaSans, Montserrat, RFKrabuler, sans-serif; */
                           font-weight: 600;
                       }
                       #app {

src/components/user-card/index.tsx

@@ -0,0 +1 @@
+export { UserCard } from './user-card'

src/components/user-card/style.ts

@@ -0,0 +1,53 @@
+import styled from '@emotion/styled'
+import { css, keyframes } from '@emotion/react'
+
+export const Avatar = styled.img`
+  width: 96px;
+  height: 96px;
+  margin: 0 auto;
+  border-radius: 6px;
+`
+
+export const Wrapper = styled.div<{ warn?: boolean; width?: string | number }>`
+  list-style: none;
+  background-color: #ffffff;
+  padding: 16px;
+  border-radius: 12px;
+  box-shadow: 2px 2px 6px #0000005c;
+  transition: all 0.5;
+  position: relative;
+  width: 180px;
+  min-height: 190px;
+  max-height: 200px;
+  margin-right: 12px;
+  padding-bottom: 22px;
+  ${({ width }) =>
+    width
+      ? css`
+          width: ${width};
+        `
+      : ''}
+
+  ${(props) =>
+    props.warn
+      ? css`
+          background-color: #000000;
+          opacity: 0.7;
+          color: #e4e4e4;
+        `
+      : ''}
+`
+
+export const AddMissedButton = styled.button`
+  position: absolute;
+  bottom: 8px;
+  right: 12px;
+  border: none;
+  background-color: #00000000;
+  opacity: 0.2;
+
+  :hover {
+    cursor: pointer;
+    opacity: 1;
+  }
+`

src/components/user-card/user-card.tsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import { sha256 } from 'js-sha256'
+
+import { User } from '../../__data__/model'
+
+import { AddMissedButton, Avatar, Wrapper } from './style'
+
+export function getGravatarURL(email, user) {
+  if (!email) return void 0
+  const address = String(email).trim().toLowerCase()
+  const hash = sha256(address)
+
+  return `https://www.gravatar.com/avatar/${hash}?d=robohash`
+}
+
+export const UserCard = ({
+  student,
+  present,
+  onAddUser,
+  wrapperAS,
+  width
+}: {
+  student: User
+  present: boolean
+  width?: string | number
+  onAddUser?: (user: User) => void
+  wrapperAS?: React.ElementType<any, keyof React.JSX.IntrinsicElements>;
+}) => {
+  return (
+    <Wrapper warn={!present} as={wrapperAS} width={width}>
+      <Avatar src={student.picture || getGravatarURL(student.email, null)} />
+      <p style={{ marginTop: 6 }}>
+        {student.name || student.preferred_username}{' '}
+      </p>
+      {onAddUser && !present && (
+        <AddMissedButton onClick={() => onAddUser(student)}>
+          add
+        </AddMissedButton>
+      )}
+    </Wrapper>
+  )
+}
+
+UserCard.defaultProps = {
+  wrapperAS: 'div',
+  onAddUser: void 0,
+}

src/dashboard.tsx

@@ -1,6 +1,8 @@
 import React, { useEffect, Suspense } from 'react'
 import { Routes, Route, useNavigate } from 'react-router-dom'
 import { Provider } from 'react-redux'
+import { getNavigationsValue } from '@brojs/cli'
+import { Box, Container, Spinner, VStack } from '@chakra-ui/react'
 
 import {
   CourseListPage,
@@ -8,20 +10,8 @@ import {
   LessonListPage,
   UserPage,
 } from './pages'
-import { getNavigationsValue } from '@ijl/cli'
-import { Box, Container, Spinner, VStack } from '@chakra-ui/react'
 
-const Redirect = ({ path }) => {
-  const navigate = useNavigate()
-
-  useEffect(() => {
-    navigate(path)
-  }, [])
-
-  return null
-}
-
-const Wrapper = ({ children }) => (
+const Wrapper = ({ children }: { children: React.ReactElement }) => (
   <Suspense
     fallback={
       <Container>

src/pages/course-list.tsx

@@ -1,7 +1,7 @@
 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 { getNavigationsValue } from '@brojs/cli'
 import {
   Box,
   CardHeader,
@@ -29,7 +29,7 @@ import {
 } from '@chakra-ui/react'
 import { useForm, Controller } from 'react-hook-form'
 
-import { ErrorSpan, MainWrapper } from './style'
+import { ErrorSpan } from './style'
 
 import { useAppSelector } from '../__data__/store'
 import { api } from '../__data__/api/api'

src/pages/lesson-details.tsx

@@ -2,39 +2,46 @@ import React, { useEffect, useState, useRef, useMemo } from 'react'
 import { useParams, Link } from 'react-router-dom'
 import dayjs from 'dayjs'
 import QRCode from 'qrcode'
-import { getConfigValue, getNavigationsValue } from '@ijl/cli'
+import { sha256 } from 'js-sha256'
+import { getConfigValue, getNavigationsValue } from '@brojs/cli'
 import {
   Box,
   Breadcrumb,
   BreadcrumbItem,
   BreadcrumbLink,
   Container,
-  HStack,
   VStack,
   Heading,
+  Stack,
 } from '@chakra-ui/react'
 
+import { api } from '../__data__/api/api'
+import { User } from '../__data__/model'
+import { UserCard } from '../components/user-card'
+
 import {
   QRCanvas,
-  LessonItem,
-  Lessonname,
-  AddMissedButton,
-  UnorderList,
+  StudentList,
   BreadcrumbsWrapper,
 } from './style'
-import { api } from '../__data__/api/api'
-import { User } from '../__data__/model'
+
+export function getGravatarURL(email, user) {
+  if (!email) return void 0
+  const address = String(email).trim().toLowerCase()
+  const hash = sha256(address)
+
+  // Grab the actual image URL
+  return `https://www.gravatar.com/avatar/${hash}?d=robohash`
+}
 
 const LessonDetail = () => {
   const { lessonId, courseId } = useParams()
   const canvRef = useRef(null)
-  const [lesson, setLesson] = useState(null)
   const {
     isFetching,
-    isLoading,
     data: accessCode,
-    error,
     isSuccess,
+    refetch,
   } = api.useCreateAccessCodeQuery(
     { lessonId },
     {
@@ -49,6 +56,13 @@ const LessonDetail = () => {
     () => `${location.origin}/journal/u/${lessonId}/${accessCode?.body?._id}`,
     [accessCode, lessonId],
   )
+
+  useEffect(() => {
+    if (manualAddRqst.isSuccess) {
+      refetch()
+    }
+  }, [manualAddRqst.isSuccess])
+
   useEffect(() => {
     if (!isFetching && isSuccess) {
       QRCode.toCanvas(
@@ -83,7 +97,7 @@ const LessonDetail = () => {
       }
     }
 
-    return allStudents
+    return allStudents.sort((a, b) => (a.present ? -1 : 1))
   }, [accessCode?.body, AllStudents.data])
 
   return (
@@ -110,7 +124,7 @@ const LessonDetail = () => {
           </BreadcrumbItem>
         </Breadcrumb>
       </BreadcrumbsWrapper>
-      <Container maxW="container.xl" centerContent px="200">
+      <Container maxW="2280px">
         <VStack align="left">
           <Heading as="h3" mt="4" mb="3">
             Тема занятия:
@@ -125,27 +139,22 @@ const LessonDetail = () => {
             человек
           </Box>
         </VStack>
-        <HStack spacing="8">
+        <Stack spacing="8" sx={{ flexDirection: { sm: 'column', md: 'row' } }}>
           <a href={userUrl}>
             <QRCanvas ref={canvRef} />
           </a>
-          <UnorderList>
+          <StudentList>
             {studentsArr.map((student) => (
-              <LessonItem key={student.sub} warn={!student.present}>
-                <Lessonname>
-                  {student.name || student.preferred_username}{' '}
-                  {!student.present && (
-                    <AddMissedButton
-                      onClick={() => manualAdd({ lessonId, user: student })}
-                    >
-                      add
-                    </AddMissedButton>
-                  )}
-                </Lessonname>
-              </LessonItem>
+              <UserCard
+                wrapperAS="li"
+                key={student.sub}
+                student={student}
+                present={student.present}
+                onAddUser={(user: User) => manualAdd({ lessonId, user })}
+              />
             ))}
-          </UnorderList>
-        </HStack>
+          </StudentList>
+        </Stack>
       </Container>
     </>
   )

src/pages/lesson-list.tsx

@@ -1,7 +1,13 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react'
+import React, {
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+import { ResponsiveBar } from '@nivo/bar'
 import dayjs from 'dayjs'
 import { Link, useParams } from 'react-router-dom'
-import { getNavigationsValue } from '@ijl/cli'
+import { getNavigationsValue, getFeatures } from '@brojs/cli'
 import { useForm, Controller } from 'react-hook-form'
 import {
   Breadcrumb,
@@ -54,6 +60,11 @@ import { Lesson } from '../__data__/model'
 
 import { ErrorSpan, BreadcrumbsWrapper } from './style'
 
+const features = getFeatures('journal')
+
+const barFeature = features?.['lesson.bar']
+const groupByDate = features?.['group.by.date']
+
 interface NewLessonForm {
   name: string
   date: string
@@ -65,6 +76,8 @@ interface LessonFormProps {
   onCancel: () => void
   onSubmit: (lesson: Lesson) => void
   error?: string
+  title: string
+  nameButton: string
 }
 
 const LessonForm = ({
@@ -73,6 +86,8 @@ const LessonForm = ({
   onCancel,
   onSubmit,
   error,
+  title,
+  nameButton,
 }: LessonFormProps) => {
   const {
     control,
@@ -90,7 +105,7 @@ const LessonForm = ({
     <Card align="left">
       <CardHeader display="flex">
         <Heading as="h2" mt="0">
-          Создание лекции
+          {title}
         </Heading>
         <CloseButton
           ml="auto"
@@ -153,7 +168,7 @@ const LessonForm = ({
                 colorScheme="blue"
                 isLoading={isLoading}
               >
-                Создать
+                {nameButton}
               </Button>
             </Box>
           </VStack>
@@ -168,7 +183,7 @@ const LessonForm = ({
 const LessonList = () => {
   const { courseId } = useParams()
   const user = useAppSelector((s) => s.user)
-  const { data, isLoading, error } = api.useLessonListQuery(courseId)
+  const { data, isLoading, error, isSuccess } = api.useLessonListQuery(courseId)
   const [createLesson, crLQuery] = api.useCreateLessonMutation()
   const [deleteLesson, deletingRqst] = api.useDeleteLessonMutation()
   const [updateLesson, updateLessonRqst] = api.useUpdateLessonMutation()
@@ -179,6 +194,37 @@ const LessonList = () => {
   const toastRef = useRef(null)
   const createdLessonRef = useRef(null)
   const [editLesson, setEditLesson] = useState<Lesson>(null)
+  const sorted = useMemo(() => [...(data?.body || [])]?.sort((a, b) => a.date > b.date ? 1 : -1), [data, data?.body])
+
+  const lessonCalc = useMemo(() => {
+    if (!isSuccess) {
+      return []
+    }
+
+
+    if (!groupByDate) {
+      return [{ date: '', data: sorted }]
+    }
+
+    const lessonsData = []
+    for (let i = 0; i < sorted.length; i++) {
+      const element = sorted[i]
+      const find = lessonsData.find(
+        (item) => dayjs(element.date).diff(dayjs(item.date), 'day') === 0,
+      )
+
+      if (find) {
+        find.data.push(element)
+      } else {
+        lessonsData.push({
+          date: element.date,
+          data: [element],
+        })
+      }
+    }
+
+    return lessonsData.sort((a, b) => a.date < b.date? 1 : -1)
+  }, [groupByDate, isSuccess, sorted])
 
   const onSubmit = (lessonData) => {
     toastRef.current = toast({
@@ -329,7 +375,7 @@ const LessonList = () => {
           </BreadcrumbItem>
         </Breadcrumb>
       </BreadcrumbsWrapper>
-      <Container maxW="container.xl">
+      <Container maxW="container.xl" position="relative">
         {isTeacher(user) && (
           <Box mt="15" mb="15">
             {showForm ? (
@@ -343,6 +389,8 @@ const LessonList = () => {
                 }}
                 error={(crLQuery.error as any)?.error}
                 lesson={editLesson}
+                title={editLesson ? 'Редактирование лекции' : 'Создание лекции'}
+                nameButton={editLesson ? 'Редактировать' : 'Создать'}
               />
             ) : (
               <Box p="2" m="2">
@@ -357,7 +405,17 @@ const LessonList = () => {
             )}
           </Box>
         )}
-        <TableContainer whiteSpace="wrap">
+        {barFeature && sorted?.length && (
+          <Box height="300">
+            <Bar
+              data={sorted.map((lesson, index) => ({
+                lessonIndex: `#${index + 1}`,
+                count: lesson.students.length,
+              }))}
+            />
+          </Box>
+        )}
+        <TableContainer whiteSpace="wrap" pb={13}>
           <Table variant="striped" colorScheme="cyan">
             <Thead>
               <Tr>
@@ -370,53 +428,62 @@ const LessonList = () => {
                   Дата
                 </Th>
                 <Th>Название</Th>
-                <Th>action</Th>
+                {isTeacher(user) && <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
-                          onClick={() => {
-                            setShowForm(true)
-                            setEditLesson(lesson)
-                          }}
-                        >
-                          Edit
-                        </MenuItem>
-                        <MenuItem onClick={() => setlessonToDelete(lesson)}>
-                          Delete
-                        </MenuItem>
-                      </MenuList>
-                    </Menu>
-                  </Td>
-                  <Td isNumeric>{lesson.students.length}</Td>
-                </Tr>
+              {lessonCalc?.map(({ data: lessons, date }) => (
+                <React.Fragment key={date}>
+                  {date && <Tr><Td colSpan={isTeacher(user) ? 5 : 3}>{dayjs(date).format('DD MMMM YYYY')}</Td></Tr>}
+                  {lessons.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(groupByDate ? 'HH:mm' : 'HH:mm DD.MM.YY')}
+                      </Td>
+                      <Td>{lesson.name}</Td>
+                      {isTeacher(user) && (
+                        <Td>
+                          <Menu>
+                            <MenuButton as={Button}>
+                              <EditIcon />
+                            </MenuButton>
+                            <MenuList>
+                              <MenuItem
+                                onClick={() => {
+                                  setShowForm(true)
+                                  setEditLesson(lesson)
+                                }}
+                              >
+                                Edit
+                              </MenuItem>
+                              <MenuItem
+                                onClick={() => setlessonToDelete(lesson)}
+                              >
+                                Delete
+                              </MenuItem>
+                            </MenuList>
+                          </Menu>
+                        </Td>
+                      )}
+                      <Td isNumeric>{lesson.students.length}</Td>
+                    </Tr>
+                  ))}
+                </React.Fragment>
               ))}
             </Tbody>
           </Table>
@@ -427,3 +494,29 @@ const LessonList = () => {
 }
 
 export default LessonList
+
+const Bar = ({ data }) => (
+  <ResponsiveBar
+    data={data}
+    keys={['count']}
+    indexBy="lessonIndex"
+    margin={{ top: 50, right: 130, bottom: 50, left: 60 }}
+    padding={0.3}
+    valueScale={{ type: 'linear' }}
+    indexScale={{ type: 'band', round: true }}
+    colors={{ scheme: 'set3' }}
+    axisTop={null}
+    axisRight={null}
+    labelSkipWidth={12}
+    labelSkipHeight={12}
+    labelTextColor={{
+      from: 'color',
+      modifiers: [['brighter', 1.4]],
+    }}
+    role="application"
+    ariaLabel="График посещаемости лекций"
+    barAriaLabel={(e) =>
+      e.id + ': ' + e.formattedValue + ' on lection: ' + e.indexValue
+    }
+  />
+)

src/pages/style.ts

@@ -1,63 +1,8 @@
 import styled from '@emotion/styled'
-import { css, keyframes } from '@emotion/react'
-import {
-  Card
-} from '@chakra-ui/react'
+import { keyframes } from '@emotion/react'
 
 export const BreadcrumbsWrapper = styled.div`
   padding: 12px;
-`;
-
-export const MainWrapper = styled.main`
-  display: flex;
-  justify-content: center;
-  height: 100%;
-`
-
-export const InputWrapper = styled.div`
-  position: relative;
-  padding: 12px;
-  display: flex;
-  align-items: center;
-
-  @media screen and (max-width: 600px) {
-    flex-direction: column;
-  }
-`
-export const InputLabel = styled.label`
-  position: absolute;
-  top: -8px;
-  left: 24px;
-  z-index: 2;
-`
-export const InputElement = styled.input`
-  border: 1px solid #ccc;
-  padding: 12px;
-  font-size: 24px;
-  border-radius: 8px;
-  color: #117623;
-  max-width: 90vw;
-  box-shadow: inset 7px 8px 20px 8px #4990db12;
-`
-
-export const StyledCard = styled(Card)`
-  box-shadow: 2px 2px 6px #0000005c;
-  padding: 16px;
-  border-radius: 12px;
-  min-width: 400px;
-`
-
-export const ArrowImg = styled.img`
-  width: 48px;
-  height: 48px;
-`
-
-export const IconButton = styled.button`
-  border: none;
-  background-color: rgba(0, 0, 0, 0);
-  display: flex;
-  align-items: center;
-  height: 100%;
 `
 
 const reveal = keyframes`
@@ -70,77 +15,15 @@ const reveal = keyframes`
     }
 `
 
-export const StartWrapper = styled.div`
-  animation: ${reveal} 0.4s ease forwards;
-  height: calc(100vh - 300px);
-  position: relative;
-`
-
-export const Wrapper = styled.div`
-  display: flex;
-  flex-direction: row;
-  gap: 20px;
-  width: auto;
-`
-
-export const UnorderList = styled.ul`
+export const StudentList = styled.ul`
   padding-left: 0px;
   height: 600px;
-  overflow: auto;
+  justify-content: space-evenly;
   padding-right: 20px;
-`
-
-export const Svg = styled.svg`
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform-origin: 50% 50%;
-  transform: translate(-50%, -50%);
-`
-
-export const Papper = styled.div`
-  position: relative;
-  background-color: #ffffff;
-  border-radius: 12px;
-  padding: 32px 16px 16px;
-  box-shadow: 2px 2px 6px #0000005c;
-`
-
-export const LessonItem = styled.li<{ warn?: boolean }>`
-  list-style: none;
-  background-color: #ffffff;
-  padding: 16px;
-  border-radius: 12px;
-  box-shadow: 2px 2px 6px #0000005c;
-  margin-bottom: 12px;
-  transition: all 0.5;
-
-  ${(props) =>
-    props.warn
-      ? css`
-          background-color: #fde3c5;
-          color: #919191;
-          box-shadow: inset 3px 2px 7px #c9b5a9;
-        `
-      : ''}
-`
-
-export const AddMissedButton = styled.button`
-  float: right;
-  border: none;
-  background-color: #00000000;
-  opacity: 0.1;
-
-  :hover {
-    cursor: pointer;
-    opacity: 1;
-  }
-`
-
-export const Lessonname = styled.span`
-  display: inline-box;
-  margin-right: 12px;
-  margin-bottom: 20px;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 8px;
 `
 
 export const QRCanvas = styled.canvas`
@@ -154,29 +37,3 @@ export const ErrorSpan = styled.span`
   background-color: #d32f0b;
   border-radius: 11px;
 `
-
-export const Cross = styled.button`
-  position: absolute;
-  right: 19px;
-  top: 14px;
-  font-size: 24px;
-  padding: 7px;
-  cursor: pointer;
-  background-color: #fff;
-  border: none;
-
-  :hover {
-    background-color: #d7181812;
-    border-radius: 20px;
-  }
-`
-
-export const AddButton = styled.button`
-  background-color: transparent;
-  border: none;
-  cursor: pointer;
-
-  :hover {
-    box-shadow: 3px 2px 5px #00000038;
-  }
-`

src/pages/user-page.tsx

@@ -1,15 +1,20 @@
 import React from 'react'
 import { useParams } from 'react-router-dom'
 
-import {
-  ErrorSpan,
-  LessonItem,
-  Lessonname,
-  MainWrapper,
-  StartWrapper,
-} from './style'
 import { api } from '../__data__/api/api'
 import dayjs from 'dayjs'
+import {
+  Alert,
+  AlertIcon,
+  Box,
+  Center,
+  Container,
+  Heading,
+  Spinner,
+  Text,
+  Stack,
+} from '@chakra-ui/react'
+import { UserCard } from '../components/user-card'
 
 const UserPage = () => {
   const { lessonId, accessId } = useParams()
@@ -20,38 +25,67 @@ const UserPage = () => {
     skipPollingIfUnfocused: true,
   })
 
+  if (acc.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>
-        {acc.isLoading && <h1>Отправляем запрос</h1>}
-        {acc.isSuccess && <h1>Успешно</h1>}
+    <Container>
+      {acc.isLoading && <h1>Отправляем запрос</h1>}
+      {acc.isSuccess && <h1>Успешно</h1>}
+
+      {acc.error && (
+        <Box mb="6" mt="2">
+          <Alert status="warning">
+            <AlertIcon />
+            {(acc as any).error?.data?.body?.errorMessage ===
+            'Code is expired' ? (
+              'Не удалось активировать код доступа. Попробуйте отсканировать код ещё раз'
+            ) : (
+              <pre>{JSON.stringify(acc.error, null, 4)}</pre>
+            )}
+          </Alert>
+        </Box>
+      )}
+
+      <Box mb={6}>
+        <Text fontSize={18} fontWeight={600} as="h1" mt="4" mb="3">
+          Тема занятия: {ls.data?.body?.name}
+        </Text>
 
-        {acc.error && (
-          <div style={{ padding: 12, marginTop: 24, fontSize: 36 }}>
-            <ErrorSpan>
-              {(acc as any).error?.data?.body?.errorMessage ===
-              'Code is expired' ? (
-                'Не удалось активировать код доступа. Попробуйте отсканировать код ещё раз'
-              ) : (
-                <pre>{JSON.stringify(acc.error, null, 4)}</pre>
-              )}
-            </ErrorSpan>
-          </div>
-        )}
-        <h1>Тема занятия - {ls.data?.body?.name}</h1>
         <span>{dayjs(ls.data?.body?.date).format('DD MMMM YYYYг.')}</span>
+      </Box>
 
-        <ul style={{ paddingLeft: 0 }}>
-          {ls.data?.body?.students?.map((student, index) => (
-            <LessonItem key={index}>
-              <Lessonname>
-                {student.name || student.preferred_username}
-              </Lessonname>
-            </LessonItem>
-          ))}
-        </ul>
-      </StartWrapper>
-    </MainWrapper>
+      <Box
+        as="ul"
+        display="flex"
+        flexWrap="wrap"
+        justifyContent="center"
+        gap={3}
+      >
+        {ls.data?.body?.students?.map((student) => (
+          <UserCard
+            width="40%"
+            wrapperAS="li"
+            key={student.sub}
+            student={student}
+            present
+          />
+        ))}
+      </Box>
+    </Container>
   )
 }
 

stubs/api/index.js

@@ -49,7 +49,7 @@ router.delete('/lesson/:lessonId', (req, res) => {
   res.send({ success: true, body: { ok: true }})
 })
 
-router.put('/lesson/:lessonId', (req, res) => {
+router.put('/lesson', (req, res) => {
   res.send({ success: true, body: req.body })
 })
 

stubs/mocks/lessons/byid/success.json

@@ -17,7 +17,145 @@
               "given_name": "Александр",
               "family_name": "Примаков",
               "email": "primakovpro@gmail.com"
-          }
+          },{
+            "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-02-28T20:37:00.057Z",
       "created": "2024-02-28T20:37:00.057Z",