Differential D5583 Diff 23222 web/modals/components/add-members-item.react.js

Changeset View

Standalone View

web/modals/components/add-members-item.react.js

Show All 10 Lines	type AddMembersItemProps = {
+userInfo: UserListItem,		+userInfo: UserListItem,
+onClick: (userID: string) => void,		+onClick: (userID: string) => void,
+userAdded: boolean,		+userAdded: boolean,
};		};

function AddMemberItem(props: AddMembersItemProps): React.Node {		function AddMemberItem(props: AddMembersItemProps): React.Node {
const { userInfo, onClick, userAdded = false } = props;		const { userInfo, onClick, userAdded = false } = props;

const canBeAdded = !userInfo.alertText;		const canBeAdded = !userInfo.alert;

const onClickCallback = React.useCallback(() => {		const onClickCallback = React.useCallback(() => {
if (!canBeAdded) {		if (!canBeAdded) {
return;		return;
}		}
onClick(userInfo.id);		onClick(userInfo.id);
}, [canBeAdded, onClick, userInfo.id]);		}, [canBeAdded, onClick, userInfo.id]);

const action = React.useMemo(() => {		const action = React.useMemo(() => {
if (!canBeAdded) {		if (!canBeAdded) {
return userInfo.alertTitle;		return userInfo.alert?.title;
}		}
if (userAdded) {		if (userAdded) {
return <span className={css.danger}>Remove</span>;		return <span className={css.danger}>Remove</span>;
} else {		} else {
return 'Add';		return 'Add';
}		}
}, [canBeAdded, userAdded, userInfo.alertTitle]);		}, [canBeAdded, userAdded, userInfo.alert]);

return (		return (
<Button		<Button
className={css.addMemberItem}		className={css.addMemberItem}
onClick={onClickCallback}		onClick={onClickCallback}
disabled={!canBeAdded}		disabled={!canBeAdded}
>		>
<div className={css.label}>{userInfo.username}</div>		<div className={css.label}>{userInfo.username}</div>
<div className={css.label}>{action}</div>		<div className={css.label}>{action}</div>
</Button>		</Button>
);		);
}		}

export default AddMemberItem;		export default AddMemberItem;