diff --git a/src/components/FormLogin.tsx b/src/components/FormLogin.tsx index ba02351..8762e11 100644 --- a/src/components/FormLogin.tsx +++ b/src/components/FormLogin.tsx @@ -3,14 +3,14 @@ import { useLoginView } from '../hooks/useLoginView'; import { Input } from './Input'; export function FormLogin() { - const { LOGIN_VIEW_STATE } = useLoginView(); + const { LOGIN_VIEW_STATE, setLoginFields } = useLoginView(); const [identifier, setIdentifier] = useState(LOGIN_VIEW_STATE.loginFields.identifier || ''); const [password, setPassword] = useState(''); useEffect(() => { - LOGIN_VIEW_STATE.loginFields.identifier = identifier; - }, [LOGIN_VIEW_STATE.loginFields, identifier]); + setLoginFields({ identifier }); + }, [setLoginFields, identifier]); return (
diff --git a/src/components/FormRegister.tsx b/src/components/FormRegister.tsx index e46a2ef..f2cd3b0 100644 --- a/src/components/FormRegister.tsx +++ b/src/components/FormRegister.tsx @@ -3,7 +3,7 @@ import { useLoginView } from '../hooks/useLoginView'; import { Input } from './Input'; export function FormRegister() { - const { LOGIN_VIEW_STATE } = useLoginView(); + const { LOGIN_VIEW_STATE, setRegisterFields } = useLoginView(); const [full_name, setFullName] = useState(LOGIN_VIEW_STATE.registerFields.full_name); const [username, setUsername] = useState(LOGIN_VIEW_STATE.registerFields.username); @@ -16,10 +16,8 @@ export function FormRegister() { const [passwordError, setPasswordError] = useState(false); useEffect(() => { - LOGIN_VIEW_STATE.registerFields.full_name = full_name; - LOGIN_VIEW_STATE.registerFields.username = username; - LOGIN_VIEW_STATE.registerFields.email = email; - }, [LOGIN_VIEW_STATE.registerFields, full_name, username, email]); + setRegisterFields({ full_name, username, email }); + }, [setRegisterFields, full_name, username, email]); function handleEmailBlur() { if (email && confirmEmail && email !== confirmEmail) { diff --git a/src/providers/LoginViewProvider.tsx b/src/providers/LoginViewProvider.tsx index bfd0899..53ef307 100644 --- a/src/providers/LoginViewProvider.tsx +++ b/src/providers/LoginViewProvider.tsx @@ -1,30 +1,39 @@ -import React from 'react'; +import React, { useCallback } from 'react'; import { loginViewReducer, loginViewState } from '../reducers/loginView'; import { LoginViewContext } from '../contexts/loginViewContext'; +import type { Register, Login } from '../utils/types'; function useLoginViewReducer() { const [state, dispatch] = React.useReducer(loginViewReducer, loginViewState); - const showLogin = (registerFields?: Partial) => { - dispatch({ type: 'SET_LOGIN_VIEW', payload: registerFields || {} }); - } + const showLogin = useCallback(() => { + dispatch({ type: 'SET_LOGIN_VIEW', payload: state.registerFields }); + }, [state.registerFields]); - const showRegister = (loginFields?: Partial) => { - dispatch({ type: 'SET_REGISTER_VIEW', payload: loginFields || {} }); - } + const setLoginFields = useCallback((loginFields: Login) => { + dispatch({ type: 'SET_LOGIN_FIELDS', payload: loginFields }); + }, []); - const clearFields = () => { + const showRegister = useCallback(() => { + dispatch({ type: 'SET_REGISTER_VIEW', payload: state.loginFields }); + }, [state.loginFields]); + + const setRegisterFields = useCallback((registerFields: Register) => { + dispatch({ type: 'SET_REGISTER_FIELDS', payload: registerFields }); + }, []); + + const clearFields = useCallback(() => { dispatch({ type: 'RESET_FIELDS' }); - } + }, []); - return { state, showLogin, showRegister, clearFields }; + return { state, showLogin, setLoginFields, showRegister, setRegisterFields, clearFields }; } export function LoginViewProvider({ children }: { children: React.ReactNode }) { - const { state, showLogin, showRegister, clearFields } = useLoginViewReducer(); + const { state, showLogin, showRegister, setLoginFields, setRegisterFields, clearFields } = useLoginViewReducer(); return ( - + {children} ); diff --git a/src/reducers/loginView.ts b/src/reducers/loginView.ts index 9fdd3c2..8f76099 100644 --- a/src/reducers/loginView.ts +++ b/src/reducers/loginView.ts @@ -34,7 +34,9 @@ export function updateLocalStorageLoginView(state: LoginViewState) { export const STATE_ACTION_TYPES = { SET_LOGIN_VIEW: 'SET_LOGIN_VIEW', + SET_LOGIN_FIELDS: 'SET_LOGIN_FIELDS', SET_REGISTER_VIEW: 'SET_REGISTER_VIEW', + SET_REGISTER_FIELDS: 'SET_REGISTER_FIELDS', RESET_FIELDS: 'RESET_FIELDS', }; @@ -54,6 +56,13 @@ export function loginViewReducer( }; } + if (action.type === 'SET_LOGIN_FIELDS') { + const { payload } = action; + newState = { + ...state, + loginFields: { ...state.loginFields, ...payload } + }; + } if (action.type === 'SET_REGISTER_VIEW') { const { payload } = action; newState = { @@ -63,6 +72,14 @@ export function loginViewReducer( }; } + if (action.type === 'SET_REGISTER_FIELDS') { + const { payload } = action; + newState = { + ...state, + registerFields: { ...state.registerFields, ...payload } + }; + } + if (action.type === 'RESET_FIELDS') { newState = { ...state, diff --git a/src/utils/types.ts b/src/utils/types.ts index 33f95c3..1002ccb 100644 --- a/src/utils/types.ts +++ b/src/utils/types.ts @@ -1,25 +1,33 @@ export type ViewType = 'login' | 'register'; +export type Register = { + full_name: string; + username: string; + email: string; +}; + +export type Login = { + identifier: string; +}; + export type LoginViewState = { view: ViewType; - loginFields: { - identifier: string; - }; - registerFields: { - full_name: string; - username: string; - email: string; - }; + loginFields: Login; + registerFields: Register; }; export type LoginViewContextType = { LOGIN_VIEW_STATE: LoginViewState; showLogin: () => void; + setLoginFields: (loginFields: Login) => void; showRegister: () => void; + setRegisterFields: (registerFields: Register) => void; clearFields: () => void; }; export type Action = - | { type: 'SET_LOGIN_VIEW'; payload: Partial } - | { type: 'SET_REGISTER_VIEW'; payload: Partial } + | { type: 'SET_LOGIN_VIEW'; payload: Register } + | { type: 'SET_LOGIN_FIELDS'; payload: Login } + | { type: 'SET_REGISTER_VIEW'; payload: Login } + | { type: 'SET_REGISTER_FIELDS'; payload: Register } | { type: 'RESET_FIELDS' }; \ No newline at end of file