diff --git a/client/src/pages/Dashboard/dashboard.js b/client/src/pages/Dashboard/dashboard.js index a4e18b6..b30dc73 100644 --- a/client/src/pages/Dashboard/dashboard.js +++ b/client/src/pages/Dashboard/dashboard.js @@ -1,26 +1,22 @@ -import React, { useEffect } from 'react'; +import React from 'react'; +import useRetrieveUserQuery from './services/useRetrieveUserQuery'; import './index.css'; -import { useAuthDispatch, useAuthState } from '../../providers/authProvider'; const Dashboard = () => { - const { onRetrieveUser } = useAuthDispatch(); - const { user } = useAuthState(); + const { loading, error, data } = useRetrieveUserQuery(); - useEffect(() => { - onRetrieveUser(); - }, []); + if (loading) return

Loading user info...

; + if (error) return

Oops! something went wrong

; + + const { name, email } = data; return (

Dashboard

- {user ? ( -
-

Name: {user.name}

-

Email: {user.email}

-
- ) : ( - 'Loading user info...' - )} +
+

Name: {name}

+

Email: {email}

+
); }; diff --git a/client/src/pages/Dashboard/services/useRetrieveUserQuery.js b/client/src/pages/Dashboard/services/useRetrieveUserQuery.js new file mode 100644 index 0000000..5b2ba7c --- /dev/null +++ b/client/src/pages/Dashboard/services/useRetrieveUserQuery.js @@ -0,0 +1,32 @@ +import { useEffect, useState } from 'react'; +import { AuthService } from '../../../services'; + +const STATUS = { + LOADING: 'loading', + SUCCESS: 'success', + ERROR: 'error' +}; + +const useRetrieveUserQuery = () => { + const [user, setUser] = useState(); + const [status, setStatus] = useState(STATUS.LOADING); + + useEffect(() => { + setStatus(STATUS.LOADING); + + AuthService.retrieveUser() + .then(user => { + setUser(user); + setStatus(STATUS.SUCCESS); + }) + .catch(() => setStatus(STATUS.ERROR)); + }, []); + + return { + loading: status === STATUS.LOADING, + error: status === STATUS.ERROR ? status : '', + data: user + }; +}; + +export default useRetrieveUserQuery; diff --git a/client/src/providers/authProvider.js b/client/src/providers/authProvider.js index 53fcb10..095bf16 100644 --- a/client/src/providers/authProvider.js +++ b/client/src/providers/authProvider.js @@ -9,7 +9,6 @@ const EVENT_TYPES = { LOGIN_SUCCESS: 'login_success', LOGIN_ERROR: 'login_error', LOGOUT: 'logout', - RETRIEVE_USER: 'retrieve_user', CLEAR_ERRORS: 'clear_errors', ERROR: 'error' }; @@ -23,13 +22,6 @@ const EVENTS = { [name]: value }; }, - [EVENT_TYPES.RETRIEVE_USER]: (state, event) => { - const { user } = event.payload; - return { - ...state, - user - }; - }, [EVENT_TYPES.LOGIN_SUCCESS]: state => { return { ...state, @@ -67,7 +59,6 @@ const EVENTS = { const INITIAL_STATE = { isLoggedIn: AuthService.isLoggedIn(), - user: {}, name: '', email: '', password: '', @@ -121,29 +112,12 @@ const AuthProvider = ({ children }) => { }); }; - const handleRetrieveUser = () => { - AuthService.retrieveUser() - .then(user => { - dispatch({ - type: EVENT_TYPES.RETRIEVE_USER, - payload: { user } - }); - }) - .catch(() => { - dispatch({ - type: EVENT_TYPES.ERROR, - payload: { error: 'retrieve_user_error' } - }); - }); - }; - const handleClearErrors = () => { dispatch({ type: EVENT_TYPES.CLEAR_ERRORS }); }; const events = { onUpdate: handleUpdate, - onRetrieveUser: handleRetrieveUser, onRegister: handleRegister, onLogin: handleLogin, onLogout: handleLogout,