Add user creation form

Author: chenaski

src/App.css

@@ -1,4 +1,11 @@
 .App {
   max-width: 500px;
   margin: 0 auto;
+  display: flex;
+}
+
+.App > * {
+  flex-grow: 1;
+  flex-basis: 0;
+  padding: 0 10px;
 }

src/App.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import "./App.css";
 import { gql } from "@apollo/client/core";
 import { useUsersQuery } from "./generated/graphql";
+import { CreateUserForm } from "./CreateUserForm";
 
 const USER_FRAGMENT_GQL = gql`
   fragment UserInfo on User {
@@ -59,19 +60,25 @@ function App() {
 
   return (
     <div className="App">
-      {loading ? (
-        <p>Loading...</p>
-      ) : data?.users.length ? (
-        <ul>
-          {data.users.map((user) => (
-            <li key={user.id}>{user.name}</li>
-          ))}
-        </ul>
-      ) : (
-        <p>There is no data available</p>
-      )}
+      <CreateUserForm />
 
-      {!!error && <p>{error}</p>}
+      <section>
+        <h1>Users</h1>
+
+        {loading ? (
+          <p>Loading...</p>
+        ) : data?.users.length ? (
+          <ul>
+            {data.users.map((user) => (
+              <li key={user.id}>{user.name}</li>
+            ))}
+          </ul>
+        ) : (
+          <p>There is no data available</p>
+        )}
+
+        {!!error && <p>{error}</p>}
+      </section>
     </div>
   );
 }

src/CreateUserForm.tsx

@@ -0,0 +1,80 @@
+import React, { ChangeEvent, FormEvent } from "react";
+import { CreateUserInput, useCreateUserMutation } from "./generated/graphql";
+
+export const CreateUserForm = () => {
+  const [createUserMutation, { loading, error }] = useCreateUserMutation();
+
+  const initialFormState = {
+    username: "",
+    name: "",
+    email: "",
+    password: "",
+  };
+  const [formData, setFormData] = React.useState(initialFormState);
+
+  const onChange = (name: keyof CreateUserInput) => (
+    e: ChangeEvent<HTMLInputElement>
+  ) => {
+    const value = e.target.value;
+    setFormData({
+      ...formData,
+      [name]: value,
+    });
+  };
+  const getInputProps = (name: keyof CreateUserInput) => ({
+    value: formData[name],
+    onChange: onChange(name),
+  });
+
+  const onSubmit = async (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    await createUserMutation({
+      variables: {
+        createUserInput: formData,
+      },
+    });
+
+    setFormData(initialFormState);
+  };
+
+  return (
+    <section>
+      <h1>Create User</h1>
+
+      <form onSubmit={onSubmit}>
+        <label>
+          Username
+          <input name={"new-username"} {...getInputProps("username")} />
+        </label>
+
+        <label>
+          Name
+          <input name={"new-name"} {...getInputProps("name")} />
+        </label>
+
+        <label>
+          Email
+          <input
+            type={"email"}
+            name={"new-email"}
+            {...getInputProps("email")}
+          />
+        </label>
+
+        <label>
+          Password
+          <input
+            type={"password"}
+            name={"new-password"}
+            {...getInputProps("password")}
+          />
+        </label>
+
+        <button disabled={loading}>Create</button>
+
+        {!!error && <p>{error}</p>}
+      </form>
+    </section>
+  );
+};

src/index.css

@@ -11,3 +11,16 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
+
+form > * + * {
+  margin-top: 10px;
+}
+
+label {
+  display: block;
+}
+
+input {
+  display: block;
+  margin-top: 5px;
+}