feature: adds show hidden to url

Co-authored-by: Carlos Mealha up202005954@edu.fc.up.pt

Author: diogofonte

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

@@ -52,7 +52,7 @@ const AdvancedSearchDesktop = () => {
 
     const {
         advancedOptions, resetAdvancedSearch, FieldsSelectorProps, TechsSelectorProps, JobTypeSelectorProps, JobDurationSwitchProps,
-        ResetButtonProps, JobDurationSliderText, JobDurationCollapseProps, JobDurationSwitchLabel, JobHiddenSwitchLabel,
+        ResetButtonProps, JobDurationSliderText, JobDurationCollapseProps, JobDurationSwitchLabel, ShowHiddenSwitchLabel,
         JobDurationSliderProps, ShowHiddenSwitchProps,
     } = useContext(AdvancedSearchControllerContext);
 
@@ -115,9 +115,9 @@ const AdvancedSearchDesktop = () => {
                 </div>
                 {sessionData?.isAdmin &&
                     <FormControlLabel
-                        className={classes.jobHiddenSliderToggle}
+                        className={classes.showHiddenToggle}
                         control={<Switch {...ShowHiddenSwitchProps} />}
-                        label={JobHiddenSwitchLabel}
+                        label={ShowHiddenSwitchLabel}
                     />
                 }
             </Collapse>

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

@@ -74,7 +74,7 @@ const AdvancedSearchMobile = () => {
 
     const { advancedOptions, toggleAdvancedOptions, searchValue, submitForm,
         setSearchValue, FieldsSelectorProps, TechsSelectorProps, resetAdvancedSearch, JobDurationSliderText, ResetButtonProps,
-        JobTypeSelectorProps, JobDurationSwitchProps, JobDurationCollapseProps, JobDurationSwitchLabel, JobHiddenSwitchLabel,
+        JobTypeSelectorProps, JobDurationSwitchProps, JobDurationCollapseProps, JobDurationSwitchLabel, ShowHiddenSwitchLabel,
         JobDurationSliderProps, onMobileClose, ShowHiddenSwitchProps,
     } = useContext(AdvancedSearchControllerContext);
 
@@ -97,7 +97,6 @@ const AdvancedSearchMobile = () => {
     const handleExit = () => {
         if (shouldSubmitForm) submitForm();
         if (onMobileClose) onMobileClose();
-
     };
 
     const { data,
@@ -161,9 +160,9 @@ const AdvancedSearchMobile = () => {
                     />
                     {sessionData?.isAdmin &&
                     <FormControlLabel
-                        className={classes.jobHiddenSliderToggle}
+                        className={classes.showHiddenToggle}
                         control={<Switch {...ShowHiddenSwitchProps} />}
-                        label={JobHiddenSwitchLabel}
+                        label={ShowHiddenSwitchLabel}
                     />
                 }
                 </FormGroup>
@@ -205,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/useAdvancedSearch.js

@@ -32,7 +32,7 @@ export default ({
 
     const JobDurationSwitchLabel = "Filter Job Duration";
 
-    const JobHiddenSwitchLabel = "Show Hidden Offers";
+    const ShowHiddenSwitchLabel = "Show Hidden Offers";
 
     const [advancedOptions, toggleAdvancedOptions] = useToggle(enableAdvancedSearchDefault);
 
@@ -111,10 +111,10 @@ export default ({
         JobDurationSwitchProps,
         JobDurationCollapseProps,
         JobDurationSwitchLabel,
-        JobHiddenSwitchLabel,
         JobDurationSliderProps,
         JobDurationSliderText,
         ResetButtonProps,
         ShowHiddenSwitchProps,
+        ShowHiddenSwitchLabel,
     };
 };

src/components/HomePage/SearchArea/SearchArea.js

@@ -51,13 +51,15 @@ export const AdvancedSearchController = ({
         setTechs: actualSetTechs,
         resetAdvancedSearchFields: actualResetAdvancedSearchFields,
         setSearchValue: setUrlSearchValue,
+        setShowHidden: actualSetShowHidden,
     } = useSearchParams({
         setJobDuration,
         setShowJobDurationSlider,
         setJobType,
         setFields,
         setTechs,
         resetAdvancedSearchFields,
+        setShowHidden,
     });
 
     const advancedSearchProps = useAdvancedSearch({
@@ -76,7 +78,7 @@ export const AdvancedSearchController = ({
         resetAdvancedSearchFields: actualResetAdvancedSearchFields,
         hideOffer,
         showHidden,
-        setShowHidden,
+        setShowHidden: actualSetShowHidden,
     });
 
     const { search: searchOffers } = useOffersSearcher({
@@ -109,6 +111,8 @@ export const AdvancedSearchController = ({
         setFields(ensureArray(queryParams.fields ?? []));
         setTechs(ensureArray(queryParams.technologies ?? []));
 
+        setShowHidden(queryParams.showHidden === "false");
+
         setSearchValue(queryParams.searchValue);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);

src/components/HomePage/SearchArea/searchAreaStyle.js

@@ -92,7 +92,7 @@ export default makeStyles((theme) => ({
             gridRowStart: 4,
         },
     },
-    jobHiddenSliderToggle: {
+    showHiddenToggle: {
         gridRowStart: 4,
         gridColumnStart: 2,
     },

src/components/HomePage/SearchArea/useUrlSearchParams.js

@@ -20,6 +20,7 @@ export default ({
     setTechs,
     setSearchValue,
     resetAdvancedSearchFields,
+    setShowHidden,
 } = {}) => {
 
     const location = useLocation();
@@ -85,6 +86,15 @@ export default ({
 
     }, [changeURLFilters, location, queryParams, setShowJobDurationSlider]);
 
+    const actualSetShowHidden = useCallback((showHiddenToggle) => {
+
+        changeURLFilters(location, queryParams, { showHidden: showHiddenToggle });
+
+        if (setShowHidden)
+            setShowHidden(showHiddenToggle);
+
+    }, [changeURLFilters, location, queryParams, setShowHidden]);
+
     const actualSetFields = useCallback((fields) => {
 
         const sanitizedFields = ensureArray(fields);
@@ -138,5 +148,6 @@ export default ({
         setTechs: actualSetTechs,
         setSearchValue: actualSetSearchValue,
         resetAdvancedSearchFields: actualResetAdvancedSearchFields,
+        setShowHidden: actualSetShowHidden,
     };
 };