{"action":"opened","issue":{"url":"https://api.github.com/repos/AlanVerbner/iohk-training/issues/4","repository_url":"https://api.github.com/repos/AlanVerbner/iohk-training","labels_url":"https://api.github.com/repos/AlanVerbner/iohk-training/issues/4/labels{/name}","comments_url":"https://api.github.com/repos/AlanVerbner/iohk-training/issues/4/comments","events_url":"https://api.github.com/repos/AlanVerbner/iohk-training/issues/4/events","html_url":"https://github.com/AlanVerbner/iohk-training/issues/4","id":147458146,"number":4,"title":"Optimize for readability","user":{"login":"DominikGuzei","id":172414,"avatar_url":"https://avatars.githubusercontent.com/u/172414?v=3","gravatar_id":"","url":"https://api.github.com/users/DominikGuzei","html_url":"https://github.com/DominikGuzei","followers_url":"https://api.github.com/users/DominikGuzei/followers","following_url":"https://api.github.com/users/DominikGuzei/following{/other_user}","gists_url":"https://api.github.com/users/DominikGuzei/gists{/gist_id}","starred_url":"https://api.github.com/users/DominikGuzei/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/DominikGuzei/subscriptions","organizations_url":"https://api.github.com/users/DominikGuzei/orgs","repos_url":"https://api.github.com/users/DominikGuzei/repos","events_url":"https://api.github.com/users/DominikGuzei/events{/privacy}","received_events_url":"https://api.github.com/users/DominikGuzei/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":0,"created_at":"2016-04-11T15:03:51Z","updated_at":"2016-04-11T15:03:51Z","closed_at":null,"body":"In general the code looks good but in some cases it would be nice to cleanup the formatting and avoid splitting up code flow into too many functions unnecessarily.\r\n\r\nOne example are imports:\r\n```javascript\r\nimport {\r\n  Invoices\r\n} from '../api/invoices'\r\n```\r\n\r\ncan and should be a simple one-liner:\r\n```javascript\r\nimport { Invoices } from '../api/invoices';\r\n```\r\n\r\nHere you split the code up into many small functions which is nice for big apis and when there is real complexity going on. But this component is so simple that this is less readable in the end!\r\n\r\n```javascript\r\nfunction areAllLoaded( data ) {\r\n  return data.total === data.loaded\r\n}\r\n\r\nfunction isIndicatorVisible( window, target ) {\r\n\r\n  const threshold = window.scrollTop() + window.height() - target.height();\r\n  return target.offset().top < threshold;\r\n}\r\n\r\nfunction tryLoadMoreData( instance ) {\r\n  var target = instance.$( \"#load-more\" );\r\n  if ( !target.length ) return;\r\n\r\n  if ( isIndicatorVisible( $( window ), target ) && !areAllLoaded( instance.data ) ) {\r\n    instance.data.onNeedMoreItems()\r\n  }\r\n}\r\n\r\nTemplate.InfiniteScroll.onRendered( function onBodyCreated() {\r\n  $( window ).scroll( () => {\r\n    tryLoadMoreData( this )\r\n  } )\r\n} )\r\n\r\nTemplate.InfiniteScroll.helpers( {\r\n\r\n  allLoaded() {\r\n    return areAllLoaded( this )\r\n  },\r\n\r\n  moreToLoad() {\r\n    return !areAllLoaded( this )\r\n  }\r\n} )\r\n```\r\n\r\nyou could pack this code into ~20-30 lines of code instead, as simple as possible :wink: "}}