Merge branch 'develop' into issue_315

Author: callmekatootie

client/package-lock.json

@@ -10,6 +10,7 @@
   height: 45px;
   padding: 0 30px;
   position: relative;
+  justify-content: space-between;
 
   &:last-child {
     border-bottom: 1px solid $lightGray2;
@@ -22,8 +23,3 @@
   max-width: 400px;
   white-space: nowrap;
 }
-
-.switch {
-  position: absolute;
-  right: 30px;
-}

client/src/assets/images/u-bahn-logo.svg

@@ -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]);
@@ -111,7 +128,7 @@ export default function AddToGroupModal({ onCancel, updateUser, user }) {
 
     const newGroup = await groupLib.createGroup(apiClient, groupName);
 
-    if (newGroup.id) {
+    if (newGroup && newGroup.id) {
       const newOtherGroups = JSON.parse(JSON.stringify(otherGroups));
 
       newOtherGroups.push(newGroup);
@@ -121,6 +138,8 @@ export default function AddToGroupModal({ onCancel, updateUser, user }) {
       alert(`Group with name ${groupName} created successfully`);
 
       setFilter("");
+    } else if (newGroup.message) {
+      alert(newGroup.message);
     } else {
       alert("Group creation failed");
     }
@@ -129,7 +148,11 @@ 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} />

client/src/components/AddToGroupModal/Group/style.module.scss

@@ -1,5 +1,13 @@
 @import "../../styles/mixins";
 
+.container {
+  z-index: 1100;
+}
+
+.overlay {
+  z-index: 1010;
+}
+
 .buttons {
   display: flex;
   justify-content: flex-end;

client/src/components/AddToGroupModal/index.jsx

@@ -26,6 +26,28 @@ export default function SearchTabFilters({ locations, achievements }) {
   const [locationsData, setLocationsData] = useState(locations);
   const [achievementsData, setAchievementsData] = useState(achievements);
 
+  /**
+   * Component unmount trigger
+   */
+  useEffect(() => {
+    return () => {
+      handleReset();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const handleReset = () => {
+    search.selectLocations([]);
+    search.selectSkills([]);
+    search.selectAchievements([]);
+    search.selectAvailability({
+      isAvailableSelected: false,
+      isUnavailableSelected: false,
+    });
+    search.selectCompanyAttributes({});
+    search.changePageNumber(1);
+  };
+
   useEffect(() => {
     setLocationsData(locations);
     setAchievementsData(achievements);
@@ -202,7 +224,10 @@ export default function SearchTabFilters({ locations, achievements }) {
 
   return (
     <div className={styles.searchTabFilters}>
-      <Summary filtersApplied={numberOfFiltersApplied} />
+      <Summary
+        filtersApplied={numberOfFiltersApplied}
+        handleReset={handleReset}
+      />
       {search.isFilterActive(FILTERS.LOCATIONS) && (
         <div className={utilityStyles.mt32}>
           <Collapsible title="Location" collapsed={false}>
@@ -302,21 +327,7 @@ SearchTabFilters.propTypes = {
   achievements: PT.array,
 };
 
-function Summary({ filtersApplied }) {
-  const search = useSearch();
-
-  const handleReset = () => {
-    search.selectLocations([]);
-    search.selectSkills([]);
-    search.selectAchievements([]);
-    search.selectAvailability({
-      isAvailableSelected: false,
-      isUnavailableSelected: false,
-    });
-    search.selectCompanyAttributes({});
-    search.changePageNumber(1);
-  };
-
+function Summary({ filtersApplied, handleReset }) {
   return (
     <div className={styles.searchTabFiltersSummary}>
       <div className={styles.searchTabFiltersSummaryTextContainer}>

client/src/components/AddToGroupModal/style.module.scss

@@ -51,7 +51,7 @@
 
 .groupTabFiltersContentSearchCreate {
   align-self: flex-end;
-  margin-left: auto;
+  margin-left: 15px;
 }
 
 .groupTabGroupsContainer {
@@ -83,13 +83,13 @@
 
 .sectionItem {
   cursor: pointer;
-  height: 24px;
   width: 322px;
   border-radius: 10px;
   border: 1px solid gray1_025;
 
   display: flex;
   flex-direction: row;
+  align-items: center;
   padding-left: 17px;
   padding-top: 13px;
   padding-bottom: 13px;
@@ -101,12 +101,13 @@
 }
 
 .sectionItemTitle {
-  align-self: flex-start;
   color: gray2;
+  word-break: break-word;
+  padding-right: 12px;
 }
 
 .sectionItemBadge {
-  align-self: flex-start;
+  align-self: center;
   margin-left: auto;
   color: gray1;
 

client/src/components/FiltersSideMenu/filters.js

@@ -1,7 +1,6 @@
 import React from "react";
 import PT from "prop-types";
 
-import { ReactComponent as DownArrow } from "../../assets/images/down-arrow.svg";
 import { ReactComponent as SearchTabIcon } from "../../assets/images/search-tab-icon.svg";
 import { ReactComponent as GroupsTabIcon } from "../../assets/images/groups-tab-icon.svg";
 import { ReactComponent as UploadsTabIcon } from "../../assets/images/uploads-tab-icon.svg";
@@ -29,6 +28,13 @@ export default function Header({
   const [searchText, setSearchText] = React.useState("");
   const [showAccountDropdown, setShowAccountDropdown] = React.useState(false);
 
+  const profileDropdownEl = React.useRef(null);
+  React.useEffect(() => {
+    if (showAccountDropdown) {
+      profileDropdownEl.current.focus();
+    }
+  }, [showAccountDropdown]);
+
   const handleSearch = (value) => {
     value = value || searchText;
 
@@ -101,7 +107,12 @@ export default function Header({
             <div className={`${iconStyles.chevronDownG} ${style.arrow}`}></div>
           )}
           {showAccountDropdown && (
-            <ul className={style.dropdown}>
+            <ul
+              tabIndex="0"
+              className={style.dropdown}
+              ref={profileDropdownEl}
+              onBlur={() => setShowAccountDropdown(false)}
+            >
               <li
                 className={style.dropdownItem}
                 onClick={() => logoutWithRedirect()}