refactor!: update naming of useFilterSelect, useFilterGroup and useFilterRule

Author: lawvs

.changeset/moody-snakes-knock.md

@@ -0,0 +1,14 @@
+---
+"@fn-sphere/filter": minor
+---
+
+- In `useFilterSelect`:
+  - The `updateField` function has been deprecated and replaced with `setField` for clarity and consistency.
+  - The `updateFilter` function has been deprecated and replaced with `setFilter`.
+- In `useFilterRule`:
+  - The `updateRule` function has been renamed to `setRule`
+  - Added a new `duplicateRule` function to duplicate a rule.
+  - Added a new `invertRule` function.
+- In `useFilterGroup` and `useFilterRule`:
+  - The parameter `SingleFilter` has been changed to `SingleFilterInput` for simplicity.
+  - The parameter `FilterGroup` has been changed to `FilterGroupInput` for simplicity.

packages/filter/src/hooks/use-filter-group.ts

@@ -2,7 +2,8 @@ import {
   createFilterGroup,
   createSingleFilter,
   type FilterGroup,
-  type SingleFilter,
+  type FilterGroupInput,
+  type SingleFilterInput,
 } from "@fn-sphere/core";
 import { getDepthOfRule, toFilterMap } from "../filter-map.js";
 import { useFilterSchemaContext } from "./use-filter-schema-context.js";
@@ -51,10 +52,8 @@ export const useFilterGroup = (ruleGroup: FilterGroup) => {
     });
   };
 
-  const appendChildRule = (
-    newRule: SingleFilter = createSingleFilter(),
-    index = Infinity,
-  ) => {
+  const appendChildRule = (input?: SingleFilterInput, index = Infinity) => {
+    const newRule = createSingleFilter(input);
     onFilterMapChange({
       ...filterMap,
       [ruleNode.id]: {
@@ -74,12 +73,13 @@ export const useFilterGroup = (ruleGroup: FilterGroup) => {
   };
 
   const appendChildGroup = (
-    newFilterGroup: FilterGroup = createFilterGroup({
+    input: FilterGroupInput = {
       op: "and",
       conditions: [createSingleFilter()],
-    }),
+    },
     index = Infinity,
   ) => {
+    const newFilterGroup = createFilterGroup(input);
     onFilterMapChange({
       ...filterMap,
       [ruleNode.id]: {

packages/filter/src/hooks/use-filter-rule.ts

@@ -3,8 +3,9 @@ import {
   createSingleFilter,
   isEqualPath,
   isValidRule,
-  type FilterGroup,
+  type FilterGroupInput,
   type SingleFilter,
+  type SingleFilterInput,
 } from "@fn-sphere/core";
 import { fromFilterMap, getDepthOfRule, toFilterMap } from "../filter-map.js";
 import { useFilterSchemaContext } from "./use-filter-schema-context.js";
@@ -40,19 +41,27 @@ export const useFilterRule = (rule: SingleFilter) => {
     (filter) => filter.name === rule.name,
   );
 
-  // TODO ignore FilterId in user input
-  const updateRule = (newRule: SingleFilter) => {
+  const setRule = (input: SingleFilterInput) => {
     onFilterMapChange({
       ...filterMap,
       [rule.id]: {
         type: "Filter",
-        data: newRule,
+        data: {
+          ...createSingleFilter(input),
+          id: rule.id,
+        },
         parentId,
       },
     });
   };
 
-  const appendRule = (newRule: SingleFilter = createSingleFilter()) => {
+  /**
+   * @deprecated Use {@link setRule} instead
+   */
+  const updateRule = setRule;
+
+  const appendRule = (input?: SingleFilterInput) => {
+    const newRule = createSingleFilter(input);
     onFilterMapChange({
       ...filterMap,
       [parentId]: {
@@ -72,12 +81,20 @@ export const useFilterRule = (rule: SingleFilter) => {
     return newRule;
   };
 
+  const duplicateRule = () => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { id: _, ...ruleWithoutId } = rule;
+    const newRule = createSingleFilter(ruleWithoutId);
+    return appendRule(newRule);
+  };
+
   const appendGroup = (
-    newFilterGroup: FilterGroup = createFilterGroup({
+    input: FilterGroupInput = {
       op: "and",
       conditions: [createSingleFilter()],
-    }),
+    },
   ) => {
+    const newFilterGroup = createFilterGroup(input);
     onFilterMapChange({
       ...filterMap,
       [parentId]: {
@@ -139,6 +156,15 @@ export const useFilterRule = (rule: SingleFilter) => {
     onFilterMapChange(newFilterMap);
   };
 
+  const invertRule = (invert?: SingleFilter["invert"]) => {
+    const oldInvert = rule.invert;
+    const newInvert = invert === undefined ? !oldInvert : invert;
+    if (oldInvert === newInvert) {
+      return;
+    }
+    setRule({ ...rule, invert: newInvert });
+  };
+
   const isLastRule = index === parentNode.conditionIds.length - 1;
 
   return {
@@ -170,12 +196,17 @@ export const useFilterRule = (rule: SingleFilter) => {
     selectedField,
     selectedFilter,
 
+    setRule,
+    /**
+     * @deprecated Use {@link setRule} instead
+     */
     updateRule,
     appendRule,
     appendGroup,
     removeRule,
     // moveRule,
-    // duplicateRule,
+    duplicateRule,
+    invertRule,
     // turnIntoGroup,
   };
 };

packages/filter/src/hooks/use-filter-select.ts

@@ -40,7 +40,7 @@ export const useFilterSelect = (rule: SingleFilter) => {
     mapFilterName,
     getLocaleText,
   } = useFilterSchemaContext();
-  const { updateRule } = useFilterRule(rule);
+  const { setRule } = useFilterRule(rule);
 
   const ruleNode = filterMap[rule.id];
   if (!ruleNode) {
@@ -93,7 +93,7 @@ export const useFilterSelect = (rule: SingleFilter) => {
     );
   };
 
-  const updateField = (
+  const setField = (
     newField: FilterField,
     {
       tryRetainFilter = true,
@@ -120,7 +120,7 @@ export const useFilterSelect = (rule: SingleFilter) => {
       tryRetainArgs &&
       (needRetainFilter || canRetainArgs(newField.filterFnList[0]));
 
-    updateRule({
+    setRule({
       ...rule,
       path: newField.path,
       name: newFilterSchema,
@@ -132,26 +132,45 @@ export const useFilterSelect = (rule: SingleFilter) => {
     });
   };
 
-  const updateFilter = (
+  /**
+   * @deprecated Use {@link setField} instead
+   */
+  const updateField = setField;
+
+  const setFilter = (
     filterSchema: StandardFnSchema,
     { tryRetainArgs = true }: UpdateFilterOptions = {},
   ) => {
     const needRetainArgs = tryRetainArgs && canRetainArgs(filterSchema);
-    updateRule({
+    setRule({
       ...rule,
       name: filterSchema.name,
       args: needRetainArgs ? rule.args : [],
     });
   };
 
+  /**
+   * @deprecated Use {@link setFilter} instead
+   */
+  const updateFilter = setFilter;
+
   return {
     filterableFields,
     selectedField,
     selectedFilter,
     fieldOptions,
     filterOptions,
 
+    setField,
+    setFilter,
+
+    /**
+     * @deprecated Use {@link setField} instead
+     */
     updateField,
+    /**
+     * @deprecated Use {@link setFilter} instead
+     */
     updateFilter,
   };
 };

packages/filter/src/views/field-select.tsx

@@ -14,13 +14,13 @@ export const FieldSelect = ({
   ...updateFieldOptions
 }: FieldSelectProps) => {
   const { Select: SelectView } = useView("components");
-  const { selectedField, fieldOptions, updateField } = useFilterSelect(rule);
+  const { selectedField, fieldOptions, setField } = useFilterSelect(rule);
 
   return (
     <SelectView
       value={selectedField}
       options={fieldOptions}
-      onChange={(field) => updateField(field, updateFieldOptions)}
+      onChange={(field) => setField(field, updateFieldOptions)}
     />
   );
 };

packages/filter/src/views/filter-data-input.tsx

@@ -10,7 +10,7 @@ export type DataInputProps = {
 export const FilterDataInput = forwardRef<HTMLInputElement, DataInputProps>(
   ({ rule }, ref) => {
     const { Input: InputView } = useView("components");
-    const { selectedField, selectedFilter, updateRule } = useFilterRule(rule);
+    const { selectedField, selectedFilter, setRule } = useFilterRule(rule);
     const requiredArguments = selectedFilter
       ? getParametersExceptFirst(selectedFilter)
       : undefined;
@@ -19,8 +19,8 @@ export const FilterDataInput = forwardRef<HTMLInputElement, DataInputProps>(
       selectedField?.fieldSchema,
     );
 
-    const updateInput = (value: unknown[]) => {
-      updateRule({
+    const setRuleArgs = (value: unknown[]) => {
+      setRule({
         ...rule,
         args: value,
       });
@@ -35,7 +35,7 @@ export const FilterDataInput = forwardRef<HTMLInputElement, DataInputProps>(
         ref={ref}
         rule={rule}
         requiredDataSchema={requiredArguments}
-        updateInput={updateInput}
+        updateInput={setRuleArgs}
       />
     );
   },

packages/filter/src/views/filter-select.tsx

@@ -14,15 +14,15 @@ export const FilterSelect = ({
   ...updateFilterOptions
 }: FilterSelectProps) => {
   const { Select: SelectView } = useView("components");
-  const { selectedField, selectedFilter, filterOptions, updateFilter } =
+  const { selectedField, selectedFilter, filterOptions, setFilter } =
     useFilterSelect(rule);
 
   return (
     <SelectView
       value={selectedFilter}
       disabled={!selectedField}
       options={filterOptions}
-      onChange={(val) => updateFilter(val, updateFilterOptions)}
+      onChange={(val) => setFilter(val, updateFilterOptions)}
     />
   );
 };