Replace FormModal with AddUserFormModal and remove unused code

frontend/src/components/crud/AddUserFormModal.tsx

@@ -0,0 +1,86 @@
+import React, { useState } from "react";
+import { JSONSchema7 } from "json-schema";
+import { Form } from "@rjsf/bootstrap-4";
+import SimpleEntityAPIClient, {
+  SimpleEntityRequest,
+  SimpleEntityResponse,
+} from "../../APIClients/SimpleEntityAPIClient";
+
+const schema: JSONSchema7 = {
+  title: "Create Simple Entity",
+  description: "A simple form to test creating a simple entity",
+  type: "object",
+  required: [
+    "stringField",
+    "intField",
+    "stringArrayField",
+    "enumField",
+    "boolField",
+  ],
+  properties: {
+    stringField: {
+      type: "string",
+      title: "String Field",
+      default: "UW Blueprint",
+    },
+    intField: {
+      type: "integer",
+      title: "Integer Field",
+      default: 2017,
+    },
+    stringArrayField: {
+      type: "array",
+      items: {
+        type: "string",
+      },
+      title: "String Array Field",
+      default: [],
+    },
+    enumField: {
+      type: "string",
+      enum: ["A", "B", "C", "D"],
+      title: "Enum Field",
+      default: "A",
+    },
+    boolField: {
+      type: "boolean",
+      title: "Boolean Field",
+      default: true,
+    },
+  },
+};
+
+const uiSchema = {
+  boolField: {
+    "ui:widget": "select",
+  },
+};
+
+const AddUserFormModal = (): React.ReactElement => {
+  const [data, setData] = useState<SimpleEntityResponse | null>(null);
+  const [formFields, setFormFields] = useState<SimpleEntityRequest | null>(
+    null,
+  );
+
+  if (data) {
+    return <p>Created! ✔️</p>;
+  }
+
+  const onSubmit = async ({ formData }: { formData: SimpleEntityRequest }) => {
+    const result = await SimpleEntityAPIClient.create({ formData });
+    setData(result);
+  };
+  return (
+    <Form
+      formData={formFields}
+      schema={schema}
+      uiSchema={uiSchema}
+      onChange={({ formData }: { formData: SimpleEntityRequest }) =>
+        setFormFields(formData)
+      }
+      onSubmit={onSubmit}
+    />
+  );
+};
+
+export default AddUserFormModal;

frontend/src/components/pages/UserManagementPage.tsx

@@ -13,7 +13,7 @@ import {
 import UserAPIClient from "../../APIClients/UserAPIClient";
 import { User } from "../../types/UserTypes";
 import MainPageButton from "../common/MainPageButton";
-import FormModal from "../crud/FormModal";
+import AddUserFormModal from "../crud/AddUserFormModal";
 
 const UserManagementPage = (): React.ReactElement => {
   const [users, setUsers] = useState<User[]>([]);
@@ -38,20 +38,20 @@ const UserManagementPage = (): React.ReactElement => {
     }
   };
 
-  const closeModal = () => {
-    setIsModalOpen(false);
-  };
+  // const closeModal = () => {
+  //   setIsModalOpen(false);
+  // };
 
-  const handleSendInvite = (formData: {
-    firstName: string;
-    lastName: string;
-    phoneNumber: string;
-    email: string;
-    role: string;
-  }) => {
-    // eslint-disable-next-line no-console
-    console.log(`Invite sent to ${formData.email}`);
-  };
+  // const handleSendInvite = (formData: {
+  //   firstName: string;
+  //   lastName: string;
+  //   phoneNumber: string;
+  //   email: string;
+  //   role: string;
+  // }) => {
+  //   // eslint-disable-next-line no-console
+  //   console.log(`Invite sent to ${formData.email}`);
+  // };
 
   useEffect(() => {
     getUsers();
@@ -82,11 +82,7 @@ const UserManagementPage = (): React.ReactElement => {
           </Table>
         </TableContainer>
         <Button onClick={addUser}>+ Add a User</Button>
-        <FormModal
-          show={isModalOpen}
-          onClose={closeModal}
-          handleSendInvite={handleSendInvite}
-        />
+        {isModalOpen && <AddUserFormModal />}
         <MainPageButton />
       </VStack>
     </div>