How to use the recompose/withState function in recompose

(BaseComponent) => {
    const factory = createEagerFactory(BaseComponent);
    const sizePropName = sizePropNameArg || '@@__SIZE';
    const sizeSetterPropName = `@@__SET__${sizePropName}`;
    // const pickDependentProps = props => pick(props, props[dependentPropKeysName]);

    return compose(
      withState(sizePropName, sizeSetterPropName, defaultSize || { width: 0, height: 0 }),
    )(
      class extends Component {
        cancelHandler = null;

        componentDidMount() {
          window.addEventListener('resize', this.resizeHandle, false);
          this.resizeHandle();
          // allow to finish draw
          this.cancelHandler = setTimeout(this.resizeHandle, 0);
        }

        componentWillUnmount() {
          window.removeEventListener('resize', this.resizeHandle, false);
          clearTimeout(this.cancelHandler);
        }

{
            removeStageNotification,
            removeProgramNotification,
            setEditProgramStageModel: model =>
                setEditModel(model, 'PROGRAM_STAGE_NOTIFICATION'),
            setEditProgramModel: model =>
                setEditModel(model, 'PROGRAM_NOTIFICATION'),
            setAddModel,
        },
        dispatch
    );

const enhance = compose(
    // TODO: Impure connect when the reducer is fixed to emit a pure model this can be a pure action
    connect(state => ({}), mapDispatchToProps, undefined, { pure: false }),
    withState('open', 'setOpen', false),
    withState('modelToDelete', 'setModelToDelete', null),
    withHandlers({
        onCancel: ({ setOpen }) => () => setOpen(false),
        onDelete: ({
            setOpen,
            removeStageNotification,
            removeProgramNotification,
            modelToDelete,
        }) => () => {
            setOpen(false);
            if(modelToDelete.programStage) {
                removeStageNotification(modelToDelete);
            } else {
                removeProgramNotification(modelToDelete);
            }

<button kind="default">
        {t('cancel')}
      </button>
      <button kind="primary">
        {t('save')}
      </button>
    
  
);

export default compose(
  pure,
  withGetMessages(messages, 'Profile'),
  withState('newPassword', 'setNewPassword', ''),
  withState('confirmPassword', 'setConfirmPassword', ''),
  withState('error', 'setError', {
    newPassword: true,
    confirmPassword: true,
  }),
  withState('touched', 'setTouched', {
    newPassword: false,
    confirmPassword: false,
  }),
  withHandlers({
    closeDialog: props =&gt; () =&gt; props.setDialogShow('none'),
    onBlur: props =&gt; field =&gt; () =&gt; {
      props.setTouched({ ...props.touched, [field]: true });
    },
    onNewPasswordChange: props =&gt; (e) =&gt; {
      const newPassword = e.target.value;
      props.setNewPassword(newPassword);

this.stopListeningOnStory = this.props.api.onStory(() => {
      this.props.onDispatch()
    })
  },
  componentWillUnmount () {
    const { channel } = this.props
    if (this.stopListeningOnStory) {
      this.stopListeningOnStory()
    }
    channel.removeListener(events.INIT, this.props.onInit)
    channel.removeListener(events.ON_DISPATCH, this.props.onDispatch)
  }
})

const enhance = compose(
  withState('changes', 'setChanges', []),
  withState('enabled', 'setEnabled', false),
  withState('actionFilter', 'setActionFilter', ''),
  withState('diffFilter', 'setDiffFilter', ''),
  withHandlers(buildHandlers),
  lifecycle(lifecycleHandlers)
)

export default enhance(HistoryPanel)

setIsCreateDataChannel={setIsCreateDataChannel}
          setIsSelectCreateDataChannel={setIsSelectCreateDataChannel}
          retrieveUnitTypes={retrieveUnitTypes}
          createUnitTypes={createUnitTypes}
          unitTypes={unitTypes}
          pushToast={pushToast}
        />
      }
    
  
);

export default compose(
  pure,
  withState('displayCardType', 'setDisplayCardType', 0),
  withState('isCreateDataChannel', 'setIsCreateDataChannel', false),
  withHandlers({
    closeSelectCreateDataChannel: props => () => props.setIsSelectCreateDataChannel(false),
  }),
  withGetMessages(messages, 'PrototypeDetail'),
)(CreateDataChannelDialog);

child.props.className,
                  children.length === index + 1 ? dropButtonStyles.dropDownIconborder : {},
                ),
              }))
          }
        
      
    );
  }
}

export default compose(
  pure,
  withState('isOpen', 'setIsOpen', false),
  withState('isHover', 'setIsHover', false),
  withState('onDocumentClickListener', 'setOnDocumentClickListener', null),
  withState('onDocumentKeyupListener', 'setOnDocumentKeyupListener', null),
  withHandlers({
    onMouseEnter: props => () => props.setIsHover(true),
    onMouseLeave: props => () => props.setIsHover(false),
    handleClick: props => (e) => {
      const hide = () => {
        props.setIsOpen(false);
        if (props.onDocumentClickListener) {
          props.onDocumentClickListener.remove();
        }

        if (props.onDocumentKeyupListener) {
          props.onDocumentKeyupListener.remove();
        }
      };

import withProps from 'recompose/withProps';
import { createStepperFromConfig } from '../../stepper/stepper';
import {
    setEditModel,
    saveStageNotification,
    saveProgramNotification,
} from './actions';
import {
    getProgramStageDataElementsByStageId,
    getNotificationType,
} from './selectors';
import Subheader from 'material-ui/Subheader/';
import { branchWithMessage } from '../../../Snackbar/snackBarUtils';

const withStepper = compose(
    withState('activeStep', 'setActiveStep', 0),
    withProps(({ setActiveStep, dataElements }) => ({
        stepperClicked(stepKey) {
            setActiveStep(
                programStageSteps.findIndex(step => step.key === stepKey)
            );
        },
        dataElements,
    }))
);

const stepperForSteps = steps =>
    withStepper(createStepperFromConfig(steps, 'vertical'));

const ProgramStageStepper = stepperForSteps(programStageSteps);
const ProgramStepper = stepperForSteps(programSteps);

className: c(
                  child.props.className,
                  children.length === index + 1 ? dropButtonStyles.dropDownIconborder : {},
                ),
              }))
          }
        
      
    );
  }
}

export default compose(
  pure,
  withState('isOpen', 'setIsOpen', false),
  withState('isHover', 'setIsHover', false),
  withState('onDocumentClickListener', 'setOnDocumentClickListener', null),
  withState('onDocumentKeyupListener', 'setOnDocumentKeyupListener', null),
  withHandlers({
    onMouseEnter: props => () => props.setIsHover(true),
    onMouseLeave: props => () => props.setIsHover(false),
    handleClick: props => (e) => {
      const hide = () => {
        props.setIsOpen(false);
        if (props.onDocumentClickListener) {
          props.onDocumentClickListener.remove();
        }

        if (props.onDocumentKeyupListener) {
          props.onDocumentKeyupListener.remove();
        }
      };

import withHandlers from "recompose/withHandlers";

const payloadKeys = [
  "children",
  "getValue",
  "setValue",
  "isPristine",
  "isDirty",
  "onSubmit",
  "formValues",
  "resetForm",
  "updateValues"
];

export default compose(
  withState(
    "formValues",
    "updateValues",
    ({ initialValues = {} }) => initialValues
  ),
  withHandlers({
    resetForm: ({ initialValues, updateValues }) => {
      return () => updateValues(initialValues);
    },
    isPristine: ({ formValues, initialValues, updateValues }) => {
      return deepEqual(formValues, initialValues);
    },
    isDirty: ({ formValues, initialValues, updateValues }) => {
      return () => !deepEqual(formValues, initialValues);
    },
    getValue: ({ formValues }) => {
      return name => formValues[name];

{
        isToastShow &&
        
          <div>
            {toast.message}
          </div>
        
      }
    
  
);

export default compose(
  pure,
  withState('isToastShow', 'setIsToastShow', false),
  withState('toast', 'setToast', {}),
  lifecycle({
    componentWillReceiveProps(nextProps) {
      const toastCount = pipe(
        pathOr([], ['toasts', 'toastList']),
        length,
      )(nextProps);

      if (toastCount &gt; 0 &amp;&amp; !nextProps.isToastShow) {
        const toast = pathOr({}, ['toasts', 'toastList', 0])(nextProps);
        this.props.setIsToastShow(true);
        this.props.setToast(toast);

        setTimeout(() =&gt; {
          this.props.dropToast();
          this.props.setIsToastShow(false);
        }, 3000);