Initial avatar work

This commit is contained in:
Robert Long 2021-12-15 14:31:07 -08:00
parent b57eaee5ca
commit 24944f1cac
3 changed files with 82 additions and 42 deletions

View file

@ -612,17 +612,35 @@ export function getRoomUrl(roomId) {
} }
} }
export function useDisplayName(client) { function getAvatarUrl(client, mxcUrl, avatarSize = 96) {
const [{ loading, displayName, error, success }, setState] = useState(() => ({ const width = Math.floor(avatarSize * window.devicePixelRatio);
success: false, const height = Math.floor(avatarSize * window.devicePixelRatio);
loading: false, return mxcUrl && client.mxcUrlToHttp(mxcUrl, width, height, "crop");
displayName: client?.getUser(client.getUserId())?.displayName, }
error: null,
})); export function useProfile(client) {
const [{ loading, displayName, avatarUrl, error, success }, setState] =
useState(() => {
const user = client?.getUser(client.getUserId());
return {
success: false,
loading: false,
displayName: user?.displayName,
avatarUrl: user && client && getAvatarUrl(client, user.avatarUrl),
error: null,
};
});
useEffect(() => { useEffect(() => {
const onChangeDisplayName = (_event, { displayName }) => { const onChangeUser = (_event, { displayName, avatarUrl }) => {
setState({ success: false, loading: false, displayName, error: null }); setState({
success: false,
loading: false,
displayName,
avatarUrl: getAvatarUrl(client, avatarUrl),
error: null,
});
}; };
let user; let user;
@ -630,18 +648,20 @@ export function useDisplayName(client) {
if (client) { if (client) {
const userId = client.getUserId(); const userId = client.getUserId();
user = client.getUser(userId); user = client.getUser(userId);
user.on("User.displayName", onChangeDisplayName); user.on("User.displayName", onChangeUser);
user.on("User.avatarUrl", onChangeUser);
} }
return () => { return () => {
if (user) { if (user) {
user.removeListener("User.displayName", onChangeDisplayName); user.removeListener("User.displayName", onChangeUser);
user.removeListener("User.avatarUrl", onChangeUser);
} }
}; };
}, [client]); }, [client]);
const setDisplayName = useCallback( const saveProfile = useCallback(
(displayName) => { async ({ displayName, avatar }) => {
if (client) { if (client) {
setState((prev) => ({ setState((prev) => ({
...prev, ...prev,
@ -650,30 +670,33 @@ export function useDisplayName(client) {
success: false, success: false,
})); }));
client try {
.setDisplayName(displayName) await client.setDisplayName(displayName);
.then(() => {
setState((prev) => ({ const url = await client.uploadContent(avatar);
...prev, await client.setAvatarUrl(url);
displayName,
loading: false, setState((prev) => ({
success: true, ...prev,
})); displayName,
}) avatarUrl: getAvatarUrl(client, url),
.catch((error) => { loading: false,
setState((prev) => ({ success: true,
...prev, }));
loading: false, } catch (error) {
error, setState((prev) => ({
success: false, ...prev,
})); loading: false,
}); error,
success: false,
}));
}
} else { } else {
console.error("Client not initialized before calling setDisplayName"); console.error("Client not initialized before calling saveProfile");
} }
}, },
[client] [client]
); );
return { loading, error, displayName, setDisplayName, success }; return { loading, error, displayName, avatarUrl, saveProfile, success };
} }

View file

@ -1,6 +1,6 @@
import React, { useCallback, useEffect, useState } from "react"; import React, { useCallback, useEffect, useState } from "react";
import { Button } from "./button"; import { Button } from "./button";
import { useDisplayName } from "./ConferenceCallManagerHooks"; import { useProfile } from "./ConferenceCallManagerHooks";
import { FieldRow, InputField, ErrorMessage } from "./Input"; import { FieldRow, InputField, ErrorMessage } from "./Input";
import { Modal, ModalContent } from "./Modal"; import { Modal, ModalContent } from "./Modal";
@ -11,8 +11,8 @@ export function ProfileModal({ client, ...rest }) {
error, error,
loading, loading,
displayName: initialDisplayName, displayName: initialDisplayName,
setDisplayName: submitDisplayName, saveProfile,
} = useDisplayName(client); } = useProfile(client);
const [displayName, setDisplayName] = useState(initialDisplayName || ""); const [displayName, setDisplayName] = useState(initialDisplayName || "");
const onChangeDisplayName = useCallback( const onChangeDisplayName = useCallback(
@ -27,10 +27,14 @@ export function ProfileModal({ client, ...rest }) {
e.preventDefault(); e.preventDefault();
const data = new FormData(e.target); const data = new FormData(e.target);
const displayName = data.get("displayName"); const displayName = data.get("displayName");
console.log(displayName); const avatar = data.get("avatar");
submitDisplayName(displayName);
saveProfile({
displayName,
avatar,
});
}, },
[setDisplayName] [saveProfile]
); );
useEffect(() => { useEffect(() => {
@ -56,6 +60,9 @@ export function ProfileModal({ client, ...rest }) {
onChange={onChangeDisplayName} onChange={onChangeDisplayName}
/> />
</FieldRow> </FieldRow>
<FieldRow>
<InputField type="file" id="avatar" name="avatar" label="Avatar" />
</FieldRow>
{error && ( {error && (
<FieldRow> <FieldRow>
<ErrorMessage>{error.message}</ErrorMessage> <ErrorMessage>{error.message}</ErrorMessage>

View file

@ -8,10 +8,11 @@ import styles from "./UserMenu.module.css";
import { Item } from "@react-stately/collections"; import { Item } from "@react-stately/collections";
import { Menu } from "./Menu"; import { Menu } from "./Menu";
import { useHistory, useLocation } from "react-router-dom"; import { useHistory, useLocation } from "react-router-dom";
import { useClient, useDisplayName } from "./ConferenceCallManagerHooks"; import { useClient, useProfile } from "./ConferenceCallManagerHooks";
import { useModalTriggerState } from "./Modal"; import { useModalTriggerState } from "./Modal";
import { ProfileModal } from "./ProfileModal"; import { ProfileModal } from "./ProfileModal";
import { Tooltip, TooltipTrigger } from "./Tooltip"; import { Tooltip, TooltipTrigger } from "./Tooltip";
import { Avatar } from "./Avatar";
export function UserMenu({ disableLogout }) { export function UserMenu({ disableLogout }) {
const location = useLocation(); const location = useLocation();
@ -24,7 +25,7 @@ export function UserMenu({ disableLogout }) {
userName, userName,
client, client,
} = useClient(); } = useClient();
const { displayName } = useDisplayName(client); const { displayName, avatarUrl } = useProfile(client);
const { modalState, modalProps } = useModalTriggerState(); const { modalState, modalProps } = useModalTriggerState();
const onAction = useCallback( const onAction = useCallback(
@ -87,7 +88,16 @@ export function UserMenu({ disableLogout }) {
<PopoverMenuTrigger placement="bottom right"> <PopoverMenuTrigger placement="bottom right">
<TooltipTrigger> <TooltipTrigger>
<Button variant="icon" className={styles.userButton}> <Button variant="icon" className={styles.userButton}>
<UserIcon /> {isAuthenticated && !isGuest && !isPasswordlessUser ? (
<Avatar
size="sm"
src={avatarUrl}
fallback={(displayName || userName).slice(0, 1).toUpperCase()}
className={styles.avatar}
/>
) : (
<UserIcon />
)}
</Button> </Button>
{(props) => ( {(props) => (
<Tooltip position="bottomLeft" {...props}> <Tooltip position="bottomLeft" {...props}>