fix: issue #37

Author: yoution

package-lock.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",

package.json

@@ -6,32 +6,36 @@
 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";
 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 = () => {
           <Input
             placeholder="Filter by team name"
             styleName="filter-input"
-            onChange={(e) => onFilterChange.callback(e.target.value)}
+            onChange={onFilterChange}
           />
         }
       />
+      {myTeams && myTeams.length === 0 && (<div styleName="empty">No teams found</div>)}
       {!myTeams ? (
         <LoadingIndicator error={loadingError && loadingError.toString()} />
       ) : (

src/routes/MyTeamsList/index.jsx

@@ -18,6 +18,9 @@
   }
 }
 
+.empty {
+  text-align: center;
+}
 
 .pagination-wrapper {
   margin-top: 20px;

src/routes/MyTeamsList/styles.module.scss

@@ -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;
     })