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,
     };
 };