From 820d8ca5c78571b4a2e00192ee71e410b5c0667c Mon Sep 17 00:00:00 2001 From: yoution Date: Fri, 8 Jan 2021 13:56:17 +0800 Subject: [PATCH 1/2] fix: error message for #44 --- src/components/Authentication/index.jsx | 39 +++++++++++++++++++++++ src/components/LoadingIndicator/index.jsx | 5 +-- src/root.component.jsx | 6 ++-- src/routes/MyTeamsDetails/index.jsx | 5 +-- src/routes/MyTeamsList/index.jsx | 5 +-- src/routes/PositionDetails/index.jsx | 3 +- 6 files changed, 53 insertions(+), 10 deletions(-) create mode 100644 src/components/Authentication/index.jsx diff --git a/src/components/Authentication/index.jsx b/src/components/Authentication/index.jsx new file mode 100644 index 00000000..2335d674 --- /dev/null +++ b/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 ( +
+ { + (!props.auth || props.auth && isLoggedIn === true) + ? + : null + } +
+ ) + } + + return AuthenticatedComponent +} diff --git a/src/components/LoadingIndicator/index.jsx b/src/components/LoadingIndicator/index.jsx index a5f70dd1..6d7e180d 100644 --- a/src/components/LoadingIndicator/index.jsx +++ b/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 ( -
{!error ? "Loading..." : error}
+
{!error ? "Loading..." : _.get(error, 'response.data.message') || error}
); }; LoadingIndicator.propTypes = { - error: PT.string, + error: PT.object, }; export default LoadingIndicator; diff --git a/src/root.component.jsx b/src/root.component.jsx index dd6bd948..eed88770 100644 --- a/src/root.component.jsx +++ b/src/root.component.jsx @@ -14,9 +14,9 @@ export default function Root() {
- - - + + + {/* Global config for Toastr popups */} diff --git a/src/routes/MyTeamsDetails/index.jsx b/src/routes/MyTeamsDetails/index.jsx index 2f0d5c75..444690b4 100644 --- a/src/routes/MyTeamsDetails/index.jsx +++ b/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 ( {!team ? ( - + ) : ( <> @@ -39,4 +40,4 @@ MyTeamsDetails.propTypes = { teamId: PT.string, }; -export default MyTeamsDetails; +export default Authentication(MyTeamsDetails); diff --git a/src/routes/MyTeamsList/index.jsx b/src/routes/MyTeamsList/index.jsx index 8db13129..1ae10f9e 100644 --- a/src/routes/MyTeamsList/index.jsx +++ b/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 = () => {
No teams found
)} {!myTeams ? ( - + ) : ( <> @@ -98,4 +99,4 @@ const MyTeamsList = () => { ); }; -export default MyTeamsList; +export default Authentication(MyTeamsList); diff --git a/src/routes/PositionDetails/index.jsx b/src/routes/PositionDetails/index.jsx index 4c30df09..8a994206 100644 --- a/src/routes/PositionDetails/index.jsx +++ b/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); From 32ffdd4cb822f2493ac7c0c6c93a9f5cd3f35101 Mon Sep 17 00:00:00 2001 From: yoution Date: Sat, 9 Jan 2021 22:21:12 +0800 Subject: [PATCH 2/2] fix: issue #44 --- src/components/Authentication/index.jsx | 39 --------------------- src/components/LoadingIndicator/index.jsx | 4 ++- src/hoc/withAuthentication.js | 42 +++++++++++++++++++++++ src/root.component.jsx | 11 +++--- src/routes/MyTeamsDetails/index.jsx | 4 +-- src/routes/MyTeamsList/index.jsx | 4 +-- src/routes/PositionDetails/index.jsx | 4 +-- 7 files changed, 58 insertions(+), 50 deletions(-) delete mode 100644 src/components/Authentication/index.jsx create mode 100644 src/hoc/withAuthentication.js diff --git a/src/components/Authentication/index.jsx b/src/components/Authentication/index.jsx deleted file mode 100644 index 2335d674..00000000 --- a/src/components/Authentication/index.jsx +++ /dev/null @@ -1,39 +0,0 @@ -/** - * 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 ( -
- { - (!props.auth || props.auth && isLoggedIn === true) - ? - : null - } -
- ) - } - - return AuthenticatedComponent -} diff --git a/src/components/LoadingIndicator/index.jsx b/src/components/LoadingIndicator/index.jsx index 6d7e180d..96faef90 100644 --- a/src/components/LoadingIndicator/index.jsx +++ b/src/components/LoadingIndicator/index.jsx @@ -10,7 +10,9 @@ import "./styles.module.scss"; const LoadingIndicator = ({ error }) => { return ( -
{!error ? "Loading..." : _.get(error, 'response.data.message') || error}
+
+ {!error ? "Loading..." : _.get(error, "response.data.message") || error} +
); }; diff --git a/src/hoc/withAuthentication.js b/src/hoc/withAuthentication.js new file mode 100644 index 00000000..0385666b --- /dev/null +++ b/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 && } + {!props.auth || (props.auth && isLoggedIn === true) ? ( + + ) : null} + + ); + }; + + return AuthenticatedComponent; +} diff --git a/src/root.component.jsx b/src/root.component.jsx index eed88770..6ae1658e 100644 --- a/src/root.component.jsx +++ b/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 ( -
+
- + - + {/* Global config for Toastr popups */} diff --git a/src/routes/MyTeamsDetails/index.jsx b/src/routes/MyTeamsDetails/index.jsx index 444690b4..c8e258d1 100644 --- a/src/routes/MyTeamsDetails/index.jsx +++ b/src/routes/MyTeamsDetails/index.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); diff --git a/src/routes/MyTeamsList/index.jsx b/src/routes/MyTeamsList/index.jsx index 1ae10f9e..afc92e73 100644 --- a/src/routes/MyTeamsList/index.jsx +++ b/src/routes/MyTeamsList/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); diff --git a/src/routes/PositionDetails/index.jsx b/src/routes/PositionDetails/index.jsx index 8a994206..cb9d3ae6 100644 --- a/src/routes/PositionDetails/index.jsx +++ b/src/routes/PositionDetails/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);