From 1f5f87999b2dbd87f005d54c79351466bdf5e301 Mon Sep 17 00:00:00 2001
From: Thiago Chaves <thiago.coh@gmail.com>
Date: Wed, 10 Aug 2022 08:10:07 +0300
Subject: [PATCH] Small UX improvements for add expression view

* respond to ENTER with query action
* eliminate a case of failure in silence
---
 .../AddExpressionView/AddExpressionView.tsx   | 23 ++++++++++++++-----
 1 file changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/views/AddExpressionView/AddExpressionView.tsx b/src/views/AddExpressionView/AddExpressionView.tsx
index b1dda74..b94962b 100644
--- a/src/views/AddExpressionView/AddExpressionView.tsx
+++ b/src/views/AddExpressionView/AddExpressionView.tsx
@@ -13,7 +13,7 @@ export function AddExpressionView() {
   const [error, setError] = useState<any>(undefined);
 
   return (
-    <div className="page-with-bottom-navigation">
+    <form className="page-with-bottom-navigation">
       <section className="padding-small scroll">
         <div className="padding-small">
           {error ? <p className="text-error">{error.message}</p> : null}
@@ -49,8 +49,10 @@ export function AddExpressionView() {
           <button
             className="navigation-item bottom text-navigation grow"
             type="submit"
+            value="submit"
             disabled={prompt === ""}
-            onClick={async () => {
+            onClick={async (event) => {
+              event.preventDefault();
               try {
                 // `https://en.wiktionary.org/w/api.php?action=parse&format=json&prop=text&page=${query}`;
                 const url = URL.format({
@@ -67,9 +69,15 @@ export function AddExpressionView() {
                 });
                 const result = await fetch(url);
                 const data = await result.json();
-                setExpression(
-                  parseWiktionaryData(prompt, data.parse?.text?.["*"] || "")
+                const expressionData = parseWiktionaryData(
+                  prompt,
+                  data.parse?.text?.["*"] || ""
                 );
+                if (!expressionData)
+                  throw new Error(
+                    `Unable to find expression "${prompt}" on Wiktionary in the given language`
+                  );
+                setExpression(expressionData);
               } catch (error) {
                 setError(error);
               }
@@ -83,6 +91,7 @@ export function AddExpressionView() {
               className="navigation-item bottom text-navigation grow"
               type="button"
               onClick={() => {
+                setPrompt("");
                 setExpression(null);
                 setSubmitStatus(undefined);
                 setError(undefined);
@@ -104,12 +113,14 @@ export function AddExpressionView() {
                     expression_set_id: 1,
                     category_ids: [],
                   });
-                  setExpression(null);
                   setSubmitStatus(`Card "${expression.prompt}" saved`);
                   setError(undefined);
                 } catch (error) {
                   setSubmitStatus(undefined);
                   setError(error);
+                } finally {
+                  setPrompt("");
+                  setExpression(null);
                 }
               }}
             >
@@ -118,6 +129,6 @@ export function AddExpressionView() {
           </>
         )}
       </section>
-    </div>
+    </form>
   );
 }