I am working currently on a filter bar. Using react-hook-form {useForm}. What I try to achieve as I console.log(watch()) I get back and array of the filter form items,
I can see it contains my filter items all cool. I have dates as string and autocomplete fields as array.
On to the point I have a defaultValues object with all field empty, so no default filter. I want to compare defaultValues (which is empty fields) with watch items, so if I have active filters I want to count them and give back the number in the filter bar as a number.
Could you please help me how to compare them and also count if watch() item not empty, null or undefined than increase count.
export const defaultValues = {
id: [],
dateFrom: '',
dateTo: '',
numbers: [],
cars: [],
}
console.log(wathc()) response:
{id: Array(2), dateTo: "2022-04-31T00:00:00.000Z", dateFrom: "", cars: Array(0), numbers: Array(0)}
One of the array has 2 items, and one of is not an empty string. I want to count them up and in the Filter Bar (3) so that we have 3 active filter.
I aslo do have a url parser:
export const parseURLFilters = (search, setDefaultIfEmpty) => {
const queryParams = queryString.parse(search, {
parseBooleans: true,
parseNumbers: true,
});
const filters = {};
Object.entries(defaultValues).forEach(([key, defaultValue]) => {
const queryParamValue = queryParams[key];
if (setDefaultIfEmpty || (!setDefaultIfEmpty && queryParamValue)) {
if (queryParamValue && isArray(defaultValue)) {
// Parse array query param values correctly
filters[key] = isArray(queryParamValue) ? queryParamValue : [queryParamValue];
} else {
filters[key] = queryParamValue || defaultValue;
}
}
});
return filters;
};
If I console.log(parseURLFilters(location.search)) I get back only the field with actual value:
{
id: Array(2), dateTo: "2022-04-31T00:00:00.000Z",
}
Simply check the object equality while keeping a variable to count the different values (count). Additionally, do a deep check for array values.
const defaultValues = {
id: [],
dateFrom: '',
dateTo: '',
numbers: [],
cars: [],
}
const newValues = {
id: [1,2],
dateTo: "2022-04-31T00:00:00.000Z",
dateFrom: "",
cars: [],
numbers: []
}
const checkEqualArray = (arr1, arr2) => {
arr1.sort();
arr2.sort();
return arr1.length === arr2.length && arr1.every((val, index) => val === arr2[index]);
}
const getTotalFilters = (obj1, obj2) => {
let count = 0;
for(const key in obj1) {
if(obj1.hasOwnProperty(key) && obj2.hasOwnProperty(key)) {
if(Array.isArray(obj1[key]) && Array.isArray(obj2[key])) {
count += !checkEqualArray(obj1[key], obj2[key]);
} else {
count += obj1[key] !== obj2[key];
}
}
}
console.log(count);
}
getTotalFilters(defaultValues, newValues);