From 6b05bfd6401985db56f4cfbfefcbcb4d0b051434 Mon Sep 17 00:00:00 2001 From: yoution Date: Wed, 30 Dec 2020 20:29:03 +0800 Subject: [PATCH 1/4] fix: issue #16 --- package-lock.json | 7 +++ package.json | 1 + src/routes/MyTeamsDetails/index.jsx | 7 +-- src/routes/MyTeamsList/index.jsx | 7 +-- src/routes/PositionDetails/actions/index.js | 12 +---- src/services/requestInterceptor.js | 43 +++++++++++++++++ src/services/teams.js | 52 ++++----------------- 7 files changed, 65 insertions(+), 64 deletions(-) create mode 100644 src/services/requestInterceptor.js diff --git a/package-lock.json b/package-lock.json index 939b1bc4..dc06ef85 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2725,6 +2725,13 @@ "@types/testing-library__react": "^9.1.2" } }, + "@topcoder-platform/tc-auth-lib": { + "version": "git+https://github.com/topcoder-platform/tc-auth-lib.git#68fdc22464810c51b703a33e529cdbd6d09437de", + "from": "git+https://github.com/topcoder-platform/tc-auth-lib.git#1.0.4", + "requires": { + "lodash": "^4.17.19" + } + }, "@types/anymatch": { "version": "1.3.1", "resolved": "https://registry.npmjs.org/@types/anymatch/-/anymatch-1.3.1.tgz", diff --git a/package.json b/package.json index 3a16e2cc..872ec191 100644 --- a/package.json +++ b/package.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", diff --git a/src/routes/MyTeamsDetails/index.jsx b/src/routes/MyTeamsDetails/index.jsx index 51f124d3..2f0d5c75 100644 --- a/src/routes/MyTeamsDetails/index.jsx +++ b/src/routes/MyTeamsDetails/index.jsx @@ -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 ( diff --git a/src/routes/MyTeamsList/index.jsx b/src/routes/MyTeamsList/index.jsx index 819f97c5..dfb6d320 100644 --- a/src/routes/MyTeamsList/index.jsx +++ b/src/routes/MyTeamsList/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 ( diff --git a/src/routes/PositionDetails/actions/index.js b/src/routes/PositionDetails/actions/index.js index c5278a01..e7fdf31a 100644 --- a/src/routes/PositionDetails/actions/index.js +++ b/src/routes/PositionDetails/actions/index.js @@ -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, -}) +}); diff --git a/src/services/requestInterceptor.js b/src/services/requestInterceptor.js new file mode 100644 index 00000000..8adcb1f2 --- /dev/null +++ b/src/services/requestInterceptor.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; + }); +}); diff --git a/src/services/teams.js b/src/services/teams.js index 65e158bb..eebc6c24 100644 --- a/src/services/teams.js +++ b/src/services/teams.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} 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} 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} 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 ); }; From 5181c3f9a95bc160b44d148754b13f840bdc06d6 Mon Sep 17 00:00:00 2001 From: yoution Date: Sun, 3 Jan 2021 17:09:45 +0800 Subject: [PATCH 2/4] fix: fix lint error #39 --- package-lock.json | 7 ----- package.json | 1 - .../hooks/useTeamPositionsState.js | 2 +- src/routes/PositionDetails/reducers/index.js | 14 ++++------ src/services/requestInterceptor.js | 26 ++++++------------- src/services/teams.js | 1 - src/utils/format.js | 4 ++- 7 files changed, 17 insertions(+), 38 deletions(-) diff --git a/package-lock.json b/package-lock.json index dc06ef85..939b1bc4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2725,13 +2725,6 @@ "@types/testing-library__react": "^9.1.2" } }, - "@topcoder-platform/tc-auth-lib": { - "version": "git+https://github.com/topcoder-platform/tc-auth-lib.git#68fdc22464810c51b703a33e529cdbd6d09437de", - "from": "git+https://github.com/topcoder-platform/tc-auth-lib.git#1.0.4", - "requires": { - "lodash": "^4.17.19" - } - }, "@types/anymatch": { "version": "1.3.1", "resolved": "https://registry.npmjs.org/@types/anymatch/-/anymatch-1.3.1.tgz", diff --git a/package.json b/package.json index 872ec191..3a16e2cc 100644 --- a/package.json +++ b/package.json @@ -56,7 +56,6 @@ "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", diff --git a/src/routes/PositionDetails/hooks/useTeamPositionsState.js b/src/routes/PositionDetails/hooks/useTeamPositionsState.js index 6095d3f6..2f196abb 100644 --- a/src/routes/PositionDetails/hooks/useTeamPositionsState.js +++ b/src/routes/PositionDetails/hooks/useTeamPositionsState.js @@ -24,7 +24,7 @@ export const useTeamPositionsState = (teamId, positionId) => { // clear state when we leave the page return () => { dispatch(resetPositionState()); - } + }; }, [dispatch, teamId, positionId]); // bind actions to dispatch method diff --git a/src/routes/PositionDetails/reducers/index.js b/src/routes/PositionDetails/reducers/index.js index f522c503..4b01961c 100644 --- a/src/routes/PositionDetails/reducers/index.js +++ b/src/routes/PositionDetails/reducers/index.js @@ -76,14 +76,10 @@ const reducer = (state = initialState, action) => { }); case ACTION_TYPE.UPDATE_CANDIDATE_SUCCESS: - return patchCandidateInState( - state, - action.meta.candidateId, - { - updating: false, - ...action.payload, - } - ); + return patchCandidateInState(state, action.meta.candidateId, { + updating: false, + ...action.payload, + }); case ACTION_TYPE.UPDATE_CANDIDATE_ERROR: return patchCandidateInState(state, action.meta.candidateId, { @@ -92,7 +88,7 @@ const reducer = (state = initialState, action) => { }); default: - return state + return state; } }; diff --git a/src/services/requestInterceptor.js b/src/services/requestInterceptor.js index 8adcb1f2..471255f4 100644 --- a/src/services/requestInterceptor.js +++ b/src/services/requestInterceptor.js @@ -1,24 +1,16 @@ 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); - }); - } + return new Promise((resolve, reject) => { + return getAuthUserTokens() + .then(({ tokenV3: token }) => { + return resolve(token); + }) + .catch((err) => { + reject(err); + }); }); }; @@ -36,8 +28,6 @@ axiosInstance.interceptors.request.use((config) => { return config; }) .catch((err) => { - // TODO handle this error somehow - console.log(err); return config; }); }); diff --git a/src/services/teams.js b/src/services/teams.js index eebc6c24..5278705c 100644 --- a/src/services/teams.js +++ b/src/services/teams.js @@ -10,7 +10,6 @@ import config from "../../config"; * @returns {Promise} list of teams */ export const getMyTeams = () => { - debugger; return axios.get(`${config.API.V5}/taas-teams`); }; diff --git a/src/utils/format.js b/src/utils/format.js index fef9e488..c6786d00 100644 --- a/src/utils/format.js +++ b/src/utils/format.js @@ -129,5 +129,7 @@ export const formatReportIssueUrl = (subject) => { * @returns {string} request an extension URL */ export const formatRequestExtensionUrl = (subject) => { - return `mailto:${EMAIL_REQUEST_EXTENSION}?subject=${encodeURIComponent(subject)}`; + return `mailto:${EMAIL_REQUEST_EXTENSION}?subject=${encodeURIComponent( + subject + )}`; }; From 5596aadef097194aa82d1ff25255287ffc169daf Mon Sep 17 00:00:00 2001 From: yoution Date: Sun, 3 Jan 2021 19:20:14 +0800 Subject: [PATCH 3/4] fix: issue #37 --- package-lock.json | 5 ++ package.json | 4 +- src/constants/index.js | 5 ++ src/routes/MyTeamsList/index.jsx | 72 ++++++++++++++++++++--- src/routes/MyTeamsList/styles.module.scss | 33 +++++++++++ src/services/teams.js | 12 +++- 6 files changed, 119 insertions(+), 12 deletions(-) create mode 100644 src/routes/MyTeamsList/styles.module.scss diff --git a/package-lock.json b/package-lock.json index 939b1bc4..8563ac4d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16700,6 +16700,11 @@ "integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==", "dev": true }, + "use-debounce": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/use-debounce/-/use-debounce-5.2.0.tgz", + "integrity": "sha512-lW4tbPsTnvPKYqOYXp5xZ7SP7No/ARLqqQqoyRKuSzP0HxR9arhSAhznXUZFoNPWDRij8fog+N6sYbjb8c3kzw==" + }, "util": { "version": "0.11.1", "resolved": "https://registry.npmjs.org/util/-/util-0.11.1.tgz", diff --git a/package.json b/package.json index 3a16e2cc..bfd4a751 100644 --- a/package.json +++ b/package.json @@ -5,6 +5,7 @@ "dev": "webpack-dev-server --port 8501 --host 0.0.0.0", "dev-https": "webpack-dev-server --https --port 8501 --host 0.0.0.0", "build": "webpack --mode=${APPMODE:-development} --env.config=${APPENV:-dev}", + "build:prod": "webpack --mode=${APPMODE:-production} --env.config=${APPENV:-prod}", "analyze": "webpack --mode=production --env.analyze=true", "lint": "eslint src --ext js", "format": "prettier --write \"./**\"", @@ -74,7 +75,8 @@ "redux": "^4.0.5", "redux-logger": "^3.0.6", "redux-promise-middleware": "^6.1.2", - "redux-thunk": "^2.3.0" + "redux-thunk": "^2.3.0", + "use-debounce": "^5.2.0" }, "browserslist": [ "last 1 version", diff --git a/src/constants/index.js b/src/constants/index.js index 5237b12e..98a0c5c4 100644 --- a/src/constants/index.js +++ b/src/constants/index.js @@ -12,6 +12,11 @@ export const DAY_FORMAT = "MM/DD/YYYY"; */ export const TEAM_MEMBERS_PER_PAGE = 5; +/** + * How many teams show per page by default + */ +export const TEAMS_PER_PAGE = 20; + /** * How many position candidates show per page by default */ diff --git a/src/routes/MyTeamsList/index.jsx b/src/routes/MyTeamsList/index.jsx index dfb6d320..7f7a3513 100644 --- a/src/routes/MyTeamsList/index.jsx +++ b/src/routes/MyTeamsList/index.jsx @@ -3,30 +3,84 @@ * * Page for the list of teams. */ -import React from "react"; +import React, { useCallback, useState, useEffect } from "react"; +import _ from "lodash"; import LayoutContainer from "components/LayoutContainer"; +import { useDebouncedCallback } from "use-debounce"; import PageHeader from "components/PageHeader"; -import { useData } from "../../hooks/useData"; +import Input from "components/Input"; +import Pagination from "components/Pagination"; import { getMyTeams } from "../../services/teams"; import TeamCard from "./components/TeamCard"; import TeamCardGrid from "./components/TeamCardGrid"; import LoadingIndicator from "../../components/LoadingIndicator"; import { useAsync } from "react-use"; +import { TEAMS_PER_PAGE } from "constants"; +import "./styles.module.scss"; const MyTeamsList = () => { - const [myTeams, loadingError] = useData(getMyTeams); + // let [myTeams, loadingError] = useData(getMyTeams); + let [myTeams, setMyTeams] = useState(); + const [filter, setFilter] = useState(""); + const [loadingError, setLoadingError] = useState(false); + const [page, setPage] = useState(1); + const [total, setTotal] = useState(0); + + const onFilterChange = useDebouncedCallback((value) => { + setFilter(value); + setPage(1); + }, 200); + + useEffect(() => { + getMyTeams(filter, page, TEAMS_PER_PAGE) + .then((response) => { + setMyTeams(response.data); + setTotal(response.headers["x-total"]); + }) + .catch((responseError) => { + setLoadingError(responseError); + }); + }, [filter, page]); + + const onPageClick = useCallback( + (newPage) => { + setPage(newPage); + }, + [setPage] + ); return ( - + onFilterChange.callback(e.target.value)} + /> + } + /> {!myTeams ? ( ) : ( - - {myTeams.map((team) => ( - - ))} - + <> + + {myTeams.map((team) => ( + + ))} + + {myTeams.length > 0 && ( +
+ +
+ )} + )} ); diff --git a/src/routes/MyTeamsList/styles.module.scss b/src/routes/MyTeamsList/styles.module.scss new file mode 100644 index 00000000..5d77d644 --- /dev/null +++ b/src/routes/MyTeamsList/styles.module.scss @@ -0,0 +1,33 @@ +@import "styles/include"; + +.filter-input { + width: 380px; + background-color: #FFFFFF; + border: 1px solid #AAAAAA; + border-radius: 6px; + box-sizing: border-box; + color: #2A2A2A; + font-size: 14px; + height: 40px; + line-height: 38px; + outline: none; + padding: 0 15px; + + &::placeholder { + color: #AAAAAA; + } +} + + +.pagination-wrapper { + margin-top: 20px; + margin-right: 20px; + display: flex; + justify-content: flex-end; +} + +@media (max-width: 650px) { + .filter-input { + width: 100%; + } +} diff --git a/src/services/teams.js b/src/services/teams.js index 5278705c..b9121c46 100644 --- a/src/services/teams.js +++ b/src/services/teams.js @@ -6,11 +6,19 @@ import config from "../../config"; /** * Get my teams. + * @param {string|number} name team name + * @param {number} page current page + * @param {number} perPage perPage * * @returns {Promise} list of teams */ -export const getMyTeams = () => { - return axios.get(`${config.API.V5}/taas-teams`); +export const getMyTeams = (name, page = 1, perPage) => { + let query = `page=${page}&perPage=${perPage}`; + if (name) { + query += `&name=${name}`; + } + + return axios.get(`${config.API.V5}/taas-teams?${query}`); }; /** From d935ee33b9b4065d56c423cf643505b902990ee5 Mon Sep 17 00:00:00 2001 From: yoution Date: Wed, 6 Jan 2021 20:08:10 +0800 Subject: [PATCH 4/4] fix: issue #37 --- package-lock.json | 8 +------- package.json | 4 +--- src/routes/MyTeamsList/index.jsx | 21 +++++++++++++-------- src/routes/MyTeamsList/styles.module.scss | 3 +++ src/services/requestInterceptor.js | 16 ++-------------- 5 files changed, 20 insertions(+), 32 deletions(-) diff --git a/package-lock.json b/package-lock.json index 8563ac4d..422e1d0a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4680,8 +4680,7 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", - "dev": true, - "optional": true + "dev": true }, "to-regex-range": { "version": "5.0.1", @@ -16700,11 +16699,6 @@ "integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==", "dev": true }, - "use-debounce": { - "version": "5.2.0", - "resolved": "https://registry.npmjs.org/use-debounce/-/use-debounce-5.2.0.tgz", - "integrity": "sha512-lW4tbPsTnvPKYqOYXp5xZ7SP7No/ARLqqQqoyRKuSzP0HxR9arhSAhznXUZFoNPWDRij8fog+N6sYbjb8c3kzw==" - }, "util": { "version": "0.11.1", "resolved": "https://registry.npmjs.org/util/-/util-0.11.1.tgz", diff --git a/package.json b/package.json index bfd4a751..3a16e2cc 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,6 @@ "dev": "webpack-dev-server --port 8501 --host 0.0.0.0", "dev-https": "webpack-dev-server --https --port 8501 --host 0.0.0.0", "build": "webpack --mode=${APPMODE:-development} --env.config=${APPENV:-dev}", - "build:prod": "webpack --mode=${APPMODE:-production} --env.config=${APPENV:-prod}", "analyze": "webpack --mode=production --env.analyze=true", "lint": "eslint src --ext js", "format": "prettier --write \"./**\"", @@ -75,8 +74,7 @@ "redux": "^4.0.5", "redux-logger": "^3.0.6", "redux-promise-middleware": "^6.1.2", - "redux-thunk": "^2.3.0", - "use-debounce": "^5.2.0" + "redux-thunk": "^2.3.0" }, "browserslist": [ "last 1 version", diff --git a/src/routes/MyTeamsList/index.jsx b/src/routes/MyTeamsList/index.jsx index 7f7a3513..e173c2f1 100644 --- a/src/routes/MyTeamsList/index.jsx +++ b/src/routes/MyTeamsList/index.jsx @@ -6,7 +6,6 @@ import React, { useCallback, useState, useEffect } from "react"; import _ from "lodash"; import LayoutContainer from "components/LayoutContainer"; -import { useDebouncedCallback } from "use-debounce"; import PageHeader from "components/PageHeader"; import Input from "components/Input"; import Pagination from "components/Pagination"; @@ -14,24 +13,29 @@ import { getMyTeams } from "../../services/teams"; import TeamCard from "./components/TeamCard"; import TeamCardGrid from "./components/TeamCardGrid"; import LoadingIndicator from "../../components/LoadingIndicator"; -import { useAsync } from "react-use"; +import { useDebounce } from "react-use"; import { TEAMS_PER_PAGE } from "constants"; import "./styles.module.scss"; const MyTeamsList = () => { - // let [myTeams, loadingError] = useData(getMyTeams); - let [myTeams, setMyTeams] = useState(); + let [myTeams, setMyTeams] = useState(null); const [filter, setFilter] = useState(""); + const [tempFilter, setTempFilter] = React.useState(''); const [loadingError, setLoadingError] = useState(false); const [page, setPage] = useState(1); const [total, setTotal] = useState(0); + const onFilterChange = (evt) => { + setTempFilter(evt.target.value) + } - const onFilterChange = useDebouncedCallback((value) => { - setFilter(value); + useDebounce((value) => { + console.log('xxxx', value) + setFilter(tempFilter); setPage(1); - }, 200); + }, 200, [tempFilter]); useEffect(() => { + setMyTeams(null); getMyTeams(filter, page, TEAMS_PER_PAGE) .then((response) => { setMyTeams(response.data); @@ -57,10 +61,11 @@ const MyTeamsList = () => { onFilterChange.callback(e.target.value)} + onChange={onFilterChange} /> } /> + {myTeams && myTeams.length === 0 && (
No teams found
)} {!myTeams ? ( ) : ( diff --git a/src/routes/MyTeamsList/styles.module.scss b/src/routes/MyTeamsList/styles.module.scss index 5d77d644..b2158822 100644 --- a/src/routes/MyTeamsList/styles.module.scss +++ b/src/routes/MyTeamsList/styles.module.scss @@ -18,6 +18,9 @@ } } +.empty { + text-align: center; +} .pagination-wrapper { margin-top: 20px; diff --git a/src/services/requestInterceptor.js b/src/services/requestInterceptor.js index 471255f4..ec369c2b 100644 --- a/src/services/requestInterceptor.js +++ b/src/services/requestInterceptor.js @@ -2,18 +2,6 @@ import axios from "axios"; import store from "../store"; import { getAuthUserTokens } from "@topcoder/micro-frontends-navbar-app"; -export const getToken = () => { - return new Promise((resolve, reject) => { - return getAuthUserTokens() - .then(({ tokenV3: token }) => { - return resolve(token); - }) - .catch((err) => { - reject(err); - }); - }); -}; - export const axiosInstance = axios.create({ headers: { "Content-Type": "application/json", @@ -22,8 +10,8 @@ export const axiosInstance = axios.create({ // request interceptor to pass auth token axiosInstance.interceptors.request.use((config) => { - return getToken() - .then((token) => { + return getAuthUserTokens() + .then(({ tokenV3: token }) => { config.headers["Authorization"] = `Bearer ${token}`; return config; })