Merge branch 'develop' into issue-45-fix

Author: sanju singh

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

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

@@ -111,7 +111,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 +121,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 +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/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

@@ -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";

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

@@ -76,6 +76,7 @@
 
 .downArrow {
   margin-left: 15px;
+  overflow: hidden;
 }
 
 .menu {
@@ -124,6 +125,12 @@
   &::placeholder {
     opacity: 0.5;
   }
+
+  &::-ms-clear {
+    display: none;
+    height: 0;
+    width: 0;
+  }
 }
 
 .title {

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/ProfileCard/profileCard.module.css

@@ -74,7 +74,6 @@
 }
 
 .profileCardMainContainer {
-  height: 100px;
   width: 100%;
   margin-bottom: 44px;
 }
@@ -95,6 +94,8 @@
   font-family: Helvetica;
   font-size: 20px;
   color: gray2;
+  word-break: break-all;
+  padding-bottom: 10px;
 }
 
 .mainNameBagde {

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/collapsible/index.js

@@ -20,17 +20,14 @@ export default function Collapsible({ title, children, collapsed = false }) {
     <div className={mainStyle}>
       <div className={styles.collapsibleHeader}>
         <div className={styles.collapsibleTitle}>{title}</div>
-        <div className={styles.collapsibleChevronContainer}>
+        <div
+          className={styles.collapsibleChevronContainer}
+          onClick={() => setIsCollapsed(!isCollapsed)}
+        >
           {isCollapsed ? (
-            <div
-              className={iconStyles.chevronDownG}
-              onClick={() => setIsCollapsed(!isCollapsed)}
-            ></div>
+            <div className={iconStyles.chevronDownG}></div>
           ) : (
-            <div
-              className={iconStyles.chevronUpG}
-              onClick={() => setIsCollapsed(!isCollapsed)}
-            ></div>
+            <div className={iconStyles.chevronUpG}></div>
           )}
         </div>
       </div>

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

@@ -36,6 +36,14 @@ function getOrderByText(orderBy) {
   }
 }
 
+function usePrevious(value) {
+  const ref = React.useRef();
+  React.useEffect(() => {
+    ref.current = value;
+  });
+  return ref.current;
+}
+
 export default function SearchGlobal({ keyword }) {
   const { isLoading, isAuthenticated, user: auth0User } = useAuth0();
   const apiClient = api();
@@ -50,13 +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);
     };
   });
 
@@ -181,6 +194,11 @@ export default function SearchGlobal({ keyword }) {
         }
       });
 
+      // reset first page when change orderBy
+      if (prevOrderBy !== "undefined" && prevOrderBy !== orderBy) {
+        searchContext.pagination.page = 1;
+      }
+
       if (searchContext.pagination.page !== page) {
         setPage(searchContext.pagination.page);
       }
@@ -222,6 +240,7 @@ export default function SearchGlobal({ keyword }) {
         });
 
         setUsers(data);
+        setSortByDropdownShown(false);
         setTotalResults(Number(headers["x-total"]));
         setTotalPages(Number(headers["x-total-pages"]));
       }
@@ -241,6 +260,12 @@ export default function SearchGlobal({ keyword }) {
     setWindowWidth(window.innerWidth);
   };
 
+  const onWholeContentClick = (evt) => {
+    if (dropdownRef.current && !dropdownRef.current.contains(evt.target)) {
+      setSortByDropdownShown(false);
+    }
+  };
+
   return (
     <>
       <div className={style.sideMenu}>
@@ -258,6 +283,7 @@ export default function SearchGlobal({ keyword }) {
             </div>
             <div
               className={style.sort}
+              ref={dropdownRef}
               onClick={() => setSortByDropdownShown(!sortByDropdownShown)}
               style={{
                 marginRight:
@@ -274,7 +300,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;
 }
@@ -108,6 +112,7 @@
 
     &:hover {
       background-color: $blue;
+      color: $white;
     }
   }