76 lines
2 KiB
React
76 lines
2 KiB
React
|
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>
|
||
|
|
);
|
||
|
|
}
|