Fixes 2994 - Implementation of Scroll to top Floating Action Button (f…

…ossasia#2995)

package.json

@@ -69,6 +69,7 @@
     "react-render-html": "0.6.0",
     "react-router": "5.0.1",
     "react-router-dom": "5.0.1",
+    "react-scroll": "^1.7.14",
     "react-share": "3.0.0",
     "react-slick": "0.24.0",
     "react-swipeable-views": "0.13.3",

src/components/About/Blog/index.js

@@ -16,15 +16,14 @@ import styled, { css } from 'styled-components';
 import Typography from '@material-ui/core/Typography';
 import renderHTML from 'react-render-html';
 import _Loading from 'react-loading-animation';
-import { scrollToTopAnimation } from '../../../utils/animateScroll';
 import { getBlogReponse } from '../../../apis';
 import './Blog.css';
 import 'font-awesome/css/font-awesome.min.css';
 import Next from '@material-ui/icons/KeyboardArrowRight';
 import Previous from '@material-ui/icons/KeyboardArrowLeft';
 import susi from '../../../images/susi-logo.svg';
-import ToTopButton from '../../shared/ToTopButton';
 import { Header } from '../../shared/About';
+import ScrollTopButton from '../../shared/ScrollTopButton';
 
 const allCategories = [
   'FOSSASIA',
@@ -199,21 +198,16 @@ class Blog extends Component {
       startPage: 0,
       nextDisplay: 'visible',
       prevDisplay: 'hidden',
-      showScrollToTop: false,
     };
   }
 
   componentDidMount() {
     const { blogKey } = this.props;
     document.title =
       'Blog Posts about Open Source Artificial Intelligence for Personal Assistants, Robots, Help Desks and Chatbots - SUSI.AI';
-    scrollToTopAnimation();
     if (blogKey) {
       this.getPosts(blogKey);
     }
-    /* Adding scroll event Listener to window,
-    to display ToTopButton only when the user has scrolled 90px*/
-    window.addEventListener('scroll', this.showScrollToTop);
   }
 
   componentWillReceiveProps = props => {
@@ -286,16 +280,6 @@ class Blog extends Component {
     this.scrollToTop();
   };
 
-  showScrollToTop = () => {
-    this.setState({
-      showScrollToTop: window.scrollY >= 90,
-    });
-  };
-
-  componentWillUnmount() {
-    window.removeEventListener('scroll', this.showScrollToTop);
-  }
-
   render() {
     const nextStyle = {
       visibility: this.state.nextDisplay,
@@ -306,8 +290,6 @@ class Blog extends Component {
       visibility: this.state.prevDisplay,
     };
 
-    const { showScrollToTop } = this.state;
-
     return (
       <div>
         <Header title="Blog" subtitle="Latest Blog Posts on SUSI.AI" />
@@ -464,9 +446,7 @@ class Blog extends Component {
             <BottomPost />
           </div>
         )}
-        <div style={{ display: showScrollToTop ? 'inline-block' : 'none' }}>
-          <ToTopButton />
-        </div>
+        <ScrollTopButton />
       </div>
     );
   }

src/components/About/Devices/index.js

@@ -4,6 +4,7 @@ import { Header } from '../../shared/About';
 import { scrollToTopAnimation } from '../../../utils/animateScroll';
 import { DEVICES_DATA } from '../../../constants/about';
 import styled from 'styled-components';
+import ScrollTopButton from '../../shared/ScrollTopButton';
 
 const DeviceSection = styled.div`
   margin: 0 auto;
@@ -140,6 +141,7 @@ const Devices = props => {
           </DeviceSection>
         );
       })}
+      <ScrollTopButton />
     </div>
   );
 };

src/components/About/Overview/index.js

@@ -35,6 +35,7 @@ import appStore from '../../../images/app-store.svg';
 import './Overview.css';
 import styled, { css } from 'styled-components';
 import { withStyles } from '@material-ui/core/styles';
+import ScrollTopButton from '../../shared/ScrollTopButton';
 
 const commonDesc = css`
   text-align: left;
@@ -910,6 +911,7 @@ class Overview extends Component {
             <CloseIcon onClick={this.toggleVideoModal} />
           </VideoContainer>
         </VideoModal>
+        <ScrollTopButton />
       </div>
     );
   }

src/components/About/Privacy/Privacy.react.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { Header } from '../../shared/About';
 import { scrollToTopAnimation } from '../../../utils/animateScroll';
 import styled from 'styled-components';
+import ScrollTopButton from '../../shared/ScrollTopButton';
 
 const H1 = styled.h1`
   margin-top: 5rem;
@@ -155,6 +156,7 @@ const Privacy = props => {
           </p>
         </div>
       </HomeDiv>
+      <ScrollTopButton />
     </div>
   );
 };

src/components/About/Team/index.js

@@ -3,12 +3,11 @@ import PropTypes from 'prop-types';
 import _Card from '@material-ui/core/Card';
 import SocialLinkButtons from './SocialLinkButtons';
 import { Header } from '../../shared/About';
-import { scrollToTopAnimation } from '../../../utils/animateScroll';
 import TEAM_MEMBERS from '../../../constants/team';
 import 'font-awesome/css/font-awesome.min.css';
 import Typography from '@material-ui/core/Typography';
-import ToTopButton from '../../shared/ToTopButton';
 import styled from 'styled-components';
+import ScrollTopButton from '../../shared/ScrollTopButton';
 
 const Section = styled.div`
   margin: 0 auto;
@@ -141,34 +140,12 @@ export default class Team extends Component {
     location: PropTypes.object,
   };
 
-  constructor(props) {
-    super(props);
-    this.state = {
-      showScrollToTop: false,
-    };
-  }
-
   componentDidMount() {
-    //  Scrolling to top of page when component loads
-    scrollToTopAnimation();
     // Adding title tag to page
     document.title =
       'Developer Team of SUSI.AI - Open Source Artificial Intelligence for Personal Assistants, Robots, Help Desks and Chatbots';
-    /* Adding scroll event Listener to window,
-    to display ToTopButton only when the user has scrolled 90px*/
-    window.addEventListener('scroll', this.showScrollToTop);
-  }
-
-  componentWillUnmount() {
-    window.removeEventListener('scroll', this.showScrollToTop);
   }
 
-  showScrollToTop = () => {
-    this.setState({
-      showScrollToTop: window.scrollY >= 90,
-    });
-  };
-
   createMemberCard = (member, key) => {
     return (
       <Card key={key}>
@@ -195,7 +172,6 @@ export default class Team extends Component {
   };
 
   render() {
-    const { showScrollToTop } = this.state;
     document.body.style.setProperty('background-image', 'none');
     const mentors = TEAM_MEMBERS.MENTORS.map((mentor, i) => {
       return this.createMemberCard(mentor, i);
@@ -229,10 +205,7 @@ export default class Team extends Component {
           <Heading>Alumni</Heading>
           <TeamContainer>{alumnis}</TeamContainer>
         </Section>
-
-        <div style={{ display: showScrollToTop ? 'inline-block' : 'none' }}>
-          <ToTopButton />
-        </div>
+        <ScrollTopButton />
       </div>
     );
   }

src/components/About/Terms/Terms.react.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Header } from '../../shared/About';
 import styled from 'styled-components';
+import ScrollTopButton from '../../shared/ScrollTopButton';
 
 const Section = styled.div`
   max-width: 85%;
@@ -324,6 +325,7 @@ const Terms = () => {
           </TermsList>
         </SectionContainer>
       </Section>
+      <ScrollTopButton />
     </div>
   );
 };

src/components/cms/BrowseSkill/BrowseSkill.js

@@ -47,6 +47,7 @@ import pluralize from 'pluralize';
 import SkillSlideshow from '../SkillSlideshow';
 import { SelectedText } from '../SkillsStyle';
 import appendQueryString from '../../../utils/appendQueryString';
+import ScrollTopButton from '../../shared/ScrollTopButton';
 
 const Container = styled.div`
   display: flex;
@@ -1028,6 +1029,7 @@ class BrowseSkill extends React.Component {
                       >
                         <NavigationArrowForward />
                       </Fab>
+                      <ScrollTopButton />
                     </PageNavigationContainer>
                   )}
                 </div>
@@ -1044,6 +1046,7 @@ class BrowseSkill extends React.Component {
             </ContentContainer>
           )}
         </RightContainer>
+        <ScrollTopButton />
       </Container>
     );
   }

src/components/cms/SkillPage/SkillListing.js

@@ -19,6 +19,7 @@ import Fab from '@material-ui/core/Fab';
 import Ratings from 'react-ratings-declarative';
 import { reportSkill } from '../../../apis';
 import { CenterReaderContainer } from '../../shared/Container';
+import ScrollTopButton from '../../shared/ScrollTopButton';
 
 // Static Assets
 import CircleImage from '../../shared/CircleImage';
@@ -515,6 +516,7 @@ class SkillListing extends Component {
           <SkillRatingCard />
           <SkillFeedbackCard />
           <SkillUsageCard />
+          <ScrollTopButton />
         </Container>
       );
     }

src/components/shared/ScrollTopButton.js

@@ -0,0 +1,73 @@
+import React from 'react';
+import Fab from '@material-ui/core/Fab';
+import { animateScroll as scroll } from 'react-scroll';
+import KeyboardArrowUpIcon from '@material-ui/icons/KeyboardArrowUp';
+import styled from 'styled-components';
+import Fade from '@material-ui/core/Fade';
+
+const ScrollTopFab = styled(Fab)`
+  position: fixed;
+  top: ${props => props.height - 95 + 'px'};
+  right: ${props => (props.width < 1100 ? '70px' : '100px')};
+  margin: 15px;
+`;
+
+class ScrollTopButton extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      height: window.innerHeight,
+      width: window.innerWidth,
+      shouldDisplayButton: false,
+    };
+  }
+
+  componentDidMount() {
+    window.addEventListener('resize', this.updateDimensions);
+    window.addEventListener('scroll', this.updateButtonStatus);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.updateDimensions);
+    window.removeEventListener('scroll', this.updateStatus);
+  }
+
+  scrollToTop = () => {
+    scroll.scrollToTop();
+  };
+
+  updateButtonStatus = () => {
+    if (window.pageYOffset > 500) {
+      this.setState({
+        shouldDisplayButton: true,
+      });
+    } else {
+      this.setState({
+        shouldDisplayButton: false,
+      });
+    }
+  };
+
+  updateDimensions = () => {
+    this.setState({ width: window.innerWidth, height: window.innerHeight });
+  };
+
+  render() {
+    const { height, width, shouldDisplayButton } = this.state;
+    return (
+      <Fade in={shouldDisplayButton}>
+        <ScrollTopFab
+          color="primary"
+          aria-label="scroll top"
+          onClick={this.scrollToTop}
+          height={height}
+          width={width}
+        >
+          <KeyboardArrowUpIcon />
+        </ScrollTopFab>
+      </Fade>
+    );
+  }
+}
+
+export default ScrollTopButton;