mirror of
				https://github.com/cinnyapp/cinny.git
				synced 2025-11-04 14:30:29 +03:00 
			
		
		
		
	open new user profile in all places
This commit is contained in:
		
							parent
							
								
									a44cefedcf
								
							
						
					
					
						commit
						1c56d626b1
					
				
					 3 changed files with 53 additions and 24 deletions
				
			
		| 
						 | 
				
			
			@ -19,9 +19,10 @@ import { getMemberDisplayName } from '../../utils/room';
 | 
			
		|||
import { getMxIdLocalPart } from '../../utils/matrix';
 | 
			
		||||
import * as css from './EventReaders.css';
 | 
			
		||||
import { useMatrixClient } from '../../hooks/useMatrixClient';
 | 
			
		||||
import { openProfileViewer } from '../../../client/action/navigation';
 | 
			
		||||
import { UserAvatar } from '../user-avatar';
 | 
			
		||||
import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 | 
			
		||||
import { useOpenUserRoomProfile } from '../../state/hooks/userRoomProfile';
 | 
			
		||||
import { useSpaceOptionally } from '../../hooks/useSpace';
 | 
			
		||||
 | 
			
		||||
export type EventReadersProps = {
 | 
			
		||||
  room: Room;
 | 
			
		||||
| 
						 | 
				
			
			@ -33,6 +34,8 @@ export const EventReaders = as<'div', EventReadersProps>(
 | 
			
		|||
    const mx = useMatrixClient();
 | 
			
		||||
    const useAuthentication = useMediaAuthentication();
 | 
			
		||||
    const latestEventReaders = useRoomEventReaders(room, eventId);
 | 
			
		||||
    const openProfile = useOpenUserRoomProfile();
 | 
			
		||||
    const space = useSpaceOptionally();
 | 
			
		||||
 | 
			
		||||
    const getName = (userId: string) =>
 | 
			
		||||
      getMemberDisplayName(room, userId) ?? getMxIdLocalPart(userId) ?? userId;
 | 
			
		||||
| 
						 | 
				
			
			@ -57,19 +60,32 @@ export const EventReaders = as<'div', EventReadersProps>(
 | 
			
		|||
            <Box className={css.Content} direction="Column">
 | 
			
		||||
              {latestEventReaders.map((readerId) => {
 | 
			
		||||
                const name = getName(readerId);
 | 
			
		||||
                const avatarMxcUrl = room
 | 
			
		||||
                  .getMember(readerId)
 | 
			
		||||
                  ?.getMxcAvatarUrl();
 | 
			
		||||
                const avatarUrl = avatarMxcUrl ? mx.mxcUrlToHttp(avatarMxcUrl, 100, 100, 'crop', undefined, false, useAuthentication) : undefined;
 | 
			
		||||
                const avatarMxcUrl = room.getMember(readerId)?.getMxcAvatarUrl();
 | 
			
		||||
                const avatarUrl = avatarMxcUrl
 | 
			
		||||
                  ? mx.mxcUrlToHttp(
 | 
			
		||||
                      avatarMxcUrl,
 | 
			
		||||
                      100,
 | 
			
		||||
                      100,
 | 
			
		||||
                      'crop',
 | 
			
		||||
                      undefined,
 | 
			
		||||
                      false,
 | 
			
		||||
                      useAuthentication
 | 
			
		||||
                    )
 | 
			
		||||
                  : undefined;
 | 
			
		||||
 | 
			
		||||
                return (
 | 
			
		||||
                  <MenuItem
 | 
			
		||||
                    key={readerId}
 | 
			
		||||
                    style={{ padding: `0 ${config.space.S200}` }}
 | 
			
		||||
                    radii="400"
 | 
			
		||||
                    onClick={() => {
 | 
			
		||||
                      requestClose();
 | 
			
		||||
                      openProfileViewer(readerId, room.roomId);
 | 
			
		||||
                    onClick={(event) => {
 | 
			
		||||
                      openProfile(
 | 
			
		||||
                        room.roomId,
 | 
			
		||||
                        space?.roomId,
 | 
			
		||||
                        readerId,
 | 
			
		||||
                        event.currentTarget.getBoundingClientRect(),
 | 
			
		||||
                        'Bottom'
 | 
			
		||||
                      );
 | 
			
		||||
                    }}
 | 
			
		||||
                    before={
 | 
			
		||||
                      <Avatar size="200">
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -20,12 +20,13 @@ import { getMemberDisplayName } from '../../../utils/room';
 | 
			
		|||
import { eventWithShortcode, getMxIdLocalPart } from '../../../utils/matrix';
 | 
			
		||||
import * as css from './ReactionViewer.css';
 | 
			
		||||
import { useMatrixClient } from '../../../hooks/useMatrixClient';
 | 
			
		||||
import { openProfileViewer } from '../../../../client/action/navigation';
 | 
			
		||||
import { useRelations } from '../../../hooks/useRelations';
 | 
			
		||||
import { Reaction } from '../../../components/message';
 | 
			
		||||
import { getHexcodeForEmoji, getShortcodeFor } from '../../../plugins/emoji';
 | 
			
		||||
import { UserAvatar } from '../../../components/user-avatar';
 | 
			
		||||
import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
 | 
			
		||||
import { useOpenUserRoomProfile } from '../../../state/hooks/userRoomProfile';
 | 
			
		||||
import { useSpaceOptionally } from '../../../hooks/useSpace';
 | 
			
		||||
 | 
			
		||||
export type ReactionViewerProps = {
 | 
			
		||||
  room: Room;
 | 
			
		||||
| 
						 | 
				
			
			@ -41,6 +42,8 @@ export const ReactionViewer = as<'div', ReactionViewerProps>(
 | 
			
		|||
      relations,
 | 
			
		||||
      useCallback((rel) => [...(rel.getSortedAnnotationsByKey() ?? [])], [])
 | 
			
		||||
    );
 | 
			
		||||
    const space = useSpaceOptionally();
 | 
			
		||||
    const openProfile = useOpenUserRoomProfile();
 | 
			
		||||
 | 
			
		||||
    const [selectedKey, setSelectedKey] = useState<string>(() => {
 | 
			
		||||
      if (initialKey) return initialKey;
 | 
			
		||||
| 
						 | 
				
			
			@ -111,24 +114,31 @@ export const ReactionViewer = as<'div', ReactionViewerProps>(
 | 
			
		|||
                  const name = (member ? getName(member) : getMxIdLocalPart(senderId)) ?? senderId;
 | 
			
		||||
 | 
			
		||||
                  const avatarMxcUrl = member?.getMxcAvatarUrl();
 | 
			
		||||
                  const avatarUrl = avatarMxcUrl ? mx.mxcUrlToHttp(
 | 
			
		||||
                    avatarMxcUrl,
 | 
			
		||||
                    100,
 | 
			
		||||
                    100,
 | 
			
		||||
                    'crop',
 | 
			
		||||
                    undefined,
 | 
			
		||||
                    false,
 | 
			
		||||
                    useAuthentication
 | 
			
		||||
                  ) : undefined;
 | 
			
		||||
                  const avatarUrl = avatarMxcUrl
 | 
			
		||||
                    ? mx.mxcUrlToHttp(
 | 
			
		||||
                        avatarMxcUrl,
 | 
			
		||||
                        100,
 | 
			
		||||
                        100,
 | 
			
		||||
                        'crop',
 | 
			
		||||
                        undefined,
 | 
			
		||||
                        false,
 | 
			
		||||
                        useAuthentication
 | 
			
		||||
                      )
 | 
			
		||||
                    : undefined;
 | 
			
		||||
 | 
			
		||||
                  return (
 | 
			
		||||
                    <MenuItem
 | 
			
		||||
                      key={senderId}
 | 
			
		||||
                      style={{ padding: `0 ${config.space.S200}` }}
 | 
			
		||||
                      radii="400"
 | 
			
		||||
                      onClick={() => {
 | 
			
		||||
                        requestClose();
 | 
			
		||||
                        openProfileViewer(senderId, room.roomId);
 | 
			
		||||
                      onClick={(event) => {
 | 
			
		||||
                        openProfile(
 | 
			
		||||
                          room.roomId,
 | 
			
		||||
                          space?.roomId,
 | 
			
		||||
                          senderId,
 | 
			
		||||
                          event.currentTarget.getBoundingClientRect(),
 | 
			
		||||
                          'Bottom'
 | 
			
		||||
                        );
 | 
			
		||||
                      }}
 | 
			
		||||
                      before={
 | 
			
		||||
                        <Avatar size="200">
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -3,14 +3,17 @@ import { useNavigate } from 'react-router-dom';
 | 
			
		|||
import { useRoomNavigate } from './useRoomNavigate';
 | 
			
		||||
import { useMatrixClient } from './useMatrixClient';
 | 
			
		||||
import { isRoomId, isUserId } from '../utils/matrix';
 | 
			
		||||
import { openProfileViewer } from '../../client/action/navigation';
 | 
			
		||||
import { getHomeRoomPath, withSearchParam } from '../pages/pathUtils';
 | 
			
		||||
import { _RoomSearchParams } from '../pages/paths';
 | 
			
		||||
import { useOpenUserRoomProfile } from '../state/hooks/userRoomProfile';
 | 
			
		||||
import { useSpaceOptionally } from './useSpace';
 | 
			
		||||
 | 
			
		||||
export const useMentionClickHandler = (roomId: string): ReactEventHandler<HTMLElement> => {
 | 
			
		||||
  const mx = useMatrixClient();
 | 
			
		||||
  const { navigateRoom, navigateSpace } = useRoomNavigate();
 | 
			
		||||
  const navigate = useNavigate();
 | 
			
		||||
  const openProfile = useOpenUserRoomProfile();
 | 
			
		||||
  const space = useSpaceOptionally();
 | 
			
		||||
 | 
			
		||||
  const handleClick: ReactEventHandler<HTMLElement> = useCallback(
 | 
			
		||||
    (evt) => {
 | 
			
		||||
| 
						 | 
				
			
			@ -21,7 +24,7 @@ export const useMentionClickHandler = (roomId: string): ReactEventHandler<HTMLEl
 | 
			
		|||
      if (typeof mentionId !== 'string') return;
 | 
			
		||||
 | 
			
		||||
      if (isUserId(mentionId)) {
 | 
			
		||||
        openProfileViewer(mentionId, roomId);
 | 
			
		||||
        openProfile(roomId, space?.roomId, mentionId, target.getBoundingClientRect());
 | 
			
		||||
        return;
 | 
			
		||||
      }
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			@ -37,7 +40,7 @@ export const useMentionClickHandler = (roomId: string): ReactEventHandler<HTMLEl
 | 
			
		|||
 | 
			
		||||
      navigate(viaServers ? withSearchParam<_RoomSearchParams>(path, { viaServers }) : path);
 | 
			
		||||
    },
 | 
			
		||||
    [mx, navigate, navigateRoom, navigateSpace, roomId]
 | 
			
		||||
    [mx, navigate, navigateRoom, navigateSpace, roomId, space, openProfile]
 | 
			
		||||
  );
 | 
			
		||||
 | 
			
		||||
  return handleClick;
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue