journal.pl/src/pages/course-list/course-list.tsx

import React, { useEffect, useRef, useState } from 'react'
import dayjs from 'dayjs'
import {
  Box,
  CardHeader,
  CardBody,
  Button,
  Card,
  Heading,
  Container,
  VStack,
  Input,
  CloseButton,
  FormControl,
  FormLabel,
  FormHelperText,
  FormErrorMessage,
  useToast,
  useColorMode,
} from '@chakra-ui/react'
import { useForm, Controller } from 'react-hook-form'

const MENU_SCRIPT_URL = 'https://admin.bro-js.ru/remote-assets/lib/serviceMenu/serviceMenu.js'

const loadServiceMenu = () => {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script')
    script.src = MENU_SCRIPT_URL
    script.onload = () => setTimeout(() => resolve(true), 1000)
    script.onerror = reject
    document.body.appendChild(script)
  })
}

import { ErrorSpan } from '../style'
declare global {
  interface Window {
    createServiceMenu?: (options: any) => {
      show: () => void;
      hide: () => void;
      update: () => void;
      destroy: () => void;
    };
  }
}

import { useAppSelector } from '../../__data__/store'
import { api } from '../../__data__/api/api'
import { isTeacher } from '../../utils/user'
import { AddIcon } from '@chakra-ui/icons'
import { PageLoader } from '../../components/page-loader/page-loader'
import { CourseCard } from './course-card'
import { keycloak } from '../../__data__/kc'

interface NewCourseForm {
  startDt: string
  name: string
}

export const CoursesList = () => {
  const toast = useToast()
  const user = useAppSelector((s) => s.user)
  const { data, isLoading } = api.useCoursesListQuery()
  const [createUpdateCourse, crucQuery] = api.useCreateUpdateCourseMutation()
  const [showForm, setShowForm] = useState(false)
  const toastRef = useRef(null)

  const [serviceMenu, setServiceMenu] = useState(false)

  useEffect(() => {
    loadServiceMenu().then(() => {
      setServiceMenu(true)
    }).catch(console.error)
  }, [])

  const {
    control,
    handleSubmit,
    reset,
    formState: { errors },
    getValues,
  } = useForm<NewCourseForm>({
    defaultValues: {
      startDt: dayjs().format('YYYY-MM-DD'),
      name: 'Название',
    },
  })

  const onSubmit = ({ startDt, name }) => {
    toastRef.current = toast({
      title: 'Отправляем',
      status: 'loading',
      duration: 9000,
    })
    createUpdateCourse({ name, startDt })
  }

  useEffect(() => {
    if (crucQuery.isSuccess) {
      const values = getValues()
      if (toastRef.current) {
        toast.update(toastRef.current, {
          title: 'Курс создан.',
          description: `Курс ${values.name} успешно создан`,
          status: 'success',
          duration: 9000,
          isClosable: true,
        })
      }
      reset()
    }
  }, [crucQuery.isSuccess])

  const serviceMenuContainerRef = useRef<HTMLDivElement>(null)
  const serviceMenuInstanceRef = useRef<any>(null)

  useEffect(() => {
    // Проверяем, что библиотека загружена и есть контейнер для меню
    if (window.createServiceMenu && serviceMenuContainerRef.current) {
      // Создаем меню сервисов
      serviceMenuInstanceRef.current = window.createServiceMenu({
        accessToken: keycloak.token,
        apiUrl: 'https://admin.bro-js.ru',
        targetElement: serviceMenuContainerRef.current,
        styles: {
          dotColor: '#333',
          hoverColor: '#eee',
          backgroundColor: '#fff',
          textColor: '#333',
        },
        translations: {
          menuTitle: 'Сервисы BRO',
          menuAriaLabel: 'Сервисы BRO',
        }
      });
    }

    // Очистка при размонтировании
    return () => {
      if (serviceMenuInstanceRef.current) {
        serviceMenuInstanceRef.current.destroy();
        serviceMenuInstanceRef.current = null;
      }
    };
  }, [keycloak.token, serviceMenu]);

  if (isLoading) {
    return (
      <PageLoader />
    )
  }

  return (
    <>
    <div style={{ position: 'absolute', top: 6, left: 6 }} id="dots" ref={serviceMenuContainerRef}></div>
    <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>
                      )}
                    />
                    <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>
              </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
          key={c.id}
          course={c}
          />
        ))}
      </VStack>
    </Container>
        </>
  )
}