Feature: lifecycle hoc

[armand1m]

Currently, recompose offers us the lifecycle hoc where we can do stuff such as

import React from 'react'
import PropTypes from 'prop-types'
import { lifecycle } from 'recompose'

import Contact from '../Contact'
import ContactPropType from '../PropTypes/Contact'

const withContacts = lifecycle({
  componentDidMount() {
    fetch('https://randomuser.me/api/?results=20')
      .then(response => response.json())
      .then(data => data.results)
      .then(contacts => this.setState({ contacts }))
  }
})

const Contacts = ({
  contacts
}) => (
  <div className="contacts">
    {contacts.map(contact => (
      <Contact
        key={contact.id.value}
        contact={contact}
      />
    ))}
  </div>
)

Contacts.propTypes = {
  contacts: PropTypes.arrayOf(ContactPropType)
}

Contacts.defaultProps = {
  contacts: []
}

export default withContacts(Contacts)

And I just realized that proppy nor proppy-react have an option for this. Is this part of the roadmap? Any opinions are welcome :smile:

[armand1m]

Just saw the https://proppyjs.com/docs/lifecycle/ page, will try using the didSubscribe =)

[armand1m]

import React from 'react'
import PropTypes from 'prop-types'
import { compose, withState, didSubscribe } from 'proppy'
import { attach } from 'proppy-react'

import Contact from '../Contact'
import ContactPropType from '../PropTypes/Contact'

const withContacts = compose(
  withState('contacts', 'setContacts', []),
  didSubscribe(props => {
    fetch('https://randomuser.me/api/?results=20')
      .then(response => response.json())
      .then(data => data.results)
      .then(props.setContacts)
  })
);

const Contacts = ({
  contacts
}) => (
  <div className="contacts">
    {contacts.map(contact => (
      <Contact
        key={contact.id.value}
        contact={contact}
      />
    ))}
  </div>
)

Contacts.propTypes = {
  contacts: PropTypes.arrayOf(ContactPropType)
}

Contacts.defaultProps = {
  contacts: []
}

export default attach(withContacts)(Contacts)

This made the work :slightly_smiling_face: