Javascript Function: Reduce redundancy of helpers

Question

I have these few helper function that are used to check if the string in the given array is present and if the certain steps are present and then only have the other function fire. The reason I currently have them separated is because arrTours need to be associated with only those arrSteps.

// Handles for manditory action needed by user
const arrTourOver = ['OverviewTour'];
const arrStepOver = [6, 7];
export const handleJoyrideOverview = (
  dispatch: any,
  tour: any,
  index: number
) => {
  arrTourOver.includes(tour?.openTour) &&
    arrStepOver.includes(tour?.stepIndex) &&
    JoyRideDelayContinue(dispatch, tour, tour?.openTour, index);
};

// Handles for manditory action needed by user
const arrTourResize = ['ResizingWidgets'];
const arrStepResize = [0, 1];
export const handleJoyrideResize = (
  dispatch: any,
  tour: any,
  index: number
) => {
  arrTourResize.includes(tour?.openTour) &&
    arrStepResize.includes(tour?.stepIndex) &&
    JoyRideDelayContinue(dispatch, tour, tour?.openTour, index);
};

// Handles for manditory action needed by user
const arrTourDock = ['DockbarFunctions'];
const arrStepDock = [3, 4];
export const handleJoyrideDock = (dispatch: any, tour: any, index: number) => {
  arrTourDock.includes(tour?.openTour) &&
    arrStepDock.includes(tour?.stepIndex) &&
    JoyRideDelayContinue(dispatch, tour, tour?.openTour, index);
};

These are the 3 I currently have but I will be adding a few more I just want to figure out reducing the redundancy before I keep going

this part isn't really needed but I'll put JoyRideDelayContinue function below just in case

export const JoyRideDelayContinue = (
  dispatch: any,
  tour: any,
  tourType: string,
  stepIndex: number
) => {
  setTimeout(() => {
    if (tour && tour.openTour === tourType) {
      dispatch({ type: 'SET_OPEN_TOUR', payload: '' });
      dispatch({
        type: 'PROGRESS_NEXT_OR_PREV',
        payload: { type: tourType, stepIndex: stepIndex }
      });
      setTimeout(
        () => dispatch({ type: 'SET_OPEN_TOUR', payload: tourType }),
        500
      );
    }
  }, 1000);
};

Are arrTourOver, arrStepOver, arrTourResize, etc supposed to by dynamic? Or are those always the values for them? — VLAZ
– VLAZ, Commented Jul 8, 2021 at 20:32
1. If arrTour... is always a list of strings and arrStep... is always a list integers, you can combine your arrTour... into a dictionary/array and likewise for arrStep.... 2. Is there a reason why your arr... are arrays? A set might be better if you only need to check containment. 3. You could very well have a wrapper that accepts the necessary parameters along with an options one, which will checks the necessary arrTour... and arrStep.... 4. Consider posting in codereview.stackexchange.com since you're looking to improve your code, not necessarily the algorithm. — wLui155
– wLui155, Commented Jul 8, 2021 at 20:47

Bergi · Accepted Answer · 2021-07-08 21:03:35Z

1

Your functions basically only differ in two places - two variables even. So just write one function and introduce two extra function parameters for them:

const handleJoyride = (
  arrTour: string[],
  arrStep: number[],
  dispatch: DispatchFunction,
  tour: Tour,
  index: number
) => {
  if (arrTour.includes(tour?.openTour) && arrStep.includes(tour?.stepIndex)) {
    JoyRideDelayContinue(dispatch, tour, tour?.openTour, index);
  }
};

This you can call with different parameters. If necessary, provide three wrapper functions that pass the respective constants for the two parameters and forward their arguments for the rest.

Or even make use of currying:

const makeHandleJoyride = (
  arrTour: string[],
  arrStep: number[]
) => (
  dispatch: DispatchFunction,
  tour: Tour,
  index: number
) => {
  if (arrTour.includes(tour?.openTour) && arrStep.includes(tour?.stepIndex)) {
    JoyRideDelayContinue(dispatch, tour, tour?.openTour, index);
  }
};

/** Handles for manditory action needed by user */
export const handleJoyrideOverview = makeHandleJoyride(['OverviewTour'], [6, 7]);

/** Handles for manditory action needed by user */
export const handleJoyrideResize = makeHandleJoyride(['ResizingWidgets'], [0, 1]);

/** Handles for manditory action needed by user */
export const handleJoyrideDock = makeHandleJoyride(['DockbarFunctions'], [3, 4]);

answered Jul 8, 2021 at 21:03

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mateen Kazia Over a year ago

The currying version was exactly what I was looking for thank you so much

Alex Wayne · Accepted Answer · 2021-07-08 21:14:52Z

I would probably make a handler creator function which returns the functions that will be used.

If the only parts of this logic that change are the array of string literals and the step numbers, then we those become the argument to this function creator.

Something like:

function createHandleJoyrideAction(actions: string[], steps: number[]) {
  return function handleJoyrideAction(dispatch: any, tour: any, index: number) {
    return actions.includes(tour?.openTour) &&
      steps.includes(tour?.stepIndex) &&
      JoyRideDelayContinue(dispatch, tour, tour?.openTour, index)
  }
}

Now you can simply do:

export const handleJoyrideResize = 
  createHandleJoyrideAction(['ResizingWidgets'], [0, 1])

export const handleJoyrideDock = 
  createHandleJoyrideAction(['DockbarFunctions'], [3, 4])

export const handleJoyrideOverview = 
  createHandleJoyrideAction(['OverviewTour'], [6, 7])

Playground

Also, it's worth mentioning, that's a lot of any. I would strongly recommending build out your types a bit better.

Collectives™ on Stack Overflow

Javascript Function: Reduce redundancy of helpers

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related