Merge pull request #323 from topcoder-platform/role-quick-fixes

Role quick fixes - navigation to landing and keeping roles selected in localStorage until they are submitted

Author: nikolay83

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

@@ -8,7 +8,7 @@
 import React, { useCallback, useState } from "react";
 import PT from "prop-types";
 import _ from "lodash";
-import { useDispatch, useSelector } from "react-redux";
+import { useDispatch } from "react-redux";
 import AddedRolesAccordion from "../AddedRolesAccordion";
 import Completeness from "../Completeness";
 import SearchCard from "../SearchCard";
@@ -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

@@ -4,9 +4,14 @@
  * Requires authentication to complete submission process
  * and contains a series of popups to lead user through the flow.
  */
-import React, { useCallback, useEffect, useState } from "react";
+import React, {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useState,
+} from "react";
 import PT from "prop-types";
-import { useDispatch, useSelector } from "react-redux";
+import { useDispatch } from "react-redux";
 import _ from "lodash";
 import { toastr } from "react-redux-toastr";
 import { navigate } from "@reach/router";
@@ -19,46 +24,19 @@ 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);
@@ -68,11 +46,17 @@ function SubmitContainer({
 
   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");
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // redirects user if they enter the page URL directly
+  // without adding any roles.
+  useLayoutEffect(() => {
+    if (!addedRoles || addedRoles.length === 0) {
+      navigate("/taas/myteams/createnewteam");
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
@@ -83,11 +67,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 +101,6 @@ function SubmitContainer({
     postTeamRequest(teamObject)
       .then((res) => {
         const projectId = _.get(res, ["data", "projectId"]);
-        clearSessionKeys();
         dispatch(clearSearchedRoles());
         navigate(`/taas/myteams/${projectId}`);
       })
@@ -171,8 +150,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;