Fix #2042 - Add scroll-snap like behaviour on landing page

Seneca-CDOT · Apr 5, 2021 · 25ce40b · 25ce40b
1 parent 8949d34
commit 25ce40b
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 18 deletions.
diff --git a/src/web/package.json b/src/web/package.json
@@ -14,6 +14,7 @@
     "@material-ui/icons": "^4.11.2",
     "@mdx-js/loader": "^1.6.22",
     "@next/mdx": "^10.1.3",
+    "@types/smoothscroll-polyfill": "^0.3.1",
     "dotenv": "^8.2.0",
     "highlight.js": "10.7.1",
     "jwt-decode": "^3.1.2",
@@ -24,6 +25,7 @@
     "react-dom": "^17.0.2",
     "react-material-ui-form-validator": "^2.1.4",
     "react-use": "^17.2.1",
+    "smoothscroll-polyfill": "^0.4.4",
     "swr": "^0.5.5",
     "valid-url": "^1.0.9"
   },

diff --git a/src/web/src/components/Banner.tsx b/src/web/src/components/Banner.tsx
@@ -1,9 +1,15 @@
-import { useEffect, useState } from 'react';
-import { makeStyles, Theme, createStyles, Fab, Grid, Typography } from '@material-ui/core';
-import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
+import { useEffect, useState, useRef } from 'react';
+import {
+  makeStyles,
+  Theme,
+  createStyles,
+  Grid,
+  Typography,
+  useScrollTrigger,
+} from '@material-ui/core';
+import smoothscroll from 'smoothscroll-polyfill';
 import { telescopeUrl } from '../config';
 import BannerDynamicItems from './BannerDynamicItems';
-import ScrollAction from './ScrollAction';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -91,6 +97,36 @@ export default function Banner() {
     version: '',
   });
 
+  const timelineAnchor = useRef<HTMLDivElement>(null);
+  const bannerAnchor = useRef<HTMLDivElement>(null);
+
+  const toTimelineTrigger = useScrollTrigger({
+    disableHysteresis: true,
+  });
+  const toBannerTrigger = !useScrollTrigger({
+    threshold: (timelineAnchor.current?.offsetTop || 0) - 50,
+    disableHysteresis: true,
+  });
+
+  useEffect(() => {
+    if (window) {
+      // Apply smooth scroll polyfill on mobile
+      smoothscroll.polyfill();
+    }
+  }, []);
+
+  useEffect(() => {
+    if (toTimelineTrigger && timelineAnchor?.current) {
+      timelineAnchor.current.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }
+  }, [toTimelineTrigger]);
+
+  useEffect(() => {
+    if (toBannerTrigger && bannerAnchor?.current) {
+      bannerAnchor.current.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }
+  }, [toBannerTrigger]);
+
   useEffect(() => {
     async function getGitData() {
       try {
@@ -108,11 +144,11 @@ export default function Banner() {
       }
     }
     getGitData();
-  }, [telescopeUrl]);
+  }, []);
 
   return (
     <>
-      <div className={classes.heroBanner}>
+      <div className={classes.heroBanner} ref={bannerAnchor}>
         <BannerDynamicItems />
 
         <Typography variant="h1" className={classes.h1}>
@@ -134,18 +170,8 @@ export default function Banner() {
         alignItems="center"
         justify="center"
         className={classes.container}
-      >
-        <Grid id="back-to-top-anchor-mobile" item xs={8}>
-          <div className={classes.icon}>
-            <ScrollAction>
-              <Fab color="secondary" aria-label="scroll-down">
-                <KeyboardArrowDownIcon className={classes.arrowDownIcon} />
-              </Fab>
-            </ScrollAction>
-          </div>
-        </Grid>
-      </Grid>
-      <div className={classes.anchor} id="back-to-top-anchor" />
+      />
+      <div className={classes.anchor} id="timeline-anchor" ref={timelineAnchor} />
     </>
   );
 }