Feature 2298 check ins report query parameters #2304
Conversation
| export const useQueryParameters = qps => { | ||
| export const useQueryParameters = ( | ||
| qps, | ||
| requirements = [], |
There was a problem hiding this comment.
Some pages require data to be loaded before query parameters can be processed. This page is one of them. We must have an array of all possible PDL objects in order to call setSelectedPdls with an array of PDL objects that have ids that match those in the pdls query parameter. Support this was extremely difficult and did not increase my love of React. ;-)
requirements is an array of data values that must be set in order to process the query parameters. It defaults to an empty array because most pages do not need this.
processedQPs is an object created by a call to useRef in the calling page. It holds a Boolean that indicates whether we have finished processing the query parameters. This can only happen after all the requirements values are present. I'm using a ref because the value needs to be maintained across multiple renders of the page which React loves to do. I'm open to suggestions for other ways to maintain this flag.
| // This examines all the query parameters and | ||
| // sets the state value associated with each of them. | ||
| useEffect(() => { | ||
| if (processedQPs?.current) return; |
There was a problem hiding this comment.
If the page supplied a value for processedQPs AND the value it holds is true then we don't need to run the code that follows again.
| useEffect(() => { | ||
| if (processedQPs?.current) return; | ||
|
|
||
| const haveRequirements = requirements.every(req => |
There was a problem hiding this comment.
If requirements is an empty array, this will be set to true which is what we want.
| if (processedQPs?.current) return; | ||
|
|
||
| const haveRequirements = requirements.every(req => | ||
| Array.isArray(req) ? req.length > 0 : req !== null && req !== undefined |
There was a problem hiding this comment.
When a required value is an array, the requirement is met when the array is not empty.
Otherwise the requirement is met when the value is not null or undefined.
| const haveRequirements = requirements.every(req => | ||
| Array.isArray(req) ? req.length > 0 : req !== null && req !== undefined | ||
| ); | ||
| if (!haveRequirements) return; |
There was a problem hiding this comment.
If the requirements are not met then we cannot processed the query parameters yet.
| } | ||
| } | ||
| }, []); | ||
| if (processedQPs) processedQPs.current = true; |
There was a problem hiding this comment.
If the caller supplied this ref, we need to set its value to to true to include that we have processed the query parameters. This prevents use from doing it again later.
| // This updates the query parameters in the URL | ||
| // when their associated state values change. | ||
| useEffect(() => { | ||
| const haveRequirements = requirements.every(req => |
There was a problem hiding this comment.
If the requirements have not been met then we cannot update the query parameters.
| const search = Object.keys(params).length | ||
| ? '?' + new URLSearchParams(params).toString() | ||
| : ''; | ||
| if (search !== url.search) { |
There was a problem hiding this comment.
Only update the URL if the query parameters have changed.
| import React, { useContext, useEffect, useState } from 'react'; | ||
| import React, { useContext, useEffect, useRef, useState } from 'react'; | ||
|
|
||
| import { TextField } from '@mui/material'; |
There was a problem hiding this comment.
Minor reordering of imports.
| } | ||
| } | ||
| ], | ||
| [pdls], |
There was a problem hiding this comment.
The requirements for processing query parameters for this page are to have entries in the pdl array.
| const [filteredPdls, setFilteredPdls] = useState(pdls); | ||
|
|
||
| const processedQPs = useRef(false); | ||
| useQueryParameters( |
There was a problem hiding this comment.
This adds support for the pdl query parameter which keeps track of the PDLs the user has selected.
No description provided.