user error message

src/pages/UserPage.tsx

@@ -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 = () => {
-  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 ls = api.useLessonByIdQuery(lessonId, {
     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 (
     <MainWrapper>
@@ -46,13 +26,25 @@ export const UserPage = () => {
         {acc.isLoading && <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>
         <span>{dayjs(ls.data?.body?.date).format('DD MMMM YYYYг.')}</span>
 
         <ul style={{ paddingLeft: 0 }}>
           {ls.data?.body?.students?.map((student, index) => (
             <LessonItem key={index}>
-              <Lessonname>{student.name || student.preferred_username}</Lessonname>
+              <Lessonname>
+                {student.name || student.preferred_username}
+              </Lessonname>
             </LessonItem>
           ))}
         </ul>

src/pages/style.ts

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

stubs/api/index.js

@@ -21,10 +21,10 @@ router.post('/lesson/access-code', (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'))
 })
 

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

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