refactor

src/components/Layout/Navbar.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import classnames from 'classnames';
 import { ROUTE } from '@config/routing';
-import useSmoothScroll from '@libs/useSmoothScroll';
+import smoothScroll from '@utils/smoothScroll';
 import logo from '@images/logo.svg';
 import { HEADER_ID } from '@features/IndexPage/components/Header/Header';
 import { SECTION_ID as PORTFOLIO_SECTION_ID } from '@features/IndexPage/components/Portfolio/Portfolio';
@@ -13,7 +13,6 @@ import { Link as GatsbyLink } from 'gatsby-theme-material-ui';
 
 function Navbar({ className, ...rest }) {
   const classes = useStyles();
-  const handleClickLink = useSmoothScroll();
 
   return (
     <AppBar
@@ -39,7 +38,7 @@ function Navbar({ className, ...rest }) {
               title="Start"
               color="inherit"
               href={'#' + HEADER_ID}
-              onClick={handleClickLink(HEADER_ID)}
+              onClick={smoothScroll(HEADER_ID)}
             >
               Start
             </Link>
@@ -47,7 +46,7 @@ function Navbar({ className, ...rest }) {
               title="Portfolio"
               color="inherit"
               href={'#' + PORTFOLIO_SECTION_ID}
-              onClick={handleClickLink(PORTFOLIO_SECTION_ID)}
+              onClick={smoothScroll(PORTFOLIO_SECTION_ID)}
             >
               Portfolio
             </Link>
@@ -55,7 +54,7 @@ function Navbar({ className, ...rest }) {
               title="Contact"
               color="inherit"
               href={'#' + CONTACT_SECTION_ID}
-              onClick={handleClickLink(CONTACT_SECTION_ID)}
+              onClick={smoothScroll(CONTACT_SECTION_ID)}
             >
               Contact
             </Link>

src/components/Section.js

@@ -4,25 +4,6 @@ import classnames from 'classnames';
 
 import { makeStyles } from '@material-ui/core/styles';
 
-const useStyles = makeStyles(theme => ({
-  section: {
-    padding: '3rem 0',
-    '&.is-primary': {
-      backgroundColor: theme.palette.primary.main,
-    },
-    '&.is-black': {
-      backgroundColor: '#000',
-      color: '#fff',
-    },
-    [theme.breakpoints.up('md')]: {
-      padding: '6rem 0',
-    },
-    '&.is-small': {
-      padding: '3rem 0',
-    },
-  },
-}));
-
 export const BG_COLOR = {
   TRANSPARENT: 'transparent',
   BLACK: 'black',
@@ -61,4 +42,23 @@ Section.propTypes = {
   size: PropTypes.oneOf(Object.values(SIZE)).isRequired,
 };
 
+const useStyles = makeStyles(theme => ({
+  section: {
+    padding: '3rem 0',
+    '&.is-primary': {
+      backgroundColor: theme.palette.primary.main,
+    },
+    '&.is-black': {
+      backgroundColor: '#000',
+      color: '#fff',
+    },
+    [theme.breakpoints.up('md')]: {
+      padding: '6rem 0',
+    },
+    '&.is-small': {
+      padding: '3rem 0',
+    },
+  },
+}));
+
 export default Section;

src/features/IndexPage/components/Header/Header.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import useSmoothScroll from '@libs/useSmoothScroll';
+import smoothScroll from '@utils/smoothScroll';
 import { SECTION_ID } from '../Contact';
 
 import { makeStyles } from '@material-ui/core/styles';
@@ -10,7 +10,7 @@ export const HEADER_ID = 'start';
 
 function Header() {
   const classes = useStyles();
-  const handleLinkClick = useSmoothScroll();
+
   return (
     <header id={HEADER_ID} className={classes.header}>
       <Container className={classes.container}>
@@ -29,7 +29,7 @@ function Header() {
           <Link
             underline="none"
             to={'#' + SECTION_ID}
-            onClick={handleLinkClick(SECTION_ID)}
+            onClick={smoothScroll(SECTION_ID)}
           >
             <Button variant="outlined" size="large">
               <Typography variant="h4">Get in touch</Typography>

src/libs/useSmoothScroll.js

@@ -1,18 +0,0 @@
-import isSmoothScrollSupported from '@utils/isSmoothScrollSupported';
-
-const useSmoothScroll = () => {
-  return id => e => {
-    if (!isSmoothScrollSupported()) {
-      return;
-    }
-
-    e.preventDefault();
-    document.querySelector('#' + id).scrollIntoView({
-      behavior: 'smooth',
-      block: 'start',
-      inline: 'nearest',
-    });
-  };
-};
-
-export default useSmoothScroll;

src/utils/isSmoothScrollSupported.js

@@ -1,4 +0,0 @@
-const isSmoothScrollSupported = () =>
-  'scrollBehavior' in document.documentElement.style;
-
-export default isSmoothScrollSupported;

src/utils/smoothScroll.js

@@ -0,0 +1,17 @@
+const isSmoothScrollSupported = () =>
+  'scrollBehavior' in document.documentElement.style;
+
+const smoothScroll = id => e => {
+  if (!isSmoothScrollSupported()) {
+    return;
+  }
+
+  e.preventDefault();
+  document.querySelector('#' + id).scrollIntoView({
+    behavior: 'smooth',
+    block: 'start',
+    inline: 'nearest',
+  });
+};
+
+export default smoothScroll;