Only show buttons when needed

src/newsreader/js/pages/homepage/components/ScrollTop.js

@@ -1,24 +1,40 @@
 import React from 'react';
 
-// TODO show buttons when applicable
-// TODO caclulating height needs to take into account react renders later?
-const scrollTop = () => {
-  if (document.body.clientHeight < document.documentElement.clientHeight) {
+export default class ScrollTop extends React.Component {
+  scrollListener = ::this.scrollListener;
+
+  state = { showTop: false, showBottom: false };
+
+  componentDidMount() {
+    window.addEventListener('scroll', this.scrollListener);
+  }
+
+  scrollListener() {
+    const showBottom = window.innerHeight + window.scrollY < document.body.offsetHeight;
+
+    this.setState({
+      showTop: window.pageYOffset > 0 ? true : false,
+      showBottom: showBottom,
+    });
+  }
+
+  render() {
     return (
       <div className="scroll-to-top">
+        {this.state.showTop && (
           <i
             className="scroll-to-top__icon scroll-to-top__icon--top"
             onClick={() => window.scrollTo(0, 0)}
           />
+        )}
+
+        {this.state.showBottom && (
           <i
             className="scroll-to-top__icon scroll-to-top__icon--bottom"
             onClick={() => window.scrollTo(0, document.body.scrollHeight)}
           />
+        )}
       </div>
     );
   }
-
-  return null;
-};
-
-export default scrollTop;
+}