Page MenuHomePhorge
Files F32210558

D8595.1765132123.diff
No OneTemporary
Actions

Size
3 KB
Referenced Files
None
Subscribers
None

D8595.1765132123.diff
View Options

diff --git a/web/roles/create-roles-modal.react.js b/web/roles/create-roles-modal.react.js
--- a/web/roles/create-roles-modal.react.js
+++ b/web/roles/create-roles-modal.react.js
@@ -3,9 +3,19 @@
import classNames from 'classnames';
import * as React from 'react';
+import {
+ modifyCommunityRole,
+ modifyCommunityRoleActionTypes,
+} from 'lib/actions/thread-actions.js';
import { useModalContext } from 'lib/components/modal-provider.react.js';
+import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
+import type { LoadingStatus } from 'lib/types/loading-types.js';
import { type UserSurfacedPermission } from 'lib/types/thread-permission-types.js';
import type { ThreadInfo } from 'lib/types/thread-types.js';
+import {
+ useServerCall,
+ useDispatchActionPromise,
+} from 'lib/utils/action-utils.js';
import css from './create-roles-modal.css';
import {
@@ -14,19 +24,34 @@
} from './role-utils.react.js';
import Button, { buttonThemes } from '../components/button.react.js';
import EnumSettingsOption from '../components/enum-settings-option.react.js';
+import LoadingIndicator from '../loading-indicator.react.js';
import Input from '../modals/input.react.js';
import Modal from '../modals/modal.react.js';
+import { useSelector } from '../redux/redux-utils.js';
+
+const createRolesLoadingStatusSelector = createLoadingStatusSelector(
+ modifyCommunityRoleActionTypes,
+);
type CreateRolesModalProps = {
+threadInfo: ThreadInfo,
+action: 'create_role' | 'edit_role',
+ +existingRoleID?: string,
+roleName: string,
+rolePermissions: $ReadOnlyArray<UserSurfacedPermission>,
};
function CreateRolesModal(props: CreateRolesModalProps): React.Node {
const { popModal } = useModalContext();
- const { threadInfo, roleName, rolePermissions } = props;
+ const { threadInfo, action, existingRoleID, roleName, rolePermissions } =
+ props;
+
+ const callModifyCommunityRole = useServerCall(modifyCommunityRole);
+ const dispatchActionPromise = useDispatchActionPromise();
+
+ const createRolesLoadingStatus: LoadingStatus = useSelector(
+ createRolesLoadingStatusSelector,
+ );
const [pendingRoleName, setPendingRoleName] =
React.useState<string>(roleName);
@@ -100,6 +125,44 @@
],
);
+ const onClickCreateRole = React.useCallback(() => {
+ // TODO: Error handling in a later diff
+
+ dispatchActionPromise(
+ modifyCommunityRoleActionTypes,
+ (async () => {
+ const response = await callModifyCommunityRole({
+ community: threadInfo.id,
+ existingRoleID,
+ action,
+ name: pendingRoleName,
+ permissions: pendingRolePermissions,
+ });
+ popModal();
+ return response;
+ })(),
+ );
+ }, [
+ callModifyCommunityRole,
+ dispatchActionPromise,
+ threadInfo,
+ action,
+ existingRoleID,
+ pendingRoleName,
+ pendingRolePermissions,
+ popModal,
+ ]);
+
+ const saveButtonContent = React.useMemo(() => {
+ if (createRolesLoadingStatus === 'loading') {
+ return (
+ <LoadingIndicator status={createRolesLoadingStatus} size="medium" />
+ );
+ }
+
+ return 'Save';
+ }, [createRolesLoadingStatus]);
+
return (
<Modal name="Create Role" onClose={onCloseModal} size="large">
<form method="POST" className={css.formContainer}>
@@ -136,9 +199,9 @@
variant="filled"
className={css.createRoleButton}
buttonColor={buttonThemes.standard}
- onClick={null}
+ onClick={onClickCreateRole}
>
- Create
+ {saveButtonContent}
</Button>
</div>
</Modal>

File Metadata

Mime Type
text/plain
Expires
Sun, Dec 7, 6:28 PM (20 h, 31 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
5845395
Default Alt Text
D8595.1765132123.diff (3 KB)

Event Timeline