React: convert functions to controls

src/renderer/views/app.js

@@ -49,9 +49,9 @@ module.exports = class App extends React.Component {
 
     var vdom = (
       <div className={'app ' + cls.join(' ')}>
-        {Header(state)}
+        <Header state={state} />
         {getErrorPopover(state)}
-        <div className='content'>{getView(state)}</div>
+        <div key='content' className='content'>{getView(state)}</div>
         {getModal(state)}
       </div>
     )
@@ -65,12 +65,13 @@ function getErrorPopover (state) {
   var recentErrors = state.errors.filter((x) => now - x.time < 5000)
   var hasErrors = recentErrors.length > 0
 
-  var errorElems = recentErrors.map(function (error) {
+  var errorElems = recentErrors.map(function (error, i) {
-    return (<div className='error'>{error.message}</div>)
+    return (<div key={i} className='error'>{error.message}</div>)
   })
   return (
-    <div className={'error-popover ' + (hasErrors ? 'visible' : 'hidden')}>
+    <div key='errors'
-      <div className='title'>Error</div>
+      className={'error-popover ' + (hasErrors ? 'visible' : 'hidden')}>
+      <div key='title' className='title'>Error</div>
       {errorElems}
     </div>
   )
@@ -78,18 +79,18 @@ function getErrorPopover (state) {
 
 function getModal (state) {
   if (!state.modal) return
-  var contents = Modals[state.modal.id](state)
+  var ModalContents = Modals[state.modal.id]
   return (
-    <div className='modal'>
+    <div key='modal' className='modal'>
-      <div className='modal-background'></div>
+      <div key='modal-background' className='modal-background'></div>
-      <div className='modal-content'>
+      <div key='modal-content' className='modal-content'>
-        {contents}
+        <ModalContents state={state} />
       </div>
     </div>
   )
 }
 
 function getView (state) {
-  var url = state.location.url()
+  var View = Views[state.location.url()]
-  return Views[url](state)
+  return (<View state={state} />)
 }

src/renderer/views/create-torrent.js

@@ -1,20 +1,21 @@
-module.exports = CreateTorrentPage
-
 const React = require('react')
 const createTorrent = require('create-torrent')
 const path = require('path')
 const prettyBytes = require('prettier-bytes')
 
 const {dispatch, dispatcher} = require('../lib/dispatcher')
+const CreateTorrentErrorPage = require('./create-torrent-error-page')
 
-function CreateTorrentPage (state) {
+module.exports = class CreateTorrentPage extends React.Component {
+  render () {
+    var state = this.props.state
     var info = state.location.current()
 
     // Preprocess: exclude .DS_Store and other dotfiles
     var files = info.files
       .filter((f) => !f.name.startsWith('.'))
       .map((f) => ({name: f.name, path: f.path, size: f.size}))
-  if (files.length === 0) return CreateTorrentErrorPage()
+    if (files.length === 0) return (<CreateTorrentErrorPage state={state} />)
 
     // First, extract the base folder that the files are all in
     var pathPrefix = info.folderPath
@@ -95,6 +96,7 @@ function CreateTorrentPage (state) {
     )
 
     function handleOK () {
+      // TODO: dcposch use React refs instead
       var announceList = document.querySelector('.torrent-trackers').value
         .split('\n')
         .map((s) => s.trim())
@@ -115,27 +117,7 @@ function CreateTorrentPage (state) {
       }
       dispatch('createTorrent', options)
     }
-}
+  }
-
-function CreateTorrentErrorPage () {
-  return (
-    <div className='create-torrent'>
-      <h2>Create torrent</h2>
-      <p className='torrent-info'>
-        <p>
-          Sorry, you must select at least one file that is not a hidden file.
-        </p>
-        <p>
-          Hidden files, starting with a . character, are not included.
-        </p>
-      </p>
-      <p className='float-right'>
-        <button className='button-flat light' onClick={dispatcher('back')}>
-          Cancel
-        </button>
-      </p>
-    </div>
-  )
 }
 
 // Finds the longest common prefix

src/renderer/views/header.js

@@ -1,39 +1,42 @@
-module.exports = Header
-
 const React = require('react')
 
 const {dispatcher} = require('../lib/dispatcher')
 
-function Header (state) {
+module.exports = class Header extends React.Component {
+  render () {
+    var loc = this.props.state.location
     return (
-    <div className='header'>
+      <div key='header' className='header'>
-      {getTitle()}
+        {this.getTitle()}
         <div className='nav left float-left'>
           <i
-          className={'icon back ' + (state.location.hasBack() ? '' : 'disabled')}
+            className={'icon back ' + (loc.hasBack() ? '' : 'disabled')}
             title='Back'
             onClick={dispatcher('back')}>
             chevron_left
           </i>
           <i
-          className={'icon forward ' + (state.location.hasForward() ? '' : 'disabled')}
+            className={'icon forward ' + (loc.hasForward() ? '' : 'disabled')}
             title='Forward'
             onClick={dispatcher('forward')}>
             chevron_right
           </i>
         </div>
         <div className='nav right float-right'>
-        {getAddButton()}
+          {this.getAddButton()}
         </div>
       </div>
     )
+  }
 
-  function getTitle () {
+  getTitle () {
     if (process.platform !== 'darwin') return null
+    var state = this.props.state
     return (<div className='title ellipsis'>{state.window.title}</div>)
   }
 
-  function getAddButton () {
+  getAddButton () {
+    var state = this.props.state
     if (state.location.url() !== 'home') return null
     return (
       <i

src/renderer/views/open-torrent-address-modal.js

@@ -1,10 +1,10 @@
-module.exports = OpenTorrentAddressModal
-
 const React = require('react')
 
 const {dispatch, dispatcher} = require('../lib/dispatcher')
 
-function OpenTorrentAddressModal (state) {
+module.exports = class OpenTorrentAddressModal extends React.Component {
+  render () {
+    // TODO: dcposch remove janky inline <script>
     return (
       <div className='open-torrent-address-modal'>
         <p><label>Enter torrent address or magnet link</label></p>
@@ -18,6 +18,7 @@ function OpenTorrentAddressModal (state) {
         <script>document.querySelector('#add-torrent-url').focus()</script>
       </div>
     )
+  }
 }
 
 function handleKeyPress (e) {
@@ -26,5 +27,6 @@ function handleKeyPress (e) {
 
 function handleOK () {
   dispatch('exitModal')
+  // TODO: dcposch use React refs instead
   dispatch('addTorrent', document.querySelector('#add-torrent-url').value)
 }

src/renderer/views/player.js

@@ -1,5 +1,3 @@
-module.exports = Player
-
 const React = require('react')
 const Bitfield = require('bitfield')
 const prettyBytes = require('prettier-bytes')
@@ -9,9 +7,11 @@ const TorrentSummary = require('../lib/torrent-summary')
 const {dispatch, dispatcher} = require('../lib/dispatcher')
 
 // Shows a streaming video player. Standard features + Chromecast + Airplay
-function Player (state) {
+module.exports = class Player extends React.Component {
+  render () {
     // Show the video as large as will fit in the window, play immediately
     // If the video is on Chromecast or Airplay, show a title screen instead
+    var state = this.props.state
     var showVideo = state.playing.location === 'local'
     return (
       <div
@@ -22,6 +22,7 @@ function Player (state) {
         {renderPlayerControls(state)}
       </div>
     )
+  }
 }
 
 // Handles volume change by wheel

src/renderer/views/preferences.js

@@ -1,17 +1,18 @@
-module.exports = Preferences
-
 const React = require('react')
 const remote = require('electron').remote
 const dialog = remote.dialog
 
 const {dispatch} = require('../lib/dispatcher')
 
-function Preferences (state) {
+module.exports = class Preferences extends React.Component {
+  render () {
+    var state = this.props.state
     return (
       <div className='preferences'>
         {renderGeneralSection(state)}
       </div>
     )
+  }
 }
 
 function renderGeneralSection (state) {

src/renderer/views/remove-torrent-modal.js

@@ -1,10 +1,10 @@
-module.exports = RemoveTorrentModal
-
 const React = require('react')
 
 const {dispatch, dispatcher} = require('../lib/dispatcher')
 
-function RemoveTorrentModal (state) {
+module.exports = class RemoveTorrentModal extends React.Component {
+  render () {
+    var state = this.props.state
     var message = state.modal.deleteData
       ? 'Are you sure you want to remove this torrent from the list and delete the data file?'
       : 'Are you sure you want to remove this torrent from the list?'
@@ -24,4 +24,5 @@ function RemoveTorrentModal (state) {
       dispatch('deleteTorrent', state.modal.infoHash, state.modal.deleteData)
       dispatch('exitModal')
     }
+  }
 }

src/renderer/views/torrent-list.js

@@ -1,5 +1,3 @@
-module.exports = TorrentList
-
 const React = require('react')
 const prettyBytes = require('prettier-bytes')
 
@@ -7,9 +5,11 @@ const TorrentSummary = require('../lib/torrent-summary')
 const TorrentPlayer = require('../lib/torrent-player')
 const {dispatcher} = require('../lib/dispatcher')
 
-function TorrentList (state) {
+module.exports = class TorrentList extends React.Component {
+  render () {
+    var state = this.props.state
     var torrentRows = state.saved.torrents.map(
-    (torrentSummary) => renderTorrent(torrentSummary)
+      (torrentSummary) => this.renderTorrent(torrentSummary)
     )
 
     return (
@@ -20,8 +20,10 @@ function TorrentList (state) {
         </div>
       </div>
     )
+  }
 
-  function renderTorrent (torrentSummary) {
+  renderTorrent (torrentSummary) {
+    var state = this.props.state
     var infoHash = torrentSummary.infoHash
     var isSelected = infoHash && state.selectedInfoHash === infoHash
 
@@ -46,15 +48,15 @@ function TorrentList (state) {
       <div style={style} className={classes.join(' ')}
         onContextMenu={infoHash && dispatcher('openTorrentContextMenu', infoHash)}
         onClick={infoHash && dispatcher('toggleSelectTorrent', infoHash)}>
-        {renderTorrentMetadata(torrentSummary)}
+        {this.renderTorrentMetadata(torrentSummary)}
-        {infoHash ? renderTorrentButtons(torrentSummary) : ''}
+        {infoHash ? this.renderTorrentButtons(torrentSummary) : null}
-        {isSelected ? renderTorrentDetails(torrentSummary) : ''}
+        {isSelected ? this.renderTorrentDetails(torrentSummary) : null}
       </div>
     )
   }
 
   // Show name, download status, % complete
-  function renderTorrentMetadata (torrentSummary) {
+  renderTorrentMetadata (torrentSummary) {
     var name = torrentSummary.name || 'Loading torrent...'
     var elements = [(
       <div className='name ellipsis'>{name}</div>
@@ -132,7 +134,7 @@ function TorrentList (state) {
 
   // Download button toggles between torrenting (DL/seed) and paused
   // Play button starts streaming the torrent immediately, unpausing if needed
-  function renderTorrentButtons (torrentSummary) {
+  renderTorrentButtons (torrentSummary) {
     var infoHash = torrentSummary.infoHash
 
     var playIcon, playTooltip, playClass
@@ -164,7 +166,7 @@ function TorrentList (state) {
       torrentSummary.files[torrentSummary.defaultPlayFileIndex]
     if (defaultFile && defaultFile.currentTime && !willShowSpinner) {
       var fraction = defaultFile.currentTime / defaultFile.duration
-      positionElem = renderRadialProgressBar(fraction, 'radial-progress-large')
+      positionElem = this.renderRadialProgressBar(fraction, 'radial-progress-large')
       playClass = 'resume-position'
     }
 
@@ -202,7 +204,7 @@ function TorrentList (state) {
   }
 
   // Show files, per-file download status and play buttons, and so on
-  function renderTorrentDetails (torrentSummary) {
+  renderTorrentDetails (torrentSummary) {
     var filesElement
     if (!torrentSummary.files) {
       // We don't know what files this torrent contains
@@ -219,7 +221,7 @@ function TorrentList (state) {
           if (b.file.name < a.file.name) return 1
           return 0
         })
-        .map((object) => renderFileRow(torrentSummary, object.file, object.index))
+        .map((object) => this.renderFileRow(torrentSummary, object.file, object.index))
 
       filesElement = (
         <div className='files'>
@@ -238,7 +240,7 @@ function TorrentList (state) {
   }
 
   // Show a single torrentSummary file in the details view for a single torrent
-  function renderFileRow (torrentSummary, file, index) {
+  renderFileRow (torrentSummary, file, index) {
     // First, find out how much of the file we've downloaded
     // Are we even torrenting it?
     var isSelected = torrentSummary.selections && torrentSummary.selections[index]
@@ -254,7 +256,7 @@ function TorrentList (state) {
     var positionElem
     if (file.currentTime) {
       // Radial progress bar. 0% = start from 0:00, 270% = 3/4 of the way thru
-      positionElem = renderRadialProgressBar(file.currentTime / file.duration)
+      positionElem = this.renderRadialProgressBar(file.currentTime / file.duration)
     }
 
     // Finally, render the file as a table row
@@ -294,9 +296,8 @@ function TorrentList (state) {
       </tr>
     )
   }
-}
 
-function renderRadialProgressBar (fraction, cssClass) {
+  renderRadialProgressBar (fraction, cssClass) {
     var rotation = 360 * fraction
     var transformFill = {transform: 'rotate(' + (rotation / 2) + 'deg)'}
     var transformFix = {transform: 'rotate(' + rotation + 'deg)'}
@@ -315,4 +316,5 @@ function renderRadialProgressBar (fraction, cssClass) {
         <div className='inset'></div>
       </div>
     )
+  }
 }

src/renderer/views/unsupported-media-modal.js

@@ -1,18 +1,18 @@
-module.exports = UnsupportedMediaModal
-
 const React = require('react')
 const electron = require('electron')
 
-const {dispatch, dispatcher} = require('../lib/dispatcher')
+const {dispatcher} = require('../lib/dispatcher')
 
-function UnsupportedMediaModal (state) {
+module.exports = class UnsupportedMediaModal extends React.Component {
+  render () {
+    var state = this.props.state
     var err = state.modal.error
     var message = (err && err.getMessage)
       ? err.getMessage()
       : err
     var actionButton = state.modal.vlcInstalled
-    ? (<button className='button-raised' onClick={onPlay}>Play in VLC</button>)
+      ? (<button className='button-raised' onClick={dispatcher('vlcPlay')}>Play in VLC</button>)
-    : (<button className='button-raised' onClick={onInstall}>Install VLC</button>)
+      : (<button className='button-raised' onClick={() => this.onInstall}>Install VLC</button>)
     var vlcMessage = state.modal.vlcNotFound
       ? 'Couldn\'t run VLC. Please make sure it\'s installed.'
       : ''
@@ -27,13 +27,13 @@ function UnsupportedMediaModal (state) {
         <p className='error-text'>{vlcMessage}</p>
       </div>
     )
+  }
 
-  function onInstall () {
+  onInstall () {
     electron.shell.openExternal('http://www.videolan.org/vlc/')
+
+    // TODO: dcposch send a dispatch rather than modifying state directly
+    var state = this.props.state
     state.modal.vlcInstalled = true // Assume they'll install it successfully
   }
-
-  function onPlay () {
-    dispatch('vlcPlay')
-  }
 }

src/renderer/views/update-available-modal.js

@@ -1,11 +1,11 @@
-module.exports = UpdateAvailableModal
-
 const React = require('react')
 const electron = require('electron')
 
 const {dispatch} = require('../lib/dispatcher')
 
-function UpdateAvailableModal (state) {
+module.exports = class UpdateAvailableModal extends React.Component {
+  render () {
+    var state = this.props.state
     return (
       <div className='update-available-modal'>
         <p><strong>A new version of WebTorrent is available: v{state.modal.version}</strong></p>
@@ -26,4 +26,5 @@ function UpdateAvailableModal (state) {
       dispatch('skipVersion', state.modal.version)
       dispatch('exitModal')
     }
+  }
 }