Show hidden offers to admin

src/actions/searchOffersActions.js

@@ -16,6 +16,7 @@ export const OfferSearchTypes = Object.freeze({
  DISABLE_OFFER: "DISABLE_OFFER",
  COMPANY_ENABLE_OFFER: "COMPANY_ENABLE_OFFER",
  ADMIN_ENABLE_OFFER: "ADMIN_ENABLE_OFFER",
+ SET_SHOW_HIDDEN: "SET_SHOW_HIDDEN",
 });
 
 export const setLoadingOffers = (loading) => ({
@@ -99,10 +100,16 @@ export const adminEnableOffer = (offerIdx) => ({
  offerIdx,
 });
 
+export const setShowHidden = (showHidden) => ({
+ type: OfferSearchTypes.SET_SHOW_HIDDEN,
+ showHidden,
+});
+
 export const resetAdvancedSearchFields = () => (dispatch) => {
  dispatch(setJobType(INITIAL_JOB_TYPE));
  dispatch(setShowJobDurationSlider(false));
  dispatch(setJobDuration(INITIAL_JOB_DURATION, INITIAL_JOB_DURATION + 1));
  dispatch(setFields([]));
  dispatch(setTechs([]));
+ dispatch(setShowHidden(false));
 };

src/actions/searchOffersActions.spec.js

@@ -12,6 +12,7 @@ import {
  resetAdvancedSearchFields,
  setOffersFetchError,
  resetOffersFetchError,
+ setShowHidden,
 } from "./searchOffersActions";
 
 import { INITIAL_JOB_TYPE, INITIAL_JOB_DURATION } from "../reducers/searchOffersReducer";
@@ -54,6 +55,17 @@ describe("Search Offers actions", () => {
  expect(setSearchValue(value)).toEqual(expectedAction);
  });
 
+ it("should return Set Show Hidden action", () => {
+
+ const showHidden = true;
+ const expectedAction = {
+ type: OfferSearchTypes.SET_SHOW_HIDDEN,
+ showHidden,
+ };
+
+ expect(setShowHidden(showHidden)).toEqual(expectedAction);
+ });
+
  it("should return Set Job Duration action", () => {
 
  const jobDuration = [1, 2];

src/components/HomePage/SearchArea/AdvancedSearch/AdvancedSearchDesktop.js

@@ -11,6 +11,7 @@ import {
  FormHelperText,
  Button,
 } from "@material-ui/core";
+import useSession from "../../../../hooks/useSession";
 
 import JobOptions from "../../../utils/offers/JobOptions";
 import useSearchAreaStyles from "../searchAreaStyle";
@@ -40,11 +41,19 @@ JobDurationCollapse.propTypes = {
 
 const AdvancedSearchDesktop = () => {
 
+ const { data,
+ isValidating,
+ error,
+ isLoggedIn,
+ } = useSession();
+ const sessionData = (!isValidating && !error && isLoggedIn) ? data : null;
+
  const classes = useSearchAreaStyles();
 
  const {
  advancedOptions, resetAdvancedSearch, FieldsSelectorProps, TechsSelectorProps, JobTypeSelectorProps, JobDurationSwitchProps,
- ResetButtonProps, JobDurationSliderText, JobDurationCollapseProps, JobDurationSwitchLabel, JobDurationSliderProps,
+ ResetButtonProps, JobDurationSliderText, JobDurationCollapseProps, JobDurationSwitchLabel, ShowHiddenSwitchLabel,
+ JobDurationSliderProps, ShowHiddenSwitchProps,
  } = useContext(AdvancedSearchControllerContext);
 
  return (
@@ -94,8 +103,6 @@ const AdvancedSearchDesktop = () => {
  className: "chip-wrapper",
  }}
  />
- </Collapse>
- {advancedOptions &&
  <div className={classes.resetBtnWrapper}>
  <Button
  {...ResetButtonProps}
@@ -106,7 +113,14 @@ const AdvancedSearchDesktop = () => {
  Reset Advanced Fields
  </Button>
  </div>
- }
+ {sessionData?.isAdmin &&
+ <FormControlLabel
+ className={classes.showHiddenToggle}
+ control={<Switch {...ShowHiddenSwitchProps} />}
+ label={ShowHiddenSwitchLabel}
+ />
+ }
+ </Collapse>
  </React.Fragment>
  );
 };

src/components/HomePage/SearchArea/AdvancedSearch/AdvancedSearchDesktop.spec.js

@@ -10,9 +10,12 @@ import FieldOptions from "../../../utils/offers/FieldOptions";
 import TechOptions from "../../../utils/offers/TechOptions";
 import { INITIAL_JOB_DURATION, INITIAL_JOB_TYPE } from "../../../../reducers/searchOffersReducer";
 import { createTheme } from "@material-ui/core/styles";
+import useSession from "../../../../hooks/useSession";
 
 import { MemoryRouter } from "react-router-dom";
 
+jest.mock("../../../../hooks/useSession");
+
 const AdvancedSearchWrapper = ({
  children,
  enableAdvancedSearchDefault,
@@ -25,6 +28,8 @@ const AdvancedSearchWrapper = ({
  setJobType = () => { },
  fields = [],
  setFields = () => { },
+ showHidden,
+ setShowHidden = () => { },
  technologies = [],
  setTechs = () => { },
  resetAdvancedSearchFields,
@@ -43,6 +48,7 @@ const AdvancedSearchWrapper = ({
  enableAdvancedSearchDefault, showJobDurationSlider, setShowJobDurationSlider, jobMinDuration,
  jobMaxDuration, setJobDuration, jobType, setJobType, fields, setFields, technologies, setTechs,
  resetAdvancedSearchFields, onSubmit, searchValue, searchOffers, onMobileClose, setSearchValue,
+ showHidden, setShowHidden,
  },
  AdvancedSearchControllerContext
  );
@@ -67,6 +73,7 @@ describe("AdvancedSearchDesktop", () => {
 
  describe("render", () => {
  it("should render a job selector with all job types", () => {
+ useSession.mockImplementation(() => ({}));
 
  renderWithStoreAndTheme(
  <RouteWrappedComponent>
@@ -92,6 +99,8 @@ describe("AdvancedSearchDesktop", () => {
 
  it("should toggle job duration slider (on)", () => {
  const setShowJobDurationSliderMock = jest.fn();
+ useSession.mockImplementation(() => ({}));
+
  renderWithStoreAndTheme(
  <RouteWrappedComponent>
  <AdvancedSearchWrapper
@@ -116,6 +125,8 @@ describe("AdvancedSearchDesktop", () => {
 
  it("should toggle job duration slider (off)", () => {
  const setShowJobDurationSliderMock = jest.fn();
+ useSession.mockImplementation(() => ({}));
+
  renderWithStoreAndTheme(
  <RouteWrappedComponent>
  <AdvancedSearchWrapper
@@ -137,6 +148,54 @@ describe("AdvancedSearchDesktop", () => {
  expect(setShowJobDurationSliderMock).toHaveBeenCalledWith(false);
  });
 
+
+ it("should toggle show hidden (on)", () => {
+ const setShowHiddenMock = jest.fn();
+ useSession.mockImplementation(() => ({ isLoggedIn: true, data: { isAdmin: true } }));
+
+ renderWithStoreAndTheme(
+ <RouteWrappedComponent>
+ <AdvancedSearchWrapper
+ enableAdvancedSearchDefault
+ showHidden={false}
+ setShowHidden={setShowHiddenMock}
+ >
+ <AdvancedSearchDesktop />
+ </AdvancedSearchWrapper>
+ </RouteWrappedComponent>,
+ { initialState, theme }
+ );
+
+ fireEvent.click(screen.getByLabelText("Show Hidden Offers"));
+ expect(setShowHiddenMock).toHaveBeenCalledWith(true);
+ // Can't test that element is visible now (after toggling), since we can't emulate redux logic, wihtout having the whole tree,
+ // So, I'll just assert that when showJobDurationSlider=true, it shows correctly in the next test
+ });
+
+ it("should toggle show hidden (off)", () => {
+ const setShowHiddenMock = jest.fn();
+ useSession.mockImplementation(() => ({ isLoggedIn: true, data: { isAdmin: true } }));
+
+ renderWithStoreAndTheme(
+ <RouteWrappedComponent>
+ <AdvancedSearchWrapper
+ enableAdvancedSearchDefault
+ showHidden={true}
+ setShowHidden={setShowHiddenMock}
+ >
+ <AdvancedSearchDesktop />
+ </AdvancedSearchWrapper>
+ </RouteWrappedComponent>,
+ { initialState, theme }
+ );
+
+ fireEvent.click(screen.getByLabelText("Show Hidden Offers"));
+ expect(setShowHiddenMock).toHaveBeenCalledWith(false);
+ // Can't test that element is visible now (after toggling), since we can't emulate redux logic, wihtout having the whole tree,
+ // So, I'll just assert that when showJobDurationSlider=true, it shows correctly in the next test
+ });
+
+
  it("should render a fields selector with all field types", () => {
 
  renderWithStoreAndTheme(

src/components/HomePage/SearchArea/AdvancedSearch/AdvancedSearchMobile.js

@@ -24,6 +24,7 @@ import MultiOptionAutocomplete from "../../../utils/form/MultiOptionAutocomplete
 import JobOptions from "../../../utils/offers/JobOptions";
 import useSearchAreaStyles from "../searchAreaStyle";
 import { AdvancedSearchControllerContext } from "../SearchArea";
+import useSession from "../../../../hooks/useSession";
 
 const JobDurationCollapse = ({ className, JobDurationCollapseProps, JobDurationSliderProps, sliderText }) => (
  <Collapse
@@ -73,8 +74,8 @@ const AdvancedSearchMobile = () => {
 
  const { advancedOptions, toggleAdvancedOptions, searchValue, submitForm,
  setSearchValue, FieldsSelectorProps, TechsSelectorProps, resetAdvancedSearch, JobDurationSliderText, ResetButtonProps,
- JobTypeSelectorProps, JobDurationSwitchProps, JobDurationCollapseProps, JobDurationSwitchLabel, JobDurationSliderProps,
- onMobileClose,
+ JobTypeSelectorProps, JobDurationSwitchProps, JobDurationCollapseProps, JobDurationSwitchLabel, ShowHiddenSwitchLabel,
+ JobDurationSliderProps, onMobileClose, ShowHiddenSwitchProps,
  } = useContext(AdvancedSearchControllerContext);
 
  const handleResetClick = (e) => {
@@ -96,9 +97,15 @@ const AdvancedSearchMobile = () => {
  const handleExit = () => {
  if (shouldSubmitForm) submitForm();
  if (onMobileClose) onMobileClose();
-
  };
 
+ const { data,
+ isValidating,
+ error,
+ isLoggedIn,
+ } = useSession();
+ const sessionData = (!isValidating && !error && isLoggedIn) ? data : null;
+
  const classes = useSearchAreaStyles();
 
  return (
@@ -151,6 +158,13 @@ const AdvancedSearchMobile = () => {
  JobDurationSliderProps={JobDurationSliderProps}
  sliderText={JobDurationSliderText}
  />
+ {sessionData?.isAdmin &&
+ <FormControlLabel
+ className={classes.showHiddenToggle}
+ control={<Switch {...ShowHiddenSwitchProps} />}
+ label={ShowHiddenSwitchLabel}
+ />
+ }
  </FormGroup>
  </DialogContent>
  <DialogActions classes={{ root: classes.mobileAdvancedSearchActions }}>
@@ -190,6 +204,8 @@ AdvancedSearchMobile.propTypes = {
  JobDurationSwitchLabel: PropTypes.string,
  JobDurationSliderProps: PropTypes.object,
  onMobileClose: PropTypes.func,
+ ShowHiddenSwitchProps: PropTypes.object,
+ ShowHiddenSwitchLabel: PropTypes.string,
 };
 
 export default AdvancedSearchMobile;

src/components/HomePage/SearchArea/AdvancedSearch/AdvancedSearchMobile.spec.js

@@ -34,6 +34,8 @@ const AdvancedSearchWrapper = ({
  onMobileClose,
  setSearchValue = () => { },
  submitForm,
+ showHidden,
+ setShowHidden = () => { },
 }) => {
  const {
  ContextProvider,
@@ -44,7 +46,7 @@ const AdvancedSearchWrapper = ({
  enableAdvancedSearchDefault, showJobDurationSlider, setShowJobDurationSlider, jobMinDuration,
  jobMaxDuration, setJobDuration, jobType, setJobType, fields, setFields, technologies, setTechs,
  resetAdvancedSearchFields, onSubmit, searchValue, searchOffers, onMobileClose, setSearchValue,
- submitForm,
+ submitForm, showHidden, setShowHidden,
  },
  AdvancedSearchControllerContext
  );

src/components/HomePage/SearchArea/AdvancedSearch/useAdvancedSearch.js

@@ -19,6 +19,8 @@ export default ({
  technologies,
  setTechs,
  resetAdvancedSearchFields,
+ showHidden,
+ setShowHidden,
 }) => {
 
  const jobDuration = [jobMinDuration, jobMaxDuration];
@@ -30,6 +32,8 @@ export default ({
 
  const JobDurationSwitchLabel = "Filter Job Duration";
 
+ const ShowHiddenSwitchLabel = "Show Hidden Offers";
+
  const [advancedOptions, toggleAdvancedOptions] = useToggle(enableAdvancedSearchDefault);
 
  const JobTypeSelectorProps = {
@@ -70,11 +74,21 @@ export default ({
  const FieldsSelectorProps = useFieldSelector(fields, setFields);
  const TechsSelectorProps = useTechSelector(technologies, setTechs);
 
+ const toggleShowHidden = useCallback(() => {
+ setShowHidden(!showHidden);
+ }, [setShowHidden, showHidden]);
+
+ const ShowHiddenSwitchProps = {
+ checked: showHidden,
+ onChange: toggleShowHidden,
+ value: "filterShowHiddenOffers",
+ };
 
  const advancedOptionsActive = showJobDurationSlider
  || (jobType !== INITIAL_JOB_TYPE)
  || fields.length !== 0
- || technologies.length !== 0;
+ || technologies.length !== 0
+ || showHidden;
 
  const ResetButtonProps = {
  disabled: !advancedOptionsActive,
@@ -101,5 +115,7 @@ export default ({
  JobDurationSliderProps,
  JobDurationSliderText,
  ResetButtonProps,
+ ShowHiddenSwitchProps,
+ ShowHiddenSwitchLabel,
  };
 };