Merge remote-tracking branch 'origin/develop' into issue-473

# Conflicts:
#	client/src/pages/Search/Global.jsx

Author: venkygot

client/package-lock.json

@@ -22,6 +22,7 @@ export default function AppRouter() {
           position: "absolute",
           display: "flex",
           justifyContent: "center",
+          alignItems: "center",
           height: "100vh",
           width: "100vw",
           backgroundColor: "white",
@@ -31,7 +32,11 @@ export default function AppRouter() {
           right: 0,
         }}
       >
-        <img src={loader} alt="Loading" />
+        <img
+          style={{ height: "120px", width: "120px" }}
+          src={loader}
+          alt="Loading"
+        />
       </div>
     );
   }

client/public/favicon.ico

@@ -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);
+      const groups = await groupLib.getGroups(
+        apiClient,
+        auth0User.nickname,
+        cancelTokenSource.token
+      );
 
-      groups.myGroups.forEach((g, i, a) => {
-        userGroups.forEach((ug, iug, aug) => {
-          if (g.id === ug.id && !ug.isDeleted) {
-            a[i] = { ...g, isSelected: true };
-          }
+      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]);
@@ -106,6 +123,14 @@ export default function AddToGroupModal({ onCancel, updateUser, user }) {
       alert("Enter a group name");
       return;
     }
+    if (groupName.length < 3) {
+      alert("Group name must be more than three characters");
+      return;
+    }
+    if (groupName.length > 150) {
+      alert("Group name cannot exceed 150 characters");
+      return;
+    }
 
     setCreatingGroup(true);
 
@@ -131,59 +156,81 @@ export default function AddToGroupModal({ onCancel, updateUser, user }) {
   };
 
   return (
-    <Modal onCancel={onCancel}>
+    <Modal
+      onCancel={onCancel}
+      className={style.container}
+      overlayClassName={style.overlay}
+    >
       <h1 className={style.title}>Add to Group</h1>
-      <div className={style.searchRow}>
-        <ZoomIcon className={style.zoomIcon} />
-        <input
-          className={style.search}
-          onChange={({ target }) => {
-            setFilter(target.value);
-            setImmediate(() => target.focus());
-          }}
-          placeholder="Search or create group"
-          value={filter}
-          disabled={loadingGroups}
-        />
-        <Button
-          className={style.createButton}
-          onClick={createGroup}
-          disabled={creatingGroup}
-        >
-          {creatingGroup ? "Creating..." : "+ Create"}
-        </Button>
-      </div>
-      <h3 className={style.subTitle}>
-        My groups{loadingGroups && " (Loading...)"}
-      </h3>
-      <div className={style.groups}>
-        {!loadingGroups &&
-          myGroups
-            .filter((g) => g.name.toLowerCase().includes(filter.toLowerCase()))
-            .map((g) => (
-              <Group
-                checked={g.isSelected === true}
-                group={g}
-                key={g.id}
-                onSwitch={() => switchSelected(g)}
-              />
-            ))}
-      </div>
-      <h3 className={style.subTitle}>
-        Other Groups{loadingGroups && " (Loading...)"}
-      </h3>
       <div className={style.groups}>
-        {!loadingGroups &&
-          otherGroups
-            .filter((g) => g.name.toLowerCase().includes(filter.toLowerCase()))
-            .map((g) => (
-              <Group
-                checked={g.isSelected === true}
-                group={g}
-                key={g.id}
-                onSwitch={() => switchSelected(g)}
-              />
-            ))}
+        <div className={style.searchRow}>
+          <ZoomIcon className={style.zoomIcon} />
+          <input
+            className={style.search}
+            onChange={({ target }) => {
+              setFilter(target.value);
+              setImmediate(() => target.focus());
+            }}
+            placeholder="Search or create group"
+            value={filter}
+            disabled={loadingGroups}
+          />
+          <Button
+            className={style.createButton}
+            onClick={createGroup}
+            disabled={creatingGroup}
+          >
+            {creatingGroup ? "Creating..." : "+ Create"}
+          </Button>
+        </div>
+        <h3 className={style.subTitle}>
+          My groups{loadingGroups && " (Loading...)"}
+        </h3>
+        <div>
+          {!loadingGroups &&
+            myGroups
+              .filter((g) =>
+                g.name.toLowerCase().includes(filter.toLowerCase())
+              )
+              .map((g) => (
+                <Group
+                  checked={g.isSelected === true}
+                  group={g}
+                  key={g.id}
+                  onSwitch={() => switchSelected(g)}
+                />
+              ))}
+        </div>
+        {myGroups.filter((g) =>
+          g.name.toLowerCase().includes(filter.toLowerCase())
+        ).length === 0 &&
+          !loadingGroups && (
+            <div className={style.message}>No results found</div>
+          )}
+        <h3 className={style.subTitle}>
+          Other Groups{loadingGroups && " (Loading...)"}
+        </h3>
+        <div>
+          {!loadingGroups &&
+            otherGroups
+              .filter((g) =>
+                g.name.toLowerCase().includes(filter.toLowerCase())
+              )
+              .map((g) => (
+                <Group
+                  checked={g.isSelected === true}
+                  group={g}
+                  key={g.id}
+                  onSwitch={() => switchSelected(g)}
+                />
+              ))}
+        </div>
+        {otherGroups.filter((g) =>
+          g.name.toLowerCase().includes(filter.toLowerCase())
+        ).length === 0 &&
+          !loadingGroups && (
+            <div className={style.message}>No results found</div>
+          )}
       </div>
       <div className={style.buttons}>
         <Button onClick={onCancel} disabled={updatingGroups || creatingGroup}>

client/src/Router.jsx

@@ -1,5 +1,13 @@
 @import "../../styles/mixins";
 
+.container {
+  z-index: 1100;
+}
+
+.overlay {
+  z-index: 1010;
+}
+
 .buttons {
   display: flex;
   justify-content: flex-end;
@@ -36,7 +44,7 @@
 
 .groups {
   margin: 0 -30px;
-  max-height: 150px;
+  max-height: calc(95vh - 157px);
   overflow-y: auto;
 }
 
@@ -60,10 +68,12 @@
 .searchRow {
   display: flex;
   position: relative;
+  margin: 0 30px;
 }
 
 .subTitle {
   @include h3;
+  margin-left: 30px;
 }
 
 .title {
@@ -76,3 +86,9 @@
   left: 10px;
   top: 10px;
 }
+
+.message {
+  color: $textColor2;
+  font: 400 12pt/1.25 Inter;
+  margin-left: 30px;
+}