Add profile modal

src/ProfileModal.jsx

@@ -0,0 +1,76 @@
+import React, { useCallback, useEffect, useState } from "react";
+import { Button } from "./button";
+import { useDisplayName } from "./ConferenceCallManagerHooks";
+import { FieldRow, InputField, ErrorMessage } from "./Input";
+import { Modal, ModalContent } from "./Modal";
+
+export function ProfileModal({ client, ...rest }) {
+  const { onClose } = rest;
+  const {
+    success,
+    error,
+    loading,
+    displayName: initialDisplayName,
+    setDisplayName: submitDisplayName,
+  } = useDisplayName(client);
+  const [displayName, setDisplayName] = useState(initialDisplayName || "");
+
+  const onChangeDisplayName = useCallback(
+    (e) => {
+      setDisplayName(e.target.value);
+    },
+    [setDisplayName]
+  );
+
+  const onSubmit = useCallback(
+    (e) => {
+      e.preventDefault();
+      const data = new FormData(e.target);
+      const displayName = data.get("displayName");
+      console.log(displayName);
+      submitDisplayName(displayName);
+    },
+    [setDisplayName]
+  );
+
+  useEffect(() => {
+    if (success) {
+      onClose();
+    }
+  }, [success, onClose]);
+
+  return (
+    <Modal title="Profile" isDismissable {...rest}>
+      <ModalContent>
+        <form onSubmit={onSubmit}>
+          <FieldRow>
+            <InputField
+              id="displayName"
+              name="displayName"
+              label="Display Name"
+              type="text"
+              required
+              autoComplete="off"
+              placeholder="Display Name"
+              value={displayName}
+              onChange={onChangeDisplayName}
+            />
+          </FieldRow>
+          {error && (
+            <FieldRow>
+              <ErrorMessage>{error.message}</ErrorMessage>
+            </FieldRow>
+          )}
+          <FieldRow rightAlign>
+            <Button type="button" variant="secondary" onPress={onClose}>
+              Cancel
+            </Button>
+            <Button type="submit" disabled={loading}>
+              {loading ? "Saving..." : "Save"}
+            </Button>
+          </FieldRow>
+        </form>
+      </ModalContent>
+    </Modal>
+  );
+}