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>
|
||
)
|
||
}
|