{"action":"closed","issue":{"url":"https://api.github.com/repos/fireflylearning/pattern-library/issues/65","repository_url":"https://api.github.com/repos/fireflylearning/pattern-library","labels_url":"https://api.github.com/repos/fireflylearning/pattern-library/issues/65/labels{/name}","comments_url":"https://api.github.com/repos/fireflylearning/pattern-library/issues/65/comments","events_url":"https://api.github.com/repos/fireflylearning/pattern-library/issues/65/events","html_url":"https://github.com/fireflylearning/pattern-library/issues/65","id":129118234,"number":65,"title":"Simplify React components","user":{"login":"mwilliamson-firefly","id":9167821,"avatar_url":"https://avatars.githubusercontent.com/u/9167821?v=3","gravatar_id":"","url":"https://api.github.com/users/mwilliamson-firefly","html_url":"https://github.com/mwilliamson-firefly","followers_url":"https://api.github.com/users/mwilliamson-firefly/followers","following_url":"https://api.github.com/users/mwilliamson-firefly/following{/other_user}","gists_url":"https://api.github.com/users/mwilliamson-firefly/gists{/gist_id}","starred_url":"https://api.github.com/users/mwilliamson-firefly/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mwilliamson-firefly/subscriptions","organizations_url":"https://api.github.com/users/mwilliamson-firefly/orgs","repos_url":"https://api.github.com/users/mwilliamson-firefly/repos","events_url":"https://api.github.com/users/mwilliamson-firefly/events{/privacy}","received_events_url":"https://api.github.com/users/mwilliamson-firefly/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":1,"created_at":"2016-01-27T11:39:42Z","updated_at":"2016-04-06T16:29:59Z","closed_at":"2016-04-06T16:29:59Z","body":"I think we've probably pushed a bit too much logic into the React components in the pattern library. To borrow [some parlance from the React community](https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0#.wy6tjij6c), things in the pattern library should just be presentational components, which should simplify things. To quote, presentational components:\r\n\r\n  * Are concerned with how things look.\r\n  * May contain both presentational and container components** inside, and usually have some DOM markup and styles of their own.\r\n  * Often allow containment via this.props.children.\r\n  * Have no dependencies on the rest of the app, such as Flux actions or stores.\r\n  * Don’t specify how the data is loaded or mutated.\r\n  * Receive data and callbacks exclusively via props.\r\n  * Rarely have their own state (when they do, it’s UI state rather than data).\r\n  * Are written as functional components unless they need state, lifecycle hooks, or performance optimizations.\r\n  * Examples: Page, Sidebar, Story, UserInfo, List.\r\n\r\n(I'd suggest reading the rest of the linked post as well.)\r\n\r\nTo take an example, this would mean the recipient picker would have no notion of how it finds principals, nor would it be responsible for updating any state. Instead, it just knows the list of current recipients, the current search and any results, all passed in through `props`. When the user types or selects a recipient or whatever, it calls a callback, also passed in through `props`.\r\n\r\nIn Firefly, we could then create a container component that would wire up the recipient picker with the relevant bits of state and AJAX calls."}}