Differential D8135 Diff 27512 web/modals/threads/members/member.react.js

Changeset View

Standalone View

web/modals/threads/members/member.react.js

// @flow		// @flow

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

import {		import { removeUsersFromThread } from 'lib/actions/thread-actions.js';
removeUsersFromThread,
changeThreadMemberRoles,
} from 'lib/actions/thread-actions.js';
import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';		import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
import {		import {
memberIsAdmin,		memberIsAdmin,
memberHasAdminPowers,		memberHasAdminPowers,
removeMemberFromThread,		removeMemberFromThread,
switchMemberAdminRoleInThread,
getAvailableThreadMemberActions,		getAvailableThreadMemberActions,
} from 'lib/shared/thread-utils.js';		} from 'lib/shared/thread-utils.js';
import { stringForUser } from 'lib/shared/user-utils.js';		import { stringForUser } from 'lib/shared/user-utils.js';
import type { SetState } from 'lib/types/hook-types.js';		import type { SetState } from 'lib/types/hook-types.js';
import {		import {
type RelativeMemberInfo,		type RelativeMemberInfo,
type ThreadInfo,		type ThreadInfo,
} from 'lib/types/thread-types.js';		} from 'lib/types/thread-types.js';
Show All 39 Lines	() =>
threadInfo,		threadInfo,
memberInfo,		memberInfo,
dispatchActionPromise,		dispatchActionPromise,
boundRemoveUsersFromThread,		boundRemoveUsersFromThread,
),		),
[boundRemoveUsersFromThread, dispatchActionPromise, memberInfo, threadInfo],		[boundRemoveUsersFromThread, dispatchActionPromise, memberInfo, threadInfo],
);		);

const isCurrentlyAdmin = memberIsAdmin(memberInfo, threadInfo);		const onClickChangeRole = React.useCallback(() => {}, []);
const boundChangeThreadMemberRoles = useServerCall(changeThreadMemberRoles);

const onMemberAdminRoleToggled = React.useCallback(
() =>
switchMemberAdminRoleInThread(
threadInfo,
memberInfo,
isCurrentlyAdmin,
dispatchActionPromise,
boundChangeThreadMemberRoles,
),
[
boundChangeThreadMemberRoles,
dispatchActionPromise,
isCurrentlyAdmin,
memberInfo,
threadInfo,
],
);

const menuItems = React.useMemo(		const menuItems = React.useMemo(
() =>		() =>
getAvailableThreadMemberActions(memberInfo, threadInfo).map(action => {		getAvailableThreadMemberActions(memberInfo, threadInfo).map(action => {
if (action === 'remove_admin') {		if (action === 'change_role') {
return (
<MenuItem
key="remove_admin"
text="Remove admin"
icon="cross-circle"
onClick={onMemberAdminRoleToggled}
/>
);
}
if (action === 'make_admin') {
return (		return (
<MenuItem		<MenuItem
key="make_admin"		key="change_role"
text="Make admin"		text="Change Role"
icon="plus-circle"		icon="plus-circle"
		atulUnsubmitted Not Done Inline Actions Are we sure `plus-circle` is an appropriate icon for "Change Role"? CC @ted for his thoughts atul: Are we sure `plus-circle` is an appropriate icon for "Change Role"? CC @ted for his thoughts
		rohanAuthorUnsubmitted Done Inline Actions The plus-circle seems to be used in the designs (screenshot below is from Figma) so I used that one. Happy to change though rohan: The plus-circle seems to be used in the designs (screenshot below is from Figma) so I used that…
		ashoatUnsubmitted Not Done Inline Actions I agree with @atul. @ted doesn't seem to have responded here... pinging him again ashoat: I agree with @atul. @ted doesn't seem to have responded here... pinging him again
		ashoatUnsubmitted Not Done Inline Actions Still no response from @ted – @rohan can you make sure to ping him about this? It would be good to create a Linear task to track ashoat: Still no response from @ted – @rohan can you make sure to ping him about this? It would be good…
		ashoatUnsubmitted Not Done Inline Actions https://linear.app/comm/issue/DES-116/reconsider-the-change-role-icon ashoat: https://linear.app/comm/issue/DES-116/reconsider-the-change-role-icon
onClick={onMemberAdminRoleToggled}		onClick={onClickChangeRole}
/>		/>
);		);
}		}
if (action === 'remove_user') {		if (action === 'remove_user') {
return (		return (
<MenuItem		<MenuItem
key="remove_user"		key="remove_user"
text="Remove user"		text="Remove User"
icon="logout"		icon="logout"
onClick={onClickRemoveUser}		onClick={onClickRemoveUser}
dangerous		dangerous
/>		/>
);		);
}		}
return null;		return null;
}),		}),
[memberInfo, onClickRemoveUser, onMemberAdminRoleToggled, threadInfo],		[memberInfo, onClickRemoveUser, onClickChangeRole, threadInfo],
);		);

const userSettingsIcon = React.useMemo(		const userSettingsIcon = React.useMemo(
() => <SWMansionIcon icon="edit-1" size={17} />,		() => <SWMansionIcon icon="edit-1" size={17} />,
[],		[],
);		);

const label = React.useMemo(() => {		const label = React.useMemo(() => {
Show All 33 Lines