get lessons list

ijl.config.js

@@ -16,8 +16,6 @@ module.exports = {
         },
     },
     config: {
-    "journal.socket.url": "ws://localhost",
-    "journal.socket.path": "/socket.io/",
     "journal.back.url": "/api",
   }
 }

src/__data__/api/api.ts

@@ -2,6 +2,7 @@ import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
 import { getConfigValue } from "@ijl/cli";
 
 import { keycloak } from "../kc";
+import { BaseResponse, Lesson } from "../model";
 
 export const api = createApi({
   reducerPath: "auth",
@@ -13,7 +14,7 @@ export const api = createApi({
     },
   }),
   endpoints: (builder) => ({
-    lessonList: builder.query({
+    lessonList: builder.query<BaseResponse<Lesson[]>, void>({
       query: () => '/lesson/list'
     })
     // signIn: builder.mutation<SignInResponce, SignInRequestBody>({

src/__data__/model.ts

@@ -11,7 +11,7 @@ interface TokenData {
   nonce: string;
   session_state: string;
   acr: string;
-  'allowed-origins': string[];
+  "allowed-origins": string[];
   realm_access: Realmaccess;
   resource_access: Resourceaccess;
   scope: string;
@@ -25,25 +25,34 @@ interface TokenData {
 }
 
 interface Resourceaccess {
-  'realm-management': Realmaccess;
-  jurnal: Realmaccess;
-  broker: Realmaccess;
-  account: Realmaccess;
-  'microfrontend-admin': Realmaccess
+  journal: Realmaccess;
 }
 
 interface Realmaccess {
-  roles: string[];
+  roles: (string | "teacher")[];
 }
 
 export interface UserData extends TokenData {
   sub: string;
   gravatar: string;
   email_verified: boolean;
-  attributes: Record<string, string[]>
+  attributes: Record<string, string[]>;
   name: string;
   preferred_username: string;
   given_name: string;
   family_name: string;
   email: string;
 }
+
+export type BaseResponse<Data> = {
+  success: boolean;
+  body: Data;
+};
+
+export interface Lesson {
+  _id: string;
+  name: string;
+  students: any[];
+  date: string;
+  created: string;
+}

src/__data__/store.ts

@@ -1,4 +1,5 @@
 import { configureStore } from '@reduxjs/toolkit';
+import { TypedUseSelectorHook, useSelector } from 'react-redux';
 
 import { api } from './api/api';
 import { userSlice } from './slices/user';
@@ -13,4 +14,6 @@ export const createStore= (preloadedState = {}) => configureStore({
         getDefaultMiddleware().concat(api.middleware),
 });
 
-export type Store = ReturnType<ReturnType<typeof createStore>['getState']>;
+export type Store = ReturnType<ReturnType<typeof createStore>['getState']>;
+
+export const useAppSelector: TypedUseSelectorHook<Store> = useSelector;

src/index.tsx

@@ -1,13 +1,15 @@
-import React from "react";
-import ReactDom from "react-dom";
-
-import App from "./app";
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+  
+import App from './app';
 import { keycloak } from "./__data__/kc";
 import { createStore } from "./__data__/store";
 
 export default (props) => <App {...props} />;
-
-export const mount = async (Сomponent) => {
+  
+let rootElement: ReactDOM.Root
+  
+export const mount = async (Сomponent, element = document.getElementById('app')) => {
   let user = null;
   try {
     await keycloak.init({ onLoad: "login-required" }); // 'login-required' });
@@ -18,15 +20,16 @@ export const mount = async (Сomponent) => {
   }
   const store = createStore({ user });
 
-  ReactDom.render(<Сomponent store={store} />, document.getElementById("app"));
+  const rootElement = ReactDOM.createRoot(element);
+  rootElement.render(<Сomponent store={store} />);
 
-  if (module.hot) {
-    module.hot.accept("./app", () => {
-      ReactDom.render(<App store={store} />, document.getElementById("app"));
-    });
+  if(module.hot) {
+      module.hot.accept('./app', ()=> {
+        rootElement.render(<Сomponent store={store} />);
+      })
   }
 };
 
 export const unmount = () => {
-  ReactDom.unmountComponentAtNode(document.getElementById("app"));
+  rootElement.unmount();
 };

src/pages/Journal.tsx

@@ -16,9 +16,14 @@ import {
 
 import arrow from "../assets/36-arrow-right.svg";
 import { keycloak } from "../__data__/kc";
+import { useAppSelector } from "../__data__/store";
+import { api } from '../__data__/api/api'
+import { isTeacher } from "../utils/user";
 
 export const Journal = () => {
   const [lessons, setLessons] = useState(null);
+  const user = useAppSelector((s) => s.user);
+  const { data, isLoading, error } = api.useLessonListQuery();
 
   useEffect(() => {
     const check = async () => {
@@ -34,7 +39,7 @@ export const Journal = () => {
 
         console.log("check", data);
       } else {
-        keycloak.onAuthSuccess = check
+        keycloak.onAuthSuccess = check;
       }
     };
 
@@ -55,9 +60,9 @@ export const Journal = () => {
       const data = await rq.json();
       setAnswer(data);
     } else {
-      setAnswer({ message: 'Пользователь не авторизован' })
+      setAnswer({ message: "Пользователь не авторизован" });
     }
-  }
+  };
 
   const [value, setValue] = useState("");
   const handleChange = useCallback(
@@ -81,36 +86,32 @@ export const Journal = () => {
 
   return (
     <StartWrapper>
-      <div>
-        <IconButton onClick={send} title="Запрос">
-          <ArrowImg src={arrow} />
-        </IconButton>
-        <pre>{JSON.stringify(answer, null, 4)}</pre>
-      </div>
-      <form onSubmit={handleSubmit}>
-        <InputWrapper>
-          <InputLabel htmlFor="input">Название новой лекции:</InputLabel>
-          <InputElement
-            value={value}
-            onChange={handleChange}
-            ref={inputRef}
-            id="input"
-            type="text"
-            autoComplete="off"
-          />
-          <IconButton type="submit">
-            <ArrowImg src={arrow} />
-          </IconButton>
-        </InputWrapper>
-      </form>
+      {isTeacher(user) && (
+        <form onSubmit={handleSubmit}>
+          <InputWrapper>
+            <InputLabel htmlFor="input">Название новой лекции:</InputLabel>
+            <InputElement
+              value={value}
+              onChange={handleChange}
+              ref={inputRef}
+              id="input"
+              type="text"
+              autoComplete="off"
+            />
+            <IconButton type="submit">
+              <ArrowImg src={arrow} />
+            </IconButton>
+          </InputWrapper>
+        </form>
+      )}
       <ul style={{ paddingLeft: 0 }}>
-        {lessons?.map((lesson) => (
-          <LessonItem key={lesson.id}>
-            <Link to={`/journal/l/${lesson.id}`} style={{ display: "flex" }}>
+        {data?.body?.map((lesson) => (
+          <LessonItem key={lesson._id}>
+            <Link to={isTeacher(user) ? `/journal/l/${lesson._id}` : ''} style={{ display: "flex" }}>
               <Lessonname>{lesson.name}</Lessonname>
-              <span>{dayjs(lesson.ts).format("DD MMMM YYYYг.")}</span>
+              <span>{dayjs(lesson.date).format("DD MMMM YYYYг.")}</span>
               <span style={{ marginLeft: "auto" }}>
-                Участников - {lesson.padavans.length}
+                Участников - {lesson.students.length}
               </span>
             </Link>
           </LessonItem>

src/utils/user.ts

@@ -0,0 +1,3 @@
+import { UserData } from "../__data__/model";
+
+export const isTeacher = (user?: UserData): boolean => user?.resource_access?.journal?.roles?.includes('teacher')