fix: issue #112

Author: yoution

src/hoc/withAuthentication/actions/index.js

@@ -2,7 +2,7 @@
  * Auth User actions
  */
 import { ACTION_TYPE } from "constants";
-import { getTeamMembers, getUserProfile } from "services/teams";
+import { getTeamMembers, getV5UserProfile } from "services/teams";
 
 /**
  * Action to set auth user data
@@ -45,10 +45,10 @@ export const authLoadTeamMembers = (teamId) => ({
  *
  * @returns {Promise} loaded user profile
  */
-export const authLoadUserProfile = () => ({
+export const authLoadV5UserProfile = () => ({
   type: ACTION_TYPE.AUTH_LOAD_V5_USER_PROFILE,
   payload: async () => {
-    const res = await getUserProfile();
+    const res = await getV5UserProfile();
     return res.data;
   },
 });

src/hoc/withAuthentication/index.js

@@ -19,7 +19,7 @@ import {
   authUserSuccess,
   authUserError,
   authLoadTeamMembers,
-  authLoadUserProfile,
+  authLoadV5UserProfile,
   authClearTeamMembers,
 } from "./actions";
 import { decodeToken } from "tc-auth-lib";
@@ -36,6 +36,7 @@ export default function withAuthentication(Component) {
       teamMembersLoaded,
       teamMembersLoadingError,
       v5UserProfile,
+      v5UserProfileLoading,
       v5UserProfileLoadingError,
     } = useSelector((state) => state.authUser);
     const params = useParams();
@@ -91,24 +92,21 @@ export default function withAuthentication(Component) {
 
     useEffect(() => {
       if (isLoggedIn) {
-        dispatch(authLoadUserProfile());
+        dispatch(authLoadV5UserProfile());
       }
     }, [dispatch, isLoggedIn]);
 
     return (
       <>
         {/* Show loading indicator until we know if user is logged-in or no.
             Also, show loading indicator if we need to know team members but haven't loaded them yet.
+            or load v5 user profile but haven't loaded them yet.
             In we got error during this process, show error */}
         {isLoggedIn === null ||
-          (params.teamId && !teamMembersLoaded && (
-            <LoadingIndicator error={authError || teamMembersLoadingError} />
+          ((params.teamId && !teamMembersLoaded || v5UserProfileLoading || v5UserProfileLoadingError)&& (
+            <LoadingIndicator error={authError || teamMembersLoadingError || v5UserProfileLoadingError} />
           ))}
 
-        {/* Show component only if  v5 user profile load error */}
-        {isLoggedIn === true && v5UserProfileLoadingError && (
-          <LoadingIndicator error={v5UserProfileLoadingError} />
-        )}
         {/* Show component only if user is logged-in and if we don't need team members or we already loaded them */}
         {isLoggedIn === true &&
         v5UserProfile &&

src/hoc/withAuthentication/reducers/index.js

@@ -17,6 +17,7 @@ const initialState = {
   teamMembersLoadingError: undefined,
   teamMembersLoaded: false,
   v5UserProfile: undefined,
+  v5UserProfileLoading: false,
   v5UserProfileLoadingError: false,
 };
 
@@ -97,17 +98,25 @@ const reducer = (state = initialState, action) => {
       };
     }
 
+    case ACTION_TYPE.AUTH_LOAD_V5_USER_PROFILE_PENDING: {
+      return {
+        ...state,
+        v5UserProfileLoading: true,
+      };
+    }
     case ACTION_TYPE.AUTH_LOAD_V5_USER_PROFILE_SUCCESS: {
       return {
         ...state,
         v5UserProfile: action.payload,
+        v5UserProfileLoading: false,
         v5UserProfileLoadingError: false,
       };
     }
     case ACTION_TYPE.AUTH_LOAD_V5_USER_PROFILE_ERROR: {
       return {
         ...state,
         v5UserProfileLoadingError: action.payload,
+        v5UserProfileLoading: false,
       };
     }
 

src/services/teams.js

@@ -27,7 +27,7 @@ export const getMyTeams = (name, page = 1, perPage) => {
  *
  * @returns {Promise<{}>} user profile object
  */
-export const getUserProfile = () => {
+export const getV5UserProfile = () => {
   return axios.get(`${config.API.V5}/taas-teams/me`);
 };