Merge pull request #47 from yoution/feature/issue-44

fix: error message for #44

Author: maxceem

src/components/LoadingIndicator/index.jsx

@@ -4,17 +4,20 @@
  * 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/hoc/withAuthentication.js

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

src/root.component.jsx

@@ -4,19 +4,22 @@ import { Router } from "@reach/router";
 import MyTeamsList from "./routes/MyTeamsList";
 import MyTeamsDetails from "./routes/MyTeamsDetails";
 import PositionDetails from "./routes/PositionDetails";
-import ReduxToastr from 'react-redux-toastr'
+import ReduxToastr from "react-redux-toastr";
 import store from "./store";
 import "./styles/main.vendor.scss";
 import styles from "./styles/main.module.scss";
 
 export default function Root() {
   return (
-    <div className={styles['topcoder-micro-frontends-teams-app']}>
+    <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 withAuthentication from "../../hoc/withAuthentication";
 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 withAuthentication(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 withAuthentication from "../../hoc/withAuthentication";
 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 withAuthentication(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 withAuthentication from "../../hoc/withAuthentication";
 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 withAuthentication(PositionDetails);