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,