fixes issue#66

Author: romitrivigo

client/src/components/AddToGroupModal/index.jsx

@@ -131,7 +131,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/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/FiltersSideMenu/filters.js

@@ -26,6 +26,29 @@ export default function SearchTabFilters({ locations, achievements }) {
   const [locationsData, setLocationsData] = useState(locations);
   const [achievementsData, setAchievementsData] = useState(achievements);
 
+  /**
+   * Component unmount trigger
+   */
+  useEffect(() => {
+    return () => {
+      console.log("filters unmounted...");
+      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 +225,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 +328,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/GroupsSideMenu/filters.module.css

@@ -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/Header/index.jsx

@@ -28,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;
 
@@ -100,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()}

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

@@ -32,6 +32,10 @@
     border-bottom-left-radius: 4px;
     border-bottom-right-radius: 4px;
     overflow: hidden;
+
+    &:focus {
+      outline: none;
+    }
   }
 
   .dropdownItem {
@@ -76,6 +80,7 @@
 
 .downArrow {
   margin-left: 15px;
+  overflow: hidden;
 }
 
 .menu {

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

@@ -17,7 +17,7 @@
   border: 0;
   color: $black;
   font: 400 12pt/1.25 Inter;
-  height: 38px;
+  height: 36px;
   outline: none;
 }
 

client/src/components/Modal/index.jsx

@@ -4,7 +4,7 @@ import PT from "prop-types";
 
 import style from "./style.module.scss";
 
-export default function Modal({ children, className }) {
+export default function Modal({ children, className, overlayClassName = "" }) {
   const [portal, setPortal] = React.useState();
 
   React.useEffect(() => {
@@ -21,6 +21,9 @@ export default function Modal({ children, className }) {
   let containerStyle = style.container;
   if (className) containerStyle += ` ${className}`;
 
+  let overlayStyle = style.overlay;
+  if (overlayClassName) overlayStyle += ` ${overlayClassName}`;
+
   return portal
     ? ReactDom.createPortal(
         <>
@@ -32,7 +35,7 @@ export default function Modal({ children, className }) {
           </div>
           <button
             aria-label="Cancel"
-            className={style.overlay}
+            className={overlayStyle}
             ref={(node) => {
               if (node) {
                 node.focus();

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

@@ -15,6 +15,12 @@
   }
 }
 
+@-moz-document url-prefix() {
+  .close {
+    margin-bottom: 2px;
+  }
+}
+
 .container {
   align-items: center;
   background: $white;

client/src/components/SuggestionBox/index.jsx

@@ -4,6 +4,8 @@ import config from "../../config";
 import api from "../../services/api";
 import style from "./style.module.scss";
 
+const NO_RESULTS_FOUND = "no results found";
+
 /**
  * Decides what is displayed after the user selects a suggestion
  * @param {Object} suggestion The selected suggestion
@@ -88,7 +90,8 @@ export default function SuggestionBox({
 
   const onSuggestionsFetchRequested = async ({ value }) => {
     if (purpose === "skills") {
-      const data = await getSkillsSuggestions(apiClient, value);
+      let data = await getSkillsSuggestions(apiClient, value);
+      if (data.length < 1) data = [{ name: NO_RESULTS_FOUND }];
       setSuggestions(data);
     } else {
       const data = await getCompanyAttributesSuggestions(
@@ -104,7 +107,7 @@ export default function SuggestionBox({
 
   const onSuggestionSelected = (event, { suggestion }) => {
     if (purpose === "skills") {
-      onSelect(suggestion);
+      if (suggestion.name !== NO_RESULTS_FOUND) onSelect(suggestion);
     } else {
       onSelect(companyAttrId, suggestion);
     }

client/src/components/tag/index.js

@@ -64,10 +64,10 @@ export default function Tag({
   }, [text, selected]);
 
   return (
-    <button className={mainStyle} onClick={onClickAction}>
+    <button className={mainStyle} title={text} onClick={onClickAction}>
       {text ? (
         <div className={styles.tagContent}>
-          {text && <span title={text}>{text}</span>}
+          {text && <span>{text}</span>}
           {icon && <TagButton icon={icon} />}
         </div>
       ) : (

client/src/pages/Search/Global.jsx

@@ -58,15 +58,18 @@ export default function SearchGlobal({ keyword }) {
   const [windowWidth, setWindowWidth] = React.useState(window.innerWidth);
   const [orderBy, setOrderBy] = React.useState(config.DEFAULT_SORT_ORDER);
   const [totalPages, setTotalPages] = React.useState(0);
+  const dropdownRef = React.useRef(null);
 
   const prevOrderBy = usePrevious(orderBy);
 
   const usersPerPage = config.ITEMS_PER_PAGE;
 
   React.useEffect(() => {
     window.addEventListener("resize", updateWindowDimensions);
+    window.addEventListener("click", onWholeContentClick);
     return () => {
       window.removeEventListener("resize", updateWindowDimensions);
+      window.removeEventListener("click", onWholeContentClick);
     };
   });
 
@@ -237,6 +240,7 @@ export default function SearchGlobal({ keyword }) {
         });
 
         setUsers(data);
+        setSortByDropdownShown(false);
         setTotalResults(Number(headers["x-total"]));
         setTotalPages(Number(headers["x-total-pages"]));
       }
@@ -269,6 +273,12 @@ export default function SearchGlobal({ keyword }) {
     searchContext.changePageNumber(newPageNumber);
   };
 
+  const onWholeContentClick = (evt) => {
+    if (dropdownRef.current && !dropdownRef.current.contains(evt.target)) {
+      setSortByDropdownShown(false);
+    }
+  };
+
   return (
     <>
       <div className={style.sideMenu}>
@@ -286,6 +296,7 @@ export default function SearchGlobal({ keyword }) {
             </div>
             <div
               className={style.sort}
+              ref={dropdownRef}
               onClick={() => setSortByDropdownShown(!sortByDropdownShown)}
               style={{
                 marginRight:
@@ -302,7 +313,7 @@ export default function SearchGlobal({ keyword }) {
                   {getOrderByText(orderBy)}
                 </span>
               )}
-              <DownArrowIcon />
+              <DownArrowIcon className={style.downArrow} />
               {sortByDropdownShown && (
                 <ul className={style.dropdown}>
                   <li

client/src/pages/Search/style.module.scss

@@ -56,6 +56,10 @@
   margin-bottom: 100px;
 }
 
+.downArrow {
+  overflow: hidden;
+}
+
 .pills {
   margin: 15px -5px 0;
 }

client/src/services/api.js

@@ -33,11 +33,7 @@ export default () => {
         await loginWithRedirect({
           redirect_uri: window.location.origin,
         });
-      } else if (
-        error.response &&
-        error.response.status === 409 &&
-        error.response.data.message
-      ) {
+      } else if (error.response && error.response.data.message) {
         const modError = new Error(error.response.data.message);
         return Promise.reject(modError);
       }