From f0d77b02d2a4507996f2a85f16c0a861fdfe6de8 Mon Sep 17 00:00:00 2001
From: Ben Larson <blarson11@icloud.com>
Date: Thu, 10 Sep 2020 20:38:24 -0500
Subject: [PATCH] Refactor (#11)

---
 src/components/Interest.jsx                   | 19 ++++++++++
 src/components/Menu.jsx                       | 15 ++++----
 src/components/MusicalInterests.jsx           | 38 -------------------
 .../{musicalInterests.css => interest.css}    |  0
 src/index.html                                |  5 ++-
 src/index.jsx                                 | 34 +++++++----------
 src/interests.json                            | 28 ++++++++++++++
 src/main.css                                  |  2 +-
 8 files changed, 73 insertions(+), 68 deletions(-)
 create mode 100644 src/components/Interest.jsx
 delete mode 100644 src/components/MusicalInterests.jsx
 rename src/components/{musicalInterests.css => interest.css} (100%)
 create mode 100644 src/interests.json

diff --git a/src/components/Interest.jsx b/src/components/Interest.jsx
new file mode 100644
index 0000000..1ca6ac8
--- /dev/null
+++ b/src/components/Interest.jsx
@@ -0,0 +1,19 @@
+const React = require('react');
+
+const HorizontalScroller = require('./HorizontalScroller');
+
+module.exports = ({ title, list, Card }) => {
+  return (
+    <div
+      className="MusicalInterests"
+      id={title.toLowerCase().replace(/\s/g, '-')}
+    >
+      <h2>{title}</h2>
+      <HorizontalScroller>
+        {list.map((item, i) => (
+          <Card key={i} {...item} />
+        ))}
+      </HorizontalScroller>
+    </div>
+  );
+};
diff --git a/src/components/Menu.jsx b/src/components/Menu.jsx
index b6f93f6..c84f111 100644
--- a/src/components/Menu.jsx
+++ b/src/components/Menu.jsx
@@ -1,6 +1,6 @@
 const React = require('react');
 
-module.exports = ({ links, externalLinks }) => {
+module.exports = ({ sections, links }) => {
   const navActions = {
     open: () => document.body.classList.add('isNavOpen'),
     close: () => document.body.classList.remove('isNavOpen'),
@@ -23,23 +23,22 @@ module.exports = ({ links, externalLinks }) => {
       <div className="Menu-Body">
         <h3>Menu</h3>
         <ul>
-          {links.map((link, i) => (
+          {sections.map((section, i) => (
             <li key={i}>
               <a
-                href={link.url}
+                href={'#' + section.toLowerCase().replace(/\s/g, '-')}
                 onClick={navActions.close}
                 style={{ color: 'inherit' }}
-              >
-                {link.text}
-              </a>
+                children={section}
+              />
             </li>
           ))}
         </ul>
         <hr />
         <ul>
-          {externalLinks.map((link, i) => (
+          {links.map((link, i) => (
             <li key={i}>
-              <a href={link.url}>{link.text}</a>
+              <a href={'https://' + link.url}>{link.text + ' \u2197'} </a>
             </li>
           ))}
         </ul>
diff --git a/src/components/MusicalInterests.jsx b/src/components/MusicalInterests.jsx
deleted file mode 100644
index 1a21ce8..0000000
--- a/src/components/MusicalInterests.jsx
+++ /dev/null
@@ -1,38 +0,0 @@
-const React = require('react');
-
-const HorizontalScroller = require('./HorizontalScroller');
-const AlbumCard = require('./AlbumCard');
-
-module.exports = (props) => {
-  return (
-    <div className="MusicalInterests" id="music-i-like">
-      <h2>Music I like</h2>
-      <HorizontalScroller>
-        <AlbumCard
-          song="Gepetto / Pinokkio"
-          artist="Trio Dhoore"
-          album="Momentum"
-          link="https://triodhoore.com/momentum"
-        />
-        <AlbumCard
-          song="The Offbeat Jig / Keep Dreaming"
-          artist="Trio Dhoore"
-          album="Parachute"
-          link="https://triodhoore.com/parachute"
-        />
-        <AlbumCard
-          song="Impossible"
-          artist="Two Steps From Hell"
-          album="Unleashed"
-          link="https://music.apple.com/us/album/unleashed/1287310003"
-        />
-        <AlbumCard
-          song="NOW That's What I Call Polka!"
-          artist={'"Weird Al" Yankovic'}
-          album="Mandatory Fun"
-          link="https://www.weirdal.com/catalog/mandatory-fun/"
-        />
-      </HorizontalScroller>
-    </div>
-  );
-};
diff --git a/src/components/musicalInterests.css b/src/components/interest.css
similarity index 100%
rename from src/components/musicalInterests.css
rename to src/components/interest.css
diff --git a/src/index.html b/src/index.html
index 8a54e3f..bb8424e 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,7 +1,10 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, viewport-fit=cover"
+    />
     <title>Ben Larson</title>
     <style>
       @import url('./main.css');
diff --git a/src/index.jsx b/src/index.jsx
index 9aab187..b3d26ab 100644
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -3,30 +3,20 @@ const ReactDom = require('react-dom');
 
 const Hero = require('./components/Hero');
 const Menu = require('./components/Menu');
-const MusicalInterests = require('./components/MusicalInterests');
+const Interest = require('./components/Interest');
+const AlbumCard = require('./components/AlbumCard');
+
+const interests = require('./interests.json');
 
 ReactDom.render(
   <>
     <Menu
+      sections={['Music I like']}
       links={[
-        {
-          url: '#',
-          text: 'Top \u2191',
-        },
-        {
-          url: '#music-i-like',
-          text: 'Music I like',
-        },
-      ]}
-      externalLinks={[
-        {
-          url: 'https://github.com/ben-larson/',
-          text: 'Check out my GitHub \u2197',
-        },
-        {
-          url: 'https://www.linkedin.com/in/ben-larson-dev/',
-          text: 'Connect on LinkedIn \u2197',
-        },
+        { url: 'github.com/ben-larson', text: 'GitHub' },
+        { url: 'stackoverflow.com/users/10377586/', text: 'Stack Overflow' },
+        { url: 'www.linkedin.com/in/ben-larson-dev', text: 'LinkedIn' },
+        { url: 'music.apple.com/profile/benthedev', text: 'Apple Music' },
       ]}
     />
     <Hero
@@ -37,7 +27,11 @@ ReactDom.render(
         '\u2606 Living in Nashville, TN',
       ]}
     />
-    <MusicalInterests />
+    <Interest
+      title="Music I like"
+      list={interests.music}
+      Card={AlbumCard}
+    ></Interest>
   </>,
   document.querySelector('#app')
 );
diff --git a/src/interests.json b/src/interests.json
new file mode 100644
index 0000000..a607c2b
--- /dev/null
+++ b/src/interests.json
@@ -0,0 +1,28 @@
+{
+  "music": [
+    {
+      "song": "Gepetto / Pinokkio",
+      "artist": "Trio Dhoore",
+      "album": "Momentum",
+      "link": "https://triodhoore.com/momentum"
+    },
+    {
+      "song": "The Offbeat Jig / Keep Dreaming",
+      "artist": "Trio Dhoore",
+      "album": "Parachute",
+      "link": "https://triodhoore.com/parachute"
+    },
+    {
+      "song": "Impossible",
+      "artist": "Two Steps From Hell",
+      "album": "Unleashed",
+      "link": "https://music.apple.com/us/album/unleashed/1287310003"
+    },
+    {
+      "song": "NOW That's What I Call Polka!",
+      "artist": "\"Weird Al\" Yankovic",
+      "album": "Mandatory Fun",
+      "link": "https://www.weirdal.com/catalog/mandatory-fun/"
+    }
+  ]
+}
diff --git a/src/main.css b/src/main.css
index dac03ee..b681337 100644
--- a/src/main.css
+++ b/src/main.css
@@ -1,7 +1,7 @@
 @import url('https://fonts.larson.zone/inter/index.css');
 @import url('./components/hero.css');
 @import url('./components/menu.css');
-@import url('./components/musicalInterests.css');
+@import url('./components/interest.css');
 
 * {
   font-family: inherit;
-- 
2.45.2