Serxionaft/InternetProgramming
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ReactUpdate

Browse Source
This commit is contained in:
Sergey Kozyrev 2024-01-07 21:44:00 +04:00
parent 728e4bb398
commit afac6d221b
19 changed files with 1947 additions and 223 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
index.html
View File

@ -2,9 +2,8 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My shop</title> <title>Тарелька</title>
</head> </head>
<body> <body>

1696
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

22
package.json
View File

@ -4,29 +4,35 @@
"version": "0.0.0", "version": "0.0.0",
"type": "module", "type": "module",
"scripts": { "scripts": {
"dev": "vite",
"build": "vite build",
"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview" "rest": "json-server data.json",
"vite": "vite",
"dev": "npm-run-all --parallel rest vite",
"prod": "npm-run-all lint 'vite build' --parallel rest 'vite preview'"
}, },
"dependencies": { "dependencies": {
"react": "^18.2.0", "axios": "^1.6.2",
"react-dom": "^18.2.0",
"react-router-dom": "^6.18.0",
"bootstrap": "^5.3.2", "bootstrap": "^5.3.2",
"prop-types": "^15.8.1",
"react": "^18.2.0",
"react-bootstrap": "^2.9.1", "react-bootstrap": "^2.9.1",
"react-bootstrap-icons": "^1.10.3", "react-bootstrap-icons": "^1.10.3",
"prop-types": "^15.8.1" "react-dom": "^18.2.0",
"react-hot-toast": "^2.4.1",
"react-router-dom": "^6.18.0"
}, },
"devDependencies": { "devDependencies": {
"@types/react": "^18.2.15", "@types/react": "^18.2.15",
"@types/react-dom": "^18.2.7", "@types/react-dom": "^18.2.15",
"@vitejs/plugin-react": "^4.0.3", "@vitejs/plugin-react": "^4.0.3",
"eslint": "^8.45.0", "eslint": "^8.45.0",
"eslint-config-airbnb-base": "^15.0.0", "eslint-config-airbnb-base": "^15.0.0",
"eslint-plugin-import": "^2.29.0",
"eslint-plugin-react": "^7.32.2", "eslint-plugin-react": "^7.32.2",
"eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.3", "eslint-plugin-react-refresh": "^0.4.3",
"json-server": "^0.17.4",
"npm-run-all": "^4.1.5",
"vite": "^4.4.5" "vite": "^4.4.5"
} }
} }

15
src/components/Button/Button.jsx
View File

@ -1,20 +1,23 @@
import PropTypes from 'prop-types';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
function Button(Image) { function Button({ line }) {
const navigator = useNavigate(); const navigator = useNavigate();
const RedirectVideo = () => { const RedirectVideo = () => {
navigator('/Watch'); navigator(`/Watch/${line.id}`);
}; };
return ( return (
<> <>
<button onClick={RedirectVideo} className="vid"> <button onClick={RedirectVideo} className="vid">
<img src={Image.img} style={{ maxWidth: '100%', maxHeight: '100%' }} /> <img src={line.image} style={{ maxWidth: '100%', maxHeight: '50%' }} />
<h1 className="text-center">НАЗВАНИЕ ВИДЕО</h1> <h1 className="text-center">{line.title}</h1>
</button> </button>
</> </>
); );
} }
Button.propTypes = {
line: PropTypes.object,
};
export default Button; export default Button;

13
src/components/Button/Button100.jsx
View File

@ -1,20 +1,25 @@
import PropTypes from 'prop-types';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
function Button100(Image) { function Button100({ line }) {
const navigator = useNavigate(); const navigator = useNavigate();
const RedirectVideo = () => { const RedirectVideo = () => {
navigator('/Watch'); navigator(`/Watch/${line.id}`);
}; };
return ( return (
<> <>
<button onClick={RedirectVideo} className="vid" style={{ width: '100%' }}> <button onClick={RedirectVideo} className="vid" style={{ width: '100%' }}>
<img src={Image.img} style={{ maxWidth: '100%', maxHeight: '100%' }} /> <img src={line.image} style={{ maxWidth: '100%', maxHeight: '50%' }} />
<h1 className="text-center">НАЗВАНИЕ ВИДЕО</h1> <h1 className="text-center">{line.title}</h1>
</button> </button>
</> </>
); );
} }
Button100.propTypes = {
line: PropTypes.object,
};
export default Button100; export default Button100;

8
src/components/Button/ButtonSearch.jsx
View File

@ -1,6 +1,6 @@
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
function ButtonSearch(Image) { function ButtonSearch(line) {
const navigator = useNavigate(); const navigator = useNavigate();
const RedirectVideo = () => { const RedirectVideo = () => {
navigator('/Watch'); navigator('/Watch');
@ -8,10 +8,10 @@ function ButtonSearch(Image) {
return ( return (
<> <>
<button className="vid-row" onClick={RedirectVideo}> <button className="vid-row" onClick={RedirectVideo}>
<img src={Image.img} style={{ maxWidth: '50%' }} /> <img src={line.img} style={{ maxWidth: '50%' }} />
<div className="columns"> <div className="columns">
<div className="vid-search-text-big">НАЗВАНИЕ ВИДЕО</div> <div className="vid-search-text-big">{line.title}</div>
<div className="vid-search-text-small">ОПИСАНИЕ ВИДЕО</div> <div className="vid-search-text-small">{line.description}</div>
</div> </div>
</button> </button>
</> </>

11
src/components/Button/ChanelDop.jsx
View File

@ -1,17 +1,22 @@
import PropTypes from 'prop-types';
import { Person } from 'react-bootstrap-icons'; import { Person } from 'react-bootstrap-icons';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
function ChanelDop(Image) { function ChanelDop({ chanel }) {
const navigator = useNavigate(); const navigator = useNavigate();
const RedirectChanel = () => { const RedirectChanel = () => {
navigator('/chanel'); navigator(`/chanel/${chanel.id}`);
}; };
return ( return (
<> <>
<div className="row m-3"> <button onClick={RedirectChanel} className="subscribed" >{Image.name}<Person style={{ float: 'right' }}></Person></button></div> <div className="row m-3"> <button onClick={RedirectChanel} className="subscribed" >{chanel.name}<Person style={{ float: 'right' }}></Person></button></div>
</> </>
); );
} }
ChanelDop.propTypes = {
chanel: PropTypes.object,
};
export default ChanelDop; export default ChanelDop;

16
src/components/navigation/Navigation.jsx
View File

@ -6,14 +6,23 @@ import { Link, useNavigate } from 'react-router-dom';
const Navigation = ({ routes }) => { const Navigation = ({ routes }) => {
const navigate = useNavigate(); const navigate = useNavigate();
const indexPageLink = routes.filter((route) => route.index === false).shift(); const indexPageLink = routes.filter((route) => route.index === false).shift();
let userId = localStorage.getItem('EnabledUser');
const RedirectChanel = () => { const RedirectChanel = () => {
navigate('/chanel'); userId = localStorage.getItem('EnabledUser');
if (userId !== null) {
navigate('/Admin');
}
}; };
const RedirectSearch = () => { const RedirectSearch = () => {
navigate('/search'); navigate('/search');
}; };
const RedirectLogin = () => { const RedirectLogin = () => {
navigate('/login'); userId = localStorage.getItem('EnabledUser');
if (userId !== null) {
navigate('/account');
} else {
navigate('/login');
}
}; };
return ( return (
<header> <header>
@ -27,13 +36,12 @@ const Navigation = ({ routes }) => {
<Navbar.Collapse id='main-navbar' style={{ flexGrow: '0' }}> <Navbar.Collapse id='main-navbar' style={{ flexGrow: '0' }}>
<Nav className="navbar-nav"> <Nav className="navbar-nav">
<div className="row" style={{ flexWrap: 'nowrap', margin: '5px 20px 5px 0px' }}> <div className="row" style={{ flexWrap: 'nowrap', margin: '5px 20px 5px 0px' }}>
<input className="form-control me-1 nav-link" type="search" style={{ width: '90%' }} placeholder="Search" aria-label="Search" />
<button onClick={RedirectSearch} className="back" type="submit" > <button onClick={RedirectSearch} className="back" type="submit" >
<Search className="fa-solid" /> <Search className="fa-solid" />
</button> </button>
</div> </div>
<div className="row" style={{ flexWrap: 'nowrap', margin: '5px 20px 5px 0px' }}> <div className="row" style={{ flexWrap: 'nowrap', margin: '5px 20px 5px 0px' }}>
<button onClick={RedirectLogin} className="login nav-link me-1" style={{ width: '90%' }} >Войти/Зарегистрироватся</button> <button onClick={RedirectLogin} className="login nav-link me-1" style={{ width: '90%' }} >Войти/Аккаунт</button>
<button onClick={RedirectChanel} className="user nav-link" type="submit"> <button onClick={RedirectChanel} className="user nav-link" type="submit">
<Person className="fa-solid fa-user" /> <Person className="fa-solid fa-user" />
</button> </button>

9
src/index.css
View File

@ -271,9 +271,9 @@ button:not(:disabled) {
@media (max-width: 500px) { @media (max-width: 500px) {
.register-table .register-table
{ {
height: 70%; height: 50%;
width:70%; width:70%;
top: 10%; top: 20%;
left: 20%; left: 20%;
overflow: auto; overflow: auto;
position: fixed; position: fixed;
@ -331,12 +331,11 @@ button:not(:disabled) {
@media (min-width: 500px) { @media (min-width: 500px) {
.register-table .register-table
{ {
height: 500px; height: 400px;
width: 300px; width: 300px;
top:10%; top:20%;
left: 35%; left: 35%;
overflow: auto; overflow: auto;
display: flex;
position: fixed; position: fixed;
background-color: #87B650; background-color: #87B650;
} }

21
src/main.jsx
View File

@ -13,6 +13,7 @@ import Admin from './pages/Admin.jsx';
import Repair from './pages/Repair.jsx'; import Repair from './pages/Repair.jsx';
import Search from './pages/Search.jsx'; import Search from './pages/Search.jsx';
import Watch from './pages/Watch.jsx'; import Watch from './pages/Watch.jsx';
import Redact from './pages/Redact.jsx';
const routes = [ const routes = [
{ {
@ -22,35 +23,43 @@ const routes = [
title: 'Главная страница', title: 'Главная страница',
}, },
{ {
path: '/chanel', path: '/chanel/:id?',
element: <Chanel />, element: <Chanel />,
title: 'Вторая страница', title: 'Канал',
}, },
{ {
path: '/login', path: '/login',
element: <Login />, element: <Login />,
title: 'Третья страница', title: 'Вход',
}, },
{ {
path: '/regist', path: '/regist',
element: <Register />, element: <Register />,
title: 'Четвертая страница', title: 'Регистрация',
}, },
{ {
path: '/admin', path: '/admin',
element: <Admin />, element: <Admin />,
title: 'Админ Панель',
}, },
{ {
path: '/repair', path: '/account',
element: <Repair />, element: <Repair />,
title: 'Аккаунт',
}, },
{ {
path: '/search', path: '/search',
element: <Search />, element: <Search />,
title: 'Поиск',
}, },
{ {
path: '/watch', path: '/watch/:id?',
element: <Watch />, element: <Watch />,
title: 'Видео',
},
{
path: '/redact/:id?',
element: <Redact />,
}, },
]; ];

43
src/pages/Admin.jsx
View File

@ -1,7 +1,13 @@
import { Person } from 'react-bootstrap-icons'; import { Person } from 'react-bootstrap-icons';
import Prev from '../assets/fon.jpg'; import Prev from '../assets/fon.jpg';
import Lines from '../components/lines/table/Lines.jsx';
import useType from '../components/types/hooks/TypeHook';
import LinesUser from '../components/lines/table/LinesUser.jsx';
const Admin = () => { const Admin = () => {
const { id } = localStorage.getItem('EnabledUser');
const { type } = useType(id);
if (localStorage.getItem('EnabledUser') === '1') {
return ( return (
<> <>
<div style={{ width: '100%', height: '20%' }}> <div style={{ width: '100%', height: '20%' }}>
@ -12,29 +18,30 @@ const Admin = () => {
<Person style={{ margin: '35% 0 0 35%' }} /> <Person style={{ margin: '35% 0 0 35%' }} />
</div> </div>
<div className="chanel-text column"> <div className="chanel-text column">
<div>НАЗВАНИЕ КАНАЛА</div> <div>{type.name}</div>
</div> </div>
<button className="chanel-subscribe" >
Редактировать
</button>
</div>
<div>
<table id="items-table" className="table table-striped">
<thead>
<tr>
<th scope="col">№</th>
<th scope="col" className="w-25">Автор</th>
<th scope="col" className="w-25">Название</th>
<th scope="col"></th>
<th scope="col"></th>
</tr>
</thead>
<tbody></tbody>
</table>
</div> </div>
<Lines />
</> </>
); );
}
return (
<>
<div style={{ width: '100%', height: '20%' }}>
<img src={Prev} style={{ width: '100%', height: '100%' }} />
</div>
<div className="chanel rows" style={{ bsGutterX: '0' }}>
<div className="chanel-user">
<Person style={{ margin: '35% 0 0 35%' }} />
</div>
<div className="chanel-text column">
<div>{type.name}</div>
</div>
</div>
<LinesUser idUser={id} />
</>
);
}; };
export default Admin; export default Admin;

28
src/pages/Chanel.jsx
View File

@ -1,9 +1,15 @@
import { useParams } from 'react-router-dom';
import { Person } from 'react-bootstrap-icons'; import { Person } from 'react-bootstrap-icons';
import Photo from '../assets/maxresdefault.jpg'; import PropTypes from 'prop-types';
import Prev from '../assets/fon.jpg'; import Prev from '../assets/fon.jpg';
import Button from '../components/Button/Button.jsx'; import Button from '../components/Button/Button.jsx';
import useLines from '../components/lines/hooks/LinesHook';
import useType from '../components/types/hooks/TypeHook';
const Chanel = () => { const Chanel = () => {
const { id } = useParams();
const { lines } = useLines(id);
const { type } = useType(id);
return ( return (
<> <>
<div style={{ width: '100%' }}> <div style={{ width: '100%' }}>
@ -14,25 +20,25 @@ const Chanel = () => {
<Person style={{ margin: '35% 0 0 35%' }} /> <Person style={{ margin: '35% 0 0 35%' }} />
</div> </div>
<div className="chanel-text"> <div className="chanel-text">
НАЗВАНИЕ КАНАЛА {type.name}
</div> </div>
<button className="chanel-subscribe"> <button className="chanel-subscribe">
Подписаться Подписаться
</button> </button>
</div> </div>
<div className="rows images"> <div className="rows images">
<Button img={ Photo }/> {
<Button img={ Photo }/> lines.map((line) =>
<Button img={ Photo }/> <Button key={line.id} line={line} />)
<Button img={ Photo }/> }
<Button img={ Photo }/>
<Button img={ Photo }/>
<Button img={ Photo }/>
<Button img={ Photo }/>
<Button img={ Photo }/>
</div> </div>
</> </>
); );
}; };
Chanel.propTypes = {
type: PropTypes.object,
Button: PropTypes.func,
};
export default Chanel; export default Chanel;

77
src/pages/Login.jsx
View File

@ -1,37 +1,72 @@
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import { useState } from 'react';
import { Button, Form } from 'react-bootstrap';
import usePersonL from '../components/types/hooks/LoginHooks';
const Login = () => { const Login = () => {
const navigator = useNavigate(); const navigator = useNavigate();
const RedirectRegist = () => { const RedirectRegist = () => {
navigator('/regist'); navigator('/regist');
}; };
const RedirectRepair = () => {
navigator('/regist'); const [validated, setValidated] = useState(false);
const [formData, setFormData] = useState({
email: '',
password: '',
});
const { user, handlerLoginChanged } = usePersonL(formData.email);
const handleSubmit = (event) => {
const form = event.currentTarget;
event.preventDefault();
event.stopPropagation();
if (form.checkValidity() !== false) {
console.log(formData);
}
if (user === null) {
return;
}
if (user.password === formData.password) {
const ind = user.id;
localStorage.setItem('EnabledUser', JSON.stringify(user.id));
navigator(`/Chanel/${ind}`);
}
setValidated(true);
}; };
const RedirectAdmin = () => {
navigator('/admin'); const handleChange = (event) => {
const inputName = event.target.name;
const inputValue = event.target.type === 'checkbox' ? event.target.checked : event.target.value;
setFormData({
...formData,
[inputName]: inputValue,
});
if (inputName === 'email') {
handlerLoginChanged(inputValue);
}
}; };
return ( return (
<> <>
<div className="container-fluid w-2 register-table text-center col"> <Form className='container-fluid w-2 register-table text-center col' noValidate validated={validated} onSubmit={handleSubmit}>
<div className="register-table-text"> <Form.Group className='mb-2' controlId='email'>
Войти в аккаунт <Form.Label>E-mail</Form.Label>
<Form.Control type='email' name='email' placeholder='name@example.ru' required
value={formData.email} onChange={handleChange} />
</Form.Group>
<Form.Group className='mb-2' controlId='password'>
<Form.Label>Пароль</Form.Label>
<Form.Control type='password' name='password' required
value={formData.password} onChange={handleChange} />
</Form.Group>
<div className='text-center'>
<Button className='w-50' variant='primary' type='submit'>Войти</Button>
</div> </div>
<div className="register-table-column"> <div className='text-center'>
<div className="register-table-input2"> <Button className='w-50' variant='primary' onClick={RedirectRegist} >Регистрация</Button>
<input className="form-control me-2 orange" type="email" placeholder="Почта" aria-label="Mail" />
</div> </div>
<div className="register-table-input3"> </Form>
<input className="form-control me-2 orange" type="password" placeholder="Пароль" aria-label="Mail" />
</div>
</div>
<div className="register-table-button column">
<button onClick={RedirectRepair} className="reg_button">Забыл пароль</button>
<button onClick={RedirectRegist} className="reg_button">Регистрация</button>
<button onClick={RedirectAdmin} className="reg_button">Войти</button>
</div>
</div>
</> </>
); );
}; };

40
src/pages/MainPage.jsx
View File

@ -1,33 +1,39 @@
import Photo from '../assets/maxresdefault.jpg'; import PropTypes from 'prop-types';
import Button from '../components/Button/Button.jsx'; import useLines from '../components/lines/hooks/LinesHook';
import useTypeFilter from '../components/lines/hooks/LinesFilterHook';
import ChanelDop from '../components/Button/ChanelDop.jsx'; import ChanelDop from '../components/Button/ChanelDop.jsx';
import Button from '../components/Button/Button.jsx';
import useTypes from '../components/types/hooks/TypesHook';
const MainPage = () => { const MainPage = () => {
const { currentFilter } = useTypeFilter();
const { lines } = useLines(currentFilter);
const { types } = useTypes();
return ( return (
<> <>
<div className="container-fluid w-100" style={{ bsGutterX: '0' }}> <div className="container-fluid w-100" style={{ bsGutterX: '0' }}>
<div className="container-fluid w-2 left-blank text-center column mobdel"> <div className="container-fluid w-2 left-blank text-center column mobdel">
<ChanelDop name="НАЗВАНИЕ КАНАЛА"/> {
<ChanelDop name="НАЗВАНИЕ КАНАЛА"/> types.map((type) =>
<ChanelDop name="НАЗВАНИЕ КАНАЛА"/> <ChanelDop key={type.id} chanel={type} />)
<ChanelDop name="НАЗВАНИЕ КАНАЛА"/> }
<ChanelDop name="НАЗВАНИЕ КАНАЛА"/>
</div> </div>
<div className="right-blank row images"> <div className="right-blank row images">
<Button img={ Photo }/> {
<Button img={ Photo }/> lines.map((line) =>
<Button img={ Photo }/> <Button key={line.id} line={line} />)
<Button img={ Photo }/> }
<Button img={ Photo }/> </div>
<Button img={ Photo }/>
<Button img={ Photo }/>
<Button img={ Photo }/>
<Button img={ Photo }/>
</div>
</div> </div>
</> </>
); );
}; };
MainPage.propTypes = {
Button: PropTypes.func,
ChanelDop: PropTypes.func,
};
export default MainPage; export default MainPage;

33
src/pages/Redact.jsx
View File

@ -1,33 +1,10 @@
import { useParams } from 'react-router-dom';
import LinesForm from '../components/lines/form/LinesForm.jsx';
const Redact = () => { const Redact = () => {
const { id } = useParams();
return ( return (
<> <LinesForm id={id} />
<main className="container-fluid p-2">
<div className="text-center">
<img id="image-preview" src="https://via.placeholder.com/200" className="rounded rounded-0" alt="placeholder"/>
</div>
<form id="items-form" className="needs-validation" noValidate>
<div className="mb-2">
<label htmlFor="item" className="form-label">Канал</label>
<select id="item" className="form-select" name="chanel" required>
</select>
</div>
<div className="mb-2">
<label className="form-label" htmlFor="title">Название</label>
<input id="title" name="title" className="form-control" type="text" required/>
</div>
<div className="mb-2">
<label className="form-label" htmlFor="image">Изображение</label>
<input id="image" type="file" name="image" className="form-control" accept="image/*"/>
</div>
<div className="mb-2">
<label className="form-label" htmlFor="video">Видео</label>
<input id="video" type="file" name="video" className="form-control" accept="video/*"/>
</div>
<a href="/adminchanel.html" className="btn btn-secondary">Назад</a>
<button type="submit" className="btn btn-primary">Сохранить</button>
</form>
</main>
</>
); );
}; };

32
src/pages/Register.jsx
View File

@ -1,35 +1,11 @@
import { useNavigate } from 'react-router-dom'; import { useParams } from 'react-router-dom';
import TypesForm from '../components/user/TypesForm.jsx';
const Register = () => { const Register = () => {
const navigator = useNavigate(); const { id } = useParams();
const RedirectChanel = () => {
navigator('/chanel');
};
return ( return (
<> <>
<div className="container-fluid w-2 register-table text-center col"> <TypesForm id={id} />
<div className="register-table-text">
Регистрация аккаунта
</div>
<div className="register-table-column">
<div className="register-table-input1">
<input className="form-control me-2 orange" type="text" placeholder="Никнейм" aria-label="Mail" />
</div>
<div className="register-table-input2">
<input className="form-control me-2 orange" type="email" placeholder="Почта" aria-label="Mail" />
</div>
<div className="register-table-input3">
<input className="form-control me-2 orange" type="password" placeholder="Пароль" aria-label="Mail" />
</div>
<div className="register-table-input4">
<input className="form-control me-2 orange" type="password" placeholder="Повтор пароля" aria-label="Mail" />
</div>
</div>
<div className="register-table-button">
<button onClick={RedirectChanel} className="reg_button">Регистрация</button>
</div>
</div>
</> </>
); );

15
src/pages/Repair.jsx
View File

@ -1,21 +1,24 @@
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import useType from '../components/types/hooks/TypeHook';
const Repair = () => { const Repair = () => {
const navigator = useNavigate(); const navigator = useNavigate();
const RedirectChanel = () => { const RedirectChanel = () => {
navigator('/chanel'); localStorage.removeItem('EnabledUser');
navigator('/');
}; };
const id = localStorage.getItem('EnabledUser');
const { type } = useType(id);
return ( return (
<> <>
<div className="container-fluid w-2 register-table text-center col"> <div className="container-fluid w-2 register-table text-center col">
<div className="register-table-text"> <div className="register-table-text">
Восстановление аккаунта Информация об аккаунте
</div>
<div className="register-table-input1">
<input className="form-control me-2 orange" type="email" placeholder="Почта" aria-label="Mail" />
</div> </div>
<div className="text-center register-table-input1">{type.name}</div>
<div className="text-center register-table-input2">{type.mail}</div>
<div className="register-table-button"> <div className="register-table-button">
<button onClick={RedirectChanel} className="reg_button">Восстановить</button> <button onClick={RedirectChanel} className="reg_button">Выйти из аккаунта</button>
</div> </div>
</div> </div>
</> </>

41
src/pages/Search.jsx
View File

@ -1,17 +1,42 @@
import Photo from '../assets/maxresdefault.jpg'; import { useParams } from 'react-router-dom';
import { useState } from 'react';
import ButtonSearch from '../components/Button/ButtonSearch.jsx'; import ButtonSearch from '../components/Button/ButtonSearch.jsx';
import SearchVideos from '../components/types/hooks/SearchHook';
import Input from '../components/input/Input.jsx';
const Search = () => { const Search = () => {
const { text } = useParams();
const { files, handlerVideoSearch } = SearchVideos(text);
let videos = [];
const [formData, setFormData] = useState({
search: '',
});
const handleChange = (event) => {
const inputName = event.target.name;
const inputValue = event.target.type === 'checkbox' ? event.target.checked : event.target.value;
setFormData({
...formData,
[inputName]: inputValue,
});
if (inputName === 'search') {
handlerVideoSearch(inputValue);
}
if (files === null) {
videos = [];
} else {
videos = files;
}
};
return ( return (
<> <>
<Input label='Название' name='search' onChange={handleChange} value={formData.search}/>
<div className="columns" style={{ margin: '5% 5% 5% 5%' }}> <div className="columns" style={{ margin: '5% 5% 5% 5%' }}>
<ButtonSearch img={Photo}/> {
<ButtonSearch img={Photo}/> videos.map((line) =>
<ButtonSearch img={Photo}/> <ButtonSearch key={line.id} line={line} />)
<ButtonSearch img={Photo}/> }
<ButtonSearch img={Photo}/>
<ButtonSearch img={Photo}/>
</div> </div>
</> </>
); );

45
src/pages/Watch.jsx
View File

@ -1,34 +1,43 @@
import Photo from '../assets/maxresdefault.jpg'; import { useParams } from 'react-router-dom';
import Button100 from '../components/Button/Button100.jsx'; import Button100 from '../components/Button/Button100.jsx';
import Video from '../assets/Rick.mp4'; import useLinesItemForm from '../components/lines/hooks/LinesItemFormHook';
import useTypeFilter from '../components/lines/hooks/LinesFilterHook';
import useLines from '../components/lines/hooks/LinesHook';
const Watch = () => { const Watch = () => {
const { id } = useParams();
const {
item,
} = useLinesItemForm(id);
const { currentFilter } = useTypeFilter();
const { lines } = useLines(currentFilter);
return ( return (
<> <>
<div className="w-100 rows"> <div className="w-100 rows">
<div className="w-75 columns vid-worker-big"> <div className="w-75 columns vid-worker-big">
<video controls src={Video} className="vid-player"></video> <video controls src={item.video} className="vid-player"></video>
<div className="vid-text-big">НАЗВАНИЕ ВИДЕОРОЛИКА</div> <div className="vid-text-big">{item.title}</div>
<div className="vid-text-small">ОПИСАНИЕ ЭТОЙ ВЕЩИ</div> <div className="vid-text-small">{item.description}</div>
</div> </div>
<div className="w-25 columns vid-worker-big"> <div className="w-25 columns vid-worker-big">
<Button100 img={Photo} /> {
<Button100 img={Photo} /> lines.map((line) =>
<Button100 img={Photo} /> <Button100 key={line.id} line={line} />)
<Button100 img={Photo} /> }
<Button100 img={Photo} />
</div> </div>
<div className="w-100 columns vid-worker-small"> <div className="w-100 columns vid-worker-small">
<div> <div>
<video controls src={Video} className="vid-player"></video> <video controls src={item.video} className="vid-player"></video>
<div className="vid-text-big">НАЗВАНИЕ ВИДЕОРОЛИКА</div> <div className="vid-text-big">{item.title}</div>
<div className="vid-text-small">ОПИСАНИЕ ЭТОЙ ВЕЩИ</div> <div className="vid-text-small">{item.description}</div>
</div> </div>
<Button100 img={Photo} /> {
<Button100 img={Photo} /> lines.map((line) =>
<Button100 img={Photo} /> <Button100 key={line.id} line={line} />)
<Button100 img={Photo} /> }
<Button100 img={Photo} />
</div> </div>
</div> </div>
</> </>