check 2

src/__data__/const.ts

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

src/index.tsx

@@ -1,16 +1,12 @@
 import React from 'react';
 import ReactDom from 'react-dom';
-import Keycloak from 'keycloak-js';
 
 import App from './app';
+import { keycloak } from './__data__/const';
 
 export default () => <App/>;
 
-const keycloak = new Keycloak({
+
-    url: 'https://kc.inno-js.ru',
-    realm: 'test',
-    clientId: 'jurnal'
-});
 
 const start = async () => {
   try {

src/pages/Journal.tsx

@@ -1,6 +1,6 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from "react";
-import dayjs from 'dayjs';
+import dayjs from "dayjs";
-import { Link } from 'react-router-dom'
+import { Link } from "react-router-dom";
 
 import {
   ArrowImg,
@@ -11,11 +11,12 @@ import {
   StartWrapper,
   LessonItem,
   Lessonname,
-} from './style';
+} from "./style";
 
-import arrow from '../assets/36-arrow-right.svg';
+import arrow from "../assets/36-arrow-right.svg";
 import { connect, getSocket } from "../socket";
-import { getConfigValue } from '@ijl/cli';
+import { getConfigValue } from "@ijl/cli";
+import { keycloak } from "../__data__/const";
 
 export const Journal = () => {
   const [lessons, setLessons] = useState(null);
@@ -23,36 +24,53 @@ export const Journal = () => {
   useEffect(() => {
     connect();
     const socket = getSocket();
-    socket.on('lessons', data => {
+    socket.on("lessons", (data) => {
-      setLessons(data)
+      setLessons(data);
-    })
+    });
 
-    fetch(`${getConfigValue('journal.back.url')}/check`)
+    const check = async () => {
+      if (keycloak.authenticated) {
+        keycloak;
+        const rq = await fetch(`${getConfigValue("journal.back.url")}/check`, {
+          headers: {
+            accept: "application/json",
+            authorization: `Bearer ${keycloak.token}`,
+          },
+        });
+        const data = await rq.json();
+
+        console.log("check", data);
+      }
+    };
+
+    check();
   }, []);
 
-  const [value, setValue] = useState('');
+  const [value, setValue] = useState("");
-  const handleChange = useCallback(event => {
+  const handleChange = useCallback(
-    setValue(event.target.value.toUpperCase())
+    (event) => {
-  }, [setValue]);
+      setValue(event.target.value.toUpperCase());
+    },
+    [setValue]
+  );
   const inputRef = useRef<HTMLInputElement>(null);
 
-  const handleSubmit = useCallback((event) => {
+  const handleSubmit = useCallback(
-    event.preventDefault();
+    (event) => {
+      event.preventDefault();
 
-    const socket = getSocket();
+      const socket = getSocket();
-    socket.emit('create-lesson', { lessonName: value });
+      socket.emit("create-lesson", { lessonName: value });
-    setValue('')
+      setValue("");
-  }, [value])
+    },
+    [value]
+  );
 
   return (
     <StartWrapper>
       <form onSubmit={handleSubmit}>
         <InputWrapper>
-          <InputLabel
+          <InputLabel htmlFor="input">Название новой лекции:</InputLabel>
-            htmlFor='input'
-          >
-            Название новой лекции:
-          </InputLabel>
           <InputElement
             value={value}
             onChange={handleChange}
@@ -69,14 +87,16 @@ export const Journal = () => {
       <ul style={{ paddingLeft: 0 }}>
         {lessons?.map((lesson) => (
           <LessonItem key={lesson.id}>
-            <Link to={`/journal/l/${lesson.id}`} style={{ display: 'flex' }}>
+            <Link to={`/journal/l/${lesson.id}`} style={{ display: "flex" }}>
               <Lessonname>{lesson.name}</Lessonname>
-              <span>{dayjs(lesson.ts).format('DD MMMM YYYYг.')}</span>
+              <span>{dayjs(lesson.ts).format("DD MMMM YYYYг.")}</span>
-              <span style={{ marginLeft: 'auto' }}>Участников - {lesson.padavans.length}</span>
+              <span style={{ marginLeft: "auto" }}>
+                Участников - {lesson.padavans.length}
+              </span>
             </Link>
           </LessonItem>
         ))}
       </ul>
     </StartWrapper>
-  )
+  );
 };