fixes for new path structure

src/renderer/components/PageHeading.js

@@ -4,14 +4,18 @@ const colors = require('material-ui/styles/colors')
 
 class PageHeading extends React.Component {
   render () {
-    <h2
+    return (
-      style={{
+      <h2
-        color: colors.grey100,
+        style={{
-        fontSize: 20,
+          color: colors.grey100,
-        marginBottom: 15,
+          fontSize: 20,
-        marginTop: 30
+          marginBottom: 15,
-      }}
+          marginTop: 30
-    >{this.props.children}</h2>
+        }}
+      >
+        {this.props.children}
+      </h2>
+    )
   }
 }
 

src/renderer/components/header.js

@@ -2,11 +2,11 @@ const React = require('react')
 
 const {dispatcher} = require('../lib/dispatcher')
 
-module.exports = class Header extends React.Component {
+class Header extends React.Component {
   render () {
     var loc = this.props.state.location
     return (
-      <div key='header' className='header'>
+      <div className='header'>
         {this.getTitle()}
         <div className='nav left float-left'>
           <i
@@ -48,3 +48,5 @@ module.exports = class Header extends React.Component {
     )
   }
 }
+
+module.exports = Header

src/renderer/main.js

@@ -18,7 +18,7 @@ const TorrentPlayer = require('./lib/torrent-player')
 // Required by Material UI -- adds `onTouchTap` event
 require('react-tap-event-plugin')()
 
-const App = require('./components/App')
+const App = require('./pages/App')
 
 const MediaController = require('./controllers/media-controller')
 const UpdateController = require('./controllers/update-controller')

src/renderer/pages/App.js

@@ -4,7 +4,7 @@ const darkBaseTheme = require('material-ui/styles/baseThemes/darkBaseTheme').def
 const getMuiTheme = require('material-ui/styles/getMuiTheme').default
 const MuiThemeProvider = require('material-ui/styles/MuiThemeProvider').default
 
-const Header = require('./header')
+const Header = require('../components/Header')
 
 const Views = {
   'home': require('./TorrentListPage'),
@@ -14,24 +14,19 @@ const Views = {
 }
 
 const Modals = {
-  'open-torrent-address-modal': require('./open-torrent-address-modal'),
+  'open-torrent-address-modal': require('../components/open-torrent-address-modal'),
-  'remove-torrent-modal': require('./remove-torrent-modal'),
+  'remove-torrent-modal': require('../components/remove-torrent-modal'),
-  'update-available-modal': require('./update-available-modal'),
+  'update-available-modal': require('../components/update-available-modal'),
-  'unsupported-media-modal': require('./unsupported-media-modal')
+  'unsupported-media-modal': require('../components/unsupported-media-modal')
 }
 
-var muiTheme = getMuiTheme(Object.assign(darkBaseTheme, {
+const MUI_THEME = getMuiTheme(Object.assign(darkBaseTheme, {
   fontFamily: 'BlinkMacSystemFont, \'Helvetica Neue\', Helvetica, sans-serif'
 }))
 
 class App extends React.Component {
-  constructor (props) {
-    super(props)
-    this.state = props.state
-  }
-
   render () {
-    var state = this.state
+    var state = this.props.state
 
     // Hide player controls while playing video, if the mouse stays still for a while
     // Never hide the controls when:
@@ -54,7 +49,7 @@ class App extends React.Component {
     if (hideControls) cls.push('hide-video-controls')
 
     var vdom = (
-      <MuiThemeProvider muiTheme={muiTheme}>
+      <MuiThemeProvider muiTheme={MUI_THEME}>
         <div className={'app ' + cls.join(' ')}>
           <Header state={state} />
           {this.getErrorPopover()}
@@ -68,8 +63,9 @@ class App extends React.Component {
   }
 
   getErrorPopover () {
+    var state = this.props.state
     var now = new Date().getTime()
-    var recentErrors = this.state.errors.filter((x) => now - x.time < 5000)
+    var recentErrors = state.errors.filter((x) => now - x.time < 5000)
     var hasErrors = recentErrors.length > 0
 
     var errorElems = recentErrors.map(function (error, i) {
@@ -85,7 +81,7 @@ class App extends React.Component {
   }
 
   getModal () {
-    var state = this.state
+    var state = this.props.state
     if (!state.modal) return
     var ModalContents = Modals[state.modal.id]
     return (
@@ -99,7 +95,7 @@ class App extends React.Component {
   }
 
   getView () {
-    var state = this.state
+    var state = this.props.state
     var View = Views[state.location.url()]
     return (<View state={state} />)
   }

src/renderer/pages/CreateTorrentPage.js

@@ -4,9 +4,31 @@ const path = require('path')
 const prettyBytes = require('prettier-bytes')
 
 const {dispatch, dispatcher} = require('../lib/dispatcher')
-const CreateTorrentErrorPage = require('./create-torrent-error-page')
+const CreateTorrentErrorPage = require('../components/create-torrent-error-page')
 
 class CreateTorrentPage extends React.Component {
+  handleSubmit () {
+    var announceList = document.querySelector('.torrent-trackers').value
+      .split('\n')
+      .map((s) => s.trim())
+      .filter((s) => s !== '')
+    var isPrivate = document.querySelector('.torrent-is-private').checked
+    var comment = document.querySelector('.torrent-comment').value.trim()
+    var options = {
+      // We can't let the user choose their own name if we want WebTorrent
+      // to use the files in place rather than creating a new folder.
+      // If we ever want to add support for that:
+      // name: document.querySelector('.torrent-name').value
+      name: defaultName,
+      path: basePath,
+      files: files,
+      announce: announceList,
+      private: isPrivate,
+      comment: comment
+    }
+    dispatch('createTorrent', options)
+  }
+
   render () {
     var state = this.props.state
     var info = state.location.current()
@@ -58,7 +80,7 @@ class CreateTorrentPage extends React.Component {
 
     return (
       <div className='create-torrent'>
-        <h2>Create torrent {defaultName}</h2>
+        <PageHeading>Create torrent {defaultName}</PageHeading>
         <div key='info' className='torrent-info'>
           {torrentInfo}
         </div>
@@ -90,33 +112,10 @@ class CreateTorrentPage extends React.Component {
         </div>
         <div key='buttons' className='float-right'>
           <button key='cancel' className='button-flat light' onClick={dispatcher('cancel')}>Cancel</button>
-          <button key='create' className='button-raised' onClick={handleOK}>Create Torrent</button>
+          <button key='create' className='button-raised' onClick={this.handleSubmit}>Create Torrent</button>
         </div>
       </div>
     )
-
-    function handleOK () {
-      // TODO: dcposch use React refs instead
-      var announceList = document.querySelector('.torrent-trackers').value
-        .split('\n')
-        .map((s) => s.trim())
-        .filter((s) => s !== '')
-      var isPrivate = document.querySelector('.torrent-is-private').checked
-      var comment = document.querySelector('.torrent-comment').value.trim()
-      var options = {
-        // We can't let the user choose their own name if we want WebTorrent
-        // to use the files in place rather than creating a new folder.
-        // If we ever want to add support for that:
-        // name: document.querySelector('.torrent-name').value
-        name: defaultName,
-        path: basePath,
-        files: files,
-        announce: announceList,
-        private: isPrivate,
-        comment: comment
-      }
-      dispatch('createTorrent', options)
-    }
   }
 }
 

src/renderer/pages/PreferencesPage.js

@@ -6,7 +6,7 @@ const colors = require('material-ui/styles/colors')
 const RaisedButton = require('material-ui/RaisedButton').default
 
 const PageHeading = require('../components/PageHeading')
-const PathSelector = require('../componets/PathSelector')
+const PathSelector = require('../components/PathSelector')
 
 const {dispatch} = require('../lib/dispatcher')