From f40827c73716112bd941d194c0f1ebe1b8e7b029 Mon Sep 17 00:00:00 2001
From: Michael Kohler <me@michaelkohler.info>
Date: Thu, 28 Oct 2021 19:45:28 +0200
Subject: [PATCH] fix: fix empty page after reviewing last sentence (fixes
 #498)

---
 web/src/components/review-form.tsx | 23 +++++++++++++++--------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/web/src/components/review-form.tsx b/web/src/components/review-form.tsx
index bbb6f4b5..b6806ed6 100755
--- a/web/src/components/review-form.tsx
+++ b/web/src/components/review-form.tsx
@@ -37,10 +37,6 @@ export default function SwipeReview(props: Props) {
     []
   );
 
-  if (sentences.length === 0) {
-    return null;
-  }
-
   const APPROVAL_DIRECTIONS: Record<string, boolean> = {
     left: false,
     right: true,
@@ -104,9 +100,16 @@ export default function SwipeReview(props: Props) {
       direction = 'up';
     }
 
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    await cardsRefs[currentSentenceIndex].current.swipe(direction);
+    try {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      await cardsRefs[currentSentenceIndex].current.swipe(direction);
+    } catch (error) {
+      // If the swipe failed we either could not process the swipe at all
+      // or it was the last card leading to an error on the card as the
+      // component gets unmounted at the same time due to no sentences
+      // being left to review. In both cases we can ignore this error.
+    }
   };
 
   useEffect(() => {
@@ -131,11 +134,15 @@ export default function SwipeReview(props: Props) {
   }, [currentSentenceIndex]);
 
   useEffect(() => {
-    if (reviewedSentencesCount + skippedSentencesCount === sentences.length) {
+    if (sentences.length !== 0 && reviewedSentencesCount + skippedSentencesCount === sentences.length) {
       submitSentences();
     }
   }, [reviewedSentencesCount, skippedSentencesCount]);
 
+  if (sentences.length === 0) {
+    return null;
+  }
+
   return (
     <form id="review-form" onSubmit={onSubmit}>
       <Localized id="sc-review-title" attrs={{ message: true }}>