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

05-uber-controller.js

import _ from 'lodash';

import uiModules from 'ui/modules';
import contextAppTemplate from './app.html';
import './components/loading_button';
import './components/size_picker/size_picker';
import { fetchAnchor } from './api/anchor';
import { fetchPredecessors, fetchSuccessors } from './api/context';

const QUERY_PARAMETER_KEYS = Object.keys(createInitialState().queryParameters);
const MIN_CONTEXT_SIZE = 0;

const module = uiModules.get('apps/context', [
  'kibana',
  'ngRoute',
]);

module.directive('contextApp', function ContextApp() {
  return {
    bindToController: true,
    controller: ContextAppController,
    controllerAs: 'contextApp',
    restrict: 'E',
    scope: {
      anchorUid: '=',
      columns: '=',
      indexPattern: '=',
      predecessorCount: '=',
      successorCount: '=',
      sort: '=',
    },
    template: contextAppTemplate,
  };
});

function ContextAppController($scope, config, es, $q) {
  const defaultSizeStep = parseInt(config.get('context:step'), 10);

  this.state = createInitialState();

  this.fetchAnchorRow = () => {
    const { queryParameters: { indexPattern, anchorUid, sort } } = this.state;

    this.state.loadingStatus.anchor = 'loading';

    return fetchAnchor(es, indexPattern, anchorUid, _.zipObject([sort]))
    .then((anchorDocument) => {
      this.state.loadingStatus.anchor = 'loaded';
      this.state.rows.anchor = anchorDocument;
      return anchorDocument;
    });
  };

  this.fetchPredecessorRows = () => {
    const {
      queryParameters: { indexPattern, predecessorCount, sort },
      rows: { anchor },
    } = this.state;

    this.state.loadingStatus.predecessors = 'loading';

    return fetchPredecessors(es, indexPattern, anchor, _.zipObject([sort]), predecessorCount)
    .then((predecessorDocuments) => {
      this.state.loadingStatus.predecessors = 'loaded';
      this.state.rows.predecessors = predecessorDocuments;
      return predecessorDocuments;
    });
  };

  this.fetchSuccessorRows = () => {
    const {
      queryParameters: { indexPattern, sort, successorCount },
      rows: { anchor },
    } = this.state;

    this.state.loadingStatus.successors = 'loading';

    return fetchSuccessors(es, indexPattern, anchor, _.zipObject([sort]), successorCount)
    .then((successorDocuments) => {
      this.state.loadingStatus.successors = 'loaded';
      this.state.rows.successors = successorDocuments;
      return successorDocuments;
    });
  };

  this.fetchAllRows = () => (
    this.fetchAnchorRow()
    .then(() => $q.all([
      this.fetchPredecessorRows(),
      this.fetchSuccessorRows(),
    ]))
  );

  this.fetchAllRowsWithNewQueryParameters = (queryParameters) => {
    this.setQueryParameters(queryParameters);
    return this.fetchAllRows();
  };

  this.fetchGivenPredecessorRows = (count) => {
    this.setPredecessorCount(count);
    return this.fetchPredecessorRows();
  };

  this.fetchGivenSuccessorRows = (count) => {
    this.setSuccessorCount(count);
    return this.fetchSuccessorRows();
  };

  this.fetchMorePredecessorRows = () => {
    this.increasePredecessorCount();
    return this.fetchPredecessorRows();
  };

  this.fetchMoreSuccessorRows = () => {
    this.increaseSuccessorCount();
    return this.fetchSuccessorRows();
  };

  this.setAllRows = (predecessorRows, anchorRow, successorRows) => (
    this.state.rows.all = [
      ...(predecessorRows || []),
      ...(anchorRow ? [anchorRow] : []),
      ...(successorRows || []),
    ]
  );

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

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

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

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

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

  $scope.$watchGroup([
    () => this.state.rows.predecessors,
    () => this.state.rows.anchor,
    () => this.state.rows.successors,
  ], _.spread(this.actions.setAllRows));

  /**
   * Sync query parameters to arguments
   */
  $scope.$watchCollection(
    () => _.pick(this, QUERY_PARAMETER_KEYS),
    (newValues) => {
      // break the watch cycle
      if (!_.isEqual(newValues, this.state.queryParameters)) {
        this.actions.fetchAllRowsWithNewQueryParameters(newValues);
      }
    },
  );

  $scope.$watchCollection(
    () => this.state.queryParameters,
    (newValues) => {
      _.assign(this, newValues);
    },
  );
}

function createInitialState() {
  return {
    queryParameters: {
      anchorUid: null,
      columns: [],
      indexPattern: null,
      predecessorCount: 0,
      successorCount: 0,
      sort: [],
    },
    rows: {
      all: [],
      anchor: null,
      predecessors: [],
      successors: [],
    },
    loadingStatus: {
      anchor: 'uninitialized',
      predecessors: 'uninitialized',
      successors: 'uninitialized',
    },
  };
}

// Advantage: No indirection, you can see everything that makes this componenet tick in a single view.