all other staff

src/pages/Journal.tsx

@@ -0,0 +1,78 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import dayjs from 'dayjs';
+import { Link } from 'react-router-dom'
+
+import {
+  ArrowImg,
+  IconButton,
+  InputElement,
+  InputLabel,
+  InputWrapper,
+  StartWrapper,
+  LessonItem,
+  Lessonname,
+} from './style';
+
+import arrow from '../assets/36-arrow-right.svg';
+import { connect, getSocket } from "../socket";
+
+export const Journal = () => {
+  const [lessons, setLessons] = useState(null);
+
+  useEffect(() => {
+    connect();
+    const socket = getSocket();
+    socket.on('lessons', data => {
+      setLessons(data)
+    })
+  }, []);
+
+  const [value, setValue] = useState('');
+  const handleChange = useCallback(event => {
+    setValue(event.target.value.toUpperCase())
+  }, [setValue]);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const handleSubmit = useCallback((event) => {
+    event.preventDefault();
+
+    const socket = getSocket();
+    socket.emit('create-lesson', { lessonName: value });
+    setValue('')
+  }, [value])
+
+  return (
+    <StartWrapper>
+      <form onSubmit={handleSubmit}>
+        <InputWrapper>
+          <InputLabel
+            htmlFor='input'
+          >
+            Название новой лекции:
+          </InputLabel>
+          <InputElement
+            value={value}
+            onChange={handleChange}
+            ref={inputRef}
+            id="input"
+            type="text"
+            autoComplete="off"
+          />
+          <IconButton type="submit">
+            <ArrowImg src={arrow} />
+          </IconButton>
+        </InputWrapper>
+      </form>
+      <ul style={{ paddingLeft: 0 }}>
+        {lessons?.map((lesson) => (
+          <LessonItem key={lesson.id}>
+            <Link to={`/journal/l/${lesson.id}`}>
+              <Lessonname>{lesson.name}</Lessonname>
+              <span>{dayjs(lesson.ts).format('DD MMMM YYYYг.')}</span>
+            </Link>
+          </LessonItem>
+        ))}
+      </ul>
+    </StartWrapper>
+  )
+};