79 lines
1.9 KiB
TypeScript
79 lines
1.9 KiB
TypeScript
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>
|
||
)
|
||
};
|