From 8a82a74dc59b6000378ba766694c48a142a15fe4 Mon Sep 17 00:00:00 2001
From: Michael Kohler <me@michaelkohler.info>
Date: Sun, 24 Feb 2019 13:23:37 +0100
Subject: [PATCH] feat: list explanation why sentence was invalid (fixes #43)

---
 scripts/exporter.js                 |  6 +++--
 shared/validation/index.js          | 34 +++++++++++++++++++++++------
 web/src/actions/parsing.js          |  3 ++-
 web/src/components/confirm-form.jsx | 15 +++++++++++--
 web/src/components/pages/add.jsx    | 14 +++++++++++-
 5 files changed, 59 insertions(+), 13 deletions(-)

diff --git a/scripts/exporter.js b/scripts/exporter.js
index a197bb27..82e6eed3 100644
--- a/scripts/exporter.js
+++ b/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;
diff --git a/shared/validation/index.js b/shared/validation/index.js
index d6434beb..81fc8e2a 100644
--- a/shared/validation/index.js
+++ b/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) {
diff --git a/web/src/actions/parsing.js b/web/src/actions/parsing.js
index 1b3bb37f..9fd11aa8 100644
--- a/web/src/actions/parsing.js
+++ b/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());
diff --git a/web/src/components/confirm-form.jsx b/web/src/components/confirm-form.jsx
index 8d80ccab..40ef9ad5 100644
--- a/web/src/components/confirm-form.jsx
+++ b/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>
diff --git a/web/src/components/pages/add.jsx b/web/src/components/pages/add.jsx
index bf53be54..8ad079cd 100644
--- a/web/src/components/pages/add.jsx
+++ b/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} />;