From: Carl Worth <cworth@cworth.org>
Date: Sun, 7 Jun 2020 22:14:10 +0000 (-0700)
Subject: Convert CategoryRequest from a function to a class
X-Git-Url: https://git.cworth.org/git?p=lmno.games;a=commitdiff_plain;h=68a66356ecb9d184e44b8d75e1f7db25926d4af3;ds=sidebyside

Convert CategoryRequest from a function to a class

This seems like it will be more convenient for defining additional
methods to get access to from the JSX code (such as a submit handler
function).
---

diff --git a/empathy/empathy.jsx b/empathy/empathy.jsx
index 9ebe9f3..cd80629 100644
--- a/empathy/empathy.jsx
+++ b/empathy/empathy.jsx
@@ -122,36 +122,42 @@ async function fetch_put_json(api = '', data = {}) {
   return fetch_method_json('PUT', api, data);
 }
 
-function CategoryRequest(props) {
-  return (
-    <div className="category-request">
-      <h2>Submit a Category</h2>
-      <p>
+class CategoryRequest extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <div className="category-request">
+        <h2>Submit a Category</h2>
+        <p>
           Suggest a category to play with your friends. Don't forget to
           include the number of items for each person to submit.
-      </p>
-
-      <form>
-        <div className="form-field large">
-          <input
-            type="text"
-            id="category"
-            placeholder="6 things at the beach"
-            required pattern=".*[0-9]+.*"
-            title="Category must contain a number"
-          >
-          </input>
-        </div>
-
-        <div className="form-field large">
-          <button type="submit">
-            Send
-          </button>
-        </div>
-
-      </form>
-    </div>
-  );
+        </p>
+
+        <form>
+          <div className="form-field large">
+            <input
+              type="text"
+              id="category"
+              placeholder="6 things at the beach"
+              required pattern=".*[0-9]+.*"
+              title="Category must contain a number"
+              >
+            </input>
+          </div>
+
+          <div className="form-field large">
+            <button type="submit">
+              Send
+            </button>
+          </div>
+
+        </form>
+      </div>
+    );
+  }
 }
 
 class Game extends React.Component {