Swapped variable name

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

@@ -36,8 +36,8 @@ export const ReportList: StandardFC<ReportListProps> = wrap(function ReportList(
 		filterColumnTextValue,
 		filterRangedValues,
 		getDemographicValue,
-		headerFilters,
-		setHeaderFilters,
+		fieldFilters,
+		setFieldFilters,
 		setFilterHelper
 	} = useFilteredData(unfilteredData, setFilteredData)
 	// Exporting
@@ -104,8 +104,8 @@ export const ReportList: StandardFC<ReportListProps> = wrap(function ReportList(
 						filterColumnTextValue,
 						filterRangedValues,
 						getDemographicValue,
-						headerFilters,
-						setHeaderFilters,
+						fieldFilters,
+						setFieldFilters,
 						setFilterHelper
 					}}
 				/>

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

@@ -21,8 +21,8 @@ export const ClientReport: FC<CommonReportProps> = memo(function ClientReport({
 	setFilteredData,
 	setFilterHelper,
 	setCsvFields,
-	headerFilters,
-	setHeaderFilters,
+	fieldFilters,
+	setFieldFilters,
 	hiddenFields
 }) {
 	const columns = useClientReportColumns(
@@ -33,7 +33,7 @@ export const ClientReport: FC<CommonReportProps> = memo(function ClientReport({
 		hiddenFields
 	)
 	useClientReportData(setUnfilteredData, setFilteredData)
-	useClientReportFilters(headerFilters, setHeaderFilters)
+	useClientReportFilters(fieldFilters, setFieldFilters)
 	useClientReportCsvFields(setCsvFields, getDemographicValue, hiddenFields)
 	useClientReportFilterHelper(setFilterHelper)
 

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

@@ -14,7 +14,7 @@ import { useLocale } from '~hooks/useLocale'
 import { Namespace, useTranslation } from '~hooks/useTranslation'
 import { TagBadgeList } from '~ui/TagBadgeList'
 import { useRecoilValue } from 'recoil'
-import { headerFiltersState, organizationState } from '~store'
+import { fieldFiltersState, organizationState } from '~store'
 import styles from '../../index.module.scss'
 import { useGetValue } from '../../hooks'
 
@@ -28,8 +28,8 @@ export function useClientReportColumns(
 	const { t } = useTranslation(Namespace.Reporting, Namespace.Clients)
 	const [locale] = useLocale()
 	const org = useRecoilValue(organizationState)
-	const headerFilters = useRecoilValue(headerFiltersState)
-	const { getSelectedValue, getStringValue } = useGetValue(headerFilters)
+	const fieldFilters = useRecoilValue(fieldFiltersState)
+	const { getSelectedValue, getStringValue } = useGetValue(fieldFilters)
 
 	return useMemo((): IPaginatedTableColumn[] => {
 		const _pageColumns: IPaginatedTableColumn[] = [

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

@@ -22,8 +22,8 @@ export const RequestReport: FC<CommonReportProps> = memo(function RequestReport(
 	setFilteredData,
 	setFilterHelper,
 	setCsvFields,
-	headerFilters,
-	setHeaderFilters,
+	fieldFilters,
+	setFieldFilters,
 	hiddenFields
 }) {
 	const columns = useRequestReportColumns(
@@ -35,7 +35,7 @@ export const RequestReport: FC<CommonReportProps> = memo(function RequestReport(
 	)
 
 	useRequestReportData(setUnfilteredData, setFilteredData)
-	useRequestReportFilters(headerFilters, setHeaderFilters)
+	useRequestReportFilters(fieldFilters, setFieldFilters)
 	useRequestReportCsvFields(setCsvFields, getDemographicValue, hiddenFields)
 	useRequestReportFilterHelper(setFilterHelper)
 

packages/webapp/src/components/lists/ReportList/reports/RequestReport/useRequestReportColumns/useContactFormColumns.tsx

@@ -14,7 +14,7 @@ import { CustomDateRangeFilter } from '~components/ui/CustomDateRangeFilter'
 import { TagBadgeList } from '~ui/TagBadgeList'
 import { useLocale } from '~hooks/useLocale'
 import { useRecoilValue } from 'recoil'
-import { headerFiltersState, organizationState } from '~store'
+import { fieldFiltersState, organizationState } from '~store'
 import { useGetValue } from '~components/lists/ReportList/hooks'
 
 export function useContactFormColumns(
@@ -27,8 +27,8 @@ export function useContactFormColumns(
 	const { t } = useTranslation(Namespace.Reporting, Namespace.Clients, Namespace.Services)
 	const [locale] = useLocale()
 	const org = useRecoilValue(organizationState)
-	const headerFilters = useRecoilValue(headerFiltersState)
-	const { getSelectedValue, getStringValue } = useGetValue(headerFilters)
+	const fieldFilters = useRecoilValue(fieldFiltersState)
+	const { getSelectedValue, getStringValue } = useGetValue(fieldFilters)
 
 	return useMemo(() => {
 		const columns = [

packages/webapp/src/components/lists/ReportList/reports/RequestReport/useRequestReportColumns/useRequestFieldColumns.tsx

@@ -15,7 +15,7 @@ import { CustomOptionsFilter } from '~components/ui/CustomOptionsFilter'
 import { ShortString } from '~components/ui/ShortString'
 import { TagBadgeList } from '~ui/TagBadgeList'
 import { useRecoilValue } from 'recoil'
-import { headerFiltersState, organizationState } from '~store'
+import { fieldFiltersState, organizationState } from '~store'
 import { useGetValue } from '~components/lists/ReportList/hooks'
 
 export function useRequestFieldColumns(
@@ -27,8 +27,8 @@ export function useRequestFieldColumns(
 	const { t } = useTranslation(Namespace.Reporting, Namespace.Clients, Namespace.Requests)
 	const [locale] = useLocale()
 	const org = useRecoilValue(organizationState)
-	const headerFilters = useRecoilValue(headerFiltersState)
-	const { getSelectedValue, getStringValue } = useGetValue(headerFilters)
+	const fieldFilters = useRecoilValue(fieldFiltersState)
+	const { getSelectedValue, getStringValue } = useGetValue(fieldFilters)
 
 	const statusList = useMemo(
 		() => [

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

@@ -28,16 +28,16 @@ export const ServiceReport: FC<CommonReportProps> = memo(function ClientReport({
 	setFilterHelper,
 	setUnfilteredData,
 	setCsvFields,
-	headerFilters,
-	setHeaderFilters,
+	fieldFilters,
+	setFieldFilters,
 	hiddenFields
 }) {
 	const { loading, deleteServiceAnswer, updateServiceAnswer } = useServiceReportData(
 		service,
 		setUnfilteredData,
 		setFilteredData
 	)
-	useServiceReportFilters(headerFilters, setHeaderFilters, service)
+	useServiceReportFilters(fieldFilters, setFieldFilters, service)
 	useServiceReportCsvFields(service, setCsvFields, getDemographicValue, hiddenFields)
 	useServiceReportFilterHelper(setFilterHelper)
 

packages/webapp/src/components/lists/ReportList/reports/ServiceReport/useServiceReportColumns/useServiceFieldColumns.tsx

@@ -15,7 +15,7 @@ import { ShortString } from '~components/ui/ShortString'
 import { useLocale } from '~hooks/useLocale'
 import { getRecordedFieldValue } from '~utils/forms'
 import { useRecoilValue } from 'recoil'
-import { headerFiltersState } from '~store'
+import { fieldFiltersState } from '~store'
 import { useGetValue } from '~components/lists/ReportList/hooks'
 
 const DROPDOWN_FIELD_TYPES = [ServiceFieldType.SingleChoice, ServiceFieldType.MultiChoice]
@@ -30,14 +30,14 @@ export function useServiceFieldColumns(
 	hiddenFields: Record<string, boolean>
 ): IPaginatedTableColumn[] {
 	const [locale] = useLocale()
-	const headerFilters = useRecoilValue(headerFiltersState)
-	const { getSelectedValue, getStringValue } = useGetValue(headerFilters)
+	const fieldFilters = useRecoilValue(fieldFiltersState)
+	const { getSelectedValue, getStringValue } = useGetValue(fieldFilters)
 
 	return useMemo(
 		() =>
 			fields
 				.filter((field) => !hiddenFields?.[field.id])
-				.map((field, index) => ({
+				.map((field) => ({
 					key: field.id,
 					name: field.name,
 					headerClassName: styles.headerItemCell,

packages/webapp/src/components/lists/ReportList/reports/ServiceReport/useServiceReportFilters.ts

@@ -21,7 +21,7 @@ export function useServiceReportFilters(
 }
 
 function buildServiceFilters(service: Service): IFieldFilter[] {
-	const headerFilters: IFieldFilter[] =
+	const serviceFilters: IFieldFilter[] =
 		service?.fields?.map((field) => ({
 			id: field.id,
 			name: field.name,
@@ -54,5 +54,5 @@ function buildServiceFilters(service: Service): IFieldFilter[] {
 				value: []
 		  }))
 
-	return [...headerFilters, ...contactFilters]
+	return [...serviceFilters, ...contactFilters]
 }

packages/webapp/src/components/lists/ReportList/reports/types.ts

@@ -11,8 +11,8 @@ export type FilterHelper = (data: unknown[], filter: IFieldFilter, utils: any) =
 export interface CommonReportProps {
 	data: unknown[]
 	service?: Service
-	headerFilters?: IFieldFilter[]
-	setHeaderFilters: (filters: IFieldFilter[]) => void
+	fieldFilters?: IFieldFilter[]
+	setFieldFilters: (filters: IFieldFilter[]) => void
 	hiddenFields: Record<string, boolean>
 	filterColumns: (columnId: string, option: IDropdownOption) => void
 	filterColumnTextValue: (key: string, value: string) => void

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

@@ -7,64 +7,64 @@ import { IDropdownOption } from '@fluentui/react'
 import { useCallback, useEffect, useState } from 'react'
 import { useRecoilState } from 'recoil'
 import { Namespace, useTranslation } from '~hooks/useTranslation'
-import { headerFiltersState } from '~store'
+import { fieldFiltersState } from '~store'
 import { emptyStr } from '~utils/noop'
 
 import { FilterHelper } from './reports/types'
 import { IFieldFilter } from './types'
 
 export function useFilteredData(data: unknown[], setFilteredData: (data: unknown[]) => void) {
-	const [headerFilters, setHeaderFilters] = useRecoilState(headerFiltersState)
+	const [fieldFilters, setFieldFilters] = useRecoilState(fieldFiltersState)
 	const [filterHelper, setFilterHelper] = useState<{ helper: FilterHelper } | null>(null)
-	const filterUtilities = useFilterUtilities(headerFilters, setHeaderFilters)
+	const filterUtilities = useFilterUtilities(fieldFilters, setFieldFilters)
 	const [filterUtils] = useState(filterUtilities)
 
 	useEffect(
 		function filterData() {
 			// If filters are empty, return the original data
-			if (headerFilters.every(isEmptyFilter)) {
+			if (fieldFilters.every(isEmptyFilter)) {
 				setFilteredData(data)
 			} else if (filterHelper?.helper) {
 				let result = data
 
-				headerFilters
+				fieldFilters
 					.filter((f) => !isEmptyFilter(f))
 					.forEach((filter) => {
 						result = filterHelper.helper(result, filter, filterUtils)
 					})
 				setFilteredData(result)
 			}
 		},
-		[headerFilters, setFilteredData, filterHelper, filterUtils, data]
+		[fieldFilters, setFilteredData, filterHelper, filterUtils, data]
 	)
 
 	// Clear all header filters
 	const clearFilters = useCallback(
 		function clearFilters() {
-			setHeaderFilters([])
+			setFieldFilters([])
 		},
-		[setHeaderFilters]
+		[setFieldFilters]
 	)
 
 	// Clear a single header filter
 	const clearFilter = useCallback(
 		function clearFilters(filterToClear: string) {
-			const filterToClearIdx = headerFilters.findIndex((f) => f.id === filterToClear)
+			const filterToClearIdx = fieldFilters.findIndex((f) => f.id === filterToClear)
 			if (filterToClearIdx > -1) {
-				const newFilters = [...headerFilters]
+				const newFilters = [...fieldFilters]
 				newFilters[filterToClearIdx] = { ...newFilters[filterToClearIdx], value: emptyStr }
-				setHeaderFilters(newFilters)
+				setFieldFilters(newFilters)
 			}
 		},
-		[setHeaderFilters, headerFilters]
+		[setFieldFilters, fieldFilters]
 	)
 
 	return {
 		clearFilters,
 		clearFilter,
 		setFilterHelper,
-		setHeaderFilters,
-		headerFilters,
+		setFieldFilters,
+		fieldFilters,
 		...filterUtilities
 	}
 }

packages/webapp/src/store/index.ts

@@ -106,8 +106,8 @@ export const selectedReportServiceState = atom<Service>({
 })
 
 // Only used on reporting page
-export const headerFiltersState = atom<IFieldFilter[]>({
-	key: 'headerFilters',
+export const fieldFiltersState = atom<IFieldFilter[]>({
+	key: 'fieldFilters',
 	default: [],
 	effects_UNSTABLE: [persistAtom]
 })