journal.pl/src/pages/UserPage.tsx

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'

export const UserPage = () => {
  const { lessonId, accessId } = useParams()
  const acc = api.useGetAccessQuery({ accessCode: accessId })

  const ls = api.useLessonByIdQuery(lessonId, {
    pollingInterval: 1000,
    skipPollingIfUnfocused: true,
  })

  return (
    <MainWrapper>
      <StartWrapper>
        {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>
            </LessonItem>
          ))}
        </ul>
      </StartWrapper>
    </MainWrapper>
  )
}