73 lines
2.0 KiB
TypeScript
73 lines
2.0 KiB
TypeScript
|
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';
|
|||
|
|
|
|||
|
|
export const UserPage = () => {
|
|||
|
|
const [socketId, setSocketId] = 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);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const name = localStorage.getItem('name');
|
|||
|
|
if (name) {
|
|||
|
|
const socket = getSocket();
|
|||
|
|
socket.emit('add', { socketId: id || socket.id, name, lessonid: lessonId });
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
socket.on('lessons', data => {
|
|||
|
|
// setLessons(data)
|
|||
|
|
})
|
|||
|
|
}, []);
|
|||
|
|
|
|||
|
|
const [value, setValue] = useState(localStorage.getItem('name') || '');
|
|||
|
|
const handleChange = useCallback(event => {
|
|||
|
|
setValue(event.target.value.toUpperCase())
|
|||
|
|
}, [setValue]);
|
|||
|
|
|
|||
|
|
const handleSubmit = useCallback((event) => {
|
|||
|
|
event.preventDefault();
|
|||
|
|
|
|||
|
|
const socket = getSocket();
|
|||
|
|
localStorage.setItem('name', value)
|
|||
|
|
socket.emit('add', { socketId, name: value, lessonid: lessonId });
|
|||
|
|
}, [value])
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<MainWrapper>
|
|||
|
|
<StartWrapper>
|
|||
|
|
<form onSubmit={handleSubmit}>
|
|||
|
|
<InputWrapper>
|
|||
|
|
<InputLabel
|
|||
|
|
htmlFor='input'
|
|||
|
|
>
|
|||
|
|
Как вас зовут:
|
|||
|
|
</InputLabel>
|
|||
|
|
<InputElement
|
|||
|
|
value={value}
|
|||
|
|
onChange={handleChange}
|
|||
|
|
id="input"
|
|||
|
|
type="text"
|
|||
|
|
autoComplete="off"
|
|||
|
|
/>
|
|||
|
|
<IconButton type="submit">
|
|||
|
|
<ArrowImg src={arrow} />
|
|||
|
|
</IconButton>
|
|||
|
|
</InputWrapper>
|
|||
|
|
</form>
|
|||
|
|
</StartWrapper>
|
|||
|
|
</MainWrapper>
|
|||
|
|
)
|
|||
|
|
}
|