This commit is contained in:
Primakov Alexandr Alexandrovich 2024-02-13 21:29:44 +03:00
parent d4ef738160
commit a40c6eea0a
3 changed files with 58 additions and 35 deletions

7
src/__data__/const.ts Normal file
View File

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

View File

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

View File

@ -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 { import {
ArrowImg, ArrowImg,
@ -11,11 +11,12 @@ import {
StartWrapper, StartWrapper,
LessonItem, LessonItem,
Lessonname, 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 { connect, getSocket } from "../socket";
import { getConfigValue } from '@ijl/cli'; import { getConfigValue } from "@ijl/cli";
import { keycloak } from "../__data__/const";
export const Journal = () => { export const Journal = () => {
const [lessons, setLessons] = useState(null); const [lessons, setLessons] = useState(null);
@ -23,36 +24,53 @@ export const Journal = () => {
useEffect(() => { useEffect(() => {
connect(); connect();
const socket = getSocket(); 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 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 ( return (
<StartWrapper> <StartWrapper>
<form onSubmit={handleSubmit}> <form onSubmit={handleSubmit}>
<InputWrapper> <InputWrapper>
<InputLabel <InputLabel htmlFor="input">Название новой лекции:</InputLabel>
htmlFor='input'
>
Название новой лекции:
</InputLabel>
<InputElement <InputElement
value={value} value={value}
onChange={handleChange} onChange={handleChange}
@ -69,14 +87,16 @@ export const Journal = () => {
<ul style={{ paddingLeft: 0 }}> <ul style={{ paddingLeft: 0 }}>
{lessons?.map((lesson) => ( {lessons?.map((lesson) => (
<LessonItem key={lesson.id}> <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> <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> </Link>
</LessonItem> </LessonItem>
))} ))}
</ul> </ul>
</StartWrapper> </StartWrapper>
) );
}; };