fix: issue topcoder-archive#44

Author: yoution

src/components/Authentication/index.jsx

@@ -10,7 +10,9 @@ import "./styles.module.scss";
 
 const LoadingIndicator = ({ error }) => {
   return (
-    <div styleName="loading-indicator">{!error ? "Loading..." : _.get(error, 'response.data.message') || error}</div>
+    <div styleName="loading-indicator">
+      {!error ? "Loading..." : _.get(error, "response.data.message") || error}
+    </div>
   );
 };
 

src/components/LoadingIndicator/index.jsx

@@ -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/hoc/withAuthentication.js

@@ -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" auth/>
+          <MyTeamsList path="/taas/myteams" auth />
           <MyTeamsDetails path="/taas/myteams/:teamId" auth />
-          <PositionDetails path="/taas/myteams/:teamId/positions/:positionId" auth/>
+          <PositionDetails
+            path="/taas/myteams/:teamId/positions/:positionId"
+            auth
+          />
         </Router>
 
         {/* Global config for Toastr popups */}

src/root.component.jsx

@@ -14,7 +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 withAuthentication from "../../hoc/withAuthentication";
 import { useAsync } from "react-use";
 
 const MyTeamsDetails = ({ teamId }) => {
@@ -40,4 +40,4 @@ MyTeamsDetails.propTypes = {
   teamId: PT.string,
 };
 
-export default Authentication(MyTeamsDetails);
+export default withAuthentication(MyTeamsDetails);

src/routes/MyTeamsDetails/index.jsx

@@ -13,7 +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 withAuthentication from "../../hoc/withAuthentication";
 import { useDebounce } from "react-use";
 import { TEAMS_PER_PAGE } from "constants";
 import "./styles.module.scss";
@@ -99,4 +99,4 @@ const MyTeamsList = () => {
   );
 };
 
-export default Authentication(MyTeamsList);
+export default withAuthentication(MyTeamsList);

src/routes/MyTeamsList/index.jsx

@@ -9,7 +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 withAuthentication from "../../hoc/withAuthentication";
 import PositionCandidates from "./components/PositionCandidates";
 import CandidatesStatusFilter from "./components/CandidatesStatusFilter";
 import { useTeamPositionsState } from "./hooks/useTeamPositionsState";
@@ -62,4 +62,4 @@ PositionDetails.propTypes = {
   positionId: PT.string,
 };
 
-export default Authentication(PositionDetails);
+export default withAuthentication(PositionDetails);