fix: fix empty page after reviewing last sentence (fixes common-voice…

…#498)

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 }}>