Skip to content

Commit

Permalink
Chore: Convert UserCardWithData to ts (#26192)
Browse files Browse the repository at this point in the history
  • Loading branch information
dougfabris authored Jul 22, 2022
1 parent 0777bd1 commit 45ee02d
Show file tree
Hide file tree
Showing 5 changed files with 32 additions and 30 deletions.
4 changes: 2 additions & 2 deletions apps/meteor/client/components/UserCard/UserCard.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { css } from '@rocket.chat/css-in-js';
import { Box, IconButton, Skeleton } from '@rocket.chat/fuselage';
import { useTranslation } from '@rocket.chat/ui-contexts';
import React, { forwardRef, ReactNode, ComponentProps } from 'react';
import React, { forwardRef, ReactNode, ComponentProps, MouseEvent } from 'react';

import MarkdownText from '../MarkdownText';
import * as Status from '../UserStatus';
Expand All @@ -22,7 +22,7 @@ const clampStyle = css`
type UserCardProps = {
className?: string;
style?: ComponentProps<typeof Box>['style'];
open?: () => void;
open?: (e: MouseEvent<HTMLElement>) => void;
name?: string;
username?: string;
etag?: string;
Expand Down
7 changes: 2 additions & 5 deletions apps/meteor/client/components/UserCard/UserCardAction.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,7 @@
import { IconButton, Icon } from '@rocket.chat/fuselage';
import { IconButton } from '@rocket.chat/fuselage';
import React, { ReactElement, ComponentProps } from 'react';

type UserCardActionProps = {
label?: string;
icon: ComponentProps<typeof Icon>['name'];
};
type UserCardActionProps = ComponentProps<typeof IconButton>;

const UserCardAction = ({ label, icon, ...props }: UserCardActionProps): ReactElement => (
<IconButton icon={icon} small title={label} {...props} mi='x2' />
Expand Down
4 changes: 3 additions & 1 deletion apps/meteor/client/views/hooks/useActionSpread.ts
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,9 @@ const mapOptions = ([key, { action, label, icon }]: [string, Action]): [string,
];

export const useActionSpread = (
actions: Action[],
actions: {
[key: string]: Action;
},
size = 2,
): { actions: [string, Action][]; menu: { [id: string]: MenuOption } | undefined } =>
useMemo(() => {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import { IRoom } from '@rocket.chat/core-typings';
import { PositionAnimated, AnimatedVisibility, Menu, Option } from '@rocket.chat/fuselage';
import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
import { useSetting, useRolesDescription, useTranslation } from '@rocket.chat/ui-contexts';
import React, { useMemo, useRef } from 'react';
import { useSetting, useRolesDescription } from '@rocket.chat/ui-contexts';
import React, { useMemo, useRef, ReactElement } from 'react';

import { Backdrop } from '../../../components/Backdrop';
import LocalTime from '../../../components/LocalTime';
Expand All @@ -12,17 +13,20 @@ import { useEndpointData } from '../../../hooks/useEndpointData';
import { useActionSpread } from '../../hooks/useActionSpread';
import { useUserInfoActions } from '../hooks/useUserInfoActions';

const UserCardWithData = ({ username, onClose, target, open, rid }) => {
const ref = useRef(target);
type UserCardWithDataProps = {
username: string;
onClose: () => void;
target: Element;
open: (e: Event) => void;
rid: IRoom['_id'];
};

const UserCardWithData = ({ username, onClose, target, open, rid }: UserCardWithDataProps): ReactElement => {
const ref = useRef(target);
const getRoles = useRolesDescription();

const t = useTranslation();

const showRealNames = useSetting('UI_Use_Real_Name');

const query = useMemo(() => ({ username }), [username]);

const { value: data, phase: state } = useEndpointData('/v1/users.info', query);

ref.current = target;
Expand All @@ -31,19 +35,16 @@ const UserCardWithData = ({ username, onClose, target, open, rid }) => {
const loading = state === AsyncStatePhase.LOADING;
const defaultValue = loading ? undefined : null;

const { user } = data || { user: {} };

const {
_id,
name = username,
roles = defaultValue,
status = null,
statusText = status,
statusText,
bio = defaultValue,
utcOffset = defaultValue,
nickname,
avatarETag,
} = user;
} = data?.user || {};

return {
_id,
Expand All @@ -52,19 +53,20 @@ const UserCardWithData = ({ username, onClose, target, open, rid }) => {
roles: roles && getRoles(roles).map((role, index) => <UserCard.Role key={index}>{role}</UserCard.Role>),
bio,
etag: avatarETag,
localTime: Number.isInteger(utcOffset) && <LocalTime utcOffset={utcOffset} />,
status: <ReactiveUserStatus uid={_id} />,
localTime: utcOffset && Number.isInteger(utcOffset) && <LocalTime utcOffset={utcOffset} />,
status: _id && <ReactiveUserStatus uid={_id} />,
customStatus: statusText,
nickname,
};
}, [data, username, showRealNames, state, getRoles]);

const handleOpen = useMutableCallback((e) => {
open && open(e);
onClose && onClose();
open?.(e);
onClose?.();
});

const { actions: actionsDefinition, menu: menuOptions } = useActionSpread(useUserInfoActions(user, rid));
const userActions = useUserInfoActions({ _id: user._id ?? '', username: user.username }, rid);
const { actions: actionsDefinition, menu: menuOptions } = useActionSpread(userActions);

const menu = useMemo(() => {
if (!menuOptions) {
Expand All @@ -74,17 +76,17 @@ const UserCardWithData = ({ username, onClose, target, open, rid }) => {
return (
<Menu
flexShrink={0}
maxHeight='initial'
mi='x2'
key='menu'
ghost={false}
renderItem={({ label: { label, icon }, ...props }) => <Option {...props} label={label} icon={icon} />}
renderItem={({ label: { label, icon }, ...props }): ReactElement => <Option {...props} label={label} icon={icon} />}
options={menuOptions}
/>
);
}, [menuOptions]);

const actions = useMemo(() => {
const mapAction = ([key, { label, icon, action }]) => (
const mapAction = ([key, { label, icon, action }]: any): ReactElement => (
<UserCard.Action key={key} label={label} aria-label={label} onClick={action} icon={icon} />
);

Expand All @@ -95,7 +97,7 @@ const UserCardWithData = ({ username, onClose, target, open, rid }) => {
<>
<Backdrop bg='transparent' onClick={onClose} />
<PositionAnimated anchor={ref} placement='top-start' margin={8} visible={AnimatedVisibility.UNHIDING}>
<UserCard {...user} onClose={onClose} open={handleOpen} actions={actions} t={t} />
<UserCard {...user} onClose={onClose} open={handleOpen} actions={actions} />
</PositionAnimated>
</>
);
Expand Down
1 change: 1 addition & 0 deletions apps/meteor/client/views/room/UserCard/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default } from './UserCardWithData';

0 comments on commit 45ee02d

Please sign in to comment.