Differential D7205 Diff 24626 web/settings/relationship/friend-list-row.react.js

Changeset View

Standalone View

web/settings/relationship/friend-list-row.react.js

// @flow		// @flow

import * as React from 'react';		import * as React from 'react';

import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';		import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
import { useRelationshipCallbacks } from 'lib/hooks/relationship-prompt.js';		import { useRelationshipCallbacks } from 'lib/hooks/relationship-prompt.js';
import { userRelationshipStatus } from 'lib/types/relationship-types.js';		import { userRelationshipStatus } from 'lib/types/relationship-types.js';

import css from './user-list-row.css';		import css from './user-list-row.css';
import type { UserRowProps } from './user-list.react.js';		import type { UserRowProps } from './user-list.react.js';
import Button from '../../components/button.react.js';		import Button from '../../components/button.react.js';
import MenuItem from '../../components/menu-item.react.js';		import MenuItem from '../../components/menu-item.react.js';
import Menu from '../../components/menu.react.js';		import Menu from '../../components/menu.react.js';
		import UserAvatar from '../../components/user-avatar.react.js';

const dangerButtonColor = {		const dangerButtonColor = {
color: 'var(--btn-bg-danger)',		color: 'var(--btn-bg-danger)',
};		};

function FriendListRow(props: UserRowProps): React.Node {		function FriendListRow(props: UserRowProps): React.Node {
const { userInfo, onMenuVisibilityChange } = props;		const { userInfo, onMenuVisibilityChange } = props;

▲ Show 20 Lines • Show All 53 Lines • ▼ Show 20 Lines	const buttons = React.useMemo(() => {
friendUser,		friendUser,
unfriendUser,		unfriendUser,
userInfo.relationshipStatus,		userInfo.relationshipStatus,
onMenuVisibilityChange,		onMenuVisibilityChange,
]);		]);

return (		return (
<div className={css.container}>		<div className={css.container}>
		<div className={css.userInfoContainer}>
		<UserAvatar size="small" userID={userInfo.id} />
<div className={css.usernameContainer}>{userInfo.username}</div>		<div className={css.usernameContainer}>{userInfo.username}</div>
		</div>
<div className={css.buttons}>{buttons}</div>		<div className={css.buttons}>{buttons}</div>
</div>		</div>
);		);
}		}

export default FriendListRow;		export default FriendListRow;