popovspiridon99/tests
1
0
Fork 0
forked from VinokurovVE/tests
Code Issues Pull Requests Projects Releases Wiki Activity

Refactored store

Browse Source
This commit is contained in:
cracklesparkle
2024-06-25 15:56:00 +09:00
parent 85f97e9e0e
commit 18fb120777
15 changed files with 205 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend_reactjs/src/App.tsx
View File

@ -8,7 +8,7 @@ import MainLayout from "./layouts/MainLayout"
import SignIn from "./pages/auth/SignIn"
import ApiTest from "./pages/ApiTest"
import SignUp from "./pages/auth/SignUp"
import { useAuthStore } from "./store/auth"
import { initAuth, useAuthStore } from "./store/auth"
import { useEffect, useState } from "react"
import { CircularProgress } from "@mui/material"
@ -17,7 +17,7 @@ function App() {
const [isLoading, setIsLoading] = useState(true)
useEffect(() => {
auth.initializeAuth()
initAuth()
}, [])
// Once auth is there, set loading to false and render the app

2
frontend_reactjs/src/components/DataTable.tsx
View File

@ -13,7 +13,7 @@ export default function DataTable(props: Props) {
columns={props.columns}
initialState={{
pagination: {
paginationModel: { page: 0, pageSize: 5 },
paginationModel: { page: 0, pageSize: 10 },
},
}}
pageSizeOptions={[10, 20, 50, 100]}

3
frontend_reactjs/src/components/UserData.ts
View File

@ -1,13 +1,12 @@
import { memo, useEffect, useMemo, useState } from "react";
import UserService from "../services/UserService";
import AuthService from "../services/AuthService";
export default function useUserData<T>(token: string, initData: T): T {
const [userData, setUserData] = useState<T>(initData)
useEffect(()=> {
const fetchUserData = async (token: string) => {
const response = await AuthService.getCurrentUser(token)
const response = await UserService.getCurrentUser(token)
setUserData(response.data)
}

4
frontend_reactjs/src/constants/index.ts
View File

@ -0,0 +1,4 @@
export const USER_DATA_KEY = 'userData';
export const TOKEN_AUTH_KEY = 'authToken'
export const TOKEN_ISSUED_DATE_KEY = 'tokenIssuedDate';
export const TOKEN_EXPIRY_DURATION = 7 * 24 * 60 * 60 * 1000;

2
frontend_reactjs/src/http/axiosInstance.ts
View File

@ -18,4 +18,4 @@ axiosInstance.interceptors.request.use(
}
);
export default axiosInstance;
export default axiosInstance;

24
frontend_reactjs/src/types/auth.ts → frontend_reactjs/src/interfaces/auth.ts
View File

@ -1,3 +1,27 @@
export interface User {
id: number;
}
export interface UserData extends User {
email: string;
login: string;
phone: string;
name: string;
surname: string;
is_active: boolean;
role_id: number;
}
export interface UserCreds extends User {
password: string;
}
export interface AuthState {
isAuthenticated: boolean;
token: string | null;
userData: UserData | {};
}
export interface SignUpFormData {
email: string;
login: string;

34
frontend_reactjs/src/layouts/DashboardLayout.tsx
View File

@ -1,6 +1,6 @@
// Layout for dashboard with responsive drawer
import { Navigate, Outlet } from "react-router-dom"
import { Link, NavLink, Navigate, Outlet, useLocation, useNavigate } from "react-router-dom"
import * as React from 'react';
import AppBar from '@mui/material/AppBar';
import Box from '@mui/material/Box';
@ -17,7 +17,8 @@ import MenuIcon from '@mui/icons-material/Menu';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import { Api, ExitToApp, Home, People, Settings, Shield } from "@mui/icons-material";
import { UserData, useAuthStore } from "../store/auth";
import { getUserData, useAuthStore } from "../store/auth";
import { UserData } from "../interfaces/auth";
const drawerWidth = 240;
@ -25,6 +26,10 @@ export default function DashboardLayout() {
const authStore = useAuthStore();
const [userData, setUserData] = React.useState<UserData>();
const location = useLocation()
const navigate = useNavigate()
//const { window } = props;
const [mobileOpen, setMobileOpen] = React.useState(false);
const [isClosing, setIsClosing] = React.useState(false);
@ -95,7 +100,12 @@ export default function DashboardLayout() {
<List>
{pages.map((item, index) => (
<ListItem key={index} disablePadding>
<ListItemButton href={item.path}>
<ListItemButton
onClick={() => {
navigate(item.path)
}}
selected={location.pathname === item.path}
>
<ListItemIcon>
{item.icon}
</ListItemIcon>
@ -110,7 +120,12 @@ export default function DashboardLayout() {
<List>
{misc.map((item, index) => (
<ListItem key={index} disablePadding>
<ListItemButton href={item.path}>
<ListItemButton
onClick={() => {
navigate(item.path)
}}
selected={location.pathname === item.path}
>
<ListItemIcon>
{item.icon}
</ListItemIcon>
@ -124,13 +139,20 @@ export default function DashboardLayout() {
React.useEffect(() => {
if (authStore) {
const stored = authStore.getUserData()
const stored = getUserData()
if (stored) {
setUserData(stored)
}
}
}, [authStore])
const getPageTitle = () => {
const currentPath = location.pathname;
const allPages = [...pages, ...misc];
const currentPage = allPages.find(page => page.path === currentPath);
return currentPage ? currentPage.label : "Dashboard";
};
return (
<Box sx={{
display: 'flex',
@ -156,7 +178,7 @@ export default function DashboardLayout() {
<MenuIcon />
</IconButton>
<Typography variant="h6" noWrap component="div">
Dashboard
{getPageTitle()}
</Typography>
</Toolbar>
</AppBar>

4
frontend_reactjs/src/layouts/MainLayout.tsx
View File

@ -4,8 +4,6 @@ import { Outlet } from "react-router-dom";
export default function MainLayout() {
return (
<>
<Outlet/>
</>
<Outlet />
)
}

5
frontend_reactjs/src/pages/ApiTest.tsx
View File

@ -1,15 +1,14 @@
import { useEffect, useState } from "react"
import UserService from "../services/UserService"
import AuthService from "../services/AuthService"
import { Button } from "@mui/material"
import DataTable from "../components/DataTable"
import { GridColDef } from "@mui/x-data-grid"
import UserService from "../services/UserService"
export default function ApiTest() {
const [users, setUsers] = useState<any>(null)
const getUsers = async () => {
await AuthService.getUsers().then(response => {
await UserService.getUsers().then(response => {
setUsers(response.data)
})
}

4
frontend_reactjs/src/pages/Users.tsx
View File

@ -1,14 +1,14 @@
import { useEffect, useState } from "react"
import AuthService from "../services/AuthService"
import { Box, Button } from "@mui/material"
import DataTable from "../components/DataTable"
import { GridColDef } from "@mui/x-data-grid"
import UserService from "../services/UserService"
export default function Users() {
const [users, setUsers] = useState<any>(null)
const getUsers = async () => {
await AuthService.getUsers().then(response => {
await UserService.getUsers().then(response => {
setUsers(response.data)
})
}

29
frontend_reactjs/src/pages/auth/SignIn.tsx
View File

@ -1,12 +1,11 @@
import React, { useState, ChangeEvent, FormEvent } from 'react';
import { useForm, SubmitHandler } from 'react-hook-form';
import { TextField, Button, Container, Typography, Box } from '@mui/material';
import axios, { AxiosResponse } from 'axios';
import { SignInFormData, ApiResponse } from '../../types/auth';
import { UserData, useAuthStore } from '../../store/auth';
import { AxiosResponse } from 'axios';
import { SignInFormData, ApiResponse } from '../../interfaces/auth';
import { login, setUserData } from '../../store/auth';
import { useNavigate } from 'react-router-dom';
import axiosInstance from '../../http/axiosInstance';
import AuthService from '../../services/AuthService';
import UserService from '../../services/UserService';
const SignIn = () => {
const { register, handleSubmit, formState: { errors } } = useForm<SignInFormData>({
@ -20,7 +19,6 @@ const SignIn = () => {
}
})
const authStore = useAuthStore();
const navigate = useNavigate();
const onSubmit: SubmitHandler<SignInFormData> = async (data) => {
@ -30,21 +28,18 @@ const SignIn = () => {
}
try {
const response: AxiosResponse<ApiResponse> = await axiosInstance.post(`/auth/login`, formBody, {
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
});
const response: AxiosResponse<ApiResponse> = await AuthService.login(formBody)
console.log('Вход произошел успешно:', response.data);
const token = response.data.access_token
const userDataResponse: AxiosResponse<ApiResponse> = await AuthService.getCurrentUser(token)
const userDataResponse: AxiosResponse<ApiResponse> = await UserService.getCurrentUser(token)
console.log('Пользователь:', userDataResponse.data)
authStore.setUserData(JSON.stringify(userDataResponse.data))
authStore.login(token)
setUserData(JSON.stringify(userDataResponse.data))
login(token)
navigate('/');
} catch (error) {
@ -63,7 +58,8 @@ const SignIn = () => {
fullWidth
margin="normal"
label="Логин"
{...register('username', { required: 'Логин обязателен' })}
required
{...register('username', { required: 'Введите логин' })}
error={!!errors.username}
helperText={errors.username?.message}
/>
@ -72,7 +68,8 @@ const SignIn = () => {
margin="normal"
type="password"
label="Пароль"
{...register('password', { required: 'Пароль обязателен' })}
required
{...register('password', { required: 'Введите пароль' })}
error={!!errors.password}
helperText={errors.password?.message}
/>

16
frontend_reactjs/src/pages/auth/SignUp.tsx
View File

@ -1,9 +1,9 @@
import React, { useState, ChangeEvent, FormEvent } from 'react';
import { useForm, SubmitHandler } from 'react-hook-form';
import { TextField, Button, Container, Typography, Box } from '@mui/material';
import axios, { AxiosResponse } from 'axios';
import { SignUpFormData, ApiResponse } from '../../types/auth';
import { SignUpFormData, ApiResponse } from '../../interfaces/auth';
import axiosInstance from '../../http/axiosInstance';
import UserService from '../../services/UserService';
const SignUp = () => {
const { register, handleSubmit, formState: { errors } } = useForm<SignUpFormData>({
@ -21,7 +21,7 @@ const SignUp = () => {
const onSubmit: SubmitHandler<SignUpFormData> = async (data) => {
try {
const response: AxiosResponse<ApiResponse> = await axiosInstance.post(`${import.meta.env.VITE_API_AUTH_URL}/auth/user`, data);
const response: AxiosResponse<ApiResponse> = await UserService.createUser(data)
console.log('Успешная регистрация:', response.data);
} catch (error) {
console.error('Ошибка регистрации:', error);
@ -34,23 +34,28 @@ const SignUp = () => {
<Typography variant="h4" component="h1" gutterBottom>
Регистрация
</Typography>
<form onSubmit={handleSubmit(onSubmit)}>
<TextField
fullWidth
margin="normal"
label="Email"
required
{...register('email', { required: 'Email обязателен' })}
error={!!errors.email}
helperText={errors.email?.message}
/>
<TextField
fullWidth
margin="normal"
label="Логин"
required
{...register('login', { required: 'Логин обязателен' })}
error={!!errors.login}
helperText={errors.login?.message}
/>
<TextField
fullWidth
margin="normal"
@ -59,6 +64,7 @@ const SignUp = () => {
error={!!errors.phone}
helperText={errors.phone?.message}
/>
<TextField
fullWidth
margin="normal"
@ -67,6 +73,7 @@ const SignUp = () => {
error={!!errors.name}
helperText={errors.name?.message}
/>
<TextField
fullWidth
margin="normal"
@ -75,15 +82,18 @@ const SignUp = () => {
error={!!errors.surname}
helperText={errors.surname?.message}
/>
<TextField
fullWidth
margin="normal"
type="password"
label="Пароль"
required
{...register('password', { required: 'Пароль обязателен' })}
error={!!errors.password}
helperText={errors.password?.message}
/>
<Button type="submit" variant="contained" color="primary">
Зарегистрироваться
</Button>

15
frontend_reactjs/src/services/AuthService.ts
View File

@ -1,16 +1,19 @@
import axios from "axios";
import axiosInstance from "../http/axiosInstance";
export default class AuthService {
static async hello() {
return await axios.get(`${import.meta.env.VITE_API_AUTH_URL}/hello`)
static async login(data: any) {
return await axiosInstance.post(`/auth/login`, data, {
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
})
}
static async getUsers() {
return await axiosInstance.get(`/auth/user`)
static async refreshToken(token: string) {
return await axiosInstance.post(`/auth/refresh_token/${token}`)
}
static async getCurrentUser(token: string){
static async getCurrentUser(token: string) {
return await axiosInstance.get(`/auth/get_current_user/${token}`)
}
}

51
frontend_reactjs/src/services/UserService.ts
View File

@ -1,29 +1,32 @@
// Data mockup
let users =
[
{
"email": "string",
"login": "string",
"phone": "string",
"name": "string",
"surname": "string",
"is_active": true,
"id": 0,
"role_id": 2
}
]
import axiosInstance from "../http/axiosInstance";
import { UserCreds, UserData } from "../interfaces/auth";
export default class UserService {
static async getUsers() {
new Promise((resolve, reject) => {
if (!users) {
return setTimeout(
() => reject(new Error('Users not found')),
250
)
}
static async createUser(data: any) {
return await axiosInstance.post(`/auth/user`, data)
}
setTimeout(() => resolve(users), 250)
})
static async getCurrentUser(token: string) {
return await axiosInstance.get(`/auth/get_current_user/${token}`)
}
static async getUsers() {
return await axiosInstance.get(`/auth/user`)
}
// static async deleteUser(id: number) {
// return await axiosInstance.delete(`/auth/user/${id}`)
// }
static async getUser(id: number) {
return await axiosInstance.get(`/auth/user/${id}`)
}
static async updatePassword(data: UserCreds) {
return await axiosInstance.put(`/auth/user/password_change`, data)
}
static async updateUser(data: UserData) {
return await axiosInstance.put(`/auth/user`, data)
}
}

121
frontend_reactjs/src/store/auth.ts
View File

@ -1,50 +1,83 @@
import { create } from 'zustand';
import { TOKEN_AUTH_KEY, TOKEN_EXPIRY_DURATION, TOKEN_ISSUED_DATE_KEY, USER_DATA_KEY } from '../constants';
import { AuthState } from '../interfaces/auth';
import AuthService from '../services/AuthService';
export interface UserData {
id: number;
email: string;
login: string;
phone: string;
name: string;
surname: string;
is_active: boolean;
role_id: number;
}
interface AuthState {
isAuthenticated: boolean;
token: string | null;
login: (token: string) => void;
logout: () => void;
initializeAuth: () => void;
userData: UserData | {};
getUserData: () => UserData;
setUserData: (userData: string) => void;
}
export const useAuthStore = create<AuthState>((set) => ({
export const useAuthStore = create<AuthState>((set, get) => ({
isAuthenticated: false,
token: null,
login: (token: string) => {
localStorage.setItem('authToken', token);
set({ isAuthenticated: true, token });
},
logout: () => {
localStorage.removeItem('authToken');
set({ isAuthenticated: false, token: null });
},
initializeAuth: () => {
const token = localStorage.getItem('authToken');
if (token) {
set({ isAuthenticated: true, token });
}
},
userData: {},
setUserData: (userData: string) => {
localStorage.setItem('userData', userData)
},
getUserData: () => {
const userData = localStorage.getItem('userData')
return JSON.parse(userData || "")
}));
const login = (token: string) => {
const issuedDate = Date.now();
localStorage.setItem(TOKEN_AUTH_KEY, token);
localStorage.setItem(TOKEN_ISSUED_DATE_KEY, issuedDate.toString());
useAuthStore.setState(() => ({ isAuthenticated: true, token: token }))
}
const logout = () => {
localStorage.removeItem(TOKEN_AUTH_KEY);
localStorage.removeItem(USER_DATA_KEY);
localStorage.removeItem(TOKEN_ISSUED_DATE_KEY);
useAuthStore.setState(() => ({ isAuthenticated: false, token: null, userData: {} }));
}
const initAuth = async () => {
const token = localStorage.getItem(TOKEN_AUTH_KEY);
const issuedDate = parseInt(localStorage.getItem(TOKEN_ISSUED_DATE_KEY) || '0', 10);
const currentTime = Date.now();
if (token && issuedDate) {
if (currentTime - issuedDate < TOKEN_EXPIRY_DURATION) {
useAuthStore.setState(() => ({ isAuthenticated: true, token: token }))
} else {
console.log("refreshing token")
try {
await refreshToken();
} catch (error) {
console.error('Token refresh failed:', error);
logout();
}
}
} else {
logout()
}
}));
}
const refreshToken = async () => {
const token = useAuthStore.getState().token
if (!token) throw new Error('No token to refresh');
try {
const response = await AuthService.refreshToken(token)
const newToken = response.data.access_token;
const newIssuedDate = Date.now();
localStorage.setItem(TOKEN_AUTH_KEY, newToken);
localStorage.setItem(TOKEN_ISSUED_DATE_KEY, newIssuedDate.toString());
useAuthStore.setState(() => ({ token: newToken }))
} catch (error) {
console.error('Failed to refresh token:', error);
logout();
}
}
const getUserData = () => {
const userData = localStorage.getItem(USER_DATA_KEY)
return userData ? JSON.parse(userData) : {}
}
const setUserData = (userData: string) => {
const parsedData = JSON.parse(userData)
localStorage.setItem(USER_DATA_KEY, userData)
useAuthStore.setState(() => ({ userData: parsedData }))
}
export {
getUserData,
setUserData,
refreshToken,
initAuth,
login,
logout
}