{"action":"created","issue":{"url":"https://api.github.com/repos/steida/este/issues/148","labels_url":"https://api.github.com/repos/steida/este/issues/148/labels{/name}","comments_url":"https://api.github.com/repos/steida/este/issues/148/comments","events_url":"https://api.github.com/repos/steida/este/issues/148/events","html_url":"https://github.com/steida/este/issues/148","id":66522208,"number":148,"title":"Add relative time example","user":{"login":"steida","id":66249,"avatar_url":"https://avatars.githubusercontent.com/u/66249?v=3","gravatar_id":"","url":"https://api.github.com/users/steida","html_url":"https://github.com/steida","followers_url":"https://api.github.com/users/steida/followers","following_url":"https://api.github.com/users/steida/following{/other_user}","gists_url":"https://api.github.com/users/steida/gists{/gist_id}","starred_url":"https://api.github.com/users/steida/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/steida/subscriptions","organizations_url":"https://api.github.com/users/steida/orgs","repos_url":"https://api.github.com/users/steida/repos","events_url":"https://api.github.com/users/steida/events{/privacy}","received_events_url":"https://api.github.com/users/steida/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":2,"created_at":"2015-04-06T04:18:07Z","updated_at":"2015-05-19T11:41:43Z","closed_at":null,"body":"The problem. How to update times with pure components? Possible solutions:\r\n\r\n1) superForceUpdate via flag; slow and ugly as sin \r\n2) stayFresh higher order component; verbose not efficient\r\n3) app/onTick to add current time to app state which enforce rerender; model messed at various places\r\n\r\nFreshTime component to wrap minimal amounth of DOM to fast update on animation frame.\r\n\r\n\r\n"},"comment":{"url":"https://api.github.com/repos/steida/este/issues/comments/103455150","html_url":"https://github.com/steida/este/issues/148#issuecomment-103455150","issue_url":"https://api.github.com/repos/steida/este/issues/148","id":103455150,"user":{"login":"grabbou","id":2464966,"avatar_url":"https://avatars.githubusercontent.com/u/2464966?v=3","gravatar_id":"","url":"https://api.github.com/users/grabbou","html_url":"https://github.com/grabbou","followers_url":"https://api.github.com/users/grabbou/followers","following_url":"https://api.github.com/users/grabbou/following{/other_user}","gists_url":"https://api.github.com/users/grabbou/gists{/gist_id}","starred_url":"https://api.github.com/users/grabbou/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/grabbou/subscriptions","organizations_url":"https://api.github.com/users/grabbou/orgs","repos_url":"https://api.github.com/users/grabbou/repos","events_url":"https://api.github.com/users/grabbou/events{/privacy}","received_events_url":"https://api.github.com/users/grabbou/received_events","type":"User","site_admin":false},"created_at":"2015-05-19T11:41:43Z","updated_at":"2015-05-19T11:41:43Z","body":"Well, what about doing something we've done with `editable`? \r\n\r\nThe TimeComponent has in-component immutable State with property `refreshInterval` and `currentTime`. These elements are set via `props` which allows having multiple timers with different settings (no global setting).\r\n\r\nInside `componentDidMount` we setup an interval that we then clear in `componentWillUnmount`. The interval calls a method `updateTime` every `refreshInterval` milliseconds and inside that method we just `setState` with a new date.\r\n\r\nWe could've also accept either a function or a string to be passed as a property, e.g. `formatTime` so users can format the time to their needs."}}