Skip to content

Commit

Permalink
Prepped UploadMediaModal for validation #SWIK-1972
Browse files Browse the repository at this point in the history 
Basically trying to understand how it works. Added many comments and adjusted into a more understandable structure.
  • Loading branch information
@rusnewman
rusnewman committed Dec 21, 2018
1 parent 717cb42 commit d9ccc60
Showing 1 changed file with 114 additions and 86 deletions.
200 changes: 114 additions & 86 deletions components/common/UploadMediaModal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ class UploadMediaModal extends React.Component {
openModal: false,
activeTrap: false,
active: true,
stage: 1, // Stage 1 is file upload. Stage 2 is adding metadata.
files: [],
license: false,
licenseValue: 'CC0',
Expand All @@ -35,7 +36,7 @@ class UploadMediaModal extends React.Component {
this.handleOpen = this.handleOpen.bind(this);
this.handleClose = this.handleClose.bind(this);
this.unmountTrap = this.unmountTrap.bind(this);
this.showLicense = this.showLicense.bind(this);
this.showLicensePage = this.showLicensePage.bind(this);
this.receiveDroppedFile = this.receiveDroppedFile.bind(this);
this.submitPressed = this.submitPressed.bind(this);
this.handleInputChange = this.handleInputChange.bind(this);
Expand Down Expand Up @@ -205,8 +206,9 @@ class UploadMediaModal extends React.Component {
this.setState({
modalOpen:false,
activeTrap: false,
files: [],
license: false,
stage: 1, // Stage 1 is file upload. Stage 2 is adding metadata.
files: [],
licenseValue: 'CC0',
copyrightHolder: '',
alt: '',
Expand All @@ -222,9 +224,10 @@ class UploadMediaModal extends React.Component {
}
}

showLicense() {
showLicensePage() {
this.setState({
license: true
license: true,
stage: 2
});
}

Expand Down Expand Up @@ -268,6 +271,7 @@ class UploadMediaModal extends React.Component {

submitPressed(e) {
e.preventDefault();

if(this.state.copyrightHolder === undefined || this.state.copyrightHolder === ''){this.state.copyrightHolder = this.props.userFullName;}
let fileType = this.state.files[0].type;

Expand Down Expand Up @@ -340,58 +344,68 @@ class UploadMediaModal extends React.Component {
}
}

render() {
this.context.getUser().username;
let dropzone = '';
if(this.state.files.length < 1){
dropzone = <div className="dropzone">
<Dropzone ref="initialDropzone" onDrop={this.onDrop.bind(this)} accept="image/*" multiple={false} className="ui grey inverted center aligned padded raised segment">
<Icon name="cloud upload" size="massive"/>
<p>{this.context.intl.formatMessage(this.messages.drop_message1)}</p>
<p>{this.context.intl.formatMessage(this.messages.drop_message2)}
/**
* Returns the Dropzone component for the Modal, in Stage 1.
* Renders either the initial Dropzone ('drag your files here')
* or a preview image if a file has already been supplied.
*
* @returns {object}
*/
getDropzone() {

// The intial dropzone, which accepts a file drag-and-drop or click-to-upload
let initialDropzone = (this.state.files.length > 0) ? null : <div>
<Icon name="cloud upload" size="massive"/>
<p>{this.context.intl.formatMessage(this.messages.drop_message1)}</p>
<p>{this.context.intl.formatMessage(this.messages.drop_message2)}
<button id="upload" className="ui button" aria-label={this.context.intl.formatMessage(this.messages.upload_button_aria)}>
<i className="upload icon large"></i>
<label htmlFor="upload">{this.context.intl.formatMessage(this.messages.upload_button_label)}</label></button>
{this.context.intl.formatMessage(this.messages.drop_message3)}</p>

</Dropzone>
</div>;
} else { //TODO Implement a switch-case statement for other media files. Currently only works for images.
dropzone = <div><div className="dropzone">
<Dropzone onDrop={this.onDrop.bind(this)} accept="image/*" multiple={false} className="ui secondary clearing segment">
<Image id="imageToProceed" src={this.state.files[0].preview} size="large" centered={true}/>
</Dropzone>
</div>
<br/><p>{this.context.intl.formatMessage(this.messages.drop_message4)}</p></div>;
}
//let heading = 'Upload a media file';
let heading = this.context.intl.formatMessage(this.messages.modal_heading1);
let content = <div>
<TextArea className="sr-only" id="UploadMediaModalDescription" value={this.context.intl.formatMessage(this.messages.modal_description1)} />
{dropzone}
</div>;
let saveHandler= this.showLicense;
let submitButtonText = this.context.intl.formatMessage(this.messages.submit_button_text1);
let submitButtonIcon = 'arrow right';
if(this.state.license){
heading = this.context.intl.formatMessage(this.messages.modal_heading2);
<Icon name='upload' size='large'/>
<label htmlFor="upload">{this.context.intl.formatMessage(this.messages.upload_button_label)}</label></button>
{this.context.intl.formatMessage(this.messages.drop_message3)}
</p>
</div>;

// The secondary image preview, if a file has been dropped in the Dropzone.
let previewImage = (this.state.files.length === 0) ? null : <Image
id="imageToProceed"
src={this.state.files[0].preview}
size="large"
centered={true} />;

return(<div className="dropzone">
<Dropzone ref="initialDropzone" onDrop={this.onDrop.bind(this)} accept="image/*" multiple={false} className="ui grey inverted center aligned padded raised segment">
<TextArea className="sr-only" id="UploadMediaModalDescription"
value={this.context.intl.formatMessage(this.messages.modal_description1)}/>
{initialDropzone}
{previewImage}
</Dropzone>
</div>);
}

// Renders the copyrightHolder input if a non-public-domain licence is selected.
let copyrightHolderInput = (this.state.licenseValue === 'CC0') ? null : <Form.Field
id={uuid()}
name='copyrightHolder'
required
control={Form.Input}
label={this.context.intl.formatMessage(this.messages.copyrightHolder_label)}
value={this.state.copyrightHolder}
onChange={this.handleInputChange}
/>;

content = <div>
<TextArea className="sr-only" id="UploadMediaModalDescription" value={this.context.intl.formatMessage(this.messages.modal_description2)} />
<Image src={this.state.files[0].preview} size="large" centered={true}/>
<Divider/>
<form className="ui form" onSubmit={this.submitPressed.bind(this)}>
/**
* Returns the metadata form for the Modal, in Stage 2.
* Renders an input for the copyrightHolder's name, if a non-public domain licence is selected.
*
* @returns {object}
*/
getMetadataForm() {
// Renders the copyrightHolder input if a non-public-domain licence is selected.
let copyrightHolderInput = (this.state.licenseValue === 'CC0') ? null : <Form.Field
id={uuid()}
name='copyrightHolder'
required
control={Form.Input}
label={this.context.intl.formatMessage(this.messages.copyrightHolder_label)}
value={this.state.copyrightHolder}
onChange={this.handleInputChange}
/>;

return(<div>
<TextArea className="sr-only" id="UploadMediaModalDescription"
value={this.context.intl.formatMessage(this.messages.modal_description2)}/>
<Image src={this.state.files[0].preview} size="large" centered={true}/>
<Divider/>
<form className="ui form" onSubmit={this.submitPressed.bind(this)}>
<Form.Field
id={uuid()}
name='title'
Expand All @@ -403,13 +417,15 @@ class UploadMediaModal extends React.Component {
autoFocus
/>
<div className="field">
<div className="ui checkbox">
<input id="checkbox_backgroundImage" type="checkbox" tabIndex="0" id="checkbox_backgroundImage" ref="checkbox_backgroundImage"
aria-label={this.context.intl.formatMessage(this.messages.background_aria)}
aria-required="false"/>
<label htmlFor="checkbox_backgroundImage">{this.context.intl.formatMessage(this.messages.background_message1)}
</label>
</div>
<div className="ui checkbox">
<input id="checkbox_backgroundImage" type="checkbox" tabIndex="0" id="checkbox_backgroundImage"
ref="checkbox_backgroundImage"
aria-label={this.context.intl.formatMessage(this.messages.background_aria)}
aria-required="false"/>
<label
htmlFor="checkbox_backgroundImage">{this.context.intl.formatMessage(this.messages.background_message1)}
</label>
</div>
</div>
<Form.Field
id={uuid()}
Expand All @@ -422,7 +438,6 @@ class UploadMediaModal extends React.Component {
/>
<SWAutoComplete
required={true}
// error={this.state.formValidationErrors.language}
label={this.context.intl.formatMessage(this.messages.media_license_label)}
id={uuid()}
name='licenseValue'
Expand All @@ -435,39 +450,52 @@ class UploadMediaModal extends React.Component {
/>
{copyrightHolderInput}
<div className="required field">
<div className="ui checkbox">
<input id="terms" type="checkbox"
aria-label={this.context.intl.formatMessage(this.messages.media_terms_aria)}
aria-required="true" required/>
<label htmlFor="terms">{this.context.intl.formatMessage(this.messages.media_terms_label1)}
<a href="/terms"> {this.context.intl.formatMessage(this.messages.media_terms_label2)} </a>
{this.context.intl.formatMessage(this.messages.media_terms_label3)}
<a href="/license"> {this.context.intl.formatMessage(this.messages.media_terms_label4)} </a>
{this.context.intl.formatMessage(this.messages.media_terms_label5)}
</label>
</div>
<div className="ui checkbox">
<input id="terms" type="checkbox"
aria-label={this.context.intl.formatMessage(this.messages.media_terms_aria)}
aria-required="true" required/>
<label htmlFor="terms">{this.context.intl.formatMessage(this.messages.media_terms_label1)}
<a href="/terms"> {this.context.intl.formatMessage(this.messages.media_terms_label2)} </a>
{this.context.intl.formatMessage(this.messages.media_terms_label3)}
<a href="/license"> {this.context.intl.formatMessage(this.messages.media_terms_label4)} </a>
{this.context.intl.formatMessage(this.messages.media_terms_label5)}
</label>
</div>
</div>
<Button type='submit' id="UploadFormSubmitButton" style={{display: 'none'}}>Submit</Button> {/*black magic hack to trigger the form from the outside*/}
</form>
</div>;
<Button type='submit' id="UploadFormSubmitButton"
style={{display: 'none'}}>Submit</Button> {/*black magic hack to trigger the form from the outside*/}
</form>
</div>);
}

render() {
// This form has two stages:
// 1. Upload and preview.
// 2. Setting metadata and saving the media.
// Both stages must fill the following variables, which are used for the <Modal>.
let heading, content, saveHandler, submitButtonText, submitButtonIcon = null;

// Stage 1: Upload and preview.
if(this.state.stage === 1) {
// Heading and content for upload stage one
heading = this.context.intl.formatMessage(this.messages.modal_heading1);
content = this.getDropzone();
saveHandler = this.showLicensePage;
submitButtonText = this.context.intl.formatMessage(this.messages.submit_button_text1);
submitButtonIcon = 'arrow right';
}
// Stage 2. Setting metadata and saving the media.
else {
heading = this.context.intl.formatMessage(this.messages.modal_heading2);
content = this.getMetadataForm();
saveHandler = (() => {$('#UploadFormSubmitButton').click();});
submitButtonText = this.context.intl.formatMessage(this.messages.submit_button_text2);
submitButtonIcon = 'upload';
}

const buttonColorBlack = {
color: 'black'
};
const uploadMediaModalStyle = {
display: 'none'
};
/*trigger={
<Button className="ui orange button" tabIndex='0' id="ChangePictureModalOpenButton" aria-hidden={this.state.modalOpen} onClick={this.handleOpen} value="">
<i className="upload icon large black"></i>
<a style={buttonColorBlack}>Add Image</a>
</Button>
}
*/

return (
<Modal trigger={
Expand Down

0 comments on commit d9ccc60

Please sign in to comment.