From: Carl Worth <cworth@cworth.org>
Date: Fri, 12 Jun 2020 00:08:02 +0000 (-0700)
Subject: Add clean support for rejecting categories that are too large
X-Git-Url: https://git.cworth.org/git?p=lmno.games;a=commitdiff_plain;h=6baa178ee249fde9b660e91c6d6cc374b3d755ac;hp=413b73b9282a294e20dc400e243a57a0a6a1d12e

Add clean support for rejecting categories that are too large

This is clean in the sense that it prints a message if the server
rejects the submission, but before that it will even do the nice thing
of checking the number on the client side, (and reporting this with
the HTML5 validity API).
---

diff --git a/empathy/empathy.jsx b/empathy/empathy.jsx
index fcfea4d..3d70345 100644
--- a/empathy/empathy.jsx
+++ b/empathy/empathy.jsx
@@ -1,3 +1,5 @@
+const MAX_PROMPT_ITEMS = 20;
+
 function undisplay(element) {
   element.style.display="none";
 }
@@ -185,11 +187,15 @@ class CategoryRequest extends React.PureComponent {
     const category_input = this.category.current;
     const category = category_input.value;
 
-    if (/[0-9]/.test(category))
-      category_input.setCustomValidity("");
+    const match = category.match(/[0-9]+/);
+    if (match) {
+      const num_items = parseInt(match[0], 10);
+      if (num_items <= MAX_PROMPT_ITEMS)
+        category_input.setCustomValidity("");
+    }
   }
 
-  handle_submit(event) {
+  async handle_submit(event) {
     const form = event.currentTarget;
     const category_input = this.category.current;
     const category = category_input.value;
@@ -204,11 +210,30 @@ class CategoryRequest extends React.PureComponent {
       return;
     }
 
-    fetch_post_json("prompts", {
-      items: parseInt(match[0], 10),
+    const num_items = parseInt(match[0], 10);
+
+    if (num_items > MAX_PROMPT_ITEMS) {
+      category_input.setCustomValidity(`Maximum number of items is ${MAX_PROMPT_ITEMS}`);
+      form.reportValidity();
+      return;
+    }
+
+    const response = await fetch_post_json("prompts", {
+      items: num_items,
       prompt: category
     });
 
+    if (response.status === 200) {
+      const result = await response.json();
+      console.log(result);
+      if (! result.valid) {
+        add_message("danger", result.message);
+        return;
+      }
+    } else {
+      add_message("danger", "An error occurred submitting your category");
+    }
+
     form.reset();
   }