diff --git a/src/app/components/user-profile/UserRoomProfile.tsx b/src/app/components/user-profile/UserRoomProfile.tsx index 1c32cc36..fca93f01 100644 --- a/src/app/components/user-profile/UserRoomProfile.tsx +++ b/src/app/components/user-profile/UserRoomProfile.tsx @@ -2,6 +2,7 @@ import { Box, Button, Chip, + color, config, Icon, Icons, @@ -10,13 +11,14 @@ import { MenuItem, PopOut, RectCords, + Spinner, Text, } from 'folds'; -import React, { MouseEventHandler, useState } from 'react'; +import React, { MouseEventHandler, useCallback, useState } from 'react'; import FocusTrap from 'focus-trap-react'; import { isKeyHotkey } from 'is-hotkey'; import { UserHero, UserHeroName } from './UserHero'; -import { getMxIdServer, mxcUrlToHttp } from '../../utils/matrix'; +import { getDMRoomFor, getMxIdServer, mxcUrlToHttp } from '../../utils/matrix'; import { getMemberAvatarMxc, getMemberDisplayName } from '../../utils/room'; import { useMatrixClient } from '../../hooks/useMatrixClient'; import { useMediaAuthentication } from '../../hooks/useMediaAuthentication'; @@ -36,6 +38,12 @@ import { CutoutCard } from '../cutout-card'; import { SettingTile } from '../setting-tile'; import { useOpenSpaceSettings } from '../../state/hooks/spaceSettings'; import { SpaceSettingsPage } from '../../state/spaceSettings'; +import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback'; +import { createDM } from '../../../client/action/room'; +import { hasDevices } from '../../../util/matrixUtil'; +import { useRoomNavigate } from '../../hooks/useRoomNavigate'; +import { useAlive } from '../../hooks/useAlive'; +import { useCloseUserRoomProfile } from '../../state/hooks/userRoomProfile'; function PowerChip({ userId }: { userId: string }) { const mx = useMatrixClient(); @@ -229,6 +237,10 @@ type UserRoomProfileProps = { export function UserRoomProfile({ userId }: UserRoomProfileProps) { const mx = useMatrixClient(); const useAuthentication = useMediaAuthentication(); + const { navigateRoom } = useRoomNavigate(); + const alive = useAlive(); + const closeUserRoomProfile = useCloseUserRoomProfile(); + const room = useRoom(); const powerlevels = usePowerLevels(room); const { getPowerLevel, canDoAction } = usePowerLevelsAPI(powerlevels); @@ -246,6 +258,28 @@ export function UserRoomProfile({ userId }: UserRoomProfileProps) { const presence = useUserPresence(userId); + const [directMessageState, directMessage] = useAsyncCallback( + useCallback(async () => { + const result = await createDM(mx, userId, await hasDevices(mx, userId)); + return result.room_id as string; + }, [userId, mx]) + ); + + const handleMessage = () => { + const dmRoomId = getDMRoomFor(mx, userId)?.roomId; + if (dmRoomId) { + navigateRoom(dmRoomId); + closeUserRoomProfile(); + return; + } + directMessage().then((rId) => { + if (alive()) { + navigateRoom(rId); + closeUserRoomProfile(); + } + }); + }; + return ( - {/* + - */} + + {directMessageState.status === AsyncStatus.Error && ( + + {directMessageState.error.message} + + )} {server && }