StroevVladimir/PIbd-22.-Stroev-V.M.-Internet-Programm
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

готовая лаба 5

Browse Source
This commit is contained in:
DyCTaTOR 2024-01-12 00:45:13 +04:00
parent 658ae323ba
commit b45991ed26
10 changed files with 153 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Lab5/data.json
View File

@ -4,7 +4,7 @@
"id": 0,
"login": "dyctator",
"password": "12345",
"role": "user"
"role": "admin"
},
{
"login": "user",

19
Lab5/src/App.jsx
View File

@ -5,17 +5,20 @@ import { Outlet } from 'react-router-dom';
import { CartProvider } from './components/cart/CartContext.jsx';
import Footer from './components/footer/Footer.jsx';
import Navigation from './components/navigation/Navigation.jsx';
import { AuthProvider } from './components/logins/login/context/AuthContext.jsx';
const App = ({ routes }) => {
return (
<CartProvider>
<Navigation routes={routes}></Navigation>
<Container className='p-2' as='main' fluid>
<Outlet />
</Container>
<Footer />
<Toaster position='top-center' reverseOrder={true} />
</CartProvider>
<AuthProvider>
<CartProvider>
<Navigation routes={routes}></Navigation>
<Container className='p-2' as='main' fluid>
<Outlet />
</Container>
<Footer />
<Toaster position='top-center' reverseOrder={true} />
</CartProvider>
</AuthProvider>
);
};

33
Lab5/src/components/lines/News/UpdateNews.jsx
View File

@ -1,5 +1,5 @@
import { useSearchParams } from 'react-router-dom';
import { useState, useEffect } from 'react';
import { useState, useEffect, useContext } from 'react';
import PropTypes from 'prop-types';
import {
Button, Container,
@ -13,10 +13,17 @@ import useLinesFormModal from '../hooks/LinesFormModalHook';
import LinesItemForm from '../form/LinesItemForm.jsx';
import useLines from '../hooks/LinesHook';
import Input from '../../input/Input.jsx';
import { AuthContext } from '../../logins/login/context/AuthContext.jsx';
// linesChangeHandle изменять состояние => при вызове изменения linesChangeHandle
// должно все перерисовываться
const UpdateNews = () => {
const { state, dispatch } = useContext(AuthContext);
let obj = null;
if (state.user !== null) {
[obj] = state.user;
}
const [searchParams, setSearchParams] = useSearchParams();
const [searchValue, setSearchValue] = useState(searchParams.get('q') || '');
@ -44,7 +51,26 @@ const UpdateNews = () => {
return (
<>
<Container className="col text-center">
<span className="mainSt">
{obj === null || obj.role === 'user' ? (
<>
<span className="mainSt">
<b>Новости</b>
</span>
<Input name='search' value = {searchValue} onChange={(e) => setSearchValue(e.target.value)}
type='text' required />
<div className="mainDiv row">
{
lines.map((item) => {
return <UpdateNew key={item.id}
item={item}
/>;
})}
</div>
</>
) : (
<>
<span className="mainSt">
<b>Новости</b>
</span>
<Input name='search' value = {searchValue} onChange={(e) => setSearchValue(e.target.value)}
@ -72,6 +98,8 @@ const UpdateNews = () => {
title='Редактирование'>
<LinesItemForm item={currentItem} handleChange={handleItemChange} />
</ModalForm>
</>
)}
</Container>
</>
);
@ -79,6 +107,7 @@ const UpdateNews = () => {
UpdateNews.propTypes = {
item: PropTypes.object,
role: PropTypes.string,
};
export default UpdateNews;

6
Lab5/src/components/logins/hooks/EntrysDataHook.js
View File

@ -1,14 +1,10 @@
import { useEffect, useState } from 'react';
import EntrysDataApiService from '../service/EntrysDataApiService';
const useEntrysData = (login, password) => {
const useEntrysData = (login, password, expand) => {
const [entrys, setEntrys] = useState([]);
const getEntrysData = async () => {
let expand = `?login=${login}&password=${password}`;
if (password === '') {
expand = `?login=${login}`;
}
const data = await EntrysDataApiService.getAll(expand);
setEntrys(data ?? []);
};

0
Lab5/src/components/logins/hooks/Reducer.js Normal file
View File

49
Lab5/src/components/logins/login/Entry.jsx → Lab5/src/components/logins/login/Entry/Entry.jsx
View File

@ -1,16 +1,19 @@
import { useState } from 'react';
import { useContext, useState } from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
import toast from 'react-hot-toast';
import { Button, Form } from 'react-bootstrap';
import Input from '../../input/Input.jsx';
import useEntrysData from '../hooks/EntrysDataHook';
import Input from '../../../input/Input.jsx';
import useEntrysData from '../../hooks/EntrysDataHook';
import { AuthContext } from '../context/AuthContext.jsx';
const Entry = () => {
const [validated, setValidated] = useState(false);
const [login, setLogin] = useState('');
const [password, setPassword] = useState('');
const isLoginValid = (value) => /^[a-zA-Z]+$/.test(value);
const { entrys } = useEntrysData(login, password);
const isLoginValid = (value) => /^[a-zA-Z0-9]+$/.test(value);
const { entrys } = useEntrysData(login, password, `?login=${login}&password=${password}`);
const { state, dispatch } = useContext(AuthContext);
const handleSubmit = (event) => {
const form = event.currentTarget;
@ -21,8 +24,12 @@ const Entry = () => {
if (entrys.length === 0) {
toast.error('Аккаунт не найден');
} else {
setValidated(true);
toast.success('Был произведён вход');
setValidated(true);
dispatch({
type: 'LOGIN',
payload: entrys,
});
toast.success(`Был произведён вход: ${login}`);
}
} else {
toast.error('Логин должен быть введён латинскими символами');
@ -31,15 +38,24 @@ const Entry = () => {
setValidated(true);
};
const handleLogOut = () => {
dispatch({
type: 'LOGOUT',
payload: entrys,
});
};
return (
<main className="container-fluid text-center">
<span className="mainSt">
<b>Личный кабинет</b>
</span>
<div className="rectpage4 d-flex row justify-content-center">
<span className="EntrysSt">
<b>Вход</b>
</span>
{state.user === null ? (
<>
<span className="EntrysSt">
<b>Вход</b>
</span>
<Form className="col-md-4 m-0 w-auto" onSubmit={ handleSubmit } noValidate validated={validated}>
<label className="form-label"><b>Логин</b></label>
<Input name="login" value = { login } onChange={(e) => setLogin(e.target.value)}
@ -50,9 +66,22 @@ const Entry = () => {
<Button className="btn btn-primary w-auto" type="submit" >Войти</Button>
<Button as={Link} to='/registrPage' variant = "danger" className="btn btn-primary w-auto" >Регистрация</Button>
</Form>
</>
) : (
<>
<p className = 'EntrysSt'>Welcome, {state.user.map((item) => item.login)}</p>
<Button className="btn btn-primary w-25 h-25" variant = "danger" onClick = {handleLogOut}>
Выйти
</Button>
</>
)}
</div>
</main>
);
};
Entry.propTypes = {
item: PropTypes.object,
};
export default Entry;

4
Lab5/src/components/logins/login/Registration.jsx
View File

@ -10,8 +10,8 @@ const Entry = () => {
const [validated, setValidated] = useState(false);
const [login, setLogin] = useState('');
const [password, setPassword] = useState('');
const isLoginValid = (value) => /^[a-zA-Z]+$/.test(value);
const { entrys } = useEntrysData(login, '');
const isLoginValid = (value) => /^[a-zA-Z0-9]+$/.test(value);
const { entrys } = useEntrysData(login, password, `?login=${login}`);
const { UseHandleSubmit, UseHandleChange } = useEntrysItemForm();

66
Lab5/src/components/logins/login/context/AuthContext.jsx Normal file
View File

@ -0,0 +1,66 @@
import { createContext, useReducer, useEffect } from 'react';
import PropTypes from 'prop-types';
// Функция для сохранения состояния user в localStorage
const saveToLocalstorage = (user) => {
if (user) {
localStorage.setItem('authState', JSON.stringify(user));
} else {
localStorage.removeItem('authState');
}
};
// Функция для восстановления состояния user из localStorage
const getInitialState = () => {
const userStorage = localStorage.getItem('authState');
if (userStorage) {
return { user: JSON.parse(userStorage) };
}
return { user: null };
};
const AuthReducer = (state, action) => {
switch (action.type) {
case 'LOGIN':
saveToLocalstorage(action.payload);
return {
...state,
user: action.payload,
};
case 'LOGOUT':
saveToLocalstorage(null);
return {
...state,
user: null,
};
default:
return state;
}
};
export const AuthContext = createContext();
export const AuthProvider = ({ children }) => {
const [state, dispatch] = useReducer(AuthReducer, getInitialState, getInitialState);
// При инициализации компонента проверим localStorage
useEffect(() => {
const user = localStorage.getItem('authState');
if (user) {
dispatch({
type: 'LOGIN',
payload: JSON.parse(user),
});
}
}, []);
return (
<AuthContext.Provider value={{ state, dispatch }}>
{children}
</AuthContext.Provider>
);
};
AuthProvider.propTypes = {
children: PropTypes.node.isRequired,
};

2
Lab5/src/main.jsx
View File

@ -32,7 +32,7 @@ const routes = [
{
path: '/page4',
element: <Page4 />,
title: 'Вход',
title: 'Личный кабинет',
},
{
path: '/page5',

2
Lab5/src/pages/Page4.jsx
View File

@ -1,4 +1,4 @@
import Entry from '../components/logins/login/Entry.jsx';
import Entry from '../components/logins/login/Entry/Entry.jsx';
const Page4 = () => {
return (