all other staff

src/pages/UserPage.tsx

@@ -0,0 +1,72 @@
+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>
+  )
+}