fix: issue #16

Author: yoution

package-lock.json

@@ -56,6 +56,7 @@
   "dependencies": {
     "@popperjs/core": "^2.5.4",
     "@reach/router": "^1.3.4",
+    "@topcoder-platform/tc-auth-lib": "git+https://github.com/topcoder-platform/tc-auth-lib.git#1.0.4",
     "axios": "^0.21.0",
     "classnames": "^2.2.6",
     "express": "^4.17.1",

package.json

@@ -15,14 +15,9 @@ import TeamSummary from "./components/TeamSummary";
 import TeamMembers from "./components/TeamMembers";
 import TeamPositions from "./components/TeamPositions";
 import { useAsync } from "react-use";
-import {
-  getAuthUserTokens,
-} from "@topcoder/micro-frontends-navbar-app";
 
 const MyTeamsDetails = ({ teamId }) => {
-  const authUserTokens = useAsync(getAuthUserTokens);
-  const tokenV3 = authUserTokens.value ? authUserTokens.value.tokenV3 : null;
-  const [team, loadingError] = useData(getTeamById, tokenV3, teamId);
+  const [team, loadingError] = useData(getTeamById, teamId);
 
   return (
     <LayoutContainer>

src/routes/MyTeamsDetails/index.jsx

@@ -12,14 +12,9 @@ import TeamCard from "./components/TeamCard";
 import TeamCardGrid from "./components/TeamCardGrid";
 import LoadingIndicator from "../../components/LoadingIndicator";
 import { useAsync } from "react-use";
-import {
-  getAuthUserTokens,
-} from "@topcoder/micro-frontends-navbar-app";
 
 const MyTeamsList = () => {
-  const authUserTokens = useAsync(getAuthUserTokens);
-  const tokenV3 = authUserTokens.value ? authUserTokens.value.tokenV3 : null;
-  const [myTeams, loadingError] = useData(getMyTeams, tokenV3);
+  const [myTeams, loadingError] = useData(getMyTeams);
 
   return (
     <LayoutContainer>

src/routes/MyTeamsList/index.jsx

@@ -2,7 +2,6 @@
  * Position Details page actions
  */
 import { getPositionDetails, patchPositionCandidate } from "services/teams";
-import { getAuthUserTokens } from "@topcoder/micro-frontends-navbar-app";
 import { ACTION_TYPE } from "constants";
 
 /**
@@ -16,12 +15,7 @@ import { ACTION_TYPE } from "constants";
 export const loadPosition = (teamId, positionId) => ({
   type: ACTION_TYPE.LOAD_POSITION,
   payload: async () => {
-    const tokens = await getAuthUserTokens();
-    const response = await getPositionDetails(
-      tokens.tokenV3,
-      teamId,
-      positionId
-    );
+    const response = await getPositionDetails(teamId, positionId);
 
     return response.data;
   },
@@ -42,9 +36,7 @@ export const loadPosition = (teamId, positionId) => ({
 export const updateCandidate = (candidateId, partialCandidateData) => ({
   type: ACTION_TYPE.UPDATE_CANDIDATE,
   payload: async () => {
-    const tokens = await getAuthUserTokens();
     const response = await patchPositionCandidate(
-      tokens.tokenV3,
       candidateId,
       partialCandidateData
     );
@@ -61,4 +53,4 @@ export const updateCandidate = (candidateId, partialCandidateData) => ({
  */
 export const resetPositionState = () => ({
   type: ACTION_TYPE.RESET_POSITION_STATE,
-})
+});

src/routes/PositionDetails/actions/index.js

@@ -0,0 +1,43 @@
+import axios from "axios";
+import store from "../store";
+import { getFreshToken, isTokenExpired } from "@topcoder-platform/tc-auth-lib";
+import { getAuthUserTokens } from "@topcoder/micro-frontends-navbar-app";
+
+export const getToken = () => {
+  return new Promise(async (resolve, reject) => {
+    const authUserTokens = await getAuthUserTokens();
+    const token = authUserTokens ? authUserTokens.tokenV3 : null;
+    if (token && !isTokenExpired(token)) {
+      return resolve(token);
+    } else {
+      return getFreshToken()
+        .then((token) => {
+          resolve(token);
+        })
+        .catch((err) => {
+          console.log(err);
+          reject(err);
+        });
+    }
+  });
+};
+
+export const axiosInstance = axios.create({
+  headers: {
+    "Content-Type": "application/json",
+  },
+});
+
+// request interceptor to pass auth token
+axiosInstance.interceptors.request.use((config) => {
+  return getToken()
+    .then((token) => {
+      config.headers["Authorization"] = `Bearer ${token}`;
+      return config;
+    })
+    .catch((err) => {
+      // TODO handle this error somehow
+      console.log(err);
+      return config;
+    });
+});

src/services/requestInterceptor.js

@@ -1,84 +1,52 @@
 /**
  * Topcoder TaaS Service
  */
-import axios from "axios";
+import { axiosInstance as axios } from "./requestInterceptor";
 import config from "../../config";
 
 /**
  * Get my teams.
  *
- * @param {string} tokenV3 login token
- *
  * @returns {Promise<object[]>} list of teams
  */
-export const getMyTeams = (tokenV3) => {
-  if (!tokenV3) {
-    return Promise.resolve({
-      data: null,
-    });
-  }
-  return axios.get(`${config.API.V5}/taas-teams`, {
-    headers: { Authorization: `Bearer ${tokenV3}` },
-  });
+export const getMyTeams = () => {
+  debugger;
+  return axios.get(`${config.API.V5}/taas-teams`);
 };
 
 /**
  * Get team by id.
  *
- * @param {string} tokenV3 login token
  * @param {string|number} teamId team id
  *
  * @returns {Promise<{}>} team object
  */
-export const getTeamById = (tokenV3, teamId) => {
-  if (!tokenV3) {
-    return Promise.resolve({
-      data: null,
-    });
-  }
-  return axios.get(`${config.API.V5}/taas-teams/${teamId}`, {
-    headers: { Authorization: `Bearer ${tokenV3}` },
-  });
+export const getTeamById = (teamId) => {
+  return axios.get(`${config.API.V5}/taas-teams/${teamId}`);
 };
 
 /**
  * Get team position details.
  *
- * @param {string} tokenV3 login token
  * @param {string|number} teamId team id
  * @param {string|number} positionId position id
  *
  * @returns {Promise<object{}>} job object
  */
-export const getPositionDetails = (tokenV3, teamId, positionId) => {
-  if (!tokenV3) {
-    return Promise.resolve({
-      data: null,
-    });
-  }
-  return axios.get(`${config.API.V5}/taas-teams/${teamId}/jobs/${positionId}`, {
-    headers: { Authorization: `Bearer ${tokenV3}` },
-  });
+export const getPositionDetails = (teamId, positionId) => {
+  return axios.get(`${config.API.V5}/taas-teams/${teamId}/jobs/${positionId}`);
 };
 
 /**
  * Patch Position Candidate
  *
- * @param {string} tokenV3 login token
  * @param {string} candidateId position candidate id
  *
  * @returns {Promise<object{}>} position candidate
  */
-export const patchPositionCandidate = (
-  tokenV3,
-  candidateId,
-  partialCandidateData
-) => {
+export const patchPositionCandidate = (candidateId, partialCandidateData) => {
   return axios.patch(
     `${config.API.V5}/jobCandidates/${candidateId}`,
-    partialCandidateData,
-    {
-      headers: { Authorization: `Bearer ${tokenV3}` },
-    }
+    partialCandidateData
   );
 };