@equinor/mad-utilities

[HaakonSvane]

This is a discussion space for suggestions to a possible mad-utilities package, containing utility hooks and functions used throughout our apps

[tormodAase]

createDispatchActionHook

Instead of creating a hook for every action like so:

export const useDeleteWorklist = () => {
  const dispatch = useDispatch();
  return (payload: TypeOfDeleteWorklistPayload) => dispatch(actions.deleteWorklist(payload))
}

export const useUpdateWorklist = () => {
  const dispatch = useDispatch();
  return (payload: TypeOfUpdateWorklistPayload) => dispatch(actions.updateWorklist(payload))
}

We could have a utility function to create the hook for us:

export const useDeleteWorklist = createDispatchActionHook(actions.deleteWorklist)
export const useUpdateWorklist = createDispatchActionHook(actions.updateWorklist)

I created a prototype that looks something like this:

import { ActionCreatorWithPayload } from '@reduxjs/toolkit';
import { useDispatch} from 'react-redux';

const createDispatchActionHook = <
  ActionCreator extends ActionCreatorWithPayload<any>
>(
  actionCreator: ActionCreator
) => {
  type Payload = Parameters<ActionCreator>[0];
  return () => {
    const dispatch = useDispatch();
    return (payload: Payload) => {
      dispatch(actionCreator(payload));
    };
  };
};

We could also create something similar for selectors.

[HaakonSvane]

useFilter

Coming from a common scenario I have seen in some of our apps, we often need to filter data in a more advanced way than what the Array.prototype.filter provides.

I have created a useFilter hook that works very well: https://stackblitz.com/edit/react-ts-ee4cm9?file=MyCars.tsx

It basically allows you to set "categories" on your filters. For example, say you have a list of vehicles you want to filter. A category could be "color" and predicates within this category could be is black and is white. For predicates within the same category such as this, we want to filter these on an OR condition. That is, selecting color: black and color: white should return all vehicles that are either black or white.

When setting filter predicates on different categories however, the data is filtered on an AND condition. For example, selecting color: white and year: 2001 should return all vehicles that are white AND produced in the year 2001.

The categories can even be typed and typechecked. For most scenarios, we want the possible categories to be the fields in the object we are filtering. The hook accepts an optional type that enforces strict types on the category values.