refactor: remove "auth"

ref issue topcoder-archive#44

Author: maxceem

src/components/LoadingIndicator/index.jsx

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

src/hoc/withAuthentication.js

@@ -3,7 +3,7 @@
  *
  * wrap component for authentication
  */
-import React, { useCallback, useState, useEffect } from "react";
+import React, { useState, useEffect } from "react";
 import { getAuthUserTokens, login } from "@topcoder/micro-frontends-navbar-app";
 import LoadingIndicator from "../components/LoadingIndicator";
 
@@ -13,27 +13,25 @@ export default function withAuthentication(Component) {
     let [authError, setAuthError] = useState(false);
 
     useEffect(() => {
-      if (props.auth) {
-        getAuthUserTokens()
-          .then(({ tokenV3 }) => {
-            if (!!tokenV3) {
-              setIsLoggedIn(!!tokenV3);
-            } else {
-              login();
-            }
-          })
-          .catch((err) => {
-            setAuthError(err);
-          });
-      }
-    }, [props.auth]);
+      getAuthUserTokens()
+        .then(({ tokenV3 }) => {
+          if (!!tokenV3) {
+            setIsLoggedIn(!!tokenV3);
+          } else {
+            login();
+          }
+        })
+        .catch(setAuthError);
+    }, []);
 
     return (
       <>
-        {authError && <LoadingIndicator error={authError.toString()} />}
-        {!props.auth || (props.auth && isLoggedIn === true) ? (
-          <Component {...props} />
-        ) : null}
+        {/* Show loading indicator until we know if user is logged-in or no.
+            In we got error during this process, show error */}
+        {isLoggedIn === null && <LoadingIndicator error={authError} />}
+
+        {/* Show component only if user is logged-in */}
+        {isLoggedIn === true ? <Component {...props} /> : null}
       </>
     );
   };

src/root.component.jsx

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