From 120fb97aab7bb3b6d498da29c094794a501f1acc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dawid=20Wysoki=C5=84ski?= <contact@dwysokinski.me>
Date: Sat, 10 Sep 2022 17:32:30 +0200
Subject: [PATCH] refactor

---
 src/components/Layout/Navbar.js               |  9 ++---
 src/components/Section.js                     | 38 +++++++++----------
 .../IndexPage/components/Header/Header.js     |  6 +--
 src/libs/useSmoothScroll.js                   | 18 ---------
 src/utils/isSmoothScrollSupported.js          |  4 --
 src/utils/smoothScroll.js                     | 17 +++++++++
 6 files changed, 43 insertions(+), 49 deletions(-)
 delete mode 100644 src/libs/useSmoothScroll.js
 delete mode 100644 src/utils/isSmoothScrollSupported.js
 create mode 100644 src/utils/smoothScroll.js

diff --git a/src/components/Layout/Navbar.js b/src/components/Layout/Navbar.js
index 17ae7de..75c90db 100644
--- a/src/components/Layout/Navbar.js
+++ b/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>
diff --git a/src/components/Section.js b/src/components/Section.js
index 9d6049e..674a791 100644
--- a/src/components/Section.js
+++ b/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;
diff --git a/src/features/IndexPage/components/Header/Header.js b/src/features/IndexPage/components/Header/Header.js
index 8e61090..a9e415c 100644
--- a/src/features/IndexPage/components/Header/Header.js
+++ b/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>
diff --git a/src/libs/useSmoothScroll.js b/src/libs/useSmoothScroll.js
deleted file mode 100644
index b1212c8..0000000
--- a/src/libs/useSmoothScroll.js
+++ /dev/null
@@ -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;
diff --git a/src/utils/isSmoothScrollSupported.js b/src/utils/isSmoothScrollSupported.js
deleted file mode 100644
index c344090..0000000
--- a/src/utils/isSmoothScrollSupported.js
+++ /dev/null
@@ -1,4 +0,0 @@
-const isSmoothScrollSupported = () =>
-  'scrollBehavior' in document.documentElement.style;
-
-export default isSmoothScrollSupported;
diff --git a/src/utils/smoothScroll.js b/src/utils/smoothScroll.js
new file mode 100644
index 0000000..abf9c51
--- /dev/null
+++ b/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;