From b9d0dd4c20e37df2569d1a55cf18922b0bd45c19 Mon Sep 17 00:00:00 2001 From: IRBorisov <8611739+IRBorisov@users.noreply.github.com> Date: Fri, 11 Aug 2023 17:36:09 +0300 Subject: [PATCH] Refactor context dependencies --- .../frontend/src/context/AuthContext.tsx | 22 ++++++++-- .../src/context/UserProfileContext.tsx | 25 ++--------- .../pages/UserProfilePage/ChangePassword.tsx | 41 ++++++++++--------- rsconcept/frontend/src/utils/backendAPI.ts | 1 - 4 files changed, 43 insertions(+), 46 deletions(-) diff --git a/rsconcept/frontend/src/context/AuthContext.tsx b/rsconcept/frontend/src/context/AuthContext.tsx index 95203090..7e527663 100644 --- a/rsconcept/frontend/src/context/AuthContext.tsx +++ b/rsconcept/frontend/src/context/AuthContext.tsx @@ -2,14 +2,15 @@ import { createContext, useCallback, useContext, useLayoutEffect, useState } fro import { type ErrorInfo } from '../components/BackendError'; import useLocalStorage from '../hooks/useLocalStorage'; -import { type DataCallback, getAuth, postLogin, postLogout, postSignup } from '../utils/backendAPI'; -import { ICurrentUser, IUserLoginData, IUserProfile, IUserSignupData } from '../utils/models'; +import { type DataCallback, getAuth, patchPassword,postLogin, postLogout, postSignup } from '../utils/backendAPI'; +import { ICurrentUser, IUserLoginData, IUserProfile, IUserSignupData, IUserUpdatePassword } from '../utils/models'; interface IAuthContext { user: ICurrentUser | undefined login: (data: IUserLoginData, callback?: DataCallback) => void logout: (callback?: DataCallback) => void signup: (data: IUserSignupData, callback?: DataCallback) => void + updatePassword: (data: IUserUpdatePassword, callback?: () => void) => void reload: (callback?: () => void) => void loading: boolean error: ErrorInfo @@ -85,13 +86,28 @@ export const AuthState = ({ children }: AuthStateProps) => { }); } + const updatePassword = useCallback( + (data: IUserUpdatePassword, callback?: () => void) => { + setError(undefined); + patchPassword({ + data: data, + showError: true, + setLoading: setLoading, + onError: error => { setError(error); }, + onSuccess: () => { + setUser(undefined); + reload(); + if (callback) callback(); + }}); + }, [setUser, reload]); + useLayoutEffect(() => { reload(); }, [reload]) return ( {children} diff --git a/rsconcept/frontend/src/context/UserProfileContext.tsx b/rsconcept/frontend/src/context/UserProfileContext.tsx index d0f40871..19ec094e 100644 --- a/rsconcept/frontend/src/context/UserProfileContext.tsx +++ b/rsconcept/frontend/src/context/UserProfileContext.tsx @@ -1,9 +1,8 @@ import { createContext, useCallback, useContext, useEffect, useState } from 'react'; import { ErrorInfo } from '../components/BackendError'; -import { DataCallback, getProfile, patchPassword,patchProfile } from '../utils/backendAPI'; -import { IUserProfile, IUserUpdateData, IUserUpdatePassword } from '../utils/models'; -import { useAuth } from './AuthContext'; +import { DataCallback, getProfile, patchProfile } from '../utils/backendAPI'; +import { IUserProfile, IUserUpdateData } from '../utils/models'; interface IUserProfileContext { user: IUserProfile | undefined @@ -12,7 +11,6 @@ interface IUserProfileContext { error: ErrorInfo setError: (error: ErrorInfo) => void updateUser: (data: IUserUpdateData, callback?: DataCallback) => void - updatePassword: (data: IUserUpdatePassword, callback?: () => void) => void } const ProfileContext = createContext(null); @@ -36,7 +34,6 @@ export const UserProfileState = ({ children }: UserProfileStateProps) => { const [loading, setLoading] = useState(false); const [processing, setProcessing] = useState(false); const [error, setError] = useState(undefined); - const auth = useAuth() const reload = useCallback( () => { @@ -67,29 +64,13 @@ export const UserProfileState = ({ children }: UserProfileStateProps) => { }, [setUser] ); - const updatePassword = useCallback( - (data: IUserUpdatePassword, callback?: () => void) => { - setError(undefined); - patchPassword({ - data: data, - showError: true, - setLoading: setProcessing, - onError: error => { setError(error); }, - onSuccess: () => { - setUser(undefined); - auth.reload(); - if (callback) callback(); - }}); - }, [setUser, auth] - ); - useEffect(() => { reload(); }, [reload]); return ( {children} diff --git a/rsconcept/frontend/src/pages/UserProfilePage/ChangePassword.tsx b/rsconcept/frontend/src/pages/UserProfilePage/ChangePassword.tsx index 74f83b23..611c7c5d 100644 --- a/rsconcept/frontend/src/pages/UserProfilePage/ChangePassword.tsx +++ b/rsconcept/frontend/src/pages/UserProfilePage/ChangePassword.tsx @@ -1,31 +1,34 @@ -import { useState } from 'react'; +import { useMemo, useState } from 'react'; import { useNavigate } from 'react-router-dom'; import { toast } from 'react-toastify'; +import BackendError from '../../components/BackendError'; import TextInput from '../../components/Common/TextInput'; -import { useUserProfile } from '../../context/UserProfileContext'; +import { useAuth } from '../../context/AuthContext'; import { IUserUpdatePassword } from '../../utils/models'; export function ChangePassword() { - const { updatePassword, processing } = useUserProfile(); + const { updatePassword, error, loading } = useAuth(); - const [old_password, setOldPassword] = useState(''); - const [new_password, setNewPassword] = useState(''); - const [new_password_repeat, setNewPasswordRepeat] = useState(''); - const [new_pass_color, setNewPassColor] = useState(''); + const [oldPassword, setOldPassword] = useState(''); + const [newPassword, setNewPassword] = useState(''); + const [newPasswordRepeat, setNewPasswordRepeat] = useState(''); const navigate = useNavigate(); + + const colorClass = useMemo(() => { + return !!newPassword && !!newPasswordRepeat && newPassword !== newPasswordRepeat ? 'bg-red-500' : ''; + }, [newPassword, newPasswordRepeat]); function handleSubmit(event: React.FormEvent) { event.preventDefault(); - if (new_password !== new_password_repeat) { - setNewPassColor('bg-red-500'); + if (newPassword !== newPasswordRepeat) { toast.error('Пароли не совпадают'); } else { const data: IUserUpdatePassword = { - old_password: old_password, - new_password: new_password, + old_password: oldPassword, + new_password: newPassword, }; updatePassword(data, () => {toast.success('Изменения сохранены'); navigate('/login')}); } @@ -37,36 +40,34 @@ export function ChangePassword() { setOldPassword(event.target.value)} /> { setNewPassword(event.target.value); - setNewPassColor(''); }} /> { setNewPasswordRepeat(event.target.value); - setNewPassColor(''); }} />
- + { error && } )} diff --git a/rsconcept/frontend/src/utils/backendAPI.ts b/rsconcept/frontend/src/utils/backendAPI.ts index ea828784..c74807b1 100644 --- a/rsconcept/frontend/src/utils/backendAPI.ts +++ b/rsconcept/frontend/src/utils/backendAPI.ts @@ -17,7 +17,6 @@ export function initBackend() { axios.defaults.xsrfCookieName = 'csrftoken'; axios.defaults.xsrfHeaderName = 'x-csrftoken'; axios.defaults.baseURL = `${config.backend}`; - } // ================ Data transfer types ================