How to use the recompose.getContext function in recompose

import React from 'react';
import PropTypes from 'prop-types';
import { withContext, getContext } from 'recompose';
import changeCase from 'change-case';
import ComboBox from '../ComboBox/ComboBox';
import Input from './Input';

export const typesServiceContextType = {
  types: PropTypes.object.isRequired,
  safeConvertValue: PropTypes.func.isRequired,
};

export const withTypesService = ({ safeConvertValue, types }) =>
  withContext(typesServiceContextType, () => ({ safeConvertValue, types }));

const getTypesService = getContext(typesServiceContextType);

const valueToItem = value => (
  value === undefined || value === '' ?
    undefined :
    { label: changeCase.pascalCase(value), value }
);

const TypedInput = ({ safeConvertValue, types, valueType, value, onChange, ...props }) => {
  const typeDefinition = types[valueType];
  const allowedValues = typeDefinition && typeDefinition.allowedValues;
  const onChangeConvert = newValue => onChange && onChange(safeConvertValue(newValue, valueType));
  if (allowedValues && allowedValues.length > 0) {
    return (

export default function formioConnect(...args) {
  return compose(
    getContext({formio: PropTypes.object}),
    getContext({router: PropTypes.object}),
    connect(...args)
  );
}

import React from 'react';
import PropTypes from 'prop-types';
import { compose, mapProps, getContext, withHandlers, withProps } from 'recompose';
import { WithContext as ReactTags } from 'react-tag-input';
import * as R from 'ramda';
import classes from 'classnames';

export const typesServiceContextType = {
  types: PropTypes.object.isRequired,
  safeConvertValue: PropTypes.func.isRequired,
  isAllowedValue: PropTypes.func.isRequired,
};

export const getTypesService = getContext(typesServiceContextType);

const convertToArray = (value) => (value && (Array.isArray(value) ? value : [value])) || [];

const toTags = (arr) => arr.map((x) => x.toString()).map((x) => ({ id: x, text: x }));

const enhance = compose(
  getTypesService,
  withProps(({ value }) => ({ value: convertToArray(value) })),
  withHandlers({
    handleAddition: ({ onChange, value, safeConvertValue, isAllowedValue, valueType }) => (
      newValue,
    ) => {
      const convertedVal = safeConvertValue(newValue.text, valueType);
      if (
        convertedVal !== undefined &&
        !value.includes(convertedVal) &&

PropTypes.func,
    PropTypes.element,
    PropTypes.node,
  ]),
  rootPageId: PropTypes.string,
};

const mapStateToProps = createStructuredSelector({
  rootPageId: rootPageSelector,
});

export default compose(
  defaultProps({
    defaultTemplate: SimpleTemplate,
  }),
  getContext({
    defaultTemplate: PropTypes.oneOfType([
      PropTypes.func,
      PropTypes.element,
      PropTypes.node,
    ]),
  }),
  connect(mapStateToProps)
)(RootPage);

}

  const query = Object.keys(newOptions)
    .map(key => `${key}_${newOptions[key]}`)
    .join(',');

  if (newUrl.indexOf('/upload/') !== -1) {
    return newUrl.replace('/upload/', `/upload/${crop}${query}/`);
  } else if (newUrl.indexOf('/fetch/') !== -1) {
    return newUrl.replace('/fetch/', `/fetch/${crop}${query}/`);
  }
};


const enhance = compose(
  getContext({
    amp: PropTypes.bool,
  }),
  withState('cWidth', 'setCWidth', undefined),
  withState('isLoaded', 'setIsLoaded', false),
  withState('responsiveSize', 'setResponsiveSize', {}),
  withPropsOnChange(['value', 'options', 'responsiveSize'], ({ value, options, responsiveSize }) => ({
    url: cloudinaryUrl(value, options, responsiveSize),
  })),
);

@enhance
class Image extends Component {
  componentDidMount() {
    this.node = ReactDOM.findDOMNode(this);
    if (this.node) {
      this.onResize(this.node.getBoundingClientRect());

export default function formioConnect(...args) {
  return compose(
    getContext({formio: PropTypes.object}),
    getContext({router: PropTypes.object}),
    connect(...args)
  );
}

height,
    workpadCss,
    workpadId,
    isFullscreen: getFullscreen(state),
  };
};

const mapDispatchToProps = {
  undoHistory,
  redoHistory,
  fetchAllRenderables,
};

export const Workpad = compose(
  pure,
  getContext({
    router: PropTypes.object,
  }),
  withState('grid', 'setGrid', false),
  connect(
    mapStateToProps,
    mapDispatchToProps
  ),
  withState('transition', 'setTransition', null),
  withState('prevSelectedPageNumber', 'setPrevSelectedPageNumber', 0),
  withProps(({ selectedPageNumber, prevSelectedPageNumber, transition }) => {
    function getAnimation(pageNumber) {
      if (!transition || !transition.name) {
        return null;
      }
      if (![selectedPageNumber, prevSelectedPageNumber].includes(pageNumber)) {
        return null;

...getSlices(child, index + i),
      ];
      index = Math.max(0, slices.length - 1);
    });
    return { slices };
  }),
  withContext(propTypes, ({
    slices,
    radius = '150px',
    centerRadius = '50px',
  }: Context) => {
    const centralAngle = 360 / slices.length || 360;
    const polar = centralAngle % 180 === 0;
    return { radius, centerRadius, centralAngle, polar };
  }),
  getContext(propTypes),
);

const PieMenu = ({
  className,
  radius,
  centerRadius,
  centralAngle,
  startOffsetAngle = 0,
  polar,
  Center = PieCenter,
  slices,
  attrs = {},
}: Props) => {
  const deltaAngle = 90 - centralAngle;
  const startAngle = polar ? 45 : startOffsetAngle + deltaAngle + (centralAngle / 2);
  return (

user,
    };
  }

  private onUser = async (user: User) => {
    this.setState({
      user,
    });
  };
}

export const withOoth = getContext({
  oothClient: PropTypes.object.isRequired,
});

export const withUser = getContext({
  user: PropTypes.object,
});