feat: make swipe review tool the default review tool

common-voice · Jul 24, 2021 · b195cb3 · b195cb3
1 parent 9c569a7
commit b195cb3
Show file tree

Hide file tree

Showing 15 changed files with 188 additions and 892 deletions.
diff --git a/web/css/review-form.css b/web/css/review-form.css
@@ -1,89 +1,50 @@
 #review-form {
-  --sentence-box-height: 6rem;
+  --sentence-box-height: 12rem;
 }
 
-.validator {
-  --validator-height: 6.6rem;
-  height: var(--validator-height);
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  padding: 0;
+.main-root {
+  margin: 50px auto;
+  position: relative;
+  height: var(--sentence-box-height);
+  width: 50vw;
+  overflow: hidden;
 }
 
-.sentence-box,
-.card-sentence-box {
+.card {
+  background-size: cover;
+  position: absolute;
+  background: #F8F3F3;
   height: var(--sentence-box-height);
-  border: 1px solid var(--grey-color);
+  width: 50vw;
+  cursor: pointer;
+  padding: 1em;
+  transition: box-shadow .3s;
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
+}
+
+.card-source {
+  position: absolute;
+  bottom: 20px;
+  padding: 0 0.5rem;
+}
+
+.card-sentence-box {
+  width: 100%;
+  height: 100%;
+  border: none;
   flex-basis: 100%;
   line-height: 1rem;
   align-items: center;
   display: flex;
   flex-direction: column;
   font-size: 1rem;
-  padding: 0.25rem 1rem;
+  padding: 0;
 }
 
-.sentence-box small,
 .card-sentence-box small {
   color: var(--dark-grey-color);
 }
 
-.card-sentence-box {
-  border: none;
-  padding: 0;
-  width: 100%;
-  height: 100%;
-}
-
-.validator li {
-  height: calc(var(--validator-height) / 2);
-  line-height: calc(var(--validator-height) / 2);
-}
-
-.button-group {
-  width: 6rem;
-}
-
-.button-group.small {
-  width: 2.5rem;
-}
-
-.validator .button-group button {
-  border: 1px solid var(--grey-color);
-  border-radius: 0;
-  font-size: 1.3em;
-  margin: 0.2em;
-  padding: 0.45rem 1.3rem;
-  background-color: var(--main-bg-color);
-  color: var(--main-font-color);
-}
-
-.validator .button-group button.yes {
-  background-color: var(--review-selected-color);
-}
-
-.validator .button-group button.no {
-  background-color: var(--review-selected-color);
-}
-
-#review-form .loading-text {
-  width: 100%;
-  text-align: center;
-}
-
-#review-form .review-footer button {
-  max-height: 50px;
-}
-
-.review-footer {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0;
-}
-
 .card-review-footer {
   margin-bottom: 50px;
   text-align: center;
@@ -94,88 +55,19 @@
   justify-content: center;
 }
 
-.pager-container {
-  text-align: center;
-  display: flex;
-}
-
-.pager {
-  padding: 0.5rem 0.5rem;
-  margin: 0 1rem;
-  display: inline-block;
-  text-align: center;
-  cursor: pointer;
-  border: 1px solid var(--main-font-color);
-  border-radius: 2px;
-  background-color: transparent;
-  color: var(--main-font-color);
-}
-
-.pager:hover {
-  background-color: gray;
-}
-
-.pager:active {
-  background-color: red;
-}
-
-.pager.active {
-  opacity: 0.8;
-  pointer-events: none;
-  text-decoration: none;
-  border-color: var(--deactive-color);
-  box-shadow: none;
-}
-
-.main-root {
-  margin: 50px auto;
-  position: relative;
-  height: calc(2 * var(--sentence-box-height));
-  width: 50vw;
-  overflow: hidden;
-}
-
-.card {
-  background-size: cover;
-  position: absolute;
-  background: #F8F3F3;
-  height: calc(2 * var(--sentence-box-height));
-  width: 50vw;
-  cursor: pointer;
-  padding: 1em;
-  transition: box-shadow .3s;
-  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
-}
-
-.card-source {
-  position: absolute;
-  bottom: 20px;
-  padding: 0 0.5rem;
-}
-
 .animate {
   transition: transform .3s;
   box-shadow: none;
 }
 
-.inactive {
-  box-shadow: none;
-}
-
 @media screen and (max-width: 1024px) {
-  .review-footer {
-    flex-direction: column-reverse;
-  }
-
-  .card-review-footer {
-    justify-content: space-between;
-  }
-
   .main-root {
     width: 100%;
   }
-
   .card {
     width: 100%;
   }
-}
+  .card-review-footer {
+    justify-content: space-between;
+  }
+}
diff --git a/web/src/actions/settings.ts b/web/src/actions/settings.ts
@@ -8,12 +8,10 @@ export const ACTION_SETTINGS_CHANGED = 'ACTION_SETTINGS_CHANGED';
 export const ACTION_SETTINGS_CHANGED_FAILURE = 'ACTION_SETTINGS_CHANGED_FAILURE';
 
 type SettingsValue = string | boolean | number
-type Settings = {
-  useSwipeReview: boolean
-}
+type Settings = Record<string, unknown>
 
 export function setSetting(key: string, value: SettingsValue): ThunkAction<void, RootState, unknown, AnyAction> {
-  return async function(dispatch) {
+  return async function (dispatch) {
     try {
       await sendRequest('users/settings', 'POST', { key, value });
       dispatch(settingsChanged({

diff --git a/web/src/components/add.test.tsx b/web/src/components/add.test.tsx
@@ -39,11 +39,11 @@ test('should submit sentences including review', async () => {
   }));
   (redux.useDispatch as jest.Mock).mockImplementation(() => dispatchMock);
 
-  render(<Add/>);
+  render(<Add />);
 
   fireEvent.change(screen.getByRole('combobox'), { target: { value: 'en' } });
-  fireEvent.input(screen.getByRole('textbox', { name: /Add public domain sentences/i }), { target: { value: sentences.join('\n') }});
-  fireEvent.input(screen.getByRole('textbox', { name: /Where are these public domain sentences from?/i }), { target: { value: source }});
+  fireEvent.input(screen.getByRole('textbox', { name: /Add public domain sentences/i }), { target: { value: sentences.join('\n') } });
+  fireEvent.input(screen.getByRole('textbox', { name: /Where are these public domain sentences from?/i }), { target: { value: source } });
   await userEvent.click(screen.getByText(/confirm that these sentences/));
   await act(async () => {
     await userEvent.click(screen.getByText('Submit'));
@@ -52,8 +52,8 @@ test('should submit sentences including review', async () => {
   expect(screen.getByText(/3 of these sentences are unreviewed/)).toBeTruthy();
   await userEvent.click(screen.getByText('Review'));
 
-  await userEvent.click(screen.getAllByText('👍')[0]);
-  await userEvent.click(screen.getAllByText('👎')[1]);
+  await userEvent.click(screen.getByText('Approve'));
+  await userEvent.click(screen.getByText('Reject'));
   await act(async () => {
     await userEvent.click(screen.getByText('Finish Review'));
   });
@@ -76,11 +76,11 @@ test('should submit sentences including review - with errors', async () => {
   }));
   (redux.useDispatch as jest.Mock).mockImplementation(() => dispatchMock);
 
-  render(<Add/>);
+  render(<Add />);
 
   fireEvent.change(screen.getByRole('combobox'), { target: { value: 'en' } });
-  fireEvent.input(screen.getByRole('textbox', { name: /Add public domain sentences/i }), { target: { value: sentences.join('\n') }});
-  fireEvent.input(screen.getByRole('textbox', { name: /Where are these public domain sentences from?/i }), { target: { value: source }});
+  fireEvent.input(screen.getByRole('textbox', { name: /Add public domain sentences/i }), { target: { value: sentences.join('\n') } });
+  fireEvent.input(screen.getByRole('textbox', { name: /Where are these public domain sentences from?/i }), { target: { value: source } });
   await userEvent.click(screen.getByText(/confirm that these sentences/));
   await act(async () => {
     await userEvent.click(screen.getByText('Submit'));
@@ -89,7 +89,7 @@ test('should submit sentences including review - with errors', async () => {
   expect(screen.getByText(/3 of these sentences are unreviewed/)).toBeTruthy();
   await userEvent.click(screen.getByText('Review'));
 
-  await userEvent.click(screen.getAllByText('👍')[0]);
+  await userEvent.click(screen.getByText('Approve'));
   await act(async () => {
     await userEvent.click(screen.getByText('Finish Review'));
   });
@@ -112,11 +112,11 @@ test('should submit sentences including review - with unexpected server response
   }));
   (redux.useDispatch as jest.Mock).mockImplementation(() => dispatchMock);
 
-  render(<Add/>);
+  render(<Add />);
 
   fireEvent.change(screen.getByRole('combobox'), { target: { value: 'en' } });
-  fireEvent.input(screen.getByRole('textbox', { name: /Add public domain sentences/i }), { target: { value: sentences.join('\n') }});
-  fireEvent.input(screen.getByRole('textbox', { name: /Where are these public domain sentences from?/i }), { target: { value: source }});
+  fireEvent.input(screen.getByRole('textbox', { name: /Add public domain sentences/i }), { target: { value: sentences.join('\n') } });
+  fireEvent.input(screen.getByRole('textbox', { name: /Where are these public domain sentences from?/i }), { target: { value: source } });
   await userEvent.click(screen.getByText(/confirm that these sentences/));
   await act(async () => {
     await userEvent.click(screen.getByText('Submit'));
@@ -125,7 +125,7 @@ test('should submit sentences including review - with unexpected server response
   expect(screen.getByText(/3 of these sentences are unreviewed/)).toBeTruthy();
   await userEvent.click(screen.getByText('Review'));
 
-  await userEvent.click(screen.getAllByText('👍')[0]);
+  await userEvent.click(screen.getByText('Approve'));
   await act(async () => {
     await userEvent.click(screen.getByText('Finish Review'));
   });

diff --git a/web/src/components/add.tsx b/web/src/components/add.tsx
@@ -60,7 +60,7 @@ export default function Add() {
     sentences: string[]
     source: string
   }
-  
+
   const onSubmit = ({ language, sentences, source }: OnSubmitProps) => {
     setLanguage(language);
     setSource(source);
@@ -116,23 +116,24 @@ export default function Add() {
   if (reviewing.length > 0) {
     // The review form allows us to examine, and validate sentences.
     return <ReviewForm onReviewed={onReviewed}
-                       onSkip={onSkip}
-                       sentences={reviewing} />;
+      onSkip={onSkip}
+      sentences={reviewing}
+      language={language} />;
   } else if (unreviewed.length > 0 || validated.length > 0 || invalidated.length > 0) {
     // The confirm form is a stats page where sentence submission happens.
     return <ConfirmForm onSubmit={onConfirm}
-                        onReview={onReviewStart}
-                        submitted={submitted}
-                        unreviewed={unreviewed}
-                        validated={validated}
-                        invalidated={invalidated}
-                        isUploadingSentences={isUploadingSentences} />;
+      onReview={onReviewStart}
+      submitted={submitted}
+      unreviewed={unreviewed}
+      validated={validated}
+      invalidated={invalidated}
+      isUploadingSentences={isUploadingSentences} />;
   } else {
     // The plain submission form allows copy & pasting
     return <SubmitForm onSubmit={onSubmit}
-                       message={message}
-                       error={error}
-                       languages={extendedLanguages}
-                       sentenceSubmissionFailures={sentenceSubmissionFailures} />;
+      message={message}
+      error={error}
+      languages={extendedLanguages}
+      sentenceSubmissionFailures={sentenceSubmissionFailures} />;
   }
 }
diff --git a/web/src/components/pager.test.tsx b/web/src/components/pager.test.tsx