feat: add useRetrieveUserQuery hook

Author: mikelpmc

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 <p>Loading user info...</p>;
+    if (error) return <p>Oops! something went wrong</p>;
+
+    const { name, email } = data;
 
     return (
         <section className="dashboard">
             <h1 className="dashboard__title">Dashboard</h1>
-            {user ? (
-                <div className="dashboard__info">
-                    <p>Name: {user.name}</p>
-                    <p>Email: {user.email}</p>
-                </div>
-            ) : (
-                'Loading user info...'
-            )}
+            <div className="dashboard__info">
+                <p>Name: {name}</p>
+                <p>Email: {email}</p>
+            </div>
         </section>
     );
 };

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;

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,