Merge pull request #40 from yoution/feature/fix-issue

Feature/fix issue

Author: maxceem

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

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

@@ -3,35 +3,89 @@
  *
  * 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 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 {
-  getAuthUserTokens,
-} from "@topcoder/micro-frontends-navbar-app";
+import { useDebounce } from "react-use";
+import { TEAMS_PER_PAGE } from "constants";
+import "./styles.module.scss";
 
 const MyTeamsList = () => {
-  const authUserTokens = useAsync(getAuthUserTokens);
-  const tokenV3 = authUserTokens.value ? authUserTokens.value.tokenV3 : null;
-  const [myTeams, loadingError] = useData(getMyTeams, tokenV3);
+  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)
+  }
+
+  useDebounce((value) => {
+    console.log('xxxx', value)
+    setFilter(tempFilter);
+    setPage(1);
+  }, 200, [tempFilter]);
+
+  useEffect(() => {
+    setMyTeams(null);
+    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={onFilterChange}
+          />
+        }
+      />
+      {myTeams && myTeams.length === 0 && (<div styleName="empty">No teams found</div>)}
       {!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,36 @@
+@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;
+  }
+}
+
+.empty {
+  text-align: center;
+}
+
+.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

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

src/routes/PositionDetails/actions/index.js

@@ -0,0 +1,21 @@
+import axios from "axios";
+import store from "../store";
+import { getAuthUserTokens } from "@topcoder/micro-frontends-navbar-app";
+
+export const axiosInstance = axios.create({
+  headers: {
+    "Content-Type": "application/json",
+  },
+});
+
+// request interceptor to pass auth token
+axiosInstance.interceptors.request.use((config) => {
+  return getAuthUserTokens()
+    .then(({ tokenV3: token }) => {
+      config.headers["Authorization"] = `Bearer ${token}`;
+      return config;
+    })
+    .catch((err) => {
+      return config;
+    });
+});

src/services/requestInterceptor.js

@@ -1,84 +1,59 @@
 /**
  * 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
+ * @param {string|number}  name    team name
+ * @param {number}         page    current page
+ * @param {number}         perPage perPage
  *
  * @returns {Promise<object[]>} list of teams
  */
-export const getMyTeams = (tokenV3) => {
-  if (!tokenV3) {
-    return Promise.resolve({
-      data: null,
-    });
+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`, {
-    headers: { Authorization: `Bearer ${tokenV3}` },
-  });
+
+  return axios.get(`${config.API.V5}/taas-teams?${query}`);
 };
 
 /**
  * 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
   );
 };