How to use the immutability-helper.extend function in immutability-helper

import React, { Component } from 'react';
import update from 'immutability-helper';
import { Observable } from 'rxjs';
import 'tsiclient';

import { joinClasses } from 'utilities';

import './telemetryChart.css';
// TODO: find a way to import without the relative path
import '../../../../../../node_modules/tsiclient/tsiclient.css';

const maxDatums = 100; // Max telemetry messages for the telemetry graph

// Extend the immutability helper to include object autovivification
update.extend('$auto', (val, obj) => update(obj || {}, val));

/**
 *  A helper function containing the logic to convert a getTelemetry response
 *  object into the chart object structure.
 *
 * @param getCurrentTelemetry A function that returns an object of formatted telemetry messages
 * @param items An array of telemetry messages from the getTelemetry response object
 */
export const transformTelemetryResponse = getCurrentTelemetry => items =>
  Observable.from(items)
    .flatMap(({ data, deviceId, time }) =>
      Observable.from(Object.keys(data))
        .filter(metric => metric.indexOf('Unit') < 0)
        .map(metric => ({ metric, deviceId, time, data: data[metric] }))
    )
    .reduce(

/**
 * Internal dependencies
 */
import {
	hasRenewalItem,
	hasFreeTrial,
	hasProduct,
	hasDomainRegistration,
	hasPlan,
} from './cart-items';
import { isCredits, isDomainRedemption, whitelistAttributes } from 'lib/products-values';
import { detectWebPaymentMethod } from 'lib/web-payment';

// Auto-vivification from https://github.com/kolodny/immutability-helper#autovivification
extendImmutabilityHelper( '$auto', function( value, object ) {
	return object ? update( object, value ) : update( {}, value );
} );

const PAYMENT_METHODS = {
	alipay: 'WPCOM_Billing_Stripe_Source_Alipay',
	bancontact: 'WPCOM_Billing_Stripe_Source_Bancontact',
	'credit-card': 'WPCOM_Billing_MoneyPress_Paygate',
	ebanx: 'WPCOM_Billing_Ebanx',
	eps: 'WPCOM_Billing_Stripe_Source_Eps',
	giropay: 'WPCOM_Billing_Stripe_Source_Giropay',
	ideal: 'WPCOM_Billing_Stripe_Source_Ideal',
	netbanking: 'WPCOM_Billing_Dlocal_Redirect_India_Netbanking',
	paypal: 'WPCOM_Billing_PayPal_Express',
	p24: 'WPCOM_Billing_Stripe_Source_P24',
	'brazil-tef': 'WPCOM_Billing_Ebanx_Redirect_Brazil_Tef',
	wechat: 'WPCOM_Billing_Stripe_Source_Wechat',

import update from 'immutability-helper';

update.extend('$delete', (value, original) => {
	const result = update(original, { [value]: { $set: undefined } });
	delete result[value];
	return result;
});

export default update;

FormSection,
  Indicator,
  PropertyGrid as Grid,
  PropertyGridBody as GridBody,
  PropertyGridHeader as GridHeader,
  PropertyRow as Row,
  PropertyCell as Cell,
  SectionDesc,
  SectionHeader,
  SummaryBody,
  SummaryCount,
  SummarySection,
  Svg
} from 'components/shared';

update.extend('$autoArray', (val, obj) => update(obj || [], val));

const isNumeric = value => typeof value === 'number';
const isAlphaNumericRegex = /^[a-zA-Z0-9]*$/;
const nonAlphaNumeric = x => !x.match(isAlphaNumericRegex);

export const propertyJobConstants = {
  firmware: 'Firmware',
  multipleValues: 'Multiple',
  stringType: 'Text',
  numberType: 'Number'
};

const initialState = {
  isPending: false,
  error: undefined,
  successCount: 0,

export default function selectedAttributes(
  state: SelectedAttributesState = initialState,
  action: AttributeAction
) {
  update.extend("$auto", function(value, object) {
    return object ? update(object, value) : update({}, value);
  });
  switch (action.type) {
    case "ATTRIBUTE_SELECT":
      return update(state, {
        [action.chart]: { $auto: { [action.attribute]: { $set: true } } }
      });
    case "ATTRIBUTE_DESELECT":
      return update(state, {
        [action.chart]: { $auto: { [action.attribute]: { $set: false } } }
      });
    case "ATTRIBUTE_REMOVE_ALL":
      return initialState;
    default:
      return state;
  }

import update from 'immutability-helper';
import {
  arrayDelete,
  arrayPushUnique,
  objectDelete,
} from '@uqee/immutability-helper-x';

update.extend('$pop', arrayDelete);
update.extend('$pushuniq', arrayPushUnique);
update.extend('$del', objectDelete);

const newDeploymentListItem: IEnvironmentItem = {
    env: params.env,
    items: params.result,
    getStatus: {
      error: null,
      success: true,
    },
  };

  newState.push(newDeploymentListItem);

  return newState;
});

update.extend('$updateEnvFailed', (params: any, original: any) => {
  const newState = original.filter((elem: any) => elem.env !== params.env );

  const newDeploymentListItem: IEnvironmentItem = {
    env: params.env,
    items: [],
    getStatus: {
      error: params.error.message,
      success: false,
    },
  };

  newState.push(newDeploymentListItem);

  return newState;
});

return original
}

update.extend('$removeValue', removeValue)
update.extend('$without', removeValue)

const removeKey = (keysToRemove, original) => {
  if (!_.isArray(original) && !_.isObject(original)) return original
  if (!_.isArray(keysToRemove)) keysToRemove = [keysToRemove]
  return _.reduce(original, (result, value, key) => {
    if (!keysToRemove.includes(key)) result[key] = value
    return result
  }, _.isArray(original) ? [] : {})
}

update.extend('$removeKey', removeKey)
update.extend('$delete', removeKey)

update.extend('$map', (fn, original) => {
  if (_.isArray(original)) return _.map(original, fn)
  if (_.isObject(original)) return _.mapValues(original, fn)
  return original
})

export default update

isSubmitting: boolean;
  isSaving: boolean;
  hasSubmitted: boolean;
}

const initialState: IFormDataState = {
  formData: {},
  error: null,
  responseInstance: null,
  unsavedChanges: false,
  isSubmitting: false,
  isSaving: false,
  hasSubmitted: false,
};

Immutable.extend('$setField', (params: any, original: IFormData) => {
  original[params.field] = params.data;
  return original;
});

const FormDataReducer: Reducer = (
  state: IFormDataState = initialState,
  action?: Action,
): IFormDataState => {
  if (!action) {
    return state;
  }

  switch (action.type) {
    case actionTypes.FETCH_FORM_DATA_FULFILLED: {
      const { formData } = action as IFetchFormDataFulfilled;
      return Immutable(state, {

import update from 'immutability-helper';
import {
  arrayDelete,
  arrayPushUnique,
  objectDelete,
} from '@uqee/immutability-helper-x';

update.extend('$pop', arrayDelete);
update.extend('$pushuniq', arrayPushUnique);
update.extend('$del', objectDelete);