smart component style - class vs functional with flow and lifecycle

smart-component-style.js

// https://github.com/BuildingConnected/client/pull/1648
// apps/main/new-prequals/dashboard/vendor/modal/notes.js

const Notes = ({
	...props,
}) => (
	<div className={classes.root}>
		{/*...*/}
	</div>
)

Notes.propTypes = {
	deleteNote: PropTypes.func.isRequired,
	// ...
}

const styles = {
	root: {
		width: '100%',
	},
	// ...
}

export default _.flow(
	lifecycle({
		componentDidMount() {
			this.props.loadNotes({
				prequalId: this.props.prequalId,
			})
		},
	}),
	connect(
		mapStateToSelectors({
			notes: getNotesSelector((state, props) => props.prequalId),
			user: meSelector,
		}),
		(dispatch) => bindActionCreators({
			loadNotes: actions.loadNotes,
			postNote: actions.postNote,
			deleteNote: actions.deleteNote,
		}, dispatch)
	),
	(component) => useSheet(component, styles)
)(Notes, styles)


// https://github.com/BuildingConnected/client/pull/1702
// apps/main/new-prequals/questionnaire/client/index.js

import ClientQuestionnaire from './view'

const CLIENT_QUESTIONNAIRE_FORM_NAME = 'ClientQuestionnaire'

class ClientQuestionnaireContainer extends Component {
	static propTypes = {
		editing: PropTypes.bool.isRequired,
		// ...
	}

	render() {
		return (
			<ClientQuestionnaire {...this.props} onSave={this.handleSave} />
		)
	}

	componentDidMount() {
		this.props.loadMyQuestionnaire()
	}

	handleSave = () => {
		const { formValues, questionnaire, saveQuestionnaire, toggleEditing } = this.props
		saveQuestionnaire(questionnaireFormToApi({ data: questionnaire, values: formValues }))
		toggleEditing()
	}
}

export default _.flow(
	reduxFormV6({
		form: 'ClientQuestionnaire',
	}),
	localState({
		id: 'ClientQuestionnaire',
		actionTypes: ['TOGGLE_EDITING'],
		getActionCreators: ({ TOGGLE_EDITING }) => ({
			toggleEditing: () => ({ type: TOGGLE_EDITING }),
		}),
		getReducer: ({ TOGGLE_EDITING }) => createReducer({ editing: false }, {
			[TOGGLE_EDITING]: state => ({ editing: !state.editing }),
		}),
	}),
	connect(
		mapStateToSelectors({
			questionnaire: myQuestionnaireSelector,
			formValues: formValuesSelector,
			initialValues: createSelector(
				myQuestionnaireSelector,
				(questionnaire) => {
					if (!questionnaire) {
						return undefined
					}
					return questionnaireApiToForm({ data: questionnaire })
				}
			),
		}),
		(dispatch) => bindActionCreators({
			loadMyQuestionnaire: actions.loadMyQuestionnaire,
			saveQuestionnaire: actions.saveQuestionnaire,
		}, dispatch),
	),
	withProps(ownerProps => ({
		...ownerProps,
		formName: CLIENT_QUESTIONNAIRE_FORM_NAME, // required by formValuesSelector
	})),
)(ClientQuestionnaireContainer)