init
This commit is contained in:
@@ -1,6 +1,7 @@
|
||||
import React, { useCallback, useEffect, useRef, useState } from "react";
|
||||
import dayjs from "dayjs";
|
||||
import { Link } from "react-router-dom";
|
||||
import { getConfigValue } from "@ijl/cli";
|
||||
|
||||
import {
|
||||
ArrowImg,
|
||||
@@ -14,20 +15,12 @@ import {
|
||||
} from "./style";
|
||||
|
||||
import arrow from "../assets/36-arrow-right.svg";
|
||||
import { connect, getSocket } from "../socket";
|
||||
import { getConfigValue } from "@ijl/cli";
|
||||
import { keycloak } from "../__data__/const";
|
||||
import { keycloak } from "../__data__/kc";
|
||||
|
||||
export const Journal = () => {
|
||||
const [lessons, setLessons] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
connect();
|
||||
const socket = getSocket();
|
||||
socket.on("lessons", (data) => {
|
||||
setLessons(data);
|
||||
});
|
||||
|
||||
const check = async () => {
|
||||
if (keycloak.authenticated) {
|
||||
keycloak;
|
||||
@@ -79,8 +72,8 @@ export const Journal = () => {
|
||||
(event) => {
|
||||
event.preventDefault();
|
||||
|
||||
const socket = getSocket();
|
||||
socket.emit("create-lesson", { lessonName: value });
|
||||
// const socket = getSocket();
|
||||
// socket.emit("create-lesson", { lessonName: value });
|
||||
setValue("");
|
||||
},
|
||||
[value]
|
||||
|
||||
@@ -3,7 +3,6 @@ import { useParams } from 'react-router-dom';
|
||||
import dayjs from 'dayjs';
|
||||
import QRCode from 'qrcode';
|
||||
|
||||
import { connect, getSocket } from '../socket';
|
||||
import { MainWrapper, StartWrapper, QRCanvas, LessonItem, Lessonname } from './style';
|
||||
|
||||
export const Lesson = () => {
|
||||
@@ -11,11 +10,9 @@ export const Lesson = () => {
|
||||
const canvRef = useRef(null);
|
||||
const [lesson, setLesson] = useState(null);
|
||||
useEffect(() => {
|
||||
connect();
|
||||
const socket = getSocket();
|
||||
socket.on('lessons', data => {
|
||||
setLesson(data.find(lesson => lesson.id === lessonId));
|
||||
})
|
||||
// socket.on('lessons', data => {
|
||||
// setLesson(data.find(lesson => lesson.id === lessonId));
|
||||
// })
|
||||
|
||||
QRCode.toCanvas(canvRef.current, `${location.origin}/journal/u/${lessonId}` , function (error) {
|
||||
if (error) console.error(error)
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import React, { useCallback, useEffect, useState } from 'react';
|
||||
import { useParams } from 'react-router-dom';
|
||||
|
||||
import { connect, getSocket } from '../socket';
|
||||
import { ArrowImg, IconButton, InputElement, InputLabel, InputWrapper, MainWrapper, StartWrapper } from './style';
|
||||
import arrow from '../assets/36-arrow-right.svg';
|
||||
|
||||
@@ -10,26 +9,24 @@ export const UserPage = () => {
|
||||
const [error, setError] = useState(null);
|
||||
const { lessonId } = useParams();
|
||||
useEffect(() => {
|
||||
connect();
|
||||
const socket = getSocket();
|
||||
socket.on('connect', () => {
|
||||
const id = localStorage.getItem('socketId');
|
||||
if (!id) {
|
||||
localStorage.setItem('socketId', socket.id);
|
||||
setSocketId(socket.id);
|
||||
} else {
|
||||
setSocketId(id);
|
||||
}
|
||||
// socket.on('connect', () => {
|
||||
// const id = localStorage.getItem('socketId');
|
||||
// if (!id) {
|
||||
// localStorage.setItem('socketId', socket.id);
|
||||
// setSocketId(socket.id);
|
||||
// } else {
|
||||
// setSocketId(id);
|
||||
// }
|
||||
|
||||
const name = localStorage.getItem('name');
|
||||
if (name) {
|
||||
const socket = getSocket();
|
||||
socket.emit('add', { socketId: id || socket.id, name, lessonid: lessonId });
|
||||
}
|
||||
})
|
||||
socket.on('error', data => {
|
||||
setError(data)
|
||||
})
|
||||
// const name = localStorage.getItem('name');
|
||||
// if (name) {
|
||||
// const socket = getSocket();
|
||||
// socket.emit('add', { socketId: id || socket.id, name, lessonid: lessonId });
|
||||
// }
|
||||
// })
|
||||
// socket.on('error', data => {
|
||||
// setError(data)
|
||||
// })
|
||||
}, []);
|
||||
|
||||
const [value, setValue] = useState(localStorage.getItem('name') || '');
|
||||
@@ -40,9 +37,8 @@ export const UserPage = () => {
|
||||
const handleSubmit = useCallback((event) => {
|
||||
event.preventDefault();
|
||||
|
||||
const socket = getSocket();
|
||||
localStorage.setItem('name', value)
|
||||
socket.emit('add', { socketId: localStorage.getItem('socketId') || socketId, name: value, lessonid: lessonId });
|
||||
// socket.emit('add', { socketId: localStorage.getItem('socketId') || socketId, name: value, lessonid: lessonId });
|
||||
}, [value])
|
||||
|
||||
return (
|
||||
|
||||
@@ -4,69 +4,12 @@ import arrow from '../assets/36-arrow-right.svg';
|
||||
|
||||
import {
|
||||
MainWrapper,
|
||||
InputElement,
|
||||
InputLabel,
|
||||
InputWrapper,
|
||||
ArrowImg,
|
||||
IconButton,
|
||||
} from './style';
|
||||
import { Journal } from './Journal';
|
||||
|
||||
const Input = ({ onStart }) => {
|
||||
const [value, setValue] = useState('');
|
||||
const [inFocuse, setInfocuse] = useState(false);
|
||||
const handleChange = useCallback(event => {
|
||||
setValue(event.target.value.toUpperCase())
|
||||
}, [setValue]);
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const pass = localStorage.getItem('pass')
|
||||
|
||||
if (pass) {
|
||||
onStart();
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleSubmit = useCallback((event) => {
|
||||
event.preventDefault();
|
||||
localStorage.setItem('pass', 'true')
|
||||
if (value === 'OYB0Y') {
|
||||
onStart()
|
||||
}
|
||||
}, [value])
|
||||
|
||||
return (
|
||||
<>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<InputWrapper>
|
||||
<InputLabel
|
||||
htmlFor='input'
|
||||
>
|
||||
Введите пароль:
|
||||
</InputLabel>
|
||||
<InputElement
|
||||
value={value}
|
||||
onChange={handleChange}
|
||||
onFocus={() => setInfocuse(true)}
|
||||
ref={inputRef}
|
||||
id="input"
|
||||
type="password"
|
||||
autoComplete="off"
|
||||
/>
|
||||
<IconButton type="submit">
|
||||
<ArrowImg src={arrow} />
|
||||
</IconButton>
|
||||
</InputWrapper>
|
||||
</form>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export const MainPage = () => {
|
||||
return (
|
||||
<MainWrapper>
|
||||
{/* {!shoList && <Input onStart={() => setShoList(true)} />} */}
|
||||
<Journal />
|
||||
</MainWrapper>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user