fix: error message for #44

Author: yoution

src/components/Authentication/index.jsx

@@ -0,0 +1,39 @@
+/**
+ * Authentication 
+ *
+ * wrap component for authentication 
+ */
+import React, { useCallback, useState, useEffect } from "react";
+import { getAuthUserTokens, login } from "@topcoder/micro-frontends-navbar-app";
+
+export default function Authentication(Component) {
+
+  const  AuthenticatedComponent = (props) => {
+    let [isLoggedIn, setIsLoggedIn] = useState(null);
+
+    useEffect(() => {
+      if (props.auth) {
+        getAuthUserTokens()
+          .then(({ tokenV3 }) => {
+            if (!!tokenV3) {
+              setIsLoggedIn(!!tokenV3)
+            } else {
+              login()
+            }
+          })
+      }
+    }, [props.auth]);
+
+    return (
+      <div>
+        {
+          (!props.auth || props.auth && isLoggedIn === true)
+            ? <Component { ...props}/>
+            : null
+        }
+      </div>
+    )
+  }
+
+  return AuthenticatedComponent
+}

src/components/LoadingIndicator/index.jsx

@@ -4,17 +4,18 @@
  * Optionally shows error.
  */
 import React from "react";
+import _ from "lodash";
 import PT from "prop-types";
 import "./styles.module.scss";
 
 const LoadingIndicator = ({ error }) => {
   return (
-    <div styleName="loading-indicator">{!error ? "Loading..." : error}</div>
+    <div styleName="loading-indicator">{!error ? "Loading..." : _.get(error, 'response.data.message') || error}</div>
   );
 };
 
 LoadingIndicator.propTypes = {
-  error: PT.string,
+  error: PT.object,
 };
 
 export default LoadingIndicator;

src/root.component.jsx

@@ -14,9 +14,9 @@ export default function Root() {
     <div className={styles['topcoder-micro-frontends-teams-app']}>
       <Provider store={store}>
         <Router>
-          <MyTeamsList path="/taas/myteams" />
-          <MyTeamsDetails path="/taas/myteams/:teamId" />
-          <PositionDetails path="/taas/myteams/:teamId/positions/:positionId" />
+          <MyTeamsList path="/taas/myteams" auth/>
+          <MyTeamsDetails path="/taas/myteams/:teamId" auth />
+          <PositionDetails path="/taas/myteams/:teamId/positions/:positionId" auth/>
         </Router>
 
         {/* Global config for Toastr popups */}

src/routes/MyTeamsDetails/index.jsx

@@ -14,6 +14,7 @@ import LoadingIndicator from "components/LoadingIndicator";
 import TeamSummary from "./components/TeamSummary";
 import TeamMembers from "./components/TeamMembers";
 import TeamPositions from "./components/TeamPositions";
+import Authentication from '../../components/Authentication'
 import { useAsync } from "react-use";
 
 const MyTeamsDetails = ({ teamId }) => {
@@ -22,7 +23,7 @@ const MyTeamsDetails = ({ teamId }) => {
   return (
     <LayoutContainer>
       {!team ? (
-        <LoadingIndicator error={loadingError && loadingError.toString()} />
+        <LoadingIndicator error={loadingError} />
       ) : (
         <>
           <PageHeader title={team.name} backTo="/taas/myteams" />
@@ -39,4 +40,4 @@ MyTeamsDetails.propTypes = {
   teamId: PT.string,
 };
 
-export default MyTeamsDetails;
+export default Authentication(MyTeamsDetails);

src/routes/MyTeamsList/index.jsx

@@ -13,6 +13,7 @@ import { getMyTeams } from "../../services/teams";
 import TeamCard from "./components/TeamCard";
 import TeamCardGrid from "./components/TeamCardGrid";
 import LoadingIndicator from "../../components/LoadingIndicator";
+import Authentication from '../../components/Authentication'
 import { useDebounce } from "react-use";
 import { TEAMS_PER_PAGE } from "constants";
 import "./styles.module.scss";
@@ -74,7 +75,7 @@ const MyTeamsList = () => {
         <div styleName="empty">No teams found</div>
       )}
       {!myTeams ? (
-        <LoadingIndicator error={loadingError && loadingError.toString()} />
+        <LoadingIndicator error={loadingError} />
       ) : (
         <>
           <TeamCardGrid>
@@ -98,4 +99,4 @@ const MyTeamsList = () => {
   );
 };
 
-export default MyTeamsList;
+export default Authentication(MyTeamsList);

src/routes/PositionDetails/index.jsx

@@ -9,6 +9,7 @@ import LayoutContainer from "components/LayoutContainer";
 import LoadingIndicator from "components/LoadingIndicator";
 import PageHeader from "components/PageHeader";
 import { CANDIDATE_STATUS } from "constants";
+import Authentication from '../../components/Authentication'
 import PositionCandidates from "./components/PositionCandidates";
 import CandidatesStatusFilter from "./components/CandidatesStatusFilter";
 import { useTeamPositionsState } from "./hooks/useTeamPositionsState";
@@ -61,4 +62,4 @@ PositionDetails.propTypes = {
   positionId: PT.string,
 };
 
-export default PositionDetails;
+export default Authentication(PositionDetails);