fix: issue #37

Author: yoution

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

package.json

@@ -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
  */

src/constants/index.js

@@ -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 (
     <LayoutContainer>
-      <PageHeader title="My Teams" />
+      <PageHeader
+        title="My Teams"
+        aside={
+          <Input
+            placeholder="Filter by team name"
+            styleName="filter-input"
+            onChange={(e) => onFilterChange.callback(e.target.value)}
+          />
+        }
+      />
       {!myTeams ? (
         <LoadingIndicator error={loadingError && loadingError.toString()} />
       ) : (
-        <TeamCardGrid>
-          {myTeams.map((team) => (
-            <TeamCard key={team.id} team={team} />
-          ))}
-        </TeamCardGrid>
+        <>
+          <TeamCardGrid>
+            {myTeams.map((team) => (
+              <TeamCard key={team.id} team={team} />
+            ))}
+          </TeamCardGrid>
+          {myTeams.length > 0 && (
+            <div styleName="pagination-wrapper">
+              <Pagination
+                total={total}
+                currentPage={page}
+                perPage={TEAMS_PER_PAGE}
+                onPageClick={onPageClick}
+              />
+            </div>
+          )}
+        </>
       )}
     </LayoutContainer>
   );

src/routes/MyTeamsList/index.jsx

@@ -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%;
+  }
+}

src/routes/MyTeamsList/styles.module.scss

@@ -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<object[]>} 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}`);
 };
 
 /**