React stateless functional component with higher order component wrappers.

OfflinePage.react.jsx

import Helmet from 'react-helmet';
import React from 'react';
import linksMessages from '../../common/app/linksMessages';
import { FormattedMessage } from 'react-intl';
import { connect } from 'react-redux';
import { fields } from '../../common/lib/redux-fields';

let OfflinePage = ({ fields, online }) => (
  <div className="offline-page">
    <FormattedMessage {...linksMessages.offline}>
      {message =>
        <Helmet title={message} />
      }
    </FormattedMessage>
    <h2>
      Offline
    </h2>
    <p>
      <code>state.app.online: <b>{online.toString()}</b></code>
    </p>
    <p>
      Editable fields are persisted in the local storage by default. But
      syncing is hard, so that's why the next field is disabled on offline.
    </p>
    <input
      {...fields.somePersistedText}
      disabled={!online}
      type="text"
    />
    <p>
      The user state is also persisted in the local storage. Check{' '}
      <code>configureStorage.js</code>.
    </p>
    <p>TODO: Explain easy immutable offline syncing.</p>
  </div>
);

OfflinePage.propTypes = {
  fields: React.PropTypes.object.isRequired,
  online: React.PropTypes.bool.isRequired,
};

OfflinePage = fields(OfflinePage, {
  path: 'offline',
  fields: [
    'somePersistedText',
  ],
});

export default connect(state => ({
  online: state.app.online,
}))(OfflinePage);

Note we have to use let and the last HOC must be returned as an expression to make airbnb eslint happy.

The use of let could be confusing. I would prefer to use const OfflinePageWithFields = fields(OfflinePage, …. Or I would like to see the following pattern for applying HOC: https://github.com/robinpokorny/transform-props-with#multiple-transformations

Then it could look like this:

export default hoc([
  connect(state => ({
    online: state.app.online,
  })),

  fields({
    path: 'offline',
    fields: [
      'somePersistedText',
    ],
  })
], OffilinePage)

I know. But hoc is even more confusing than let and it's another dependency. let is explicit.

Maybe the best syntax will be decorators when reborn.

https://gist.github.com/steida/440609d8bd51a04080854c9a5ec9b35e

Yes, I would like to see decorators for const! Is there any initiative?

There is, but we are not there yet. Until then, use let is the best.

Or you can use Ramda. Actually you should, because your hoc is too much specific. https://medium.com/@mirkomariani/functional-components-with-react-stateless-functions-and-ramda-e83e54fcd86b#.cv5t8uz86

Thanks for the link, will look at it 👍