feat: show rejected sentences (fixes #159)

.gitignore

@@ -5,4 +5,5 @@ dist
 .env
 docker-compose.prod.yml
 .ignored_files
-.vscode
+.vscode
+.DS_Store

shared/db.js

@@ -129,6 +129,10 @@ export default class DB {
     return this.sentences.vote(language, validated, invalidated);
   }
 
+  async getAllRejectedByUsername(languages, username) {
+    return this.sentences.getAllRejectedByUsername(languages, username);
+  }
+
   async getLanguageInfoForMe(language) {
     try {
       const [ submitted, validated ] = await Promise.all([

shared/db/collections/sentences-meta.js

@@ -165,14 +165,34 @@ export default class SentencesMeta {
     return result.data;
   }
 
+  getAllRejectedByUsername(languages, username) {
+    const rejectedSentences = {};
+
+    const promises = languages.map((language) => this.getAllUnapprovedByUsername(language, username));
+
+    return Promise.all(promises)
+      .then((unapprovedPerLanguage) => {
+        return unapprovedPerLanguage.reduce((rejectedSentences, unapproved, index) => {
+          if (unapproved) {
+            // we can use the index here, as Promise.all guarantees that its
+            // resolved values will be in the same order
+            rejectedSentences[languages[index]] = unapproved;
+          }
+
+          return rejectedSentences;
+        }, {});
+      });
+  }
+
   async getAllUnapprovedByUsername(language, username) {
     const collection = await this.getCollection(language);
     const filters = {
       username,
       approved: false,
     };
     const result = await collection.listRecords({ filters });
-    return result.data;
+    const unapprovedSentencesWithoutDetail = result.data.map((record) => record.sentence);
+    return unapprovedSentencesWithoutDetail;
   }
 
   async getAllByUsername(language, username) {

web/css/root.css

@@ -219,4 +219,10 @@ form button {
   font-size: 80%;
   font-weight: 800;
   width: 40%;
+}
+
+.no-bullets {
+  list-style: none;
+  margin-left: 0;
+  padding-left: 0;
 }

web/src/components/app.jsx

@@ -11,6 +11,7 @@ import Home from '../containers/home';
 import HowTo from './pages/how-to';
 import Login from '../containers/login';
 import Profile from '../containers/profile';
+import Rejected from '../containers/rejected';
 import Add from '../containers/add';
 import Review from '../containers/review';
 
@@ -35,6 +36,8 @@ export default class App extends React.Component {
               path="/review" component={Review} />
             <PrivateRoute authed={this.props.authed}
               path="/review/:language" component={Review} />
+            <PrivateRoute authed={this.props.authed}
+              path="/rejected" component={Rejected} />
             <Route render={() => (
               <Redirect
                 to={{

web/src/components/header.jsx

@@ -13,6 +13,7 @@ const Header = (props) => {
         <NavLink to="/how-to" exact>How-to</NavLink>
         <NavLink to="/add" exact key="add">Add</NavLink>
         <NavLink to="/review" key="review">Review</NavLink>
+        <NavLink to="/rejected" key="rejected">Rejected Sentences</NavLink>
         { props.authed ? (
           <NavLink to="/profile" exact key="profile">Profile</NavLink>
         ) : (

web/src/components/pages/rejected.jsx

@@ -0,0 +1,60 @@
+import React from 'react';
+
+import WebDB from '../../web-db';
+
+export default class Rejected extends React.Component {
+  constructor() {
+    super();
+    this.state = {
+      loading: true,
+      rejectedSentences: {},
+    };
+  }
+
+  async loadRejected() {
+    if (!this.props.languages || this.props.languages.length < 1) {
+      return;
+    }
+
+    const db = new WebDB(this.props.username, this.props.password);
+    const rejectedSentences = await db.getAllRejectedByUsername(this.props.languages, this.props.username);
+    this.setState({
+      rejectedSentences,
+      loading: false,
+    });
+  }
+
+  componentDidMount() {
+    this.loadRejected();
+  }
+
+  render() {
+    const { rejectedSentences, loading } = this.state;
+
+    return (
+      <>
+        <h1>Your rejected sentences</h1>
+
+        { loading && (
+          <p>Loading rejected sentences..</p>
+        )}
+
+        { !loading && Object.keys(rejectedSentences).length === 0 && (
+          <p>No rejected sentences found!</p>
+        )}
+
+        { Object.keys(rejectedSentences).map((language) => (
+          <section>
+            <h2 key={language}>{language}</h2>
+
+            <ul className="no-bullets">
+              { rejectedSentences[language].map((sentence) => (
+                <li key={sentence}>{sentence}</li>
+              ))}
+            </ul>
+          </section>
+        ))}
+      </>
+    );
+  }
+}

web/src/components/review-form.jsx

@@ -126,7 +126,7 @@ export default class ReviewForm extends React.Component {
           </section>
         )) }
 
-        <section class="review-footer">
+        <section className="review-footer">
           <section id="confirm-buttons" className="divCenter">
             { this.state.pendingSentences ?
               <SpinnerButton></SpinnerButton> :

web/src/containers/rejected.js

@@ -0,0 +1,13 @@
+import { connect } from 'react-redux';
+
+import Rejected from '../components/pages/rejected';
+
+function mapStateToProps(state) {
+  return {
+    username: state.username,
+    password: state.password,
+    languages: state.languages,
+  };
+}
+
+export default connect(mapStateToProps)(Rejected);