Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 | 27x | import { useEffect } from 'react';
import { useHistory, useLocation } from 'react-router';
import queryString from 'query-string';
// !WARNING! This pattern is not recommended
// You likely want to make use of the filterConfig valuesMapping/filterPrefix
// instead so SASQ filters can be used natively
/**
* Custom hook for managing a single, standalone URL query parameter.
*
* This hook automatically reads a specified query parameter from the URL. If the
* parameter is missing on the initial load, it uses `defaultValue` and updates
* the URL to include it. It provides a `handler` function to update the
* parameter's value in the URL, which defaults to `fallbackValue` if no new
* value is explicitly provided to the handler.
*
* @param {object} props - The properties object.
* @param {string} props.name - The name of the query parameter to manage (e.g., 'showDetails').
* @param {string} [props.defaultValue='true'] - The value to set in the URL if the parameter is missing on initial load.
* @param {string} [props.fallbackValue='false'] - The value to set when the `handler` is called without a new value.
* @returns {{ handler: function, param: string }} An object containing the update handler and the current parameter value.
*/
const useStandaloneSASQQueryParameter = ({
name,
defaultValue, // This is the value that will be spun up if no value is present in the url
fallbackValue, // This is the value that will be set if there is no value passed to handler (values[0])
}) => {
const location = useLocation();
const history = useHistory();
// Special URL management for includeTerminal
const urlQuery = queryString.parse(location.search);
const param = urlQuery[name];
const handler = ({ name: _name, values }) => {
const newQuery = {
...urlQuery,
[name]: values[1] ?? fallbackValue // SECOND value is the new one
};
history.push({
pathname: location.pathname,
search: `?${queryString.stringify(newQuery)}`
});
};
useEffect(() => {
if (!param) {
const newQuery = {
...urlQuery,
[name]: defaultValue
};
history.push({
pathname: location.pathname,
search: `?${queryString.stringify(newQuery)}`
});
}
}, [defaultValue, history, location.pathname, name, param, urlQuery]);
return {
handler,
param
};
};
export default useStandaloneSASQQueryParameter;
|