How to use the recompose.withStateHandlers function in recompose

// Containers should include all logic that enhances a component
// this includes any reduce methods, recompose, or middleware.

import Tabs from './Tabs'
import { withRouter } from 'react-router'
import { compose, withHandlers, withStateHandlers } from 'recompose'

export const enhance = compose(
  withRouter,
  withStateHandlers(({ match }) => ({
    activeTab: match.params['item']
  }), {
    setActiveTab: () => (payload) => ({ activeTab: payload })
  }),
  withHandlers({
    handleClick: ({ onClick, setActiveTab }) => (tabName) => {
      onClick && onClick(tabName)
      setActiveTab(tabName)
    }
  })
)

export default enhance(Tabs)

import { withStateHandlers } from 'recompose';

// Provides login-service type prop with getters/setters


const withServiceProps = withStateHandlers(
  ({ service = '' }) => ({ service }),
  {
    setService: () => service => ({ service }),
    clearService: () => () => ({ service: '' }),
  },
);

export default withServiceProps;

// for understanding "numberOfPages <= currentPage" see  https://osgeo-org.atlassian.net/browse/GEOS-7233. can be removed when fixed
        // sometimes on the last page it returns a wrong totalFeatures number
        return ();
    });

// state enhancer for local props
const addStateHandlers = compose(
    withPropsOnChange(
        ["valueField"], () => ({value: undefined})
    ),
    withStateHandlers((props) => ({
        delayDebounce: 0,
        performFetch: false,
        open: false,
        currentPage: 1,
        maxFeatures: 5,
        changed: props.value,
        value: props.value,
        onChangeDrawingStatus: props.onChangeDrawingStatus,
        itemComponent: props.itemComponent
    }), {
        select: () => (selected) => {
            return ({
                selected
            });
        },
        change: (state) => (v, valuefield) => {

import DirList from './DirList'
import { notifier } from 'lib'
import { compose, withHandlers, withStateHandlers } from 'recompose'
import { withMaybe } from '@bowtie/react-utils'
import { withFormatting } from 'helpers'

const nullConditionFn = ({ dirList }) => dirList.length === 0

export default compose(
  withFormatting,
  withStateHandlers({
    inFileDropZone: false
  }, {
    setEnterFileZone: () => (payload) => ({ inFileDropZone: payload })
  }),
  withMaybe(nullConditionFn),
  withHandlers({
    handleClick: ({ queryParams, setStagedFiles, stagedFiles, getDirList, sanitizeFileName }) => (file) => {
      file['name'] = sanitizeFileName(file['name'])
      const fileToStage = {
        content: file.base64.split('base64,')[1],
        path: queryParams['path'] ? `${queryParams['path']}/${file['name']}` : file['name'],
        name: file['name'],
        size: file['size'],
        type: 'file',
        encoding: 'base64'
      }

onRemoveMedia: PropTypes.func,
  onSetMediaPriority: PropTypes.func,
  priority: PropTypes.number,
  setPriority: PropTypes.func,
  size: PropTypes.string,
  source: PropTypes.object
};

ProductMediaItem.defaultProps = {
  defaultSource: "/resources/placeholder.gif",
  editable: false,
  onRemoveMedia() { },
  size: "large"
};

const stateHandler = withStateHandlers(({ source }) => ({
  priority: source.metadata.priority
}), {
  setPriority: () => (value) => {
    const intValue = parseInt(value, 10);
    return {
      priority: isInteger(intValue) ? intValue : null
    };
  }
});

export default compose(
  withStyles(styles, { name: "RuiProductMediaItem" }),
  stateHandler
)(ProductMediaItem);

cursorCircleThickness: PT.number,
    padding: PT.number,
    onCursor: PT.func,
  }),
  defaultProps({
    fill: true,
    width: 200,
    height: 20,
    color: colors.grey[900],
    contourThickness: 1,
    cursorLineThickness: 1,
    cursorCircleR: 1.5,
    cursorCircleThickness: 1.5,
    padding: 3,
  }),
  withStateHandlers(() => ({ cursor: null }), {
    showCursor: () => (cursor) => ({ cursor }),
    hideCursor: () => () => ({ cursor: null }),
  }),
  withHandlers({
    handleMove: ({ showCursor, onCursor, data, padding }) => (e) => {
      const pos = getMousePos(e, { padding })
      const step = 1 / (data.length - 1)
      const idx = R.clamp(0, data.length - 1, Math.round(pos / step))
      showCursor(idx)
      if (onCursor) onCursor(idx)
    },
    handleLeave: ({ hideCursor, onCursor }) => () => {
      hideCursor()
      if (onCursor) onCursor(null)
    },
  }),

title={translations.savingConsentModalTitle}
      spinnerText={translations.pleaseWait}
      visible={savingConsent}
    />
  
)

export default compose(
  connect(
    (state) => ({
      translations: getTranslations(state),
      isSystemAuthEnabled: isSystemAuthEnabledSelector(state),
    }),
    {acceptAndSaveTos, setSystemAuth},
  ),
  withStateHandlers(
    {
      acceptedTos: false,
      savingConsent: false,
    },
    {
      setAcceptedTos: () => (acceptedTos) => ({acceptedTos}),
      setSavingConsent: () => (savingConsent) => ({savingConsent}),
    },
  ),
  withHandlers({
    handleAccepted: ({
      navigation,
      isSystemAuthEnabled,
      acceptAndSaveTos,
      setSystemAuth,
      setSavingConsent,

{movie.summary.substring(0, 200)}
          
          
        
      
    
  );
};

Shadow.propTypes = propTypes;

const enhance = withStateHandlers(
  {
    opacity: 0,
    wichHover: -1,
  },
  {
    handleChangeOpacity: () => opacity => ({ opacity }),
    handleChangeWichHover: () => hoveredPart => ({ wichHover: hoveredPart }),
  },
);

export default enhance(Shadow);

}
const willRender = shouldUpdate(props => false)
const EnhanceTestButton = compose(willRender)(TestButton)
const Calendar = ({ incrementOn, counter }) => (
	
)

const createState = withStateHandlers(
	({ initialCounter = 0 }) => ({
		counter: initialCounter,
	}),
	{
		incrementOn: ({ counter }) => () => ({
			counter: counter + 1,
		}),
		decrementOn: ({ counter }) => () => ({
			counter: counter - 1,
		}),
		resetCounter: (_, { initialCounter = 0 }) => () => ({
			counter: initialCounter,
		}),
	},
  )