fix PR issues

js/components/ascribe_detail/further_details_fileuploader.js

@@ -32,7 +32,7 @@ let FurtherDetailsFileuploader = React.createClass({
     render() {
         // Essentially there a three cases important to the fileuploader
         //
-        // 1. there is no other_data => do not show the fileuploader at all
+        // 1. there is no other_data => do not show the fileuploader at all (where otherData is now an array)
         // 2. there is other_data, but user has no edit rights => show fileuploader but without action buttons
         // 3. both other_data and editable are defined or true => show fileuploader with all action buttons
         if (!this.props.editable && (!this.props.otherData || this.props.otherData.length === 0)) {

js/components/ascribe_forms/input_date.js

@@ -18,6 +18,9 @@ let InputDate = React.createClass({
         };
     },
 
+    // InputDate needs to support setting a defaultValue from outside.
+    // If this is the case, we need to call handleChange to propagate this
+    // to the outer Property
     componentWillReceiveProps(nextProps) {
         if(!this.state.value && !this.state.value_moment && nextProps.defaultValue) {
             this.handleChange(this.props.defaultValue);

js/components/ascribe_slides_container/slides_container.js

@@ -167,6 +167,8 @@ let SlidesContainer = React.createClass({
         }
     },
 
+    // breadcrumbs are defined as attributes of the slides.
+    // To extract them we have to read the DOM element's attributes
     extractBreadcrumbs() {
         let breadcrumbs = [];
 
@@ -179,6 +181,10 @@ let SlidesContainer = React.createClass({
         return breadcrumbs;
     },
 
+    // If startFrom is defined as a URL parameter, this can manipulate
+    // the number of children that are injected into the DOM.
+    // Therefore React.Children.count does not work anymore and we
+    // need to implement our own method.
     customChildrenCount() {
         let count = 0;
         React.Children.forEach(this.props.children, (child, i) => {

js/components/ascribe_slides_container/slides_container_breadcrumbs.js

@@ -2,6 +2,8 @@
 
 import React from 'react';
 
+import classnames from 'classnames';
+
 import Col from 'react-bootstrap/lib/Col';
 
 
@@ -59,9 +61,14 @@ let SlidesContainerBreadcrumbs = React.createClass({
                                     sm={columnWidth}
                                     key={i}>
                                     <div className="ascribe-breadcrumb">
-                                        <a className={this.props.slideNum === i ? 'active' : ''}>
+                                        <a className={classnames({'active': this.props.slideNum === i})}>
                                             {breadcrumb}
-                                        <span className={i === numSlides - 1 ? 'invisible' : '' + 'pull-right ' + glyphiconClassName}>
+                                        <span
+                                            className={classnames({
+                                                'invisible': i === numSlides - 1,
+                                                'pull-right': true,
+                                                [glyphiconClassName]: true
+                                            })}>
                                         </span>
                                         </a>
                                     </div>

js/components/whitelabel/prize/components/ascribe_detail/prize_piece_container.js

@@ -63,6 +63,8 @@ let PieceContainer = React.createClass({
         UserStore.unlisten(this.onChange);
     },
 
+    // This is done to update the container when the user clicks on the prev or next
+    // button to update the URL parameter (and therefore to switch pieces)
     componentWillReceiveProps(nextProps) {
         if(this.props.params.pieceId !== nextProps.params.pieceId) {
             PieceActions.updatePiece({});
@@ -123,19 +125,20 @@ let NavigationHeader = React.createClass({
     },
 
     render() {
-        if (this.props.currentUser && this.props.piece.navigation) {
+        if (this.props.currentUser && this.props.currentUser.email && this.props.piece && this.props.piece.navigation) {
             let nav = this.props.piece.navigation;
+
             return (
                 <div style={{marginBottom: '1em'}}>
                     <div className="row no-margin">
                         <Link className="disable-select" to='piece' params={{pieceId: nav.prev_index ? nav.prev_index : this.props.piece.id}}>
                             <span className="glyphicon glyphicon-chevron-left pull-left link-ascribe" aria-hidden="true">
-                            Previous
+                            {getLangText('Previous')}
                             </span>
                         </Link>
                         <Link className="disable-select" to='piece' params={{pieceId: nav.next_index ? nav.next_index : this.props.piece.id}}>
                             <span className="pull-right link-ascribe">
-                                Next
+                                {getLangText('Next')}
                                 <span className="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                             </span>
                         </Link>
@@ -177,6 +180,10 @@ let PrizePieceRatings = React.createClass({
         PieceListStore.unlisten(this.onChange);
     },
 
+    // The StarRating component does not have a property that lets us set
+    // a default value at initialization. Since the ratingCache would otherwise on
+    // every mouseover be overridden, we need to set it ourselves initially to deal
+    // with the problem.
     onChange(state) {
         this.setState(state);
         if (this.refs.rating) {
@@ -196,6 +203,7 @@ let PrizePieceRatings = React.createClass({
                                             this.state.orderBy, this.state.orderAsc, this.state.filterBy)
         );
     },
+
     render(){
         if (this.props.currentUser && this.props.currentUser.is_jury) {
             return (
@@ -234,7 +242,7 @@ let PersonalNote = React.createClass({
     },
 
     render() {
-        if (this.props.currentUser.username && true || false) {
+        if (this.props.currentUser && this.props.currentUser.username) {
             return (
                 <Form
                     url={ApiUrls.notes}
@@ -246,7 +254,7 @@ let PersonalNote = React.createClass({
                         <InputTextAreaToggable
                             rows={1}
                             editable={true}
-                            defaultValue={this.props.piece.note_from_user ? this.props.piece.note_from_user.note : null}
+                            defaultValue={this.props.piece && this.props.piece.note_from_user ? this.props.piece.note_from_user.note : null}
                             placeholder={getLangText('Enter your comments...')}/>
                     </Property>
                     <Property hidden={true} name='piece_id'>
@@ -267,12 +275,13 @@ let PrizePieceDetails = React.createClass({
     },
 
     render() {
-        if (this.props.piece.prize
+        if (this.props.piece
+            && this.props.piece.prize
             && this.props.piece.prize.name
             && Object.keys(this.props.piece.extra_data).length !== 0){
             return (
                 <CollapsibleParagraph
-                    title="Prize Details"
+                    title={getLangText('Prize Details')}
                     show={true}
                     defaultExpanded={true}>
                     <Form ref='form'>

js/components/whitelabel/prize/components/prize_landing.js

@@ -13,7 +13,7 @@ import UserStore from '../../../../stores/user_store';
 import UserActions from '../../../../actions/user_actions';
 
 import { mergeOptions } from '../../../../utils/general_utils';
-
+import { getLangText } from '../../../../utils/lang_utils';
 
 let Landing = React.createClass({
 
@@ -53,14 +53,14 @@ let Landing = React.createClass({
             return (
                 <ButtonGroup className="enter" bsSize="large" vertical>
                     <ButtonLink to="signup">
-                        Sign up to submit
+                        {getLangText('Sign up to submit')}
                     </ButtonLink>
 
                     <p>
-                        or, already an ascribe user?
+                        {getLangText('or, already an ascribe user?')}
                     </p>
                     <ButtonLink to="login">
-                        Log in to submit
+                        {getLangText('Log in to submit')}
                     </ButtonLink>
                 </ButtonGroup>
             );
@@ -68,14 +68,14 @@ let Landing = React.createClass({
         return (
             <ButtonGroup className="enter" bsSize="large" vertical>
                 <a className="btn btn-default" href="https://www.ascribe.io/app/signup">
-                    Sign up to ascribe
+                    {getLangText('Sign up to ascribe')}
                 </a>
 
                 <p>
-                    or, already an ascribe user?
+                    {getLangText('or, already an ascribe user?')}
                 </p>
                 <ButtonLink to="login">
-                    Log in
+                    {getLangText('Log in')}
                 </ButtonLink>
             </ButtonGroup>
         );
@@ -85,13 +85,13 @@ let Landing = React.createClass({
         if (this.state.prize && this.state.prize.active){
             return (
                 <p>
-                    This is the submission page for Sluice_screens ↄc Prize 2015.
+                    {getLangText('This is the submission page for Sluice_screens ↄc Prize 2015.')}
                 </p>
             );
         }
         return (
             <p>
-                Submissions for Sluice_screens ↄc Prize 2015 are now closed.
+                {getLangText('Submissions for Sluice_screens ↄc Prize 2015 are now closed.')}
             </p>
         );
     },
@@ -100,7 +100,9 @@ let Landing = React.createClass({
             <div className="container">
                 <div className="row">
                     <div className="col-xs-12 wp-landing-wrapper">
-                        <h1>Sluice_screens ↄc Prize 2015</h1>
+                        <h1>
+                            {getLangText('Sluice_screens ↄc Prize 2015')}
+                        </h1>
                         {this.getTitle()}
                         {this.getButtons()}
                     </div>

js/components/whitelabel/prize/components/prize_login_container.js

@@ -5,6 +5,8 @@ import Router from 'react-router';
 
 import LoginForm from '../../../ascribe_forms/form_login';
 
+import { getLangText } from '../../../../utils/lang_utils';
+
 let Link = Router.Link;
 
 
@@ -12,10 +14,16 @@ let LoginContainer = React.createClass({
     render() {
         return (
             <div className="ascribe-login-wrapper">
-                <LoginForm headerMessage="Log in with ascribe" />
+                <LoginForm
-                <div className="ascribe-login-text">
+                    headerMessage={getLangText('Log in with ascribe')} />
-                    I'm not a user <Link to="signup">Sign up...</Link><br/>
+                <div
-                    I forgot my password <Link to="password_reset">Rescue me...</Link>
+                    className="ascribe-login-text">
+                    {getLangText('I\'m not a user') + ' '}
+                    <Link to="signup">{getLangText('Sign up...')}</Link>
+                    <br/>
+
+                    {getLangText('I forgot my password') + ' '}
+                    <Link to="password_reset">{getLangText('Rescue me...')}</Link>
                 </div>
             </div>
         );

js/components/whitelabel/prize/components/prize_piece_list.js

@@ -13,6 +13,7 @@ import ButtonLink from 'react-router-bootstrap/lib/ButtonLink';
 import AccordionListItemPrize from './ascribe_accordion_list/accordion_list_item_prize';
 
 import { mergeOptions } from '../../../../utils/general_utils';
+import { getLangText } from '../../../../utils/lang_utils';
 
 let PrizePieceList = React.createClass({
     getInitialState() {
@@ -37,11 +38,12 @@ let PrizePieceList = React.createClass({
     onChange(state) {
         this.setState(state);
     },
+
     getButtonSubmit() {
         if (this.state.prize && this.state.prize.active){
             return (
                 <ButtonLink to="register_piece">
-                    Submit to prize
+                    {getLangText('Submit to prize')}
                 </ButtonLink>
             );
         }

js/components/whitelabel/prize/components/prize_register_piece.js

@@ -32,7 +32,7 @@ let PrizeRegisterPiece = React.createClass({
     },
 
     render() {
-        if (this.state.prize.active){
+        if(this.state.prize && this.state.prize.active){
             return (
             <RegisterPiece
                 enableLocalHashing={false}
@@ -77,7 +77,7 @@ let PrizeRegisterPiece = React.createClass({
             return (
                 <div className='row'>
                     <div style={{textAlign: 'center'}}>
-                        The prize is no longer active
+                        {getLangText('The prize is no longer active')}
                     </div>
                 </div>
                 );

js/components/whitelabel/prize/components/prize_settings_container.js

@@ -142,25 +142,27 @@ let PrizeJurySettings = React.createClass({
         let email = event.target.getAttribute('data-id');
         PrizeJuryActions.activateJury(email).then((response) => {
                 PrizeJuryActions.fetchJury();
-                let notification = new GlobalNotificationModel(response.notification, 'success', 5000);
+                this.displayNotification(response);
-                GlobalNotificationActions.appendGlobalNotification(notification);
             });
     },
 
     handleRevoke(event) {
         let email = event.target.getAttribute('data-id');
-        PrizeJuryActions.revokeJury(email).then((response) => {
+        PrizeJuryActions
-                let notification = new GlobalNotificationModel(response.notification, 'success', 5000);
+            .revokeJury(email)
-                GlobalNotificationActions.appendGlobalNotification(notification);
+            .then(this.displayNotification);
-            });
     },
 
     handleResend(event) {
         let email = event.target.getAttribute('data-id');
-        PrizeJuryActions.resendJuryInvitation(email).then((response) => {
+        PrizeJuryActions
-                let notification = new GlobalNotificationModel(response.notification, 'success', 5000);
+            .resendJuryInvitation(email)
-                GlobalNotificationActions.appendGlobalNotification(notification);
+            .then(this.displayNotification);
-            });
+    },
+
+    displayNotification(response) {
+        let notification = new GlobalNotificationModel(response.notification, 'success', 5000);
+        GlobalNotificationActions.appendGlobalNotification(notification);
     },
 
     getMembersPending() {
@@ -254,6 +256,7 @@ let PrizeJurySettings = React.createClass({
 
         }, this);
     },
+
     getMembers() {
         let content = (
             <div style={{textAlign: 'center'}}>
@@ -264,19 +267,19 @@ let PrizeJurySettings = React.createClass({
             content = (
                 <div style={{padding: '1em'}}>
                     <CollapsibleParagraph
-                        title={'Active Jury Members'}
+                        title={getLangText('Active Jury Members')}
                         show={true}
                         defaultExpanded={true}>
                         {this.getMembersActive()}
                     </CollapsibleParagraph>
                     <CollapsibleParagraph
-                        title={'Pending Jury Invitations'}
+                        title={getLangText('Pending Jury Invitations')}
                         show={true}
                         defaultExpanded={true}>
                         {this.getMembersPending()}
                     </CollapsibleParagraph>
                     <CollapsibleParagraph
-                        title={'Deactivated Jury Members'}
+                        title={getLangText('Deactivated Jury Members')}
                         show={true}
                         defaultExpanded={false}>
                         {this.getMembersInactive()}
@@ -292,9 +295,11 @@ let PrizeJurySettings = React.createClass({
                     url={ApiUrls.jurys}
                     handleSuccess={this.handleCreateSuccess}
                     ref='form'
-                    buttonSubmitText='INVITE'>
+                    buttonSubmitText={getLangText('INVITE')}>
                     <div className="ascribe-form-header">
-                        <h4 style={{margin: '30px 0px 10px 10px'}}>Jury Members</h4>
+                        <h4 style={{margin: '30px 0px 10px 10px'}}>
+                            {getLangText('Jury Members')}
+                        </h4>
                     </div>
                     <Property
                         name='email'

js/components/whitelabel/prize/components/prize_signup_container.js

@@ -3,6 +3,7 @@
 import React from 'react';
 import SignupForm from '../../../ascribe_forms/form_signup';
 
+import { getLangText } from '../../../../utils/lang_utils';
 
 let SignupContainer = React.createClass({
     getInitialState() {
@@ -32,8 +33,8 @@ let SignupContainer = React.createClass({
             return (
                 <div className="ascribe-login-wrapper">
                     <SignupForm
-                        headerMessage="Create account for submission"
+                        headerMessage={getLangText('Create account for submission')}
-                        submitMessage="Sign up"
+                        submitMessage={getLangText('Sign up')}
                         handleSuccess={this.handleSuccess} />
                 </div>
             );

js/components/whitelabel/wallet/components/cyland/ascribe_buttons/cyland_submit_button.js

@@ -39,6 +39,11 @@ let CylandSubmitButton = React.createClass({
         let piece = this.props.piece;
         let startFrom = 1;
 
+        // In the Cyland register page a user has to complete three steps.
+        // Since every one of those steps is atomic a user should always be able to continue
+        // where he left of.
+        // This is why we start the process form slide 1/2 if the user has already finished
+        // it in another session.
         if(piece && piece.extra_data && Object.keys(piece.extra_data).length > 0) {
             startFrom = 2;
         }

js/components/whitelabel/wallet/components/cyland/ascribe_detail/cyland_piece_container.js

@@ -114,10 +114,10 @@ let CylandPieceDetails = React.createClass({
     },
 
     render() {
-        if (Object.keys(this.props.piece.extra_data).length !== 0){
+        if (this.props.piece && Object.keys(this.props.piece.extra_data).length !== 0){
             return (
                 <CollapsibleParagraph
-                    title="Further Details"
+                    title={getLangText('Further Details')}
                     show={true}
                     defaultExpanded={true}>
                     <Form ref='form'>

js/components/whitelabel/wallet/components/cyland/ascribe_forms/cyland_additional_data_form.js

@@ -95,7 +95,9 @@ let CylandAdditionalDataForm = React.createClass({
                         </div>
                     }>
                     <div className="ascribe-form-header">
-                        <h3>Provide supporting materials</h3>
+                        <h3>
+                            {getLangText('Provide supporting materials')}
+                        </h3>
                     </div>
                     <Property
                         name='artist_bio'

js/components/whitelabel/wallet/components/cyland/cyland_landing.js

@@ -8,13 +8,12 @@ import WhitelabelActions from '../../../../../actions/whitelabel_actions';
 import WhitelabelStore from '../../../../../stores/whitelabel_store';
 
 import ButtonLink from 'react-router-bootstrap/lib/ButtonLink';
-import ButtonGroup from 'react-bootstrap/lib/ButtonGroup';
 
 import UserStore from '../../../../../stores/user_store';
 import UserActions from '../../../../../actions/user_actions';
 
 import { mergeOptions } from '../../../../../utils/general_utils';
-
+import { getLangText } from '../../../../../utils/lang_utils';
 
 let CylandLanding = React.createClass({
 
@@ -57,7 +56,7 @@ let CylandLanding = React.createClass({
                         <div className="row" style={{border: '1px solid #CCC', padding: '2em'}}>
                             <img src={this.state.whitelabel.logo} width="400px"/>
                             <div style={{marginTop: '1em'}}>
-                                Submissions to Cyland Archive are powered by
+                                {getLangText('Submissions to Cyland Archive are powered by')}
                                 <span>
                                     <span> ascribe </span>
                                     <span className="glyph-ascribe-spool-chunked ascribe-color"></span>
@@ -67,18 +66,18 @@ let CylandLanding = React.createClass({
                         <div className="row" style={{border: '1px solid #CCC', borderTop: 'none', padding: '2em'}}>
                             <div className="col-sm-6">
                                 <p>
-                                    Existing ascribe user?
+                                    {getLangText('Existing ascribe user?')}
                                 </p>
                                 <ButtonLink to="login">
-                                    Log in
+                                    {getLangText('Log in')}
                                 </ButtonLink>
                             </div>
                             <div className="col-sm-6">
                                 <p>
-                                    Do you need an account?
+                                    {getLangText('Do you need an account?')}
                                 </p>
                                 <ButtonLink to="signup">
-                                    Sign up
+                                    {getLangText('Sign up')}
                                 </ButtonLink>
                             </div>
                         </div>

js/components/whitelabel/wallet/components/cyland/cyland_register_piece.js

@@ -68,6 +68,10 @@ let CylandRegisterPiece = React.createClass({
 
         let queryParams = this.getQuery();
 
+        // Since every step of this register process is atomic,
+        // we may need to enter the process at step 1 or 2.
+        // If this is the case, we'll need the piece number to complete submission.
+        // It is encoded in the URL as a queryParam and we're checking for it here.
         if(queryParams && 'piece_id' in queryParams) {
             PieceActions.fetchOne(queryParams.piece_id);
         }
@@ -176,7 +180,7 @@ let CylandRegisterPiece = React.createClass({
                     pending: 'glyphicon glyphicon-chevron-right',
                     completed: 'glyphicon glyphicon-lock'
                 }}>
-                <div data-slide-title="Register work">
+                <div data-slide-title={getLangText('Register work')}>
                     <Row className="no-margin">
                         <Col xs={12} sm={10} md={8} smOffset={1} mdOffset={2}>
                             <RegisterPieceForm
@@ -190,7 +194,7 @@ let CylandRegisterPiece = React.createClass({
                         </Col>
                     </Row>
                 </div>
-                <div data-slide-title="Additional details">
+                <div data-slide-title={getLangText('Additional details')}>
                     <Row className="no-margin">
                         <Col xs={12} sm={10} md={8} smOffset={1} mdOffset={2}>
                             <CylandAdditionalDataForm
@@ -200,11 +204,11 @@ let CylandRegisterPiece = React.createClass({
                         </Col>
                     </Row>
                 </div>
-                <div data-slide-title="Loan">
+                <div data-slide-title={getLangText('Loan')}>
                     <Row className="no-margin">
                         <Col xs={12} sm={10} md={8} smOffset={1} mdOffset={2}>
                             <LoanForm
-                                loanHeading="Loan to Cyland archive"
+                                loanHeading={getLangText('Loan to Cyland archive')}
                                 message={getAclFormMessage('acl_loan', '\"' + this.state.piece.title + '\"', this.state.currentUser.username)}
                                 id={{piece_id: this.state.piece.id}}
                                 url={ApiUrls.ownership_loans_pieces}

js/components/whitelabel/wallet/components/ikonotv/ascribe_accordion_list/ikonotv_accordion_list_item.js

@@ -75,18 +75,22 @@ let IkonotvAccordionListItem = React.createClass({
     },
 
     render() {
-        return (
+        if(this.props.content) {
-            <AccordionListItemPiece
+            return (
-                className={this.props.className}
+                <AccordionListItemPiece
-                piece={this.props.content}
+                    className={this.props.className}
-                subsubheading={
+                    piece={this.props.content}
-                    <div className="pull-left">
+                    subsubheading={
-                        <span>{this.props.content.date_created.split('-')[0]}</span>
+                        <div className="pull-left">
-                    </div>}
+                            <span>{this.props.content.date_created.split('-')[0]}</span>
-                buttons={this.getSubmitButtons()}>
+                        </div>}
-                {this.props.children}
+                    buttons={this.getSubmitButtons()}>
-            </AccordionListItemPiece>
+                    {this.props.children}
-        );
+                </AccordionListItemPiece>
+            );
+        } else {
+            return null;
+        }
     }
 });
 

js/components/whitelabel/wallet/components/ikonotv/ascribe_forms/ikonotv_contract_form.js

@@ -19,6 +19,10 @@ import { mergeOptions } from '../../../../../../utils/general_utils';
 
 
 let ContractForm = React.createClass({
+     propTypes: {
+        handleSuccess: React.PropTypes.func
+     },
+
      getInitialState() {
         return mergeOptions(
             LoanContractListStore.getState(),
@@ -92,7 +96,7 @@ let ContractForm = React.createClass({
                 buttons={<button
                             type="submit"
                             className="btn ascribe-btn ascribe-btn-login">
-                            SEND LOAN REQUEST
+                            {getLangText('SEND LOAN REQUEST')}
                         </button>}
                 spinner={
                     <span className="btn ascribe-btn ascribe-btn-login ascribe-btn-login-spinner">
@@ -100,14 +104,14 @@ let ContractForm = React.createClass({
                     </span>
                     }>
                 <div className="ascribe-form-header">
-                    <h3>CONTRACT FORM</h3>
+                    <h3>{getLangText('CONTRACT FORM')}</h3>
                 </div>
                 <Property
                     name='artist_name'
                     label={getLangText('Artist Name')}>
                     <input
                         type="text"
-                        placeholder="(e.g. Andy Warhol)"
+                        placeholder={getLangText('(e.g. Andy Warhol)')}
                         required/>
                 </Property>
                 <Property
@@ -115,7 +119,7 @@ let ContractForm = React.createClass({
                     label={getLangText('Artist Email')}>
                     <input
                         type="email"
-                        placeholder="(e.g. andy@warhol.co.uk)"
+                        placeholder={getLangText('(e.g. andy@warhol.co.uk)')}
                         required/>
                 </Property>
                 {this.getContracts()}
@@ -124,7 +128,7 @@ let ContractForm = React.createClass({
                     label={getLangText('Appendix')}>
                     <input
                         type="text"
-                        placeholder="Add an appendix to the contract"
+                        placeholder={getLangText('Add an appendix to the contract')}
                         required/>
                 </Property>
             </Form>