comparing query_parameter_actions

01-query_parameter_original.js

import _ from 'lodash';


const MIN_CONTEXT_SIZE = 0;
const QUERY_PARAMETER_KEYS = Object.keys(createInitialQueryParametersState());

function QueryParameterActionsProvider(config) {
  const defaultSizeStep = parseInt(config.get('context:step'), 10);

  const setPredecessorCount = (state) => (predecessorCount) => (
    state.queryParameters.predecessorCount = Math.max(
      MIN_CONTEXT_SIZE,
      predecessorCount,
    )
  );

  const increasePredecessorCount = (state) => (value = defaultSizeStep) => (
    setPredecessorCount(state)(state.queryParameters.predecessorCount + value)
  );

  const setSuccessorCount = (state) => (successorCount) => (
    state.queryParameters.successorCount = Math.max(
      MIN_CONTEXT_SIZE,
      successorCount,
    )
  );

  const increaseSuccessorCount = (state) => (value = defaultSizeStep) => (
    setSuccessorCount(state)(state.queryParameters.successorCount + value)
  );

  const setQueryParameters = (state) => (queryParameters) => (
    state.queryParameters = {
      ...state.queryParameters,
      ...(_.pick(queryParameters, QUERY_PARAMETER_KEYS)),
    }
  );

  return {
    increasePredecessorCount,
    increaseSuccessorCount,
    setPredecessorCount,
    setQueryParameters,
    setSuccessorCount,
  };
}

function createInitialQueryParametersState() {
  return {
    anchorUid: null,
    columns: [],
    indexPattern: null,
    predecessorCount: 0,
    successorCount: 0,
    sort: [],
  };
}


export {
  createInitialQueryParametersState,
  QueryParameterActionsProvider,
  QUERY_PARAMETER_KEYS,
};
  

// USAGE:
//   
// const queryParameterActions = Private(QueryParameterActionsProvider);
// 
// Constroller() {
//   this.state = createInitialState();
//   
//   this.actions = _.mapValues({
//     ...queryParameterActions,
//   }, (action) => (...args) => action(this.state)(...args));
// 
//   this.increasePredecessorCount();
// }
  
// Advantage: 
//   Removes state mutation from the directive, so the business logic can be tested with simple state objects

02-1-query_parameter_single_state.js

import _ from 'lodash';


const MIN_CONTEXT_SIZE = 0;
const QUERY_PARAMETER_KEYS = Object.keys(createInitialQueryParametersState());

function QueryParameterActionsProvider(config) {
  const defaultSizeStep = parseInt(config.get('context:step'), 10);

  return function QueryParameterActions(state) {
    const setPredecessorCount = (predecessorCount) => (
      state.queryParameters.predecessorCount = Math.max(
        MIN_CONTEXT_SIZE,
        predecessorCount,
      )
    );

    const increasePredecessorCount = (value = defaultSizeStep) => (
      setPredecessorCount(state)(state.queryParameters.predecessorCount + value)
    );

    const setSuccessorCount = (successorCount) => (
      state.queryParameters.successorCount = Math.max(
        MIN_CONTEXT_SIZE,
        successorCount,
      )
    );

    const increaseSuccessorCount = (value = defaultSizeStep) => (
      setSuccessorCount(state)(state.queryParameters.successorCount + value)
    );

    const setQueryParameters = (queryParameters) => (
      state.queryParameters = {
        ...state.queryParameters,
        ...(_.pick(queryParameters, QUERY_PARAMETER_KEYS)),
      }
    );
    
    return {
      increasePredecessorCount,
      increaseSuccessorCount,
      setPredecessorCount,
      setQueryParameters,
      setSuccessorCount,
    };
  }

}

function createInitialQueryParametersState() {
  return {
    anchorUid: null,
    columns: [],
    indexPattern: null,
    predecessorCount: 0,
    successorCount: 0,
    sort: [],
  };
}


export {
  createInitialQueryParametersState,
  QueryParameterActionsProvider,
  QUERY_PARAMETER_KEYS,
};

// USAGE:
// 
// Constroller() {
//   this.state = createInitialState();
// 
//   const queryParameterActions = Private(QueryParameterActionsProvider)(this.state);
//   
//   queryParameterActions.increasePredecessorCount();
// }
  
// Advantages: 
//   less obfuscation with the removal of mapValues
//   easier to see where the specific actions come from
//   QueryParameterActions returns less functions, is easier to understand at first glance

02-2-query_parameter_state_argument.js

import _ from 'lodash';


const MIN_CONTEXT_SIZE = 0;
const QUERY_PARAMETER_KEYS = Object.keys(createInitialQueryParametersState());

function QueryParameterActionsProvider(config) {
  const defaultSizeStep = parseInt(config.get('context:step'), 10);

  return function QueryParameterActions() {
    const setPredecessorCount = (state, predecessorCount) => (
      state.queryParameters.predecessorCount = Math.max(
        MIN_CONTEXT_SIZE,
        predecessorCount,
      )
    );

    const increasePredecessorCount = (state, value = defaultSizeStep) => (
      setPredecessorCount(state)(state.queryParameters.predecessorCount + value)
    );

    const setSuccessorCount = (state, successorCount) => (
      state.queryParameters.successorCount = Math.max(
        MIN_CONTEXT_SIZE,
        successorCount,
      )
    );

    const increaseSuccessorCount = (state, value = defaultSizeStep) => (
      setSuccessorCount(state)(state.queryParameters.successorCount + value)
    );

    const setQueryParameters = (state, queryParameters) => (
      state.queryParameters = {
        ...state.queryParameters,
        ...(_.pick(queryParameters, QUERY_PARAMETER_KEYS)),
      }
    );
    
    return {
      increasePredecessorCount,
      increaseSuccessorCount,
      setPredecessorCount,
      setQueryParameters,
      setSuccessorCount,
    };
  }

}

function createInitialQueryParametersState() {
  return {
    anchorUid: null,
    columns: [],
    indexPattern: null,
    predecessorCount: 0,
    successorCount: 0,
    sort: [],
  };
}


export {
  createInitialQueryParametersState,
  QueryParameterActionsProvider,
  QUERY_PARAMETER_KEYS,
};

// USAGE:
// 
// Constroller() {
//   this.state = createInitialState();
// 
//   const queryParameterActions = Private(QueryParameterActionsProvider);
//   
//   queryParameterActions.increasePredecessorCount(this.state);
// }
  
// Advantage: 
//   less obfuscation with the removal of mapValues
//   easier to see where the specific actions come from
//   QueryParameterActions is still easy to understand but the state doesn't always have to be the same

03-query_parameter_single_state_object.js

import _ from 'lodash';


const MIN_CONTEXT_SIZE = 0;
const QUERY_PARAMETER_KEYS = Object.keys(createInitialQueryParametersState());

function QueryParameterActionsProvider(config) {
  const defaultSizeStep = parseInt(config.get('context:step'), 10);

  return function QueryParameterActions(state) {
    return {
      setPredecessorCount(predecessorCount) {
        state.queryParameters.predecessorCount = Math.max(
          MIN_CONTEXT_SIZE,
          predecessorCount,
        );
      }

      increasePredecessorCount(value = defaultSizeStep) {
        this.setPredecessorCount(state.queryParameters.predecessorCount + value)
      }

      setSuccessorCount(successorCount) {
        state.queryParameters.successorCount = Math.max(
          MIN_CONTEXT_SIZE,
          successorCount,
        );
      }

      increaseSuccessorCount(value = defaultSizeStep) {
        this.setSuccessorCount(state.queryParameters.successorCount + value)
      }

      setQueryParameters(queryParameters) {
        state.queryParameters = {
          ...state.queryParameters,
          ...(_.pick(queryParameters, QUERY_PARAMETER_KEYS)),
        }
      }
    };
  };
}

function createInitialQueryParametersState() {
  return {
    anchorUid: null,
    columns: [],
    indexPattern: null,
    predecessorCount: 0,
    successorCount: 0,
    sort: [],
  };
}


export {
  createInitialQueryParametersState,
  QueryParameterActionsProvider,
  QUERY_PARAMETER_KEYS,
};

// USAGE:
// 
// 
// Constroller() {
//   this.state = createInitialState();
// 
//   const queryParameterActions = Private(QueryParameterActionsProvider)(this.state);
//   
//   queryParameterActions.increasePredecessorCount();
// }
  
// Advantages: 
//   easier to see which actions are available by looking at the returned object in QueryParameterActions

04-query_parameter_class.js

import _ from 'lodash';


const MIN_CONTEXT_SIZE = 0;
const QUERY_PARAMETER_KEYS = Object.keys(createInitialQueryParametersState());

function QueryParameterActionsProvider(config) {
  const defaultSizeStep = parseInt(config.get('context:step'), 10);

  class QueryParameterActions {
    constructor(state) {
      this.state = state;
    }

    setPredecessorCount(predecessorCount) {
      this.state.queryParameters.predecessorCount = Math.max(
        MIN_CONTEXT_SIZE,
        predecessorCount,
      );
    }

    increasePredecessorCount(value = defaultSizeStep) {
      this.setPredecessorCount(this.state.queryParameters.predecessorCount + value)
    }

    setSuccessorCount(successorCount) {
      this.state.queryParameters.successorCount = Math.max(
        MIN_CONTEXT_SIZE,
        successorCount,
      );
    }

    increaseSuccessorCount(value = defaultSizeStep) {
      this.setSuccessorCount(this.state.queryParameters.successorCount + value)
    }

    setQueryParameters(queryParameters) {
      this.state.queryParameters = {
        ...this.state.queryParameters,
        ...(_.pick(queryParameters, QUERY_PARAMETER_KEYS)),
      }
    }
  }

  return function createQueryParameterActions(state) { 
    return new queryParameterActions(state); 
  }
}

function createInitialQueryParametersState() {
  return {
    anchorUid: null,
    columns: [],
    indexPattern: null,
    predecessorCount: 0,
    successorCount: 0,
    sort: [],
  };
}


export {
  createInitialQueryParametersState,
  QueryParameterActionsProvider,
  QUERY_PARAMETER_KEYS,
};

// USAGE:
// 
// 
// Constroller() {
//   this.state = createInitialState();
// 
//   const queryParameterActions = Private(QueryParameterActionsProvider)(this.state);
//   
//   queryParameterActions.increasePredecessorCount();
// }
  
// Advantage: ¯\_(ツ)_/¯ it uses class, those can be fun... this doesn't actually look better than returning an object

I'm partial to 03-query_parameter_single_state_object.js myself. I think it's easier to understand, both in the file itself and in the spot it gets used.

Also, instead of exporting 3 things in this one file, I would create 3 different files, and if I needed to, export all 3 from a single top-level index.js file.