Add Skills Found popup to Job Description search page

Author: mbaghel

src/routes/CreateNewTeam/components/SearchAndSubmit/index.jsx

@@ -1,23 +1,71 @@
 import { Router } from "@reach/router";
-import React from "react";
-import { useSelector } from "react-redux";
+import _ from "lodash";
+import React, { useCallback, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { searchRoles } from "services/teams";
+import { isCustomRole, setCurrentStage } from "utils/helpers";
+import { addRoleSearchId, addSearchedRole } from "../../actions";
 import SearchContainer from "../SearchContainer";
 import SubmitContainer from "../SubmitContainer";
 
 function SearchAndSubmit(props) {
+  const { stages, setStages, searchObject, onClick } = props;
+
+  const [searchState, setSearchState] = useState(null);
+  const [matchingRole, setMatchingRole] = useState(null);
+
   const { addedRoles, previousSearchId } = useSelector(
     (state) => state.searchedRoles
   );
 
+  const dispatch = useDispatch();
+
+  const search = useCallback(() => {
+    setCurrentStage(1, stages, setStages);
+    setSearchState("searching");
+    setMatchingRole(null);
+    const searchObjectCopy = { ...searchObject };
+    if (previousSearchId) {
+      searchObjectCopy.previousRoleSearchRequestId = previousSearchId;
+    }
+    searchRoles(searchObjectCopy)
+      .then((res) => {
+        const name = _.get(res, "data.name");
+        const searchId = _.get(res, "data.roleSearchRequestId");
+        if (name && !isCustomRole({ name })) {
+          dispatch(addSearchedRole({ searchId, name }));
+        } else if (searchId) {
+          dispatch(addRoleSearchId(searchId));
+        }
+        setMatchingRole(res.data);
+      })
+      .catch((err) => {
+        console.error(err);
+      })
+      .finally(() => {
+        setCurrentStage(2, stages, setStages);
+        setSearchState("done");
+      });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [dispatch, previousSearchId, searchObject]);
+
   return (
     <Router>
       <SearchContainer
         path="/"
         addedRoles={addedRoles}
         previousSearchId={previousSearchId}
+        search={search}
+        searchState={searchState}
+        matchingRole={matchingRole}
+        {...props}
+      />
+      <SubmitContainer
+        path="result"
+        addedRoles={addedRoles}
+        matchingRole={matchingRole}
         {...props}
       />
-      <SubmitContainer path="result" addedRoles={addedRoles} {...props} />
     </Router>
   );
 }

src/routes/CreateNewTeam/components/SearchContainer/index.jsx

@@ -5,70 +5,34 @@
  * search pages. Contains logic and supporting
  * components for searching for roles.
  */
-import React, { useCallback, useState } from "react";
+import React, { useCallback } from "react";
 import PT from "prop-types";
-import _ from "lodash";
-import { useDispatch } from "react-redux";
 import AddedRolesAccordion from "../AddedRolesAccordion";
 import Completeness from "../Completeness";
 import SearchCard from "../SearchCard";
 import ResultCard from "../ResultCard";
 import NoMatchingProfilesResultCard from "../NoMatchingProfilesResultCard";
-import { searchRoles } from "services/teams";
-import { isCustomRole, setCurrentStage } from "utils/helpers";
-import { addRoleSearchId, addSearchedRole } from "../../actions";
+import { isCustomRole } from "utils/helpers";
 import "./styles.module.scss";
 
 function SearchContainer({
   stages,
-  setStages,
   isCompletenessDisabled,
   toRender,
-  searchObject,
+  onClick,
+  search,
   completenessStyle,
   navigate,
   addedRoles,
-  previousSearchId,
+  searchState,
+  matchingRole,
 }) {
-  const [searchState, setSearchState] = useState(null);
-  const [matchingRole, setMatchingRole] = useState(null);
-
-  const dispatch = useDispatch();
-
   const onSubmit = useCallback(() => {
-    navigate("result", { state: { matchingRole } });
-  }, [navigate, matchingRole]);
-
-  const search = () => {
-    setCurrentStage(1, stages, setStages);
-    setSearchState("searching");
-    setMatchingRole(null);
-    const searchObjectCopy = { ...searchObject };
-    if (previousSearchId) {
-      searchObjectCopy.previousRoleSearchRequestId = previousSearchId;
-    }
-    searchRoles(searchObjectCopy)
-      .then((res) => {
-        const name = _.get(res, "data.name");
-        const searchId = _.get(res, "data.roleSearchRequestId");
-        if (name && !isCustomRole({ name })) {
-          dispatch(addSearchedRole({ searchId, name }));
-        } else if (searchId) {
-          dispatch(addRoleSearchId(searchId));
-        }
-        setMatchingRole(res.data);
-      })
-      .catch((err) => {
-        console.error(err);
-      })
-      .finally(() => {
-        setCurrentStage(2, stages, setStages);
-        setSearchState("done");
-      });
-  };
+    navigate("result");
+  }, [navigate]);
 
   const renderLeftSide = () => {
-    if (!searchState) return toRender;
+    if (!searchState) return toRender(search);
     if (searchState === "searching") return <SearchCard />;
     if (!isCustomRole(matchingRole)) return <ResultCard role={matchingRole} />;
     return <NoMatchingProfilesResultCard role={matchingRole} />;
@@ -92,7 +56,7 @@ function SearchContainer({
             searchState === "searching" ||
             (searchState === "done" && isCustomRole(matchingRole))
           }
-          onClick={searchState ? onSubmit : search}
+          onClick={searchState ? onSubmit : onClick ? onClick : search}
           extraStyleName={completenessStyle}
           buttonLabel={searchState ? "Submit Request" : "Search"}
           stages={stages}
@@ -105,14 +69,15 @@ function SearchContainer({
 
 SearchContainer.propTypes = {
   stages: PT.array,
-  setStages: PT.func,
   isCompletenessDisabled: PT.bool,
-  searchObject: PT.object,
-  toRender: PT.node,
+  onClick: PT.func,
+  search: PT.func,
+  toRender: PT.func,
   completenessStyle: PT.string,
   navigate: PT.func,
   addedRoles: PT.array,
-  previousSearchId: PT.string,
+  searchState: PT.string,
+  matchingRole: PT.object,
 };
 
 export default SearchContainer;

src/routes/CreateNewTeam/components/SubmitContainer/index.jsx

@@ -32,11 +32,9 @@ function SubmitContainer({
   stages,
   setStages,
   completenessStyle,
-  location,
+  matchingRole,
   addedRoles,
 }) {
-  const matchingRole = location?.state?.matchingRole;
-
   const [addAnotherOpen, setAddAnotherOpen] = useState(true);
   const [teamDetailsOpen, setTeamDetailsOpen] = useState(false);
   const [teamObject, setTeamObject] = useState(null);
@@ -147,8 +145,8 @@ SubmitContainer.propTypes = {
   stages: PT.array,
   setStages: PT.func,
   completenessStyle: PT.string,
-  location: PT.object,
   addedRoles: PT.array,
+  matchingRole: PT.object,
 };
 
 export default withAuthentication(SubmitContainer);

src/routes/CreateNewTeam/pages/InputJobDescription/components/SkillListPopup/index.jsx

@@ -5,67 +5,50 @@
 import React from "react";
 import _ from "lodash";
 import PT from "prop-types";
-import Modal from "react-responsive-modal";
 import Button from "components/Button";
-import IconCrossLight from "../../../../../../assets/images/icon-cross-light.svg";
 import IconSingleManAdd from "../../../../../../assets/images/icon-single-man-add.svg";
 import "./styles.module.scss";
-import CenteredSpinner from "components/CenteredSpinner";
+import BaseCreateModal from "../../../../components/BaseCreateModal";
 
-const modalStyle = {
-  borderRadius: "8px",
-  padding: "32px 32px 22px 32px",
-  maxWidth: "460px",
-  width: "100%",
-  margin: 0,
-  "overflow-x": "hidden",
-};
-
-const containerStyle = {
-  padding: "10px",
-};
+function SkillListPopup({ open, skills, isLoading, onClose, onContinueClick }) {
+  const Buttons = (
+    <>
+      <Button type="secondary" size="medium" onClick={onClose}>
+        Edit Job Description
+      </Button>
+      <Button
+        disabled={isLoading || !skills.length}
+        type="primary"
+        size="medium"
+        onClick={onContinueClick}
+      >
+        Continue
+      </Button>
+    </>
+  );
 
-function SkillListPopup({ open, skills, onClose, isLoading, onContinueClick }) {
   return (
-    <Modal
+    <BaseCreateModal
       open={open}
-      center
       onClose={onClose}
-      closeIcon={
-        <IconCrossLight height="18px" width="18px" styleName="cross" />
+      headerIcon={<IconSingleManAdd />}
+      title="Skills"
+      subtitle={
+        skills.length
+          ? "These skills are found in your Job Description"
+          : "No skills are found in your Job Description"
       }
-      styles={{
-        modal: modalStyle,
-        modalContainer: containerStyle,
-      }}
+      isLoading={isLoading}
+      loadingMessage="Loading skills..."
+      maxWidth="460px"
+      buttons={Buttons}
     >
-      <div styleName="modal-body">
-        {isLoading ? (
-          <>
-            <CenteredSpinner />
-            <h5>loading skills</h5>
-          </>
-        ) : (
-          <>
-            <IconSingleManAdd />
-            <h5>skills</h5>
-            {_.map(skills, (s) => {
-              return <div>{s.tag}</div>;
-            })}
-          </>
-        )}
-      </div>
-      <div styleName="button-group">
-        <Button
-          type="primary"
-          size="medium"
-          disabled={isLoading}
-          onClick={onContinueClick}
-        >
-          Continue
-        </Button>
+      <div>
+        {_.map(skills, (s) => {
+          return <div>{s.tag}</div>;
+        })}
       </div>
-    </Modal>
+    </BaseCreateModal>
   );
 }