How to use the recompose.withState function in recompose

fontStyle: 'italic',
    color: '#525252',
  },
};

// Highlighting is frustratingly slow with > 100 items
const ConditionalHighlight = ({ condition, search, children }) =>
  condition ? (
    {children}
  ) : (
    <span>{children}</span>
  );

export default compose(
  withState('facetMapping', 'setFacetMapping', {}),
  withState('query', 'setQuery', ''),
  withState('focusedFacet', 'setFocusedFacet', null),
  withState('isLoadingFacetMapping', 'setIsLoadingFacetMapping', false),
  withState(
    'isLoadingAdditionalFacetData',
    'setIsLoadingAdditionalFacetData',
    false,
  ),
  withPropsOnChange(
    ['isLoadingFacetMapping', 'isLoadingAdditionalFacetData'],
    ({ isLoadingFacetMapping, isLoadingAdditionalFacetData }) =&gt; ({
      isLoading: _.some([isLoadingFacetMapping, isLoadingAdditionalFacetData]),
    }),
  ),
  withState('shouldHideUselessFacets', 'setShouldHideUselessFacets', false),
  withProps(
    ({

const enhance = compose(
  getAuth,
  connect(
    ({ location, auth }) => ({
      pathname: location.pathname,
      query: location.query,
      user: auth.user,
      isAdmin: auth.user && auth.user.isAdmin,
    }),
    dispatch => ({
      setQuery: createReplaceQuery(dispatch),
      push: createPushPathname(dispatch),
    }),
  ),
  withState('collapsed', 'setCollapsed', true),
  withState('searchOpen', 'setSearchOpen', false),
  withState('searchText', 'setSearchText', ''),
  withHandlers({
    expand: ({ setCollapsed }) => () => setCollapsed(false),
    collapse: ({ setCollapsed }) => () => setCollapsed(true),
    handleClick: ({ setQuery, logout, setCollapsed }) => e => {
      if (e.key === 'logout') {
        logout();
      }
      if (e.key && e.key[0] === '@') {
        const v = e.key.split(',').reduce((state, next) => {
          const key = next.indexOf('=') !== -1 ? next.split('=')[0] : next;
          const value = next.indexOf('=') !== -1 ? next.split('=')[1] : null;
          return {
            ...state,
            [key]: value,

}>,
        },
      },
    },
  },
};

const Container = styled(Row, {
  backgroundColor: 'white',
  border: '1px solid #ddd',
  borderRadius: '4px',
  height: '300px',
});

export default compose(
  withState('yAxisUnit', 'setYAxisUnit', 'percent'),
  withRouter,
  withProps(props => {
    const { aggregations } = JSON.parse(
      props.analysisViewer.analysis.top_cases_count_by_genes.data,
    );

    const caseAggs = aggregations.projects.buckets.filter(b => props.projectIds.includes(b.key));

    const numUniqueCases = props.viewer.explore.cases.hits.total;

    const topGenesWithCasesPerProject = caseAggs.reduce(
      (acc, agg) => agg.genes.my_genes.gene_id.buckets.reduce(
        (genes, gene) => ({
          ...genes,
          [gene.key]: {
            ...genes[gene.key],

}
    },
  };
};

export const FullscreenControl = compose(
  getContext({
    router: PropTypes.object,
  }),
  connect(
    mapStateToProps,
    mapDispatchToProps,
    mergeProps
  ),
  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;
      }
      const { enter, exit } = transitionsRegistry.get(transition.name);
      const laterPageNumber = Math.max(selectedPageNumber, prevSelectedPageNumber);
      const name = pageNumber === laterPageNumber ? enter : exit;
      const direction = prevSelectedPageNumber > selectedPageNumber ? 'reverse' : 'normal';
      return { name, direction };
    }

    return { getAnimation };

onSetOpenTeamRole,
    publicitySettingsChanged,
    savePublicity,
    showAddYourselfBanner,
    youAdmin,
    youCanAddPeople,
    youImplicitAdmin,
    youCanCreateSubteam,
    youCanShowcase,
  }
}

export default compose(
  withState('showMenu', 'setShowMenu', false),
  withState('newPublicityAnyMember', 'setPublicityAnyMember', props => props.publicityAnyMember),
  withState('newPublicityMember', 'setPublicityMember', props => props.publicityMember),
  withState('newPublicityTeam', 'setPublicityTeam', props => props.publicityTeam),
  withState('newOpenTeam', 'setOpenTeam', props => props.openTeam),
  withState('newOpenTeamRole', 'setOpenTeamRole', props => props.openTeamRole),
  withState('publicitySettingsChanged', 'setPublicitySettingsChanged', false),
  connect(mapStateToProps, mapDispatchToProps, mergeProps),
  withPropsOnChange(
    ['publicityAnyMember', 'publicityMember', 'publicityTeam', 'openTeam', 'openTeamRole'],
    props => {
      props.setPublicityAnyMember(props.publicityAnyMember)
      props.setPublicityMember(props.publicityMember)
      props.setPublicityTeam(props.publicityTeam)
      props.setOpenTeam(props.openTeam)
      props.setOpenTeamRole(props.openTeamRole)
    }
  ),
  withHandlers({

import { compose, withState, withHandlers } from 'recompose';
import cx from 'classnames';
import { SketchPicker } from 'react-color';

import styles from './styles.css';

export default compose(
  withState('active', 'setActive', props => (props.transparent && props.color === 'transparent') ? false : true),
  withState('color', 'setColor', props => props.color),
  withHandlers({
    onClick: props => e => {
      e.stopPropagation();
      props.setActive(!props.active);
      props.transparent && props.active && props.onColorChange('transparent');
    },
    onColorChange: props => color => {
      props.setColor(color);
      props.onColorChange(color);
    }
  })
)(({
  active,
  onClick,
  color,

JSON.parse(localStorage.getItem('oncogridActiveTheme') || 'null') ||
      colorMap,
  ),
  withHandlers({
    resetColors: ({ setGridColors }) => () => {
      setGridColors(colorMap);
      localStorage.setItem('oncogridActiveTheme', JSON.stringify(colorMap));
    },
  }),
  withState('oncoGrid', 'setOncoGrid', {}),
  withState('oncoGridData', 'setOncoGridData', null),
  withState('crosshairMode', 'setCrosshairMode', false),
  withState('showGridLines', 'setShowGridLines', false),
  withState('heatMapMode', 'setHeatMapMode', false),
  withState('isLoading', 'setIsLoading', true),
  withState('caseCount', 'setCaseCount', 0),
  withState('lastRequest', 'setLastRequest', null),
  withState(
    'uniqueGridClass',
    'setUniqueGridClass',
    () => GRID_CLASS + uniqueId(),
  ),
  withState('trackLegends', 'setTrackLegends', []),
  withState('variationDataTypes', 'setVariationDataTypes', ['cnv', 'ssm']),
  withState('toggledCnvChanges', 'setToggledCnvChanges', cnvChangeTypes),
  withState('toggledConsequences', 'setToggledConsequences', consequenceTypes),
  withState('rankOncoGridBy', 'setRankOncoGridBy', 'ssm'),
  mapProps(
    ({
      title,
      impacts,
      toggledConsequences,

case CHECKED:
      nextState[payload.key] = payload.value
      break
    case CHECKED_ALL:
      Object.keys(nextState).forEach((id) => {
        nextState[id] = true
      })
      break
    default:
      break
  }
  return nextState
}

const SearchInputBar = compose(
       withState('isToggleAutoComplete', 'setToggleAutoComplete', false),
       withState('texts', 'onTextChange', () => {
         if (!Router.router) return ''
         const { query } = Router.router
         if (!query.searchTexts) {
           return ''
         }
         return query.searchTexts
       }),
       graphql(gql`
          query ($text: String) {
            autoCompletion(text: $text) {
              scientificName
              familyName
              name
              _id
            }

import { withState, withHandlers, flattenProp, compose } from 'recompose';
import { graphql } from 'react-apollo';
import GET_PLACES_QUERY from './getPlaces.query';
import RUN_SEARCH_QUERY from './runSearch.query';
import CREATE_PLACE_MUTATION from './createPlace.mutation';

export const withStateEnhancer = withState('state', 'setState', props => ({
  inputValue: '',
}));

export const withCreatePlaceMutation = graphql(CREATE_PLACE_MUTATION, {
  name: 'createPlaceMutation',
  options: props => ({
    refetchQueries: ['getPlaces'],
  }),
});

export const addPlace = ({ createPlaceMutation }) => async placeId => {
  await createPlaceMutation({
    variables: { input: { placeId } },
  });
};