fix(megapixels): make Filter accept null as input value

Author: toxsick

packages/megapixels/src/Filter/Filter.tsx

@@ -56,7 +56,7 @@ type ClassName = TVClassName<typeof filterVariants>;
 
 export interface FilterValues {
   search?: string;
-  filter?: string | Record<string, unknown>;
+  filter?: string | Record<string, unknown> | null;
 }
 
 export type FilterChildRenderFn = (values: FilterValues) => ReactNode;

packages/megapixels/src/Filter/hooks/useFilterValidation.test.ts

@@ -28,30 +28,79 @@ describe('useFilterValidation', () => {
     const schema = result.current;
 
     const valid = schema.validate({ filter: { status: true, owners: ['a'] } });
-    expect(valid.errors).toBeNull();
+    expect(valid).toMatchObject({
+      success: true,
+      data: { filter: { status: true, owners: ['a'] } },
+      errors: null,
+    });
 
     const invalid = schema.validate({
       filter: { status: 'invalid', owners: [] },
     });
-    expect(invalid.errors).not.toBeNull();
+    expect(invalid).toMatchObject({ success: false, data: null });
   });
 
   it('validates optional search string when enabled', () => {
     const { result } = renderHook(() => useFilterValidation(filters, true));
     const schema = result.current;
 
     // include valid filter content so only search is under test
-    expect(
-      schema.validate({ search: 'abc', filter: { owners: ['x'] } }).errors,
-    ).toBe(null);
-    expect(
-      schema.validate({ search: 123, filter: { owners: ['x'] } }).errors,
-    ).not.toBeNull();
-    expect(
-      schema.validate({
-        search: 123,
-        filter: JSON.stringify({ owners: ['x'] }),
-      }).errors,
-    ).not.toBeNull();
+    const ok = schema.validate({ search: 'abc', filter: { owners: ['x'] } });
+    expect(ok).toMatchObject({
+      success: true,
+      data: { search: 'abc', filter: { owners: ['x'] } },
+      errors: null,
+    });
+
+    const invalidSearch = schema.validate({
+      search: 123 as unknown as string,
+      filter: { owners: ['x'] },
+    });
+    expect(invalidSearch).toMatchObject({ success: false, data: null });
+  });
+
+  it('parses stringified JSON filter into object in output data', () => {
+    const { result } = renderHook(() => useFilterValidation(filters, true));
+    const schema = result.current;
+
+    const jsonFilter = JSON.stringify({ status: true, owners: ['x'] });
+    const validationResult = schema.validate({
+      search: 'ok',
+      filter: jsonFilter,
+    });
+    expect(validationResult).toMatchObject({
+      success: true,
+      data: { search: 'ok', filter: { status: true, owners: ['x'] } },
+      errors: null,
+    });
+  });
+
+  it('accepts when filter is null and returns undefined filter data', () => {
+    const { result } = renderHook(() => useFilterValidation(filters, true));
+    const schema = result.current;
+
+    const validationResult = schema.validate({ search: 'test', filter: null });
+    expect(validationResult).toMatchObject({
+      success: true,
+      // filter should be undefined
+      data: { filter: undefined, search: 'test' },
+      errors: null,
+    });
+  });
+
+  it('accepts when filter is omitted and and returns undefined filter data', () => {
+    const { result } = renderHook(() => useFilterValidation(filters, true));
+    const schema = result.current;
+
+    const validationResult = schema.validate({
+      search: 'test',
+      filter: undefined,
+    });
+    expect(validationResult).toMatchObject({
+      success: true,
+      // filter should be undefined
+      data: { filter: undefined, search: 'test' },
+      errors: null,
+    });
   });
 });

packages/megapixels/src/Filter/hooks/useFilterValidation.ts

@@ -1,13 +1,10 @@
-import type { VetoTypeAny } from '@fuf-stack/veto';
+import type { VetoInstance, VetoRawShape, VetoTypeAny } from '@fuf-stack/veto';
 import type { FilterInstance } from '../filters/types';
 
 import { useMemo } from 'react';
 
 import { object, string, stringToJSON, veto } from '@fuf-stack/veto';
 
-/** Validation function return type alias. */
-type ValidationSchema = ReturnType<typeof veto>;
-
 /**
  * useFilterValidation
  *
@@ -19,28 +16,34 @@ export const useFilterValidation = (
   filters: FilterInstance<unknown, unknown>[],
   withSearch?: boolean,
 ) => {
-  return useMemo<ValidationSchema>(() => {
-    let validationObject: Record<string, VetoTypeAny> = {};
-    let filterValidation: Record<string, VetoTypeAny> = {};
-
+  return useMemo<VetoInstance>(() => {
+    // build filter validation
+    let filterSchema: Record<string, VetoTypeAny> = {};
     filters.forEach((f) => {
-      filterValidation = {
-        ...filterValidation,
-        [f.name]: f.validation(f.config),
+      filterSchema = {
+        ...filterSchema,
+        [f.name]: f.validation(f.config) as VetoTypeAny,
       };
     });
 
-    validationObject = {
+    const validationSchema: VetoRawShape = {
+      // filter validation
       filter: stringToJSON()
-        .pipe(object(filterValidation))
-        .or(object(filterValidation))
-        .optional(),
+        .pipe(object(filterSchema))
+        .or(object(filterSchema))
+        .optional()
+        .nullable()
+        // transform null to undefined
+        .transform((val) => {
+          return val ?? undefined;
+        }),
+      // optional search validation
       ...(withSearch
         ? { search: string({ min: 0 }).nullable().optional() }
         : {}),
     };
 
-    return veto(validationObject);
+    return veto(validationSchema);
   }, [filters, withSearch]);
 };