Adding react-app for ESLint better React linting

components/jambonz-ui.js

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import * as Icons from 'react-feather';
 import { nanoid } from 'nanoid';
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 
 import Link from 'next/link';
 
@@ -28,9 +28,9 @@ export function useMatchMedia(mediaQuery = null) {
 
   const [mobile, setMobile] = useState(false);
 
-  const handleMedia = (e) => {
+  const handleMedia = useCallback((e) => {
     setMobile(e.matches);
-  };
+  }, [setMobile]);
 
   useEffect(() => {
     const mql = window.matchMedia(mediaQuery);
@@ -42,7 +42,7 @@ export function useMatchMedia(mediaQuery = null) {
     return function cleanup() {
       mql.removeEventListener('change', handleMedia);
     };
-  }, [handleMedia, setMobile]);
+  }, [handleMedia, setMobile, mediaQuery]);
 
   return mobile;
 }
@@ -126,14 +126,14 @@ export function Hero({ data, subStyle }) {
 }
 
 // Extra {props} get passed to the <a> element
-export function Button({ children, href, style = 'fill', subStyle = null, ...props }) {
+export function Button({ children, href, mainStyle = 'fill', subStyle = null, ...props }) {
   const classes = {
     'btn': true,
-    [`btn--${style}`]: true,
+    [`btn--${mainStyle}`]: true,
   };
 
   if (subStyle) {
-    classes[`btn--${style}--${subStyle}`] = true;
+    classes[`btn--${mainStyle}--${subStyle}`] = true;
   }
 
   return (
@@ -146,15 +146,15 @@ export function Button({ children, href, style = 'fill', subStyle = null, ...pro
 // Extra {props} get passed to the feather Component
 // See react-feather for all 286 icons available
 // https://github.com/feathericons/react-feather
-export function Icon({ name, style = 'inline', subStyle = null, ...props }) {
+export function Icon({ name, mainStyle = 'inline', subStyle = null, ...props }) {
   const Component = Icons[name];
   const classes = {
     'icon': true,
-    [`icon--${style}`]: true,
+    [`icon--${mainStyle}`]: true,
   };
 
   if (subStyle) {
-    classes[`icon--${style}--${subStyle}`] = true;
+    classes[`icon--${mainStyle}--${subStyle}`] = true;
   }
 
   if (!Component) {
@@ -162,7 +162,7 @@ export function Icon({ name, style = 'inline', subStyle = null, ...props }) {
   }
 
   // Stylized icon
-  if (style !== 'inline') {
+  if (mainStyle !== 'inline') {
     return (
       <div className={classNames(classes)}>
         <Component {...props} />

components/navi.js

@@ -40,12 +40,12 @@ function NaviMobile({ active, handler, siteData }) {
     <div className={classNames(classes)}>
       <div className="navi__mobile__head">
         <div className="navi__mobile__login">
-          <Button href={siteData.navi.login.link} target="_blank" style="login" subStyle="white">
+          <Button href={siteData.navi.login.link} target="_blank" mainStyle="login" subStyle="white">
             {siteData.navi.login.label}
           </Button>
         </div>
         <div className="navi__mobile__icon" onClick={handler}>
-          <Icon style="fill" subStyle="white" name="X" />
+          <Icon mainStyle="fill" subStyle="white" name="X" />
         </div>
       </div>
       <ul className="navi__mobile__links">
@@ -95,10 +95,10 @@ export default function Navi({ siteData }) {
           })}
         </ul>
         <div className="navi__icon" onClick={handleNavi}>
-          <Icon style="fill" name="Menu" />
+          <Icon mainStyle="fill" name="Menu" />
         </div>
         <div className="navi__login">
-          <Button href={siteData.navi.login.link} target="_blank" style="login">
+          <Button href={siteData.navi.login.link} target="_blank" mainStyle="login">
             {siteData.navi.login.label}
           </Button>
         </div>