From 80713f7e0f067a4ee4215368abec187850894e3f Mon Sep 17 00:00:00 2001
From: primakov <primakovpro@gmail.com>
Date: Thu, 29 Feb 2024 09:18:13 +0300
Subject: [PATCH] get lessons list

---
 ijl.config.js           |  2 --
 src/__data__/api/api.ts |  3 +-
 src/__data__/model.ts   | 25 +++++++++++------
 src/__data__/store.ts   |  5 +++-
 src/index.tsx           | 27 ++++++++++--------
 src/pages/Journal.tsx   | 61 +++++++++++++++++++++--------------------
 src/utils/user.ts       |  3 ++
 7 files changed, 72 insertions(+), 54 deletions(-)
 create mode 100644 src/utils/user.ts

diff --git a/ijl.config.js b/ijl.config.js
index aeac6a2..1e01b44 100644
--- a/ijl.config.js
+++ b/ijl.config.js
@@ -16,8 +16,6 @@ module.exports = {
         },
     },
     config: {
-    "journal.socket.url": "ws://localhost",
-    "journal.socket.path": "/socket.io/",
     "journal.back.url": "/api",
   }
 }
diff --git a/src/__data__/api/api.ts b/src/__data__/api/api.ts
index f7ec043..afbba99 100644
--- a/src/__data__/api/api.ts
+++ b/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>({
diff --git a/src/__data__/model.ts b/src/__data__/model.ts
index 0f03086..3b5a1b7 100644
--- a/src/__data__/model.ts
+++ b/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;
+}
diff --git a/src/__data__/store.ts b/src/__data__/store.ts
index 6856038..3c7befa 100644
--- a/src/__data__/store.ts
+++ b/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']>;
\ No newline at end of file
+export type Store = ReturnType<ReturnType<typeof createStore>['getState']>;
+
+export const useAppSelector: TypedUseSelectorHook<Store> = useSelector;
diff --git a/src/index.tsx b/src/index.tsx
index b43f6e2..fdd06ba 100644
--- a/src/index.tsx
+++ b/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();
 };
diff --git a/src/pages/Journal.tsx b/src/pages/Journal.tsx
index 3ae6a9c..8f19f04 100644
--- a/src/pages/Journal.tsx
+++ b/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>
diff --git a/src/utils/user.ts b/src/utils/user.ts
new file mode 100644
index 0000000..facb8ad
--- /dev/null
+++ b/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')