Add linter and cleanup react app

2 files changed, 37 insertions, 7 deletions

diff --git a/app/src/Common/Icon.js b/app/src/Common/Icon.js
index 933784f..96160f1 100644
--- a/app/src/Common/Icon.js
+++ b/app/src/Common/Icon.js
@@ -1,11 +1,32 @@
+import PropTypes from 'prop-types'
 
 const faCollections = {
   brands: 'fab',
   default: 'fa'
 }
-export default function Icon({ name, collection = 'default' }) {
+
+function Icon (props) {
+  const { name, className, collection, ...iconProps } = props
   const groupClass = faCollections[collection]
   const iconClass = `fa-${name}`
 
-  return <span className={[groupClass, iconClass].join(' ')} />
+  return (
+    <span
+      className={[className, groupClass, iconClass].join(' ')}
+      {...iconProps}
+    />
+  )
+}
+
+Icon.propTypes = {
+  name: PropTypes.string.isRequired,
+  className: PropTypes.string,
+  collection: PropTypes.string
 }
+
+Icon.defaultProps = {
+  collection: 'default',
+  className: ''
+}
+
+export default Icon
diff --git a/app/src/Keyboard/LayerSelector.js b/app/src/Keyboard/LayerSelector.js
index 650c161..147ea5c 100644
--- a/app/src/Keyboard/LayerSelector.js
+++ b/app/src/Keyboard/LayerSelector.js
@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types'
 import { useEffect, useMemo, useRef, useState } from 'react'
 
+import Icon from '../Common/Icon'
 import styles from './styles.module.css'
 
 function LayerSelector(props) {
@@ -38,7 +39,14 @@ function LayerSelector(props) {
     setEditing('')
     setRenaming(false)
     onRenameLayer(editing)
-  }, [ref, editing, onRenameLayer, setEditing, setRenaming])
+  }, [
+    ref,
+    editing,
+    renaming,
+    onRenameLayer,
+    setEditing,
+    setRenaming
+  ])
 
   useEffect(() => {
     document.addEventListener('click', handleClickOutside)
@@ -56,7 +64,7 @@ function LayerSelector(props) {
         {layers.map((name, i) => (
           <li
             key={`layer-${i}`}
-            className={activeLayer == i && 'active' || ''}
+            className={activeLayer === i ? 'active' : ''}
             data-layer={i}
             onClick={() => handleSelect(i)}
           >
@@ -74,8 +82,9 @@ function LayerSelector(props) {
             ) : (
               <span className={styles.name}>
                 {name}
-                <span
-                  className={`${styles.delete} fa fa-times-circle`}
+                <Icon
+                  name="times-circle"
+                  className={styles.delete}
                   onClick={() => handleDelete(i, name)}
                 />
               </span>
@@ -83,7 +92,7 @@ function LayerSelector(props) {
           </li>
         ))}
         <li onClick={handleAdd}>
-          <span className={`${styles.index} fa fa-plus`} />
+          <Icon className={styles.index} name="plus" />
           <span className={styles.name}>Add Layer</span>
         </li>
       </ul>