user error message

This commit is contained in:
Primakov Alexandr Alexandrovich 2024-03-01 12:16:13 +03:00
parent 7d0357e5ac
commit cfa2261cd5
4 changed files with 31 additions and 38 deletions

View File

@ -1,44 +1,24 @@
import React, { useCallback, useEffect, useState } from 'react'; import React from 'react'
import { useParams } from 'react-router-dom'; import { useParams } from 'react-router-dom'
import { ArrowImg, IconButton, InputElement, InputLabel, InputWrapper, LessonItem, Lessonname, MainWrapper, StartWrapper } from './style'; import {
import arrow from '../assets/36-arrow-right.svg'; ErrorSpan,
import { api } from '../__data__/api/api'; LessonItem,
import dayjs from 'dayjs'; Lessonname,
MainWrapper,
StartWrapper,
} from './style'
import { api } from '../__data__/api/api'
import dayjs from 'dayjs'
export const UserPage = () => { export const UserPage = () => {
const [socketId, setSocketId] = useState(null); const { lessonId, accessId } = useParams()
const [error, setError] = useState(null);
const { lessonId, accessId } = useParams();
const acc = api.useGetAccessQuery({ accessCode: accessId }) const acc = api.useGetAccessQuery({ accessCode: accessId })
const ls = api.useLessonByIdQuery(lessonId, { const ls = api.useLessonByIdQuery(lessonId, {
pollingInterval: 1000, pollingInterval: 1000,
skipPollingIfUnfocused: true skipPollingIfUnfocused: true,
}); })
useEffect(() => {
// socket.on('connect', () => {
// const id = localStorage.getItem('socketId');
// if (!id) {
// localStorage.setItem('socketId', socket.id);
// setSocketId(socket.id);
// } else {
// setSocketId(id);
// }
// const name = localStorage.getItem('name');
// if (name) {
// const socket = getSocket();
// socket.emit('add', { socketId: id || socket.id, name, lessonid: lessonId });
// }
// })
// socket.on('error', data => {
// setError(data)
// })
}, []);
const [value, setValue] = useState(localStorage.getItem('name') || '');
return ( return (
<MainWrapper> <MainWrapper>
@ -46,13 +26,25 @@ export const UserPage = () => {
{acc.isLoading && <h1>Отправляем запрос</h1>} {acc.isLoading && <h1>Отправляем запрос</h1>}
{acc.isSuccess && <h1>Успешно</h1>} {acc.isSuccess && <h1>Успешно</h1>}
{acc.error &&
(acc as any).error?.data?.body?.errorMessage ===
'Code is expired' && (
<div style={{ padding: 12, marginTop: 24, fontSize: 36 }}>
<ErrorSpan>
Не удалось активировать код доступа. Попробуйте отсканировать
код еще раз
</ErrorSpan>
</div>
)}
<h1>Тема занятия - {ls.data?.body?.name}</h1> <h1>Тема занятия - {ls.data?.body?.name}</h1>
<span>{dayjs(ls.data?.body?.date).format('DD MMMM YYYYг.')}</span> <span>{dayjs(ls.data?.body?.date).format('DD MMMM YYYYг.')}</span>
<ul style={{ paddingLeft: 0 }}> <ul style={{ paddingLeft: 0 }}>
{ls.data?.body?.students?.map((student, index) => ( {ls.data?.body?.students?.map((student, index) => (
<LessonItem key={index}> <LessonItem key={index}>
<Lessonname>{student.name || student.preferred_username}</Lessonname> <Lessonname>
{student.name || student.preferred_username}
</Lessonname>
</LessonItem> </LessonItem>
))} ))}
</ul> </ul>

View File

@ -4,7 +4,7 @@ import { css, keyframes } from '@emotion/react'
export const MainWrapper = styled.main` export const MainWrapper = styled.main`
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; /* align-items: center; */
height: 100%; height: 100%;
` `

View File

@ -21,10 +21,10 @@ router.post('/lesson/access-code', (req, res) => {
}) })
router.get('/lesson/access-code/:accessCode', (req, res) => { router.get('/lesson/access-code/:accessCode', (req, res) => {
res.send(require('../mocks/lessons/access-code/get/success.json')) res.status(400).send(require('../mocks/lessons/access-code/get/error.json'))
}) })
router.get('/api/lesson/:lessonId', (req, res) => { router.get('/lesson/:lessonId', (req, res) => {
res.send(require('../mocks/lessons/byid/success.json')) res.send(require('../mocks/lessons/byid/success.json'))
}) })

View File

@ -0,0 +1 @@
{ "success": false, "body": { "errorMessage": "Code is expired" } }