Merge branch 'issues/timor/89' into develop

Author: callmekatootie

client/src/components/AddToGroupModal/index.jsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import PT from "prop-types";
 
 import Button from "../Button";
@@ -10,6 +10,7 @@ import { useAuth0 } from "../../react-auth0-spa";
 import * as groupLib from "../../lib/groups";
 
 import style from "./style.module.scss";
+import Axios from "axios";
 
 export default function AddToGroupModal({ onCancel, updateUser, user }) {
   const apiClient = api();
@@ -21,34 +22,50 @@ export default function AddToGroupModal({ onCancel, updateUser, user }) {
   const [updatingGroups, setUpdatingGroups] = React.useState(false);
   const [userGroups, setUserGroups] = React.useState(user.groups);
   const [creatingGroup, setCreatingGroup] = React.useState(false);
+  const cancelTokenSource = Axios.CancelToken.source();
+
+  /**
+   * Component unmount trigger
+   */
+  useEffect(() => {
+    return () => {
+      cancelTokenSource.cancel();
+    };
+  });
 
   React.useEffect(() => {
     if (isLoading || !isAuthenticated) {
       return;
     }
 
     (async () => {
-      const groups = await groupLib.getGroups(apiClient, auth0User.nickname);
-
-      groups.myGroups.forEach((g, i, a) => {
-        userGroups.forEach((ug, iug, aug) => {
-          if (g.id === ug.id && !ug.isDeleted) {
-            a[i] = { ...g, isSelected: true };
-          }
+      const groups = await groupLib.getGroups(
+        apiClient,
+        auth0User.nickname,
+        cancelTokenSource.token
+      );
+
+      if (groups) {
+        groups.myGroups.forEach((g, i, a) => {
+          userGroups.forEach((ug, iug, aug) => {
+            if (g.id === ug.id && !ug.isDeleted) {
+              a[i] = { ...g, isSelected: true };
+            }
+          });
         });
-      });
 
-      groups.otherGroups.forEach((g, i, a) => {
-        userGroups.forEach((ug, iug, aug) => {
-          if (g.id === ug.id && !ug.isDeleted) {
-            a[i] = { ...g, isSelected: true };
-          }
+        groups.otherGroups.forEach((g, i, a) => {
+          userGroups.forEach((ug, iug, aug) => {
+            if (g.id === ug.id && !ug.isDeleted) {
+              a[i] = { ...g, isSelected: true };
+            }
+          });
         });
-      });
 
-      setMyGroups(groups.myGroups);
-      setOtherGroups(groups.otherGroups);
-      setIsLoadingGroups(false);
+        setMyGroups(groups.myGroups);
+        setOtherGroups(groups.otherGroups);
+        setIsLoadingGroups(false);
+      }
     })();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isLoading, isAuthenticated, auth0User]);

client/src/lib/groups.js

@@ -1,20 +1,26 @@
 import config from "../config";
 import * as OrgService from "../services/user-org";
+import Axios from "axios";
 
 /**
  * Returns the groups for the logged in user
  * @param {Object} apiClient The api client
  * @param {Object} handle The logged in user's handle
  */
-export async function getGroups(apiClient, handle) {
+export async function getGroups(apiClient, handle, cancelToken) {
   let myGroups = [];
   let otherGroups = [];
   let response;
 
   // First, we get the userId of the current user
   try {
-    response = await apiClient.get(`${config.API_URL}/users?handle=${handle}`);
+    response = await apiClient.get(`${config.API_URL}/users?handle=${handle}`, {
+      cancelToken,
+    });
   } catch (error) {
+    if (Axios.isCancel(error)) {
+      return undefined;
+    }
     console.log(error);
     // TODO - handle error
     return { myGroups, otherGroups };
@@ -33,9 +39,13 @@ export async function getGroups(apiClient, handle) {
   // Now, get my groups first
   try {
     response = await apiClient.get(
-      `${config.GROUPS_API_URL}?universalUID=${userId}&membershipType=user`
+      `${config.GROUPS_API_URL}?universalUID=${userId}&membershipType=user`,
+      { cancelToken }
     );
   } catch (error) {
+    if (Axios.isCancel(error)) {
+      return undefined;
+    }
     console.log(error);
     // TODO - handle error
     return { myGroups, otherGroups };
@@ -56,9 +66,13 @@ export async function getGroups(apiClient, handle) {
   // Fetch all groups in the org
   try {
     response = await apiClient.get(
-      `${config.GROUPS_API_URL}?organizationId=${organizationId}`
+      `${config.GROUPS_API_URL}?organizationId=${organizationId}`,
+      { cancelToken }
     );
   } catch (error) {
+    if (Axios.isCancel(error)) {
+      return undefined;
+    }
     console.log(error);
     // TODO - handle error
     return { myGroups, otherGroups };
@@ -86,9 +100,13 @@ export async function getGroups(apiClient, handle) {
   // Now, get member counts
   try {
     response = await apiClient.get(
-      `${config.GROUPS_API_URL}/memberGroups/groupMembersCount?universalUID=${userId}`
+      `${config.GROUPS_API_URL}/memberGroups/groupMembersCount?universalUID=${userId}`,
+      { cancelToken }
     );
   } catch (error) {
+    if (Axios.isCancel(error)) {
+      return undefined;
+    }
     console.log(error);
     // TODO - handle error
     return { myGroups, otherGroups };
@@ -105,9 +123,13 @@ export async function getGroups(apiClient, handle) {
   // Fetch all groups in the org
   try {
     response = await apiClient.get(
-      `${config.GROUPS_API_URL}/memberGroups/groupMembersCount?organizationId=${organizationId}`
+      `${config.GROUPS_API_URL}/memberGroups/groupMembersCount?organizationId=${organizationId}`,
+      { cancelToken }
     );
   } catch (error) {
+    if (Axios.isCancel(error)) {
+      return undefined;
+    }
     console.log(error);
     // TODO - handle error
     return { myGroups, otherGroups };