✨ Working user create form

frontend/src/features/auth/UserCreate.tsx

@@ -1,13 +1,49 @@
-import { useQuery } from "@apollo/client";
+import { useMutation } from "@apollo/client";
 import React from "react";
+import { SubmitHandler, useForm } from "react-hook-form";
 
-import { AllUsersDocument } from "../../types";
+import { CreateUserDocument } from "../../types";
+
+type FormValues = {
+  firstName: string;
+  lastName: string;
+  email: string;
+};
 
 export const UserCreate = () => {
-  const { data, loading } = useQuery(AllUsersDocument);
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors },
+  } = useForm<FormValues>();
+  const [createUser, { loading: creating }] = useMutation(CreateUserDocument);
 
-  if (loading) return <div>Loading...</div>;
+  const onSubmit: SubmitHandler<FormValues> = async (data) => {
+    try {
+      await createUser({ variables: data });
+    } catch (err) {
+      console.error("woops", err);
+      return;
+    }
+    reset();
+  };
 
-  const allUsers = data?.allUsers || [];
-  return <div>TODO</div>;
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <label>Fornavn</label>
+      <input {...register("firstName", { required: true })} />
+      {errors.firstName && <span>This field is required</span>}
+      <br />
+      <label>Etternavn</label>
+      <input {...register("lastName", { required: true })} />
+      {errors.lastName && <span>This field is required</span>}
+      <br />
+      <label>E-post</label>
+      <input type="email" {...register("email", { required: true })} />
+      {errors.email && <span>This field is required</span>}
+      <br />
+      <input type="submit" disabled={creating} />
+    </form>
+  );
 };

frontend/src/features/auth/createUser.graphql

@@ -0,0 +1,10 @@
+mutation CreateUser($firstName: String!, $lastName: String!, $email: String!) {
+  createUser(input: {firstName: $firstName, lastName: $lastName, email: $email}) {
+    id
+    firstName
+    lastName
+    profile {
+      id
+    }
+  }
+}