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 9ebe9f3c7a7b4afd604ee3159cc35ea7348a1677..cd8062959ec67cab269d4e95db44c3167f0e49e2 100644 (file)
--- 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);
 }
 
   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.
           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 {
 }
 
 class Game extends React.Component {