Replace SwipeCard with react-tinder-card (fixes #461)

web/css/review-form.css

@@ -2,24 +2,10 @@
  --sentence-box-height: 14rem;
 }
 
-.main-root {
+.cards-container {
  margin: 50px auto;
- position: relative;
- height: var(--sentence-box-height);
- width: 50vw;
- overflow: hidden;
-}
-
-.card {
- background-size: cover;
- position: absolute;
- background: #F8F3F3;
  height: 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 {
@@ -30,16 +16,19 @@
 }
 
 .card-sentence-box {
- width: 100%;
- height: 100%;
+ height: var(--sentence-box-height);
+ width: 50vw;
+ position: relative;
+ cursor: pointer;
+ background-color: #F8F3F3;
  border: none;
  flex-basis: 100%;
  line-height: 1rem;
  align-items: center;
  display: flex;
  flex-direction: column;
  font-size: 1rem;
- padding: 0;
+ padding: 1em;
 }
 
 .card-sentence-box small {
@@ -56,17 +45,16 @@
  justify-content: center;
 }
 
-.animate {
- transition: transform .3s;
- box-shadow: none;
+.swipe {
+ position: absolute;
 }
 
 @media screen and (max-width: 1024px) {
- .main-root {
+ .cards-container {
  width: 100%;
  }
- .card {
- width: 100%;
+ .card-sentence-box {
+ width: var(--max-content-width);
  }
  .card-review-footer {
  justify-content: space-between;

web/css/root.css

@@ -18,6 +18,7 @@
  --header-height: 65px;
  --footer-height: 60px;
  --footer-margin-top: 1.5rem;
+ --max-content-width: 85vw;
 }
 
 html {
@@ -34,18 +35,12 @@ body {
  margin: 0;
 }
 
-input,
-textarea,
-button,
-select {
+input, textarea, button, select {
  font-family: var(--main-font-family);
  font-size: 0.8rem;
 }
 
-h1,
-h2,
-h3,
-h4 {
+h1, h2, h3, h4 {
  font-family: var(--second-font-family);
  margin: 0.5em 0;
 }
@@ -76,8 +71,7 @@ input {
  padding: 0.2rem;
 }
 
-.button,
-button {
+.button, button {
  transition: background-color 300ms, border-color 300ms, color 300ms;
  background-color: var(--main-bg-color);
  border: 2px solid var(--second-bg-color);
@@ -90,46 +84,36 @@ button {
  border-radius: 50px;
 }
 
-.button:disabled,
-button:disabled {
+.button:disabled, button:disabled {
  background-color: var(--deactive-color);
  border-color: var(--deactive-color);
  box-shadow: none;
 }
 
-.button:not(:disabled):hover,
-.button:not(:disabled):active,
-button:not(:disabled):hover,
-button:not(:disabled):active {
+.button:not(:disabled):hover, .button:not(:disabled):active, button:not(:disabled):hover, button:not(:disabled):active {
  background-color: var(--second-bg-color);
  color: var(--second-font-color);
 }
 
-.button:not(:disabled):active,
-button:not(:disabled):active {
+.button:not(:disabled):active, button:not(:disabled):active {
  box-shadow: none;
 }
 
-.button.secondary,
-button.secondary {
+.button.secondary, button.secondary {
  background-color: var(--main-bg-color);
  border-color: var(--light-border-color);
  color: var(--main-font-color);
  margin: 0.5rem;
  padding: 0.2rem 1rem;
 }
 
-.button.secondary:hover,
-.button.secondary:active,
-button.secondary:hover,
-button.secondary:active {
+.button.secondary:hover, .button.secondary:active, button.secondary:hover, button.secondary:active {
  background-color: var(--main-bg-color);
  border-color: var(--second-bg-color);
  color: var(--main-font-color);
 }
 
-.button.big,
-button.big {
+.button.big, button.big {
  padding: 0.5rem 1rem;
 }
 
@@ -144,7 +128,7 @@ select {
 }
 
 main {
- max-width: 85vw;
+ max-width: var(--max-content-width);
  margin: 2rem auto 0 auto;
  padding-bottom: calc(var(--footer-height) + var(--footer-margin-top) + 50px);
 }
@@ -166,8 +150,7 @@ form input[type="checkbox"] {
  margin: 0 10px 0 0;
 }
 
-form input[type="password"],
-form input[type="text"] {
+form input[type="password"], form input[type="text"] {
  width: 100%;
  margin-bottom: 0.5rem;
 }

web/package.json

@@ -22,6 +22,7 @@
  "react-redux": "^7.2.3",
  "react-router": "^5.2.0",
  "react-router-dom": "^5.2.0",
+ "react-tinder-card": "^1.4.0",
  "redux": "^4.0.5",
  "redux-persist": "^6.0.0",
  "redux-thunk": "^2.3.0",

web/src/components/add.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import * as redux from 'react-redux';
-import { render, screen, fireEvent, act } from '@testing-library/react';
+import { render, screen, fireEvent, act, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import Add from './add';
@@ -52,12 +52,27 @@ 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.getByText('Approve'));
- await userEvent.click(screen.getByText('Reject'));
+ await waitFor(() => {
+ expect(screen.getByText(sentences[2])).toBeTruthy();
+ });
  await act(async () => {
- await userEvent.click(screen.getByText('Finish Review'));
+ await userEvent.click(screen.getByText('Approve'));
+ });
+
+ await waitFor(() => {
+ expect(screen.getByText(sentences[1])).toBeTruthy();
+ });
+ await act(async () => {
+ await userEvent.click(screen.getByText('Reject'));
  });
 
+ await waitFor(() => {
+ expect(screen.getByText(sentences[0])).toBeTruthy();
+ });
+
+ await act(async () => {
+ await userEvent.click(screen.getByText('Finish Review'));
+ });
  expect(screen.getByText(/2 sentences are already reviewed/)).toBeTruthy();
  await act(async () => {
  await userEvent.click(screen.getByText('Confirm'));
@@ -89,7 +104,16 @@ 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.getByText('Approve'));
+ await waitFor(() => {
+ expect(screen.getByText(sentences[2])).toBeTruthy();
+ });
+ await act(async () => {
+ await userEvent.click(screen.getByText('Approve'));
+ });
+
+ await waitFor(() => {
+ expect(screen.getByText(sentences[1])).toBeTruthy();
+ });
  await act(async () => {
  await userEvent.click(screen.getByText('Finish Review'));
  });
@@ -125,7 +149,16 @@ 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.getByText('Approve'));
+ await waitFor(() => {
+ expect(screen.getByText(sentences[2])).toBeTruthy();
+ });
+ await act(async () => {
+ await userEvent.click(screen.getByText('Approve'));
+ });
+
+ await waitFor(() => {
+ expect(screen.getByText(sentences[1])).toBeTruthy();
+ });
  await act(async () => {
  await userEvent.click(screen.getByText('Finish Review'));
  });

web/src/components/add.tsx

@@ -117,7 +117,7 @@ export default function Add() {
  // The review form allows us to examine, and validate sentences.
  return <ReviewForm onReviewed={onReviewed}
  onSkip={onSkip}
- sentences={reviewing}
+ sentences={reviewing.reverse()}
  language={language} />;
  } else if (unreviewed.length > 0 || validated.length > 0 || invalidated.length > 0) {
  // The confirm form is a stats page where sentence submission happens.