ascribe/onion
1
0
Fork 0
mirror of https://github.com/ascribe/onion.git synced 2024-06-15 17:13:16 +02:00
Code Issues Releases Wiki Activity

Merge pull request #57 from ascribe/AD-290-coa-buttons-and-usage-esp-verify

Browse Source 
Refactor COA to refresh accordingly on remount of edition page
This commit is contained in:
Tim Daubenschütz 2015-12-09 15:57:00 +01:00
commit dcca228669
12 changed files with 223 additions and 221 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
js/actions/coa_actions.js
View File

@ -1,51 +0,0 @@
'use strict';
import { alt } from '../alt';
import CoaFetcher from '../fetchers/coa_fetcher';
import Q from 'q';
class CoaActions {
constructor() {
this.generateActions(
'updateCoa',
'flushCoa'
);
}
fetchOrCreate(id, bitcoinId) {
return Q.Promise((resolve, reject) => {
CoaFetcher.fetchOne(id)
.then((res) => {
if (res.coa) {
this.actions.updateCoa(res.coa);
resolve(res.coa);
}
else {
this.actions.create(bitcoinId);
}
})
.catch((err) => {
console.logGlobal(err);
this.actions.updateCoa(null);
reject(err);
});
});
}
create(bitcoinId) {
return Q.Promise((resolve, reject) => {
CoaFetcher.create(bitcoinId)
.then((res) => {
this.actions.updateCoa(res.coa);
})
.catch((err) => {
console.logGlobal(err);
this.actions.updateCoa(null);
reject(err);
});
});
}
}
export default alt.createActions(CoaActions);

20
js/actions/edition_actions.js
View File

@ -1,27 +1,19 @@
'use strict';
import { alt } from '../alt';
import EditionFetcher from '../fetchers/edition_fetcher';
class EditionActions {
constructor() {
this.generateActions(
'updateEdition',
'editionFailed'
'fetchEdition',
'successFetchEdition',
'successFetchCoa',
'flushEdition',
'errorCoa',
'errorEdition'
);
}
fetchOne(editionId) {
EditionFetcher.fetchOne(editionId)
.then((res) => {
this.actions.updateEdition(res.edition);
})
.catch((err) => {
console.logGlobal(err);
this.actions.editionFailed(err.json);
});
}
}
export default alt.createActions(EditionActions);

109
js/components/ascribe_detail/edition.js
View File

@ -8,11 +8,6 @@ import Row from 'react-bootstrap/lib/Row';
import Col from 'react-bootstrap/lib/Col';
import Glyphicon from 'react-bootstrap/lib/Glyphicon';
import UserActions from '../../actions/user_actions';
import UserStore from '../../stores/user_store';
import CoaActions from '../../actions/coa_actions';
import CoaStore from '../../stores/coa_store';
import HistoryIterator from './history_iterator';
import MediaContainer from './media_container';
@ -44,6 +39,8 @@ let Edition = React.createClass({
actionPanelButtonListType: React.PropTypes.func,
furtherDetailsType: React.PropTypes.func,
edition: React.PropTypes.object,
coaError: React.PropTypes.object,
currentUser: React.PropTypes.object,
loadEdition: React.PropTypes.func
},
@ -55,32 +52,6 @@ let Edition = React.createClass({
};
},
getInitialState() {
return UserStore.getState();
},
componentDidMount() {
UserStore.listen(this.onChange);
UserActions.fetchCurrentUser();
},
componentWillUnmount() {
// Flushing the coa state is essential to not displaying the same
// data to the user while he's on another edition
//
// BUGFIX: Previously we had this line in the componentWillUnmount of
// CoaDetails, but since we're reloading the edition after performing an ACL action
// on it, this resulted in multiple events occupying the dispatcher, which eventually
// resulted in crashing the app.
CoaActions.flushCoa();
UserStore.unlisten(this.onChange);
},
onChange(state) {
this.setState(state);
},
render() {
let FurtherDetailsType = this.props.furtherDetailsType;
@ -101,13 +72,15 @@ let Edition = React.createClass({
<EditionSummary
actionPanelButtonListType={this.props.actionPanelButtonListType}
edition={this.props.edition}
currentUser={this.state.currentUser}
currentUser={this.props.currentUser}
handleSuccess={this.props.loadEdition}/>
<CollapsibleParagraph
title={getLangText('Certificate of Authenticity')}
show={this.props.edition.acl.acl_coa === true}>
<CoaDetails
edition={this.props.edition}/>
coa={this.props.edition.coa}
coaError={this.props.coaError}
editionId={this.props.edition.bitcoin_id}/>
</CollapsibleParagraph>
<CollapsibleParagraph
@ -133,7 +106,7 @@ let Edition = React.createClass({
<CollapsibleParagraph
title="Notes"
show={!!(this.state.currentUser.username
show={!!(this.props.currentUser.username
|| this.props.edition.acl.acl_edit
|| this.props.edition.public_note)}>
<Note
@ -144,7 +117,7 @@ let Edition = React.createClass({
editable={true}
successMessage={getLangText('Private note saved')}
url={ApiUrls.note_private_edition}
currentUser={this.state.currentUser}/>
currentUser={this.props.currentUser}/>
<Note
id={() => {return {'bitcoin_id': this.props.edition.bitcoin_id}; }}
label={getLangText('Personal note (public)')}
@ -154,7 +127,7 @@ let Edition = React.createClass({
show={!!this.props.edition.public_note || !!this.props.edition.acl.acl_edit}
successMessage={getLangText('Public edition note saved')}
url={ApiUrls.note_public_edition}
currentUser={this.state.currentUser}/>
currentUser={this.props.currentUser}/>
</CollapsibleParagraph>
<CollapsibleParagraph
title={getLangText('Further Details')}
@ -246,38 +219,42 @@ let EditionSummary = React.createClass({
let CoaDetails = React.createClass({
propTypes: {
edition: React.PropTypes.object
editionId: React.PropTypes.string,
coa: React.PropTypes.object,
coaError: React.PropTypes.object
},
getInitialState() {
return CoaStore.getState();
},
componentDidMount() {
let { edition } = this.props;
CoaStore.listen(this.onChange);
if(edition.coa) {
CoaActions.fetchOrCreate(edition.coa, edition.bitcoin_id);
}
else {
CoaActions.create(edition.bitcoin_id);
}
},
componentWillUnmount() {
CoaStore.unlisten(this.onChange);
},
onChange(state) {
this.setState(state);
contactOnIntercom() {
window.Intercom('showNewMessage', `Hi, I'm having problems generating a Certificate of Authenticity for Edition: ${this.props.editionId}`);
console.logGlobal(new Error(`Coa couldn't be created for edition: ${this.props.editionId}`));
},
render() {
if(this.state.coa && this.state.coa.url_safe) {
if(this.props.coaError) {
return (
<div className="text-center">
<p>{getLangText('There was an error generating your Certificate of Authenticity.')}</p>
<p>
{getLangText('Try to refresh the page. If this happens repeatedly, please ')}
<a style={{ cursor: 'pointer' }} onClick={this.contactOnIntercom}>{getLangText('contact us')}</a>.
</p>
</div>
);
}
if(this.props.coa && this.props.coa.url_safe) {
return (
<div>
<p className="text-center ascribe-button-list">
<a href={this.state.coa.url_safe} target="_blank">
<div
className="notification-contract-pdf"
style={{paddingBottom: '1em'}}>
<embed
className="embed-form"
src={this.props.coa.url_safe}
alt="pdf"
pluginspage="http://www.adobe.com/products/acrobat/readstep2.html"/>
</div>
<div className="text-center ascribe-button-list">
<a href={this.props.coa.url_safe} target="_blank">
<button className="btn btn-default btn-xs">
{getLangText('Download')} <Glyphicon glyph="cloud-download"/>
</button>
@ -288,19 +265,21 @@ let CoaDetails = React.createClass({
</button>
</Link>
</p>
</div>
</div>
);
} else if(typeof this.state.coa === 'string'){
} else if(typeof this.props.coa === 'string'){
return (
<div className="text-center">
{this.state.coa}
{this.props.coa}
</div>
);
}
return (
<div className="text-center">
<AscribeSpinner color='dark-blue' size='lg'/>
<AscribeSpinner color='dark-blue' size='md'/>
<p>{getLangText("Just a sec, we\'re generating your COA")}</p>
<p>{getLangText('(you may leave the page)')}</p>
</div>
);
}

60
js/components/ascribe_detail/edition_container.js
View File

@ -9,12 +9,16 @@ import { ResourceNotFoundError } from '../../models/errors';
import EditionActions from '../../actions/edition_actions';
import EditionStore from '../../stores/edition_store';
import UserActions from '../../actions/user_actions';
import UserStore from '../../stores/user_store';
import Edition from './edition';
import AscribeSpinner from '../ascribe_spinner';
import { getLangText } from '../../utils/lang_utils';
import { setDocumentTitle } from '../../utils/dom_utils';
import { mergeOptions } from '../../utils/general_utils';
/**
@ -30,33 +34,37 @@ let EditionContainer = React.createClass({
mixins: [History, ReactError],
getInitialState() {
return EditionStore.getState();
return mergeOptions(
EditionStore.getState(),
UserStore.getState()
);
},
componentDidMount() {
EditionStore.listen(this.onChange);
UserStore.listen(this.onChange);
// Every time we're entering the edition detail page,
// just reset the edition that is saved in the edition store
// as it will otherwise display wrong/old data once the user loads
// the edition detail a second time
EditionActions.updateEdition({});
this.loadEdition();
EditionActions.flushEdition();
EditionActions.fetchEdition(this.props.params.editionId);
UserActions.fetchCurrentUser();
},
// 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.editionId !== nextProps.params.editionId) {
EditionActions.updateEdition({});
EditionActions.fetchOne(nextProps.params.editionId);
EditionActions.fetchEdition(this.props.params.editionId);
}
},
componentDidUpdate() {
const { editionError } = this.state;
if(editionError && editionError.status === 404) {
const { editionMeta } = this.state;
if(editionMeta.err && editionMeta.err.json && editionMeta.err.json.status === 404) {
this.throws(new ResourceNotFoundError(getLangText("Oops, the edition you're looking for doesn't exist.")));
}
},
@ -64,34 +72,36 @@ let EditionContainer = React.createClass({
componentWillUnmount() {
window.clearInterval(this.state.timerId);
EditionStore.unlisten(this.onChange);
UserStore.unlisten(this.onChange);
},
onChange(state) {
this.setState(state);
if (!state.edition.digital_work) {
return;
}
let isEncoding = state.edition.digital_work.isEncoding;
if (state.edition.digital_work.mime === 'video' && typeof isEncoding === 'number' && isEncoding !== 100 && !this.state.timerId) {
let timerId = window.setInterval(() => EditionActions.fetchOne(this.props.params.editionId), 10000);
this.setState({timerId: timerId});
}
},
loadEdition() {
EditionActions.fetchOne(this.props.params.editionId);
if(state && state.edition && state.edition.digital_work) {
let isEncoding = state.edition.digital_work.isEncoding;
if (state.edition.digital_work.mime === 'video' && typeof isEncoding === 'number' && isEncoding !== 100 && !this.state.timerId) {
let timerId = window.setInterval(() => EditionActions.fetchOne(this.props.params.editionId), 10000);
this.setState({timerId: timerId});
}
}
},
render() {
if(this.state.edition && this.state.edition.id) {
setDocumentTitle([this.state.edition.artist_name, this.state.edition.title].join(', '));
const { edition, currentUser, coaMeta } = this.state;
const { actionPanelButtonListType, furtherDetailsType } = this.props;
if (Object.keys(edition).length && edition.id && currentUser && currentUser.email) {
setDocumentTitle([edition.artist_name, edition.title].join(', '));
return (
<Edition
actionPanelButtonListType={this.props.actionPanelButtonListType}
furtherDetailsType={this.props.furtherDetailsType}
edition={this.state.edition}
loadEdition={this.loadEdition} />
actionPanelButtonListType={actionPanelButtonListType}
furtherDetailsType={furtherDetailsType}
edition={edition}
coaError={coaMeta.err}
currentUser={currentUser}
loadEdition={() => EditionActions.fetchEdition(this.props.params.editionId)} />
);
} else {
return (

18
js/components/coa_verify_container.js
View File

@ -17,7 +17,12 @@ import { setDocumentTitle } from '../utils/dom_utils';
let CoaVerifyContainer = React.createClass({
propTypes: {
location: React.PropTypes.object
},
render() {
const { message, signature } = this.props.location.query;
setDocumentTitle(getLangText('Verify your Certificate of Authenticity'));
return (
@ -27,7 +32,9 @@ let CoaVerifyContainer = React.createClass({
{getLangText('Verify your Certificate of Authenticity')}
</div>
<CoaVerifyForm />
<CoaVerifyForm
message={message}
signature={signature}/>
<br />
<br />
{getLangText('ascribe is using the following public key for verification')}:
@ -47,6 +54,11 @@ let CoaVerifyContainer = React.createClass({
let CoaVerifyForm = React.createClass({
propTypes: {
message: React.PropTypes.string,
signature: React.PropTypes.string
},
handleSuccess(response){
let notification = null;
if (response.verdict) {
@ -56,6 +68,8 @@ let CoaVerifyForm = React.createClass({
},
render() {
const { message, signature } = this.props;
return (
<div>
<Form
@ -79,6 +93,7 @@ let CoaVerifyForm = React.createClass({
type="text"
placeholder={getLangText('Copy paste the message on the bottom of your Certificate of Authenticity')}
autoComplete="on"
defaultValue={message}
name="username"
required/>
</Property>
@ -90,6 +105,7 @@ let CoaVerifyForm = React.createClass({
<InputTextAreaToggable
rows={3}
placeholder={getLangText('Copy paste the signature on the bottom of your Certificate of Authenticity')}
defaultValue={signature}
required/>
</Property>
<hr />

18
js/fetchers/coa_fetcher.js
View File

@ -1,18 +0,0 @@
'use strict';
import requests from '../utils/requests';
let CoaFetcher = {
/**
* Fetch one user from the API.
* If no arg is supplied, load the current user
*/
fetchOne(id) {
return requests.get('coa', {'id': id});
},
create(bitcoinId) {
return requests.post('coa_create', {body: {'bitcoin_id': bitcoinId}});
}
};
export default CoaFetcher;

15
js/fetchers/edition_fetcher.js
View File

@ -1,15 +0,0 @@
'use strict';
import requests from '../utils/requests';
let EditionFetcher = {
/**
* Fetch one user from the API.
* If no arg is supplied, load the current user
*/
fetchOne(editionId) {
return requests.get('edition', {'bitcoin_id': editionId});
}
};
export default EditionFetcher;

27
js/sources/coa_source.js Normal file
View File

@ -0,0 +1,27 @@
'use strict';
import requests from '../utils/requests';
import EditionActions from '../actions/edition_actions';
const CoaSource = {
lookupCoa: {
remote(state) {
return requests.get('coa', { id: state.edition.coa });
},
success: EditionActions.successFetchCoa,
error: EditionActions.errorCoa
},
performCreateCoa: {
remote(state) {
return requests.post('coa_create', {body: { bitcoin_id: state.edition.bitcoin_id }});
},
success: EditionActions.successFetchCoa,
error: EditionActions.errorCoa
}
};
export default CoaSource;

19
js/sources/edition_source.js Normal file
View File

@ -0,0 +1,19 @@
'use strict';
import requests from '../utils/requests';
import EditionActions from '../actions/edition_actions';
const EditionSource = {
lookupEdition: {
remote(state) {
return requests.get('edition', { bitcoin_id: state.editionMeta.idToFetch });
},
success: EditionActions.successFetchEdition,
error: EditionActions.errorEdition
}
};
export default EditionSource;

22
js/stores/coa_store.js
View File

@ -1,22 +0,0 @@
'use strict';
import { alt } from '../alt';
import CoaActions from '../actions/coa_actions';
class CoaStore {
constructor() {
this.coa = {};
this.bindActions(CoaActions);
}
onUpdateCoa(coa) {
this.coa = coa;
}
onFlushCoa() {
this.coa = {};
}
}
export default alt.createStore(CoaStore, 'CoaStore');

66
js/stores/edition_store.js
View File

@ -1,23 +1,77 @@
'use strict';
import { alt } from '../alt';
import EditionActions from '../actions/edition_actions';
import EditionSource from '../sources/edition_source';
import CoaSource from '../sources/coa_source';
class EditionStore {
constructor() {
this.edition = {};
this.editionError = null;
this.editionMeta = {
err: null,
idToFetch: null
};
this.coaMeta = {
err: null
};
this.bindActions(EditionActions);
this.registerAsync(Object.assign(EditionSource, CoaSource));
}
onUpdateEdition(edition) {
this.edition = edition;
this.editionError = null;
onFetchEdition(idToFetch) {
this.editionMeta.idToFetch = idToFetch;
this.getInstance().lookupEdition();
}
onEditionFailed(error) {
this.editionError = error;
onSuccessFetchEdition(res) {
if(res && res.edition) {
this.edition = res.edition;
this.editionMeta.err = null;
this.editionMeta.idToFetch = null;
if (this.edition.coa && this.edition.acl.acl_coa &&
typeof this.edition.coa.constructor !== Object) {
this.getInstance().lookupCoa();
} else if(!this.edition.coa && this.edition.acl.acl_coa) {
this.getInstance().performCreateCoa();
}
} else {
this.editionMeta.err = new Error('Problem fetching the edition');
}
}
onSuccessFetchCoa(res) {
if (res && res.coa && Object.keys(this.edition).length) {
this.edition.coa = res.coa;
this.coaMeta.err = null;
} else {
this.coaMeta.err = new Error('Problem generating/fetching the COA');
}
}
onFlushEdition() {
this.edition = {};
this.editionMeta = {
err: null,
idToFetch: null
};
this.coaMeta = {
err: null
};
}
onErrorEdition(err) {
this.editionMeta.err = err;
}
onErrorCoa(err) {
this.coaMeta.err = err;
}
}

19
js/utils/requests.js
View File

@ -12,7 +12,20 @@ import { argsToQueryParams } from '../utils/url_utils';
class Requests {
unpackResponse(response) {
if (response.status >= 500) {
throw new Error(response.status + ' - ' + response.statusText + ' - on URL:' + response.url);
let err = new Error(response.status + ' - ' + response.statusText + ' - on URL:' + response.url);
return response
.text()
.then((resText) => {
const resJson = JSON.parse(resText);
err = new Error(resJson.errors.pop());
// ES6 promises don't have a .finally() clause so
// we fake that here by forcing the .catch() clause
// to run
return Promise.reject();
})
.catch(() => { throw err; });
}
return Q.Promise((resolve, reject) => {
@ -50,9 +63,7 @@ class Requests {
resolve({});
}
}
}).catch((err) => {
reject(err);
});
}).catch(reject);
});
}