feat: list explanation why sentence was invalid (fixes #43)

scripts/exporter.js

@@ -71,10 +71,12 @@ async function exportLanguage(db, languageCode, exportPath) {
 function getValidatedSentences(languageCode, sentences) {
   const sentencesOnly = sentences.map((sentenceMeta) => sentenceMeta.sentence);
   const { filtered } = validation.validateSentences(languageCode, sentencesOnly);
-  filtered.length > 0 && console.log(`  - Filtered ${filtered.length} sentences`, filtered);
+  const filteredSentences = filtered.map((filteredResult) => filteredResult.sentence);
+  filteredSentences.length > 0 &&
+    console.log(`  - Filtered ${filteredSentences.length} sentences`, filteredSentences);
 
   const filteredSentenceMetas = sentences.filter((sentenceMeta) => {
-    return !filtered.includes(sentenceMeta.sentence);
+    return !filteredSentences.includes(sentenceMeta.sentence);
   });
   console.log(`  - Found ${filteredSentenceMetas.length} valid sentences`);
   return filteredSentenceMetas;

shared/validation/index.js

@@ -20,8 +20,8 @@ function runValidation(validator, sentences) {
 
   const valid = sentences.reduce((validSentences, sentence) => {
     const validationResult = validateSentence(validator, sentence);
-    if (!validationResult) {
-      filtered.push(sentence);
+    if (validationResult.error) {
+      filtered.push(validationResult);
       return validSentences;
     }
 
@@ -36,11 +36,31 @@ function runValidation(validator, sentences) {
 }
 
 function validateSentence(validator, sentence) {
-  return validateCorrectLength(validator, sentence) &&
-    validateWithoutNumbers(validator, sentence) &&
-    validateWithoutAbbreviations(validator, sentence) &&
-    validateWithoutSymbols(validator, sentence)
-  ;
+  const validationResult = {
+    sentence
+  };
+
+  if (!validateCorrectLength(validator, sentence)) {
+    validationResult.error = 'Sentence too long';
+    return validationResult;
+  }
+
+  if (!validateWithoutNumbers(validator, sentence)) {
+    validationResult.error = 'Contains numbers';
+    return validationResult;
+  }
+
+  if (!validateWithoutAbbreviations(validator, sentence)) {
+    validationResult.error = 'Contains abbreviations';
+    return validationResult;
+  }
+
+  if (!validateWithoutSymbols(validator, sentence)) {
+    validationResult.error = 'Contains symbols';
+    return validationResult;
+  }
+
+  return validationResult;
 }
 
 function validateCorrectLength(validator, sentence) {

web/src/actions/parsing.js

@@ -20,10 +20,11 @@ export function parseSentences(language, text) {
 
       const sentences = text.split(SPLIT_ON).map(s => s.trim()).filter(Boolean);
       const { valid, filtered, existing, submitted } = await filterSentences(language, sentences, credentials);
+      const filteredSentences = filtered.map((filteredResult) => filteredResult.sentence);
 
       checkForNewSentences([
         ...valid,
-        ...filtered,
+        ...filteredSentences,
       ]);
 
       dispatch(parseSentencesFinished());

web/src/components/confirm-form.jsx

@@ -81,12 +81,23 @@ class ConfirmForm extends React.Component {
           <button onClick={this.onCancel}>Cancel</button>
         </section>
 
-        {filtered.length > 0 && (
+        { Object.keys(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>)}
+            {
+              Object.keys(filtered).map((filterKey) => (
+                <React.Fragment>
+                  <h3 key="{filterKey}">{ filterKey }</h3>
+                  {
+                    filtered[filterKey].map((filteredSentence) =>
+                      <p key={filteredSentence}>{filteredSentence}</p>
+                    )
+                  }
+                </React.Fragment>
+              ))
+            }
           </section>
         )}
       </form>

web/src/components/pages/add.jsx

@@ -192,6 +192,18 @@ export default class Add extends React.Component {
                this.state.invalidated.length > 0 ||
                this.state.filtered.length > 0) {
 
+      let groupedFilteredSentences = [];
+      if (this.state.filtered && this.state.filtered.length > 0) {
+        groupedFilteredSentences = this.state.filtered.reduce((groupedFiltered, filterResult) => {
+          if (!groupedFiltered[filterResult.error]) {
+            groupedFiltered[filterResult.error] = [];
+          }
+
+          groupedFiltered[filterResult.error].push(filterResult.sentence);
+          return groupedFiltered;
+        }, {});
+      }
+
       // The confirm form is a stats page where sentence submission happens.
       return <ConfirmForm onSubmit={this.onConfirm}
                           onReview={this.onReview}
@@ -200,7 +212,7 @@ export default class Add extends React.Component {
                           unreviewed={this.state.unreviewed}
                           validated={this.state.validated}
                           invalidated={this.state.invalidated}
-                          filtered={this.state.filtered}
+                          filtered={groupedFilteredSentences}
                           existing={this.state.existing}
                           readyCount={this.getReadySentences().count} />;