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
+export default class ScrollTop extends React.Component {
-// TODO caclulating height needs to take into account react renders later?
+  scrollListener = ::this.scrollListener;
-const scrollTop = () => {
+
-  if (document.body.clientHeight < document.documentElement.clientHeight) {
+  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">
-        <i
+        {this.state.showTop && (
-          className="scroll-to-top__icon scroll-to-top__icon--top"
+          <i
-          onClick={() => window.scrollTo(0, 0)}
+            className="scroll-to-top__icon scroll-to-top__icon--top"
-        />
+            onClick={() => window.scrollTo(0, 0)}
-        <i
+          />
-          className="scroll-to-top__icon scroll-to-top__icon--bottom"
+        )}
-          onClick={() => window.scrollTo(0, document.body.scrollHeight)}
+
-        />
+        {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;