Merge pull request #586 from topcoder-platform/issue-473

Issue #473 fixes.

Author: callmekatootie

client/src/Router.jsx

@@ -32,7 +32,11 @@ export default function AppRouter() {
           right: 0,
         }}
       >
-        <img style={{height: "120px", width: "120px" }} src={loader} alt="Loading" />
+        <img
+          style={{ height: "120px", width: "120px" }}
+          src={loader}
+          alt="Loading"
+        />
       </div>
     );
   }

client/src/components/Upload/Initial/style.module.scss

@@ -53,8 +53,7 @@
   text-underline-position: under;
 }
 
-.label3[disabled]
-{
+.label3[disabled] {
   pointer-events: none;
   opacity: 0.7;
 }

client/src/lib/company-attributes.js

@@ -1,6 +1,7 @@
 // FIRST - import config from the file under src/config
 import config from "../config";
 import * as OrgService from "../services/user-org";
+import Axios from "axios";
 
 let primaryAttributeIds = [
   config.STANDARD_USER_ATTRIBUTES.location,
@@ -13,7 +14,7 @@ let primaryAttributeIds = [
  * Get the attributes associated with the company (organization)
  * @param {Object} apiClient The api client (you can get this from src/services/api and then call api() to get the apiClient)
  */
-export async function getCompanyAttributes(apiClient) {
+export async function getCompanyAttributes(apiClient, cancelToken) {
   let response;
   let attributeGroups;
   let attributes = [];
@@ -25,8 +26,11 @@ export async function getCompanyAttributes(apiClient) {
   let url = `${config.API_URL}/attributeGroups?organizationId=${organizationId}`;
 
   try {
-    response = await apiClient.get(url);
+    response = await apiClient.get(url, { cancelToken });
   } catch (error) {
+    if (Axios.isCancel(error)) {
+      return undefined;
+    }
     console.log(error);
     alert(errorMessage);
     // TODO - handle error
@@ -45,8 +49,11 @@ export async function getCompanyAttributes(apiClient) {
     url = `${config.API_URL}/attributes?attributeGroupId=${attributeGroups[0].id}`;
 
     try {
-      response = await apiClient.get(url);
+      response = await apiClient.get(url, { cancelToken });
     } catch (error) {
+      if (Axios.isCancel(error)) {
+        return undefined;
+      }
       console.log(error);
       alert(errorMessage);
       // TODO - handle error

client/src/pages/Search/Global.jsx

@@ -63,7 +63,7 @@ export default function SearchGlobal({ keyword }) {
 
   const prevOrderBy = usePrevious(orderBy);
   const [prevCriteria, setPrevCriteria] = React.useState(null);
-
+  const cancelTokenSource = axios.CancelToken.source();
   const usersPerPage = config.ITEMS_PER_PAGE;
 
   React.useEffect(() => {
@@ -106,22 +106,30 @@ export default function SearchGlobal({ keyword }) {
     let isSubscribed = true;
 
     (async () => {
-      const companyAttrs = await getCompanyAttributes(apiClient);
+      const companyAttrs = await getCompanyAttributes(
+        apiClient,
+        cancelTokenSource.token
+      );
       const filtersWithCompanyAttrs = { ...searchContext.filters };
-      companyAttrs.forEach((companyAttr) => {
-        filtersWithCompanyAttrs[companyAttr.id] = {
-          text: companyAttr.name,
-          group: "Company attributes",
-          active: false,
-        };
-      });
+      if (companyAttrs) {
+        companyAttrs.forEach((companyAttr) => {
+          filtersWithCompanyAttrs[companyAttr.id] = {
+            text: companyAttr.name,
+            group: "Company attributes",
+            active: false,
+          };
+        });
 
-      if (isSubscribed) {
-        searchContext.setFilters(filtersWithCompanyAttrs);
+        if (isSubscribed) {
+          searchContext.setFilters(filtersWithCompanyAttrs);
+        }
       }
     })();
 
-    return () => (isSubscribed = false);
+    return () => {
+      isSubscribed = false;
+      cancelTokenSource.cancel();
+    };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isLoading, isAuthenticated, auth0User]);
 
@@ -187,8 +195,10 @@ export default function SearchGlobal({ keyword }) {
     });
 
     // reset first page when change orderBy or criteria
-    if ((prevOrderBy !== "undefined" && prevOrderBy !== orderBy)
-      || _.isEqual(prevCriteria,criteria) === false) {
+    if (
+      (prevOrderBy !== "undefined" && prevOrderBy !== orderBy) ||
+      _.isEqual(prevCriteria, criteria) === false
+    ) {
       searchContext.pagination.page = 1;
     }
 
@@ -198,14 +208,13 @@ export default function SearchGlobal({ keyword }) {
       pageChanged = true;
     }
 
-    if (_.isEqual(prevCriteria,criteria) && !pageChanged) {
+    if (_.isEqual(prevCriteria, criteria) && !pageChanged) {
       return;
     } else {
       setPrevCriteria(criteria);
     }
 
     let isSubscribed = true;
-    let source = axios.CancelToken.source();
 
     (async () => {
       let headers;
@@ -225,7 +234,7 @@ export default function SearchGlobal({ keyword }) {
       try {
         const response = await apiClient.post(url, body, {
           ...options,
-          cancelToken: source.token,
+          cancelToken: cancelTokenSource.token,
         });
 
         headers = response.headers;
@@ -256,6 +265,7 @@ export default function SearchGlobal({ keyword }) {
         setTotalPages(Number(headers["x-total-pages"]));
       }
     })();
+
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isLoading, isAuthenticated, keyword, orderBy, searchContext]);
 

client/src/pages/Search/Groups.jsx

@@ -1,4 +1,5 @@
 import React from "react";
+import Axios from "axios";
 import GroupsSideMenu from "../../components/GroupsSideMenu";
 import ProfileCardGroupWrapper from "../../components/ProfileCardGroupWrapper";
 import Pagination from "../../components/Pagination";
@@ -26,24 +27,31 @@ export default function SearchGroups() {
   const [totalResults, setTotalResults] = React.useState(0);
   const [totalPages, setTotalPages] = React.useState(0);
   const [creatingGroup, setCreatingGroup] = React.useState(false);
-
+  const cancelTokenSource = Axios.CancelToken.source();
   const usersPerPage = config.ITEMS_PER_PAGE;
 
   React.useEffect(() => {
     let isSubscribed = true;
     setLoadingGroups(true);
 
     (async () => {
-      const groups = await groupLib.getGroups(apiClient, auth0User.nickname);
+      const groups = await groupLib.getGroups(
+        apiClient,
+        auth0User.nickname,
+        cancelTokenSource.token
+      );
 
-      if (isSubscribed) {
+      if (isSubscribed && groups) {
         setMyGroups(groups.myGroups);
         setOtherGroups(groups.otherGroups);
         setLoadingGroups(false);
       }
     })();
 
-    return () => (isSubscribed = false);
+    return () => {
+      isSubscribed = false;
+      cancelTokenSource.cancel();
+    };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);