Add job title to job description search page. Fixes for deleting searched roles.

Author: mbaghel

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

@@ -46,20 +46,16 @@ function SubmitContainer({
 
   useEffect(() => {
     setCurrentStage(2, stages, setStages);
-    if (!addedRoles || addedRoles.length === 0) {
-      navigate("/taas/myteams/createnewteam");
-    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   // redirects user if they enter the page URL directly
-  // without adding any roles.
+  // without adding any roles or delete all roles.
   useLayoutEffect(() => {
     if (!addedRoles || addedRoles.length === 0) {
       navigate("/taas/myteams/createnewteam");
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [addedRoles]);
 
   const openTeamDetails = () => {
     setAddAnotherOpen(false);

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

@@ -240,7 +240,10 @@ function TeamDetailsModal({ open, onClose, submitForm, addedRoles }) {
                     <td>
                       <button
                         styleName="delete-role"
-                        onClick={() => dispatch(deleteSearchedRole(id))}
+                        onClick={() => {
+                          clearField(id);
+                          dispatch(deleteSearchedRole(id));
+                        }}
                       >
                         <IconCrossLight height="12px" width="12px" />
                       </button>

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

@@ -9,6 +9,7 @@ import PageHeader from "components/PageHeader";
 import MarkdownEditor from "../../../../components/MarkdownEditor";
 import "./styles.module.scss";
 import SearchAndSubmit from "../../components/SearchAndSubmit";
+import TextInput from "components/TextInput";
 
 function InputJobDescription() {
   const [stages, setStages] = useState([
@@ -17,6 +18,7 @@ function InputJobDescription() {
     { name: "Overview of the Results" },
   ]);
   const [jdString, setJdString] = useState("");
+  const [jobTitle, setJobTitle] = useState("");
 
   const onEditChange = useCallback((value) => {
     setJdString(value);
@@ -36,6 +38,15 @@ function InputJobDescription() {
               title="Input Job Description"
               backTo="/taas/myteams/createnewteam"
             />
+            <div styleName="job-title">
+              <TextInput
+                placeholder="Job title"
+                value={jobTitle}
+                onChange={setJobTitle}
+                maxLength={100}
+                type="text"
+              />
+            </div>
             <MarkdownEditor
               height="482px"
               placeholder="input job description"

src/routes/CreateNewTeam/pages/InputJobDescription/styles.module.scss

@@ -7,3 +7,7 @@
   padding: 0 30px 30px;
   flex: 1;
 }
+
+.job-title {
+  margin-bottom: 15px;
+}