Merge pull request #4 from alivenotions/component-structure

Component structure

Author: gbhavalkar

package-lock.json

@@ -5,7 +5,6 @@
   "homepage": "https://alivenotions.github.io/pidpod/",
   "scripts": {
     "precommit": "lint-staged",
-    "test:staged": "cross-env CI=true react-scripts test --findRelatedTests",
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "cross-env CI=true react-scripts test",
@@ -15,15 +14,13 @@
     "src/**/*.{js,jsx,json,css}": [
       "prettier --single-quote --no-semi --trailing-comma es5 --write",
       "git add"
-    ],
-    "*.js": [
-      "npm run test:staged -- "
     ]
   },
   "dependencies": {
     "react": "^16.4.1",
     "react-dom": "^16.4.1",
-    "react-scripts": "1.1.4"
+    "react-scripts": "1.1.4",
+    "rss-parser": "^3.4.2"
   },
   "devDependencies": {
     "cross-env": "^5.2.0",

package.json

@@ -0,0 +1,15 @@
+import React, { Component } from 'react'
+
+import Library from './Library/Library'
+
+class App extends Component {
+  render() {
+    return (
+      <div className="App">
+        <Library />
+      </div>
+    )
+  }
+}
+
+export default App

src/App.js

@@ -0,0 +1,23 @@
+import React from 'react'
+
+class Header extends React.Component {
+  addPodcast = event => {
+    event.preventDefault()
+    // FIXME: Create a modal instead of an input type
+    const rssUrl = this.rssUrlField.value
+    this.props.addPodcast(rssUrl)
+  }
+
+  render() {
+    return (
+      <header>
+        <h1>{this.props.heading}</h1>
+        {/* TODO: Abstract this into a button component */}
+        <input type="text" ref={input => (this.rssUrlField = input)} />
+        <button onClick={this.addPodcast}>Add Podcast</button>
+      </header>
+    )
+  }
+}
+
+export default Header

src/components/App.js

@@ -0,0 +1,37 @@
+/* global RSSParser */
+import 'rss-parser/dist/rss-parser.min.js'
+import React from 'react'
+
+import Header from './Header/Header'
+
+class Library extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      podcastFeeds: [],
+      libraryHeading: 'Your Podcasts',
+    }
+    this.rssParser = new RSSParser()
+  }
+
+  addPodcastRSSFeedFromUrl = rssUrl => {
+    this.rssParser
+      .parseURL(rssUrl)
+      .then(feed => {
+        this.setState({ podcastFeeds: [...this.state.podcastFeeds, feed] })
+      })
+      // FIXME: Handle error cases
+      .catch()
+  }
+
+  render() {
+    return (
+      <Header
+        addPodcast={this.addPodcastRSSFeedFromUrl}
+        heading={this.state.libraryHeading}
+      />
+    )
+  }
+}
+
+export default Library

src/components/Library/Header/Header.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
 
-import App from './App'
+import App from './components/App'
 import registerServiceWorker from './registerServiceWorker'
 
 ReactDOM.render(<App />, document.getElementById('root'))