fix: issue #37 again

Author: yoution

package-lock.json

@@ -75,8 +75,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;