Merge branch 'master' of bitbucket.org:ascribe/onion

js/app.js

@@ -5,17 +5,19 @@ import Router from 'react-router';
 import promise from 'es6-promise';
 
 promise.polyfill();
+import fetch from 'isomorphic-fetch';
+//require('isomorphic-fetch');
 
 import ApiUrls from './constants/api_urls';
 import routes from './routes';
-import fetch from './utils/fetch';
+import requests from './utils/requests';
 
 let headers = {
     'Accept': 'application/json',
     'Content-Type': 'application/json'
 };
 
-fetch.defaults({
+requests.defaults({
     urlMap: ApiUrls,
     http: {
         headers: headers,

js/components/ascribe_forms/form_delete_edition.js

@@ -2,7 +2,7 @@
 
 import React from 'react';
 
-import fetch from '../../utils/fetch';
+import requests from '../../utils/requests';
 import ApiUrls from '../../constants/api_urls';
 import FormMixin from '../../mixins/form_mixin';
 
@@ -11,7 +11,7 @@ let EditionDeleteForm = React.createClass({
     mixins: [FormMixin],
 
     url() {
-        return fetch.prepareUrl(ApiUrls.edition_delete, {edition_id: this.getBitcoinIds().join()});
+        return requests.prepareUrl(ApiUrls.edition_delete, {edition_id: this.getBitcoinIds().join()});
     },
     httpVerb(){
         return 'delete';
@@ -32,4 +32,4 @@ let EditionDeleteForm = React.createClass({
 });
 
 
-export default EditionDeleteForm;
+export default EditionDeleteForm;

js/components/ascribe_forms/form_piece_extradata.js

@@ -2,7 +2,7 @@
 
 import React from 'react';
 
-import fetch from '../../utils/fetch';
+import requests from '../../utils/requests';
 
 import apiUrls from '../../constants/api_urls';
 import FormMixin from '../../mixins/form_mixin';
@@ -14,7 +14,7 @@ let PieceExtraDataForm = React.createClass({
     mixins: [FormMixin],
 
     url() {
-        return fetch.prepareUrl(apiUrls.piece_extradata, {piece_id: this.props.editions[0].bitcoin_id});
+        return requests.prepareUrl(apiUrls.piece_extradata, {piece_id: this.props.editions[0].bitcoin_id});
     },
 
     getFormData() {
@@ -27,16 +27,19 @@ let PieceExtraDataForm = React.createClass({
     },
 
     renderForm() {
-
+        let defaultValue = this.props.editions[0].extra_data[this.props.name] || '';
+        if (defaultValue.length === 0 && ~this.props.editable){
+            return null;
+        }
         return (
             <form role="form" key={this.props.name}>
                 <h5>{this.props.title}</h5>
                 <InputTextAreaToggable
                     ref={this.props.name}
                     className="form-control"
-                    defaultValue={this.props.editions[0].extra_data[this.props.name]}
+                    defaultValue={defaultValue}
                     rows={3}
-                    editable={true}
+                    editable={this.props.editable}
                     required=""
                     onSubmit={this.submit}
                 />
@@ -45,4 +48,4 @@ let PieceExtraDataForm = React.createClass({
     }
 });
 
-export default PieceExtraDataForm;
+export default PieceExtraDataForm;

js/components/ascribe_forms/form_remove_editions_from_collection.js

@@ -2,7 +2,7 @@
 
 import React from 'react';
 
-import fetch from '../../utils/fetch';
+import requests from '../../utils/requests';
 import apiUrls from '../../constants/api_urls';
 import FormMixin from '../../mixins/form_mixin';
 
@@ -11,7 +11,7 @@ let EditionRemoveFromCollectionForm = React.createClass({
     mixins: [FormMixin],
 
     url() {
-        return fetch.prepareUrl(apiUrls.edition_remove_from_collection, {edition_id: this.getBitcoinIds().join()});
+        return requests.prepareUrl(apiUrls.edition_remove_from_collection, {edition_id: this.getBitcoinIds().join()});
     },
     httpVerb(){
         return 'delete';
@@ -32,4 +32,4 @@ let EditionRemoveFromCollectionForm = React.createClass({
 });
 
 
-export default EditionRemoveFromCollectionForm;
+export default EditionRemoveFromCollectionForm;

js/components/ascribe_media/media_player.js

@@ -3,6 +3,7 @@
 import React from 'react';
 import InjectInHeadMixin from '../../mixins/inject_in_head_mixin';
 import Panel from 'react-bootstrap/lib/Panel';
+import AppConstants from '../../constants/application_constants.js';
 
 /**
  * This is the component that implements display-specific functionality.
@@ -43,11 +44,11 @@ let Image = React.createClass({
     mixins: [InjectInHeadMixin],
 
     componentDidMount() {
-        this.inject('http://code.jquery.com/jquery-2.1.4.min.js')
+        this.inject('https://code.jquery.com/jquery-2.1.4.min.js')
             .then(() =>
                 Promise.all([
-                    this.inject('/static/thirdparty/shmui/shmui.css'),
-                    this.inject('/static/thirdparty/shmui/jquery.shmui.js')
+                    this.inject(AppConstants.baseUrl + 'static/thirdparty/shmui/shmui.css'),
+                    this.inject(AppConstants.baseUrl + 'static/thirdparty/shmui/jquery.shmui.js')
                 ]).then(() => { window.jQuery('.shmui-ascribe').shmui(); }));
     },
 
@@ -72,7 +73,7 @@ let Video = React.createClass({
     },
 
     componentDidMount() {
-        this.inject('http://code.jquery.com/jquery-2.1.4.min.js')
+        this.inject('https://code.jquery.com/jquery-2.1.4.min.js')
             .then(() =>
                 Promise.all([
                     this.inject('https://cdnjs.cloudflare.com/ajax/libs/mediaelement/2.17.0/mediaelement-and-player.min.js'),

js/components/edition.js

@@ -2,6 +2,9 @@
 
 import React from 'react';
 
+import UserActions from '../actions/user_actions';
+import UserStore from '../stores/user_store';
+
 import MediaPlayer from './ascribe_media/media_player';
 
 import CollapsibleMixin from 'react-bootstrap/lib/CollapsibleMixin';
@@ -31,6 +34,23 @@ let Edition = React.createClass({
         loadEdition: React.PropTypes.func
     },
 
+    getInitialState() {
+        return UserStore.getState();
+    },
+
+    componentDidMount() {
+        UserStore.listen(this.onChange);
+        UserActions.fetchCurrentUser();
+    },
+
+    componentWillUnmount() {
+        UserStore.unlisten(this.onChange);
+    },
+
+    onChange(state) {
+        this.setState(state);
+    },
+
     render() {
         let thumbnail = this.props.edition.thumbnail;
         let mimetype = this.props.edition.digital_work.mime;
@@ -71,8 +91,10 @@ let Edition = React.createClass({
                         edition={this.props.edition} />
                     <CollapsibleEditionDetails
                         title="Personal Note"
+                        show={this.state.currentUser && true || false}
                         iconName="pencil">
                         <EditionPersonalNote
+                            currentUser={this.state.currentUser}
                             handleSuccess={this.props.loadEdition}
                             edition={this.props.edition}/>
                     </CollapsibleEditionDetails>
@@ -160,7 +182,7 @@ let EditionSummary = React.createClass({
             status = <EditionDetailProperty label="STATUS" value={ this.props.edition.status.join().replace(/_/, ' ') } />;
         }
         let actions = null;
-        if (this.props.edition.request_action){
+        if (this.props.edition.request_action && this.props.edition.request_action.length > 0){
             actions = (
                 <RequestActionForm
                     editions={ [this.props.edition] }
@@ -372,6 +394,7 @@ let EditionFurtherDetails = React.createClass({
     },
 
     render() {
+        let editable = this.props.edition.acl.indexOf('edit') > -1;
         return (
             <Row>
                 <Col md={12} className="ascribe-edition-personal-note">
@@ -379,16 +402,19 @@ let EditionFurtherDetails = React.createClass({
                         name='artist_contact_info'
                         title='Artist Contact Info'
                         handleSuccess={this.showNotification}
+                        editable={editable}
                         editions={[this.props.edition]} />
                     <PieceExtraDataForm
                         name='display_instructions'
                         title='Display Instructions'
                         handleSuccess={this.showNotification}
+                        editable={editable}
                         editions={[this.props.edition]} />
                     <PieceExtraDataForm
                         name='technology_details'
                         title='Technology Details'
                         handleSuccess={this.showNotification}
+                        editable={editable}
                         editions={[this.props.edition]} />
                 </Col>
             </Row>

js/components/header.js

@@ -24,6 +24,7 @@ import { getLangText } from '../utils/lang_utils';
 let Link = Router.Link;
 
 let Header = React.createClass({
+    mixins: [Router.Navigation],
 
     getInitialState() {
         return UserStore.getState();
@@ -43,8 +44,7 @@ let Header = React.createClass({
     },
 
     refreshData(){
-        UserActions.fetchCurrentUser();
-        PieceListActions.fetchPieceList(1, 10);
+        location.reload();
     },
     render() {
         let account = null;

js/fetchers/edition_fetcher.js

@@ -1,6 +1,6 @@
 'use strict';
 
-import fetch from '../utils/fetch';
+import requests from '../utils/requests';
 
 let EditionFetcher = {
     /**
@@ -8,7 +8,7 @@ let EditionFetcher = {
      * If no arg is supplied, load the current user
      */
     fetchOne(editionId) {
-        return fetch.get('edition', {'bitcoin_id': editionId});
+        return requests.get('edition', {'bitcoin_id': editionId});
     }
 };
 

js/fetchers/edition_list_fetcher.js

@@ -1,6 +1,6 @@
 'use strict';
 
-import fetch from '../utils/fetch';
+import requests from '../utils/requests';
 
 import { generateOrderingQueryParams } from '../utils/fetch_api_utils';
 
@@ -11,7 +11,7 @@ let EditionListFetcher = {
      */
     fetch(pieceId, orderBy, orderAsc) {
         let ordering = generateOrderingQueryParams(orderBy, orderAsc);
-        return fetch.get('editions_list', { 'piece_id': pieceId, ordering });
+        return requests.get('editions_list', { 'piece_id': pieceId, ordering });
     }
 };
 

js/fetchers/piece_fetcher.js

@@ -1,6 +1,6 @@
 'use strict';
 
-import fetch from '../utils/fetch';
+import requests from '../utils/requests';
 
 
 let PieceFetcher = {
@@ -9,7 +9,7 @@ let PieceFetcher = {
      * If no arg is supplied, load the current user
      */
     fetchOne() {
-        return fetch.get('piece');
+        return requests.get('piece');
     }
 };
 

js/fetchers/piece_list_fetcher.js

@@ -1,7 +1,7 @@
 'use strict';
 
 import { generateOrderingQueryParams } from '../utils/fetch_api_utils';
-import fetch from '../utils/fetch';
+import requests from '../utils/requests';
 
 
 let PieceListFetcher = {
@@ -11,7 +11,7 @@ let PieceListFetcher = {
      */
     fetch(page, pageSize, search, orderBy, orderAsc) {
         let ordering = generateOrderingQueryParams(orderBy, orderAsc);
-        return fetch.get('pieces_list', { page, pageSize, search, ordering });
+        return requests.get('pieces_list', { page, pageSize, search, ordering });
     }
 };
 

js/fetchers/user_fetcher.js

@@ -1,6 +1,6 @@
 'use strict';
 
-import fetch from '../utils/fetch';
+import requests from '../utils/requests';
 
 
 let UserFetcher = {
@@ -9,7 +9,7 @@ let UserFetcher = {
      * If no arg is supplied, load the current user
      */
     fetchOne() {
-        return fetch.get('user');
+        return requests.get('user');
     }
 };
 

js/mixins/form_mixin.js

@@ -1,6 +1,6 @@
 'use strict';
 
-import fetch from '../utils/fetch';
+import requests from '../utils/requests';
 import React from 'react';
 
 import AlertDismissable from '../components/ascribe_forms/alert';
@@ -29,14 +29,14 @@ export const FormMixin = {
     },
 
     post(e){
-        fetch
+        requests
             .post(this.url(e), { body: this.getFormData() })
             .then(this.handleSuccess)
             .catch(this.handleError);
     },
 
     delete(e){
-        fetch
+        requests
             .delete(this.url(e))
             .then(this.handleSuccess)
             .catch(this.handleError);

js/utils/fetch_api_utils.js

@@ -62,3 +62,11 @@ export function status(response) {
     }
     throw new Error(response.json());
 }
+
+export function getCookie(name) {
+    let value = '; ' + document.cookie;
+    let parts = value.split('; ' + name + '=');
+    if (parts.length === 2) {
+        return parts.pop().split(';').shift();
+    }
+}

js/utils/requests.js

@@ -1,8 +1,6 @@
 'use strict';
 
-import { default as _fetch } from 'isomorphic-fetch';
-
-import { argsToQueryParams } from '../utils/fetch_api_utils';
+import { argsToQueryParams, getCookie } from '../utils/fetch_api_utils';
 
 
 class UrlMapError extends Error {}
@@ -10,7 +8,7 @@ class ServerError extends Error {}
 class APIError extends Error {}
 
 
-class Fetch {
+class Requests {
     _merge(defaults, options) {
         let merged = {};
         for (let key in defaults) {
@@ -78,8 +76,12 @@ class Fetch {
     request(verb, url, options) {
         options = options || {};
         let merged = this._merge(this.httpOptions, options);
+        let csrftoken = getCookie('csrftoken');
+        if (csrftoken) {
+            merged.headers['X-CSRFToken'] = csrftoken;
+        }
         merged.method = verb;
-        return _fetch(url, merged)
+        return fetch(url, merged)
                     .then(this.unpackResponse)
                     .then(JSON.parse)
                     .catch(this.handleFatalError.bind(this))
@@ -117,6 +119,6 @@ class Fetch {
 }
 
 
-let fetch = new Fetch();
+let requests = new Requests();
 
-export default fetch;
+export default requests;

server.js

@@ -12,14 +12,19 @@ app.use(baseUrl + 'static/js', express.static(__dirname + '/build/js'));
 app.use(baseUrl + 'static/img', express.static(__dirname + '/build/img'));
 app.use(baseUrl + 'static/css', express.static(__dirname + '/build/css'));
 app.use(baseUrl + 'static/fonts', express.static(__dirname + '/build/fonts'));
-app.use(baseUrl + 'static/thirdparty/', express.static(__dirname + '/node_modules'));
+app.use(baseUrl + 'static/thirdparty', express.static(__dirname + '/node_modules'));
 
 app.get(/.*/, function(req, res) {
+    console.log('%s %s', req.method, req.path);
     res.sendFile(__dirname + '/build/index.html');
 });
 
+
 if (require.main === module) {
-    app.listen(process.env.PORT || 4000);
+    var port = process.env.PORT || 4000;
+    console.log('Starting Onion server on port', port,
+                'baseUrl is set to', baseUrl);
+    app.listen(port);
 }
 
 module.exports.app = app;