Update to React 14 / ReactRouter 1.0

app/classifier/index.cjsx

@@ -4,7 +4,7 @@ testClassificationQuality = require '../lib/test-classification-quality'
 ChangeListener = require '../components/change-listener'
 SubjectAnnotator = require './subject-annotator'
 ClassificationSummary = require './classification-summary'
-{Link} = require '@edpaget/react-router'
+{Link} = require 'react-router'
 tasks = require './tasks'
 {getSessionID} = require '../lib/session'
 preloadSubject = require '../lib/preload-subject'
@@ -230,7 +230,7 @@ Classifier = React.createClass
       <nav className="task-nav">
         {if @props.owner? and @props.project?
           [ownerName, name] = @props.project.slug.split('/')
-          <Link onClick={@props.onClickNext} to="project-talk-subject" params={owner: ownerName, name: name, id: @props.subject.id} className="talk standard-button">Talk</Link>}
+          <Link onClick={@props.onClickNext} to="/projects/#{ownerName}/#{name}/talk/subjects/#{@props.subject.id}" className="talk standard-button">Talk</Link>}
         <button type="button" className="continue major-button" onClick={@props.onClickNext}>Next</button>
         {@renderExpertOptions()}
       </nav>

app/classifier/subject-annotator.cjsx

@@ -52,7 +52,7 @@ module.exports = React.createClass
       @updateSize()
 
   updateSize: ->
-    clientRect = @refs.sizeRect?.getDOMNode().getBoundingClientRect() # Read only
+    clientRect = @refs.sizeRect?.getBoundingClientRect() # Read only
     {left, right, top, bottom, width, height} = clientRect
     left += pageXOffset
     right += pageXOffset

app/classifier/tasks/generic-editor.cjsx

@@ -59,7 +59,7 @@ module.exports = React.createClass
             Allow multiple
           </AutoSave>
         </label>
-        {' '}
+        ' '
         <label key="required" className="pill-button" title={requiredHelp}>
           <AutoSave resource={@props.workflow}>
             <input type="checkbox" name="#{@props.taskPrefix}.required" checked={@props.task.required} onChange={handleChange} />{' '}

app/classifier/tasks/generic.cjsx

@@ -1,5 +1,4 @@
 React = require 'react'
-cloneWithProps = require 'react/lib/cloneWithProps'
 alert = require '../../lib/alert'
 {Markdown} = require 'markdownz'
 Tooltip = require '../../components/tooltip'
@@ -22,7 +21,7 @@ module.exports = React.createClass
       {@props.children}
       <div className="answers">
         {React.Children.map @props.answers, (answer) ->
-          cloneWithProps answer,  className: 'answer'}
+          React.cloneElement answer, {className: "answer #{answer.props.className}"}}
       </div>
 
       {if @props.required

app/collections/collaborators.cjsx

@@ -1,4 +1,5 @@
 React = require 'react'
+ReactDOM = require 'react-dom'
 counterpart = require 'counterpart'
 UserSearch = require '../components/user-search'
 apiClient = require '../api/client'
@@ -76,8 +77,10 @@ RoleCreator = React.createClass
 
   handleSubmit: (e) ->
     e.preventDefault()
-    checkboxes = @getDOMNode().querySelectorAll '[name="role"]'
-    userids = @getDOMNode().querySelector('[name="userids"]')
+    node = ReactDOM.findDOMNode(@)
+
+    checkboxes = node.querySelectorAll '[name="role"]'
+    userids = node.querySelector('[name="userids"]')
     users = userids.value.split(',').map (id) -> parseInt(id)
     roles = for checkbox in checkboxes when checkbox.checked
       checkbox.value

app/collections/create-form.cjsx

@@ -18,8 +18,8 @@ module?.exports = React.createClass
   onSubmit: (e) ->
     e.preventDefault()
 
-    displayName = React.findDOMNode(@refs.name).value
-    notPublic = React.findDOMNode(@refs.private).checked
+    displayName = @refs.name.value
+    notPublic = @refs.private.checked
 
     links = {}
     links.project = +@props.project if @props.project?
@@ -40,7 +40,7 @@ module?.exports = React.createClass
         @props.onSubmit collection
 
   handleNameInputChange: ->
-    @setState collectionNameLength: React.findDOMNode(@refs.name).value.length
+    @setState collectionNameLength: @refs.name.value.length
 
   render: ->
     <div>

app/collections/home.cjsx

@@ -1,5 +1,5 @@
 React = require 'react'
-{Link} = require '@edpaget/react-router'
+{Link} = require 'react-router'
 CollectionCreateForm = require './create-form'
 PromiseRenderer = require '../components/promise-renderer'
 

app/collections/preview.cjsx

@@ -1,5 +1,5 @@
 React = require 'react'
-{Link} = require '@edpaget/react-router'
+{Link} = require 'react-router'
 apiClient = require '../api/client'
 Loading = require '../components/loading-indicator'
 Thumbnail = require '../components/thumbnail'
@@ -27,20 +27,18 @@ module?.exports = React.createClass
     apiClient.type('subjects').get(query).then (subjects) =>
       @setState {subjects}
 
-  collectionParams: ->
+  render: ->
     [owner, name] = @props.collection.slug.split('/')
-    {owner, name}
 
-  render: ->
     <div className="collection-preview">
       <div className="collection">
         <p className="title">
-          <Link to="collection-show" params={@collectionParams()}>
+          <Link to="/collections/#{owner}/#{name}">
             {@props.collection.display_name}
           </Link>
           {' '}by{' '}
           {if @state.owner
-            <Link className="user-profile-link" to="user-profile" params={name: @state.owner.login}>
+            <Link className="user-profile-link" to="/users/#{@state.owner.login}">
               <Avatar user={@state.owner} />{' '}{@state.owner.display_name}
             </Link>}
         </p>

app/collections/settings.cjsx

@@ -1,5 +1,5 @@
 React = require 'react'
-{Navigation} = require '@edpaget/react-router'
+{History} = require 'react-router'
 DisplayNameSlugEditor = require '../partials/display-name-slug-editor'
 apiClient = require '../api/client'
 alert = require '../lib/alert'
@@ -45,7 +45,7 @@ CollectionDeleteDialog = React.createClass
 
 module.exports = React.createClass
   displayName: "CollectionSettings"
-  mixins: [Navigation, SetToggle, CollectionRole]
+  mixins: [History, SetToggle, CollectionRole]
   setterProperty: 'collection'
 
   getDefaultProps: ->
@@ -63,7 +63,7 @@ module.exports = React.createClass
     @props.collection.stopListening 'delete'
 
   redirect: ->
-    @transitionTo 'collections'
+    @history.pushState(null, "/collections")
 
   confirmDelete: ->
     alert (resolve) =>

app/collections/show-list.cjsx

@@ -1,5 +1,4 @@
 React = require 'react'
-Router = require '@edpaget/react-router'
 intersection = require 'lodash.intersection'
 pick = require 'lodash.pick'
 Translate = require 'react-translate-component'
@@ -9,7 +8,7 @@ Paginator = require '../talk/lib/paginator'
 PromiseRenderer = require '../components/promise-renderer'
 SubjectViewer = require '../components/subject-viewer'
 Loading = require '../components/loading-indicator'
-{Link} = require '@edpaget/react-router'
+{Link, History} = require 'react-router'
 
 VALID_COLLECTION_MEMBER_SUBJECTS_PARAMS = ['page', 'page_size']
 
@@ -20,27 +19,29 @@ counterpart.registerTranslations 'en',
 
 module?.exports = React.createClass
   displayName: 'CollectionShowList'
-  mixins: [Router.Navigation, Router.State]
+  mixins: [History]
 
   componentDidMount: ->
-    @fetchCollectionSubjects pick @props.query, VALID_COLLECTION_MEMBER_SUBJECTS_PARAMS
+    @fetchCollectionSubjects pick @props.location.query, VALID_COLLECTION_MEMBER_SUBJECTS_PARAMS
 
   componentWillReceiveProps: (nextProps) ->
-    @fetchCollectionSubjects pick nextProps.query, VALID_COLLECTION_MEMBER_SUBJECTS_PARAMS
+    @fetchCollectionSubjects pick nextProps.location.query, VALID_COLLECTION_MEMBER_SUBJECTS_PARAMS
 
   fetchCollectionSubjects: (query = null) ->
-    query ?= @props.query
+    query ?= @props.location.query
 
     defaultQuery =
       page: 1
       page_size: 12
 
-    query = Object.assign defaultQuery, query
+    query = Object.assign {}, defaultQuery, query
     return @props.collection.get 'subjects', query
 
   onPageChange: (page) ->
-    nextQuery = Object.assign @props.query, { page }
-    @transitionTo @getPath(), @props.params, nextQuery
+    nextQuery = Object.assign {}, @props.location.query, { page }
+    currentPath = @props.location.pathname
+
+    @history.pushState(null, @history.createHref(currentPath, nextQuery))
 
   handleDeleteSubject: (subject) ->
     @props.collection.removeLink 'subjects', [subject.id.toString()]

app/collections/show.cjsx

@@ -4,7 +4,7 @@ apiClient = require '../api/client'
 Paginator = require '../talk/lib/paginator'
 SubjectViewer = require '../components/subject-viewer'
 PromiseRenderer = require '../components/promise-renderer'
-{Link, RouteHandler} = require '@edpaget/react-router'
+{IndexLink, Link} = require 'react-router'
 Translate = require 'react-translate-component'
 counterpart = require 'counterpart'
 Avatar = require '../partials/avatar'
@@ -40,23 +40,23 @@ CollectionPage = React.createClass
 
       <div className="collections-page">
         <nav className="collection-nav tabbed-content-tabs">
-          <Link to="collection-show-list" params={params} className="tabbed-content-tab">
+          <IndexLink to="/collections/#{ownerName}/#{name}" activeClassName="active" className="tabbed-content-tab">
             <Avatar user={owner} />
             {@props.collection.display_name}
-          </Link>
+          </IndexLink>
 
           {if isOwner
-            <Link to="collection-settings" params={params} className="tabbed-content-tab">
+            <Link to="/collections/#{ownerName}/#{name}/settings" activeClassName="active" className="tabbed-content-tab">
               <Translate content="collectionPage.settings" />
             </Link>}
 
           {if isOwner
-            <Link to="collection-collaborators" params={params} className="tabbed-content-tab">
+            <Link to="/collections/#{ownerName}/#{name}/collaborators" params={params} activeClassName="active" className="tabbed-content-tab">
               <Translate content="collectionPage.collaborators" />
             </Link>}
         </nav>
-        <div className="collection-container">
-          <RouteHandler user={@props.user} collection={@props.collection} roles={@props.roles} />
+        <div className="collection-container talk">
+          {React.cloneElement @props.children, {user: @props.user, collection: @props.collection, roles: @props.roles}}
         </div>
       </div>
     }</PromiseRenderer>
@@ -107,7 +107,7 @@ module.exports = React.createClass
         @setState loading: false
 
   render: ->
-    <div className="cotent-container">
+    <div className="content-container">
       {if @state.collection
         <CollectionPage {...@props} collection={@state.collection} roles={@state.roles} />}
 

app/components/details.cjsx

@@ -28,7 +28,7 @@ module.exports = React.createClass
       @toggle()
 
   handleSummaryKeyPress: (e) ->
-    if document.activeElement is @refs.summary.getDOMNode()
+    if document.activeElement is @refs.summary
       if e.which in [ENTER_KEY, SPACE_KEY]
         e.preventDefault()
         @toggle()

app/components/dialog.cjsx

@@ -1,4 +1,5 @@
 React = require 'react'
+ReactDOM = require 'react-dom'
 
 FOCUSABLES = "a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable]"
 
@@ -32,7 +33,7 @@ module.exports = React.createClass
 
       when TAB_KEY
         {shiftKey} = e # Save this; React recycles the event object.
-        focusables = @getDOMNode().querySelectorAll FOCUSABLES
+        focusables = ReactDOM.findDOMNode(@).querySelectorAll FOCUSABLES
         if shiftKey and document.activeElement == focusables[0]
           focusables[focusables.length - 1]?.focus()
           e.preventDefault()

app/components/image-selector.cjsx

@@ -1,4 +1,5 @@
 React = require 'react'
+ReactDOM = require 'react-dom'
 LoadingIndicator = require './loading-indicator'
 toBlob = require 'data-uri-to-blob' if window.navigator?
 
@@ -71,7 +72,7 @@ module.exports = React.createClass
       img.style.display = 'none'
 
     @setState rootWidth: NaN, =>
-      @setState rootWidth: @getDOMNode().clientWidth
+      @setState rootWidth: ReactDOM.findDOMNode(@).clientWidth
 
       for img in imageSelectorPreviews
         img.style.display = img.dataset.displayWas

app/components/owned-card-list.cjsx

@@ -5,7 +5,7 @@ Translate = require 'react-translate-component'
 apiClient = require '../api/client'
 PromiseRenderer = require '../components/promise-renderer'
 OwnedCard = require '../partials/owned-card'
-{Link} = require '@edpaget/react-router'
+{Link} = require 'react-router'
 
 module.exports = React.createClass
   displayName: 'OwnedCardList'
@@ -65,7 +65,7 @@ module.exports = React.createClass
                 {if meta
                   <nav className="pagination">
                     {for page in [1..meta.page_count]
-                      <Link to={@props.linkTo} query={{page}} key={page} className="pill-button" style={border: "2px solid" if page is 1 and window.location.search is ""}>{page}</Link>}
+                      <Link to={@props.linkTo} activeClassName="active" query={{page}} key={page} className="pill-button" style={border: "2px solid" if page is 1 and window.location.search is ""}>{page}</Link>}
                   </nav>}
               </nav>
             </div>

app/components/pass-history-context.cjsx

@@ -0,0 +1,17 @@
+React = require 'react'
+{History} = require 'react-router'
+
+module.exports = React.createClass
+  mixins: [History]
+
+  childContextTypes:
+    history: React.PropTypes.oneOfType [
+      React.PropTypes.array,
+      React.PropTypes.object
+      ]
+
+  getChildContext: ->
+    @props.context
+
+  render: ->
+    @props.children

app/components/project-icon.cjsx

@@ -1,5 +1,5 @@
 React = require 'react'
-{Link} = require '@edpaget/react-router'
+{Link} = require 'react-router'
 
 module.exports = React.createClass
   displayName: 'ProjectIcon'
@@ -47,6 +47,6 @@ module.exports = React.createClass
         <a href={@props.project.redirect} className="stats-project-icon">{content}</a>
       else
         [owner, name] = @props.project.slug.split '/'
-        <Link to="project-home" params={owner: owner, name: name} className="stats-project-icon">{content}</Link>
+        <Link to="/projects/#{owner}/#{name}" className="stats-project-icon">{content}</Link>
     else
       <span className="stats-project-icon">{content}</span>

app/components/subject-viewer.cjsx

@@ -153,11 +153,13 @@ module.exports = React.createClass
       <header className="form-label" style={textAlign: 'center'}>Subject metadata</header>
       <hr />
       <table className="standard-table">
-        {for key, value of @props.subject?.metadata when key.charAt(0) isnt '#' and key[...2] isnt '//'
-          <tr key={key}>
-            <th>{key}</th>
-            <Markdown tag="td" content={value} inline />
-          </tr>}
+        <tbody>
+          {for key, value of @props.subject?.metadata when key.charAt(0) isnt '#' and key[...2] isnt '//'
+            <tr key={key}>
+              <th>{key}</th>
+              <Markdown tag="td" content={value} inline />
+            </tr>}
+        </tbody>
       </table>
     </div>
 

app/components/svg-image.cjsx

@@ -20,7 +20,7 @@ module.exports = React.createClass
   # This fixes weird behavior observed in Mac Safari 7
   # where the image doesn't get a size on render.
   fixWeirdSize: ->
-    image = React.findDOMNode @refs.image
+    image = @refs.image
 
     if @props.width? and image.width isnt @props.width
       image.setAttribute 'width', @props.width
@@ -29,5 +29,5 @@ module.exports = React.createClass
       image.setAttribute 'height', @props.height
 
   setHref: ->
-    image = React.findDOMNode @refs.image
+    image = @refs.image
     image.setAttributeNS 'http://www.w3.org/1999/xlink', 'href', @props.src