New icon-role-fallback for RoleItem

Change SkillItem to use IconSkill
Use localStorage to persist searched roles

Author: mbaghel

src/assets/images/icon-role-fallback-old.svg

@@ -1,15 +1,23 @@
 import { ACTION_TYPE } from "constants";
 
-export const clearSearchedRoles = () => ({
+const updateLocalStorage = (state) => {
+  try {
+    localStorage.setItem("rolesState", JSON.stringify(state));
+  } catch {
+    console.error("Unable to set localStorage");
+  }
+};
+
+const clearRoles = () => ({
   type: ACTION_TYPE.CLEAR_SEARCHED_ROLES,
 });
 
-export const addSearchedRole = (searchedRole) => ({
+const addRole = (searchedRole) => ({
   type: ACTION_TYPE.ADD_SEARCHED_ROLE,
   payload: searchedRole,
 });
 
-export const addRoleSearchId = (id) => ({
+const addPreviousSearchId = (id) => ({
   type: ACTION_TYPE.ADD_ROLE_SEARCH_ID,
   payload: id,
 });
@@ -18,3 +26,18 @@ export const replaceSearchedRoles = (roles) => ({
   type: ACTION_TYPE.REPLACE_SEARCHED_ROLES,
   payload: { roles, lastRoleId: roles[roles.length - 1].searchId },
 });
+
+export const clearSearchedRoles = () => (dispatch, getState) => {
+  dispatch(clearRoles());
+  updateLocalStorage(getState().searchedRoles);
+};
+
+export const addSearchedRole = (searchedRole) => (dispatch, getState) => {
+  dispatch(addRole(searchedRole));
+  updateLocalStorage(getState().searchedRoles);
+};
+
+export const addRoleSearchId = (id) => (dispatch, getState) => {
+  dispatch(addPreviousSearchId(id));
+  updateLocalStorage(getState().searchedRoles);
+};

src/assets/images/icon-role-fallback.svg

@@ -28,7 +28,7 @@ function NoMatchingProfilesResultCard() {
           <p styleName="cost">$1,200</p>
           <p>/Week</p>
         </div>
-        <Link to="/taas/myteams/createnewteam" state={{ keepAddedRoles: true }}>
+        <Link to="/taas/myteams/createnewteam">
           <Button type="secondary" styleName="button">
             Modify Search Criteria
           </Button>

src/routes/CreateNewTeam/actions/index.js

@@ -1,13 +1,23 @@
 import { Router } from "@reach/router";
 import React from "react";
+import { useSelector } from "react-redux";
 import SearchContainer from "../SearchContainer";
 import SubmitContainer from "../SubmitContainer";
 
 function SearchAndSubmit(props) {
+  const { addedRoles, previousSearchId } = useSelector(
+    (state) => state.searchedRoles
+  );
+
   return (
     <Router>
-      <SearchContainer path="/" {...props} />
-      <SubmitContainer path="result" {...props} />
+      <SearchContainer
+        path="/"
+        addedRoles={addedRoles}
+        previousSearchId={previousSearchId}
+        {...props}
+      />
+      <SubmitContainer path="result" addedRoles={addedRoles} {...props} />
     </Router>
   );
 }

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

@@ -19,50 +19,25 @@ import { setCurrentStage } from "utils/helpers";
 import { addRoleSearchId, addSearchedRole } from "../../actions";
 import "./styles.module.scss";
 
-/**
- * Converts an array of role search objects to two data
- * lists which can be set as sessionStorage items
- *
- * @param {object[]} arrayOfObjects array of role objects
- */
-const storeStrings = (arrayOfObjects) => {
-  const objectOfArrays = arrayOfObjects.reduce(
-    (acc, curr) => ({
-      searchId: [...acc.searchId, curr.searchId],
-      name: [...acc.name, curr.name],
-    }),
-    { searchId: [], name: [] }
-  );
-
-  sessionStorage.setItem("searchIds", objectOfArrays.searchId.join(","));
-  sessionStorage.setItem("roleNames", objectOfArrays.name.join(","));
-};
-
 function SearchContainer({
   stages,
   setStages,
   isCompletenessDisabled,
   toRender,
   searchObject,
   completenessStyle,
-  reloadRolesPage,
   navigate,
+  addedRoles,
+  previousSearchId,
 }) {
-  const { addedRoles, previousSearchId } = useSelector(
-    (state) => state.searchedRoles
-  );
-
   const [searchState, setSearchState] = useState(null);
   const [matchingRole, setMatchingRole] = useState(null);
-  const [addAnotherModalOpen, setAddAnotherModalOpen] = useState(false);
-  const [submitDone, setSubmitDone] = useState(true);
 
   const dispatch = useDispatch();
 
   const onSubmit = useCallback(() => {
-    storeStrings(addedRoles);
     navigate("result", { state: { matchingRole } });
-  }, [addedRoles, navigate, matchingRole]);
+  }, [navigate, matchingRole]);
 
   const search = () => {
     setCurrentStage(1, stages, setStages);
@@ -135,8 +110,9 @@ SearchContainer.propTypes = {
   searchObject: PT.object,
   toRender: PT.node,
   completenessStyle: PT.string,
-  reloadRolesPage: PT.func,
   navigate: PT.func,
+  addedRoles: PT.array,
+  previousSearchId: PT.string,
 };
 
 export default SearchContainer;

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

@@ -19,61 +19,34 @@ import ConfirmationModal from "../ConfirmationModal";
 import withAuthentication from "../../../../hoc/withAuthentication";
 import "./styles.module.scss";
 import { setCurrentStage } from "utils/helpers";
-import { clearSearchedRoles, replaceSearchedRoles } from "../../actions";
+import { clearSearchedRoles } from "../../actions";
 import { postTeamRequest } from "services/teams";
 import SuccessCard from "../SuccessCard";
 
-const retrieveRoles = () => {
-  const searchIdString = sessionStorage.getItem("searchIds");
-  const nameString = sessionStorage.getItem("roleNames");
-
-  if (!searchIdString || !nameString) return [];
-  const searchIds = searchIdString.split(",");
-  const names = nameString.split(",");
-  if (searchIds.length !== names.length) return [];
-
-  const roles = [];
-  for (let i = 0; i < searchIds.length; i++) {
-    roles.push({
-      searchId: searchIds[i],
-      name: names[i],
-    });
-  }
-
-  return roles;
-};
-
-const clearSessionKeys = () => {
-  sessionStorage.removeItem("searchIds");
-  sessionStorage.removeItem("roleNames");
-};
-
 function SubmitContainer({
   stages,
   setStages,
   completenessStyle,
-  reloadRolesPage,
   location,
+  addedRoles,
 }) {
   const matchingRole = location?.state?.matchingRole;
 
-  const { addedRoles } = useSelector((state) => state.searchedRoles);
-
   const [addAnotherOpen, setAddAnotherOpen] = useState(true);
   const [teamDetailsOpen, setTeamDetailsOpen] = useState(false);
   const [teamObject, setTeamObject] = useState(null);
   const [requestLoading, setRequestLoading] = useState(false);
 
   const dispatch = useDispatch();
 
+  // Set correct state for Completeness tab, and redirect
+  // to main page if path loaded without any selected roles.
   useEffect(() => {
     setCurrentStage(2, stages, setStages);
-    const storedRoles = retrieveRoles();
-    if (storedRoles) {
-      if (!addedRoles || storedRoles.length > addedRoles.length) {
-        dispatch(replaceSearchedRoles(storedRoles));
-      }
+    if (!addedRoles || addedRoles.length === 0) {
+      navigate("/taas/myteams/createnewteam");
     }
+    // only needed on initial load, avoids too many re-renders
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
@@ -83,11 +56,7 @@ function SubmitContainer({
   };
 
   const addAnother = () => {
-    if (reloadRolesPage) {
-      setCurrentStage(0, stages, setStages);
-      reloadRolesPage();
-    }
-    navigate("/taas/myteams/createnewteam/role");
+    navigate("/taas/myteams/createnewteam");
   };
 
   const assembleTeam = (formData) => {
@@ -121,7 +90,6 @@ function SubmitContainer({
     postTeamRequest(teamObject)
       .then((res) => {
         const projectId = _.get(res, ["data", "projectId"]);
-        clearSessionKeys();
         dispatch(clearSearchedRoles());
         navigate(`/taas/myteams/${projectId}`);
       })
@@ -171,8 +139,8 @@ SubmitContainer.propTypes = {
   stages: PT.array,
   setStages: PT.func,
   completenessStyle: PT.string,
-  reloadRolesPage: PT.bool,
   location: PT.object,
+  addedRoles: PT.array,
 };
 
 export default withAuthentication(SubmitContainer);

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

@@ -30,7 +30,7 @@ function SuccessCard() {
           Please use the button to the right to submit your request, or the
           button below to search for additional roles.
         </p>
-        <Link to="/taas/myteams/createnewteam" state={{ keepAddedRoles: true }}>
+        <Link to="/taas/myteams/createnewteam">
           <Button type="secondary" styleName="button">
             Continue Search
           </Button>

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

@@ -1,35 +1,21 @@
 /**
  * Create New Team
  *
- * Gets location state from router to pass
- * along to search pages
- *
  * Landing page for creating new teams
  * by selecting a role, inputting skills,
  * or inputting a job description
  */
 import React, { useEffect } from "react";
 import { navigate } from "@reach/router";
 import _ from "lodash";
-import PT from "prop-types";
-import { useDispatch } from "react-redux";
 import Page from "components/Page";
 import PageHeader from "components/PageHeader";
 import LandingBox from "./components/LandingBox";
 import IconMultipleActionsCheck from "../../assets/images/icon-multiple-actions-check-2.svg";
 import IconListQuill from "../../assets/images/icon-list-quill.svg";
 import IconOfficeFileText from "../../assets/images/icon-office-file-text.svg";
-import { clearSearchedRoles } from "./actions";
-
-function CreateNewTeam({ location: { state: locationState } }) {
-  const dispatch = useDispatch();
-
-  useEffect(() => {
-    if (!locationState || !locationState.keepAddedRoles) {
-      dispatch(clearSearchedRoles());
-    }
-  });
 
+function CreateNewTeam() {
   const goToRoute = (path) => {
     navigate(path);
   };
@@ -65,8 +51,4 @@ function CreateNewTeam({ location: { state: locationState } }) {
   );
 }
 
-CreateNewTeam.propTypes = {
-  locationState: PT.object,
-};
-
 export default CreateNewTeam;

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

@@ -5,7 +5,7 @@
  */
 import React from "react";
 import PT from "prop-types";
-import IconQuestionCircle from "../../../../../../assets/images/icon-question-circle.svg";
+import IconSkill from "../../../../../../assets/images/icon-skill.svg";
 import "./styles.module.scss";
 import cn from "classnames";
 
@@ -28,7 +28,7 @@ function SkillItem({ id, name, onClick, isSelected }) {
           styleName="image"
         />
       ) : (
-        <IconQuestionCircle styleName="image" />
+        <IconSkill styleName="image" />
       )}
       <p styleName="item-text">{name}</p>
     </div>