Persisted column filters

packages/webapp/src/components/lists/ReportList/hooks.ts

@@ -69,3 +69,35 @@ export function useTopRowFilterOptions(reportType: ReportType): [Service, Filter
 
 	return [selectedService, reportFilterOptions]
 }
+
+export function useInitializeFilters(filters, setFilters, buildFilters) {
+	useEffect(() => {
+		const defaultFilters = buildFilters?.() ?? []
+
+		// If filters have been set locally
+		if (filters.length > 0) {
+			const _f = filters.map((f) => f.id).sort()
+			const _df = defaultFilters.map((f) => f.id).sort()
+
+			// Hacky way to check if report type has changed
+			if (!(_f.join(',') === _df.join(','))) {
+				setFilters?.(defaultFilters)
+			}
+		}
+
+		// If filters have not been set
+		else if (!filters?.length) setFilters?.(defaultFilters)
+	}, [filters, setFilters, buildFilters])
+}
+
+export function useGetValue(filters) {
+	const getSelectedValue = (key: string): string | number | string[] | number[] | undefined => {
+		return filters.find((f) => f.id === key)?.value
+	}
+
+	const getStringValue = (key: string): string | undefined => {
+		return filters.find((f) => f.id === key)?.value?.[0]
+	}
+
+	return { getSelectedValue, getStringValue }
+}

packages/webapp/src/components/lists/ReportList/index.module.scss

@@ -64,7 +64,6 @@
 		.actionItemHeader {
 			position: sticky;
 			right: -1px;
-			background-color: color('white');
 		}
 	}
 }

packages/webapp/src/components/lists/ReportList/index.tsx

@@ -29,7 +29,17 @@ export const ReportList: StandardFC<ReportListProps> = wrap(function ReportList(
 	const [unfilteredData, setUnfilteredData] = useState<unknown[]>(empty)
 	const [filteredData, setFilteredData] = useState<unknown[]>(empty)
 	const [hiddenFields, setHiddenFields] = useRecoilState(hiddenReportFieldsState)
-	const { clearFilters, ...filterUtilities } = useFilteredData(unfilteredData, setFilteredData)
+	const {
+		clearFilters,
+		clearFilter,
+		filterColumns,
+		filterColumnTextValue,
+		filterRangedValues,
+		getDemographicValue,
+		headerFilters,
+		setHeaderFilters,
+		setFilterHelper
+	} = useFilteredData(unfilteredData, setFilteredData)
 	// Exporting
 	const { downloadCSV, setCsvFields } = useCsvExport(filteredData)
 
@@ -54,15 +64,13 @@ export const ReportList: StandardFC<ReportListProps> = wrap(function ReportList(
 			if (!fieldOption.selected) {
 				const _hiddenFields = { ...hiddenFields, [fieldOption.key]: true }
 				setHiddenFields(_hiddenFields)
+				clearFilter(fieldOption.key as string)
 			} else {
 				const _hiddenFields = { ...hiddenFields, [fieldOption.key]: undefined }
 				setHiddenFields(_hiddenFields)
 			}
-
-			clearFilters()
 		},
-		[setHiddenFields, hiddenFields, clearFilters]
-		// [setHiddenFields, hiddenFields]
+		[setHiddenFields, hiddenFields, clearFilter]
 	)
 
 	return (
@@ -91,7 +99,15 @@ export const ReportList: StandardFC<ReportListProps> = wrap(function ReportList(
 					setFilteredData={setFilteredData}
 					setUnfilteredData={setUnfilteredData}
 					setCsvFields={setCsvFields}
-					{...filterUtilities}
+					{...{
+						filterColumns,
+						filterColumnTextValue,
+						filterRangedValues,
+						getDemographicValue,
+						headerFilters,
+						setHeaderFilters,
+						setFilterHelper
+					}}
 				/>
 			</div>
 		</>

packages/webapp/src/components/lists/ReportList/reports/ClientReport/index.tsx

@@ -11,7 +11,6 @@ import { useClientReportFilterHelper } from './useClientReportFilterHelper'
 import { useClientReportCsvFields } from './useClientReportCsvFields'
 import { useClientReportFilters } from './useClientReportFilters'
 import { useClientReportData } from './useClientReportData'
-
 export const ClientReport: FC<CommonReportProps> = memo(function ClientReport({
 	data,
 	filterColumnTextValue,
@@ -22,7 +21,8 @@ export const ClientReport: FC<CommonReportProps> = memo(function ClientReport({
 	setFilteredData,
 	setFilterHelper,
 	setCsvFields,
-	setFieldFilters,
+	headerFilters,
+	setHeaderFilters,
 	hiddenFields
 }) {
 	const columns = useClientReportColumns(
@@ -32,9 +32,8 @@ export const ClientReport: FC<CommonReportProps> = memo(function ClientReport({
 		getDemographicValue,
 		hiddenFields
 	)
-
 	useClientReportData(setUnfilteredData, setFilteredData)
-	useClientReportFilters(setFieldFilters)
+	useClientReportFilters(headerFilters, setHeaderFilters)
 	useClientReportCsvFields(setCsvFields, getDemographicValue, hiddenFields)
 	useClientReportFilterHelper(setFilterHelper)