This repository has been archived by the owner on May 10, 2023. It is now read-only.
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Use separate components for SubmitForm, ReviewLink and ConfirmForm
- Loading branch information
1 parent
ebbf468
commit 5acfb3a
Showing
5 changed files
with
161 additions
and
103 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,87 @@ | ||
| import React from 'react'; | ||
|
|
||
| import ReviewLink from './review-link'; | ||
|
|
||
| export default class ConfirmForm extends React.Component { | ||
| constructor(props) { | ||
| super(props); | ||
|
|
||
| this.onSubmit = this.props.onSubmit.bind(this); | ||
| this.onReview = this.props.onReview.bind(this); | ||
| this.onCancel = this.props.onCancel.bind(this); | ||
| } | ||
|
|
||
| render() { | ||
| const { | ||
| submitted, | ||
| existing, | ||
| invalidated, | ||
| filtered, | ||
| validated, | ||
| unreviewed, | ||
| readyCount, | ||
| } = this.props; | ||
|
|
||
| return ( | ||
| <form onSubmit={this.onSubmit}> | ||
| <h2>Confirm New Sentences</h2> | ||
| <p> | ||
| {`${submitted.length} sentences found.`} | ||
| </p> | ||
|
|
||
| {(existing && existing.length > 0) && ( | ||
| <p> | ||
| {`${existing.length} sentences were previously submitted.`} | ||
| </p> | ||
| )} | ||
|
|
||
| {invalidated.length + filtered.length > 0 && ( | ||
| <p style={{color: 'red'}}> | ||
| { | ||
| `${filtered.length} sentences were not matching the requirements.` + | ||
| (invalidated.length > 0 ? | ||
| ` (${invalidated.length} more rejected by you) ` : '') | ||
| } | ||
| </p> | ||
| )} | ||
|
|
||
| {validated.length + invalidated.length > 0 && ( | ||
| <p> | ||
| {`-- ${validated.length + invalidated.length}`} {} | ||
| sentences are already reviewed. Great job! | ||
| </p> | ||
| )} | ||
|
|
||
| <p><b>{`${readyCount} sentences ready for submission!`}</b></p> | ||
|
|
||
| {unreviewed.length > 0 && ( | ||
| <p> | ||
| {`-- ${unreviewed.length} of these sentences are unreviewed. If you want, you can also review your sentences now before submitting them.`} | ||
| <ReviewLink onReview={this.onReview} | ||
| sentences={unreviewed} /> | ||
| </p> | ||
| )} | ||
|
|
||
| <p> | ||
| By submitting these sentences you grant a {} | ||
| <a href="https://en.wikipedia.org/wiki/Public_domain" target="_blank">Public Domain License</a> {} | ||
| for self-written sentences, or declare that sentences from a third-party are under Public Domain License | ||
| and can be used. | ||
| </p> | ||
| <section id="confirm-buttons"> | ||
| <button type="submit" disabled={readyCount === 0}>Confirm</button> | ||
| <button onClick={this.onCancel}>Cancel</button> | ||
| </section> | ||
|
|
||
| {invalidated.length + filtered.length > 0 && ( | ||
| <section> | ||
| <h2>Filtered sentences due to requirements failing:</h2> | ||
| <p>Please check the <a href="https://common-voice.github.io/sentence-collector/#/how-to">guidelines</a>.</p> | ||
|
|
||
| {filtered.map(sentence => <p key={sentence}>{sentence}</p>)} | ||
| </section> | ||
| )} | ||
| </form> | ||
| ); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| import React from 'react'; | ||
|
|
||
| const ReviewLink = (props) => { | ||
| return props.sentences.length > 0 && ( | ||
| <a href="#" onClick={evt => { | ||
| evt.preventDefault(); | ||
| props.onReview && props.onReview(); | ||
| }}>Review</a> | ||
| ); | ||
| }; | ||
|
|
||
| export default ReviewLink; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| import React from 'react'; | ||
|
|
||
| import LanguageSelector from './language-selector'; | ||
|
|
||
| export default class SubmitForm extends React.Component { | ||
| constructor(props) { | ||
| super(props); | ||
|
|
||
| this.onSubmit = this.props.onSubmit.bind(this); | ||
| } | ||
|
|
||
| render() { | ||
| const { | ||
| message, | ||
| error, | ||
| languages, | ||
| } = this.props; | ||
|
|
||
| return ( | ||
| <form id="add-form" onSubmit={this.onSubmit}> | ||
| <h2>Add Sentences</h2> | ||
| <p>Please add your sentences by typing or copy & pasting them below. <strong>Please make sure to add one sentence per line.</strong></p> | ||
|
|
||
| <section id="form-message"> | ||
| {message} | ||
| </section> | ||
| <section id="form-error"> | ||
| {error} | ||
| </section> | ||
|
|
||
| <section> | ||
| <label className="language-selector-label" htmlFor="language-selector"> | ||
| Select Language | ||
| </label> | ||
| <LanguageSelector name="language-selector" only={languages}/> | ||
| </section> | ||
| <section> | ||
| <label htmlFor="sentences-input">Enter sentences (one per line)</label> | ||
| <textarea id="sentences-input" /> | ||
| </section> | ||
| <section> | ||
| <label htmlFor="source-input">Where did you get these sentences from?</label> | ||
| <input id="source-input" type="text" /> | ||
| </section> | ||
|
|
||
| <section> | ||
| <button>Submit</button> | ||
| </section> | ||
| </form> | ||
| ); | ||
| } | ||
| } |