Page MenuHomePhabricator
Files F3300154

D11032.diff
No OneTemporary
Actions

D11032.diff
View Options

diff --git a/web/modals/threads/settings/thread-settings-delete-button.react.js b/web/modals/threads/settings/thread-settings-delete-button.react.js
new file mode 100644
--- /dev/null
+++ b/web/modals/threads/settings/thread-settings-delete-button.react.js
@@ -0,0 +1,43 @@
+// @flow
+
+import * as React from 'react';
+
+import type { SetState } from 'lib/types/hook-types.js';
+import type { ThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
+
+import { useOnDeleteThread } from './thread-settings-utils.js';
+import Button, { buttonThemes } from '../../../components/button.react.js';
+
+type Props = {
+ +threadInfo: ThreadInfo,
+ +threadSettingsOperationInProgress: boolean,
+ +setErrorMessage: SetState<?string>,
+};
+
+function ThreadSettingsDeleteButton(props: Props): React.Node {
+ const { threadInfo, threadSettingsOperationInProgress, setErrorMessage } =
+ props;
+
+ const onDeleteThread = useOnDeleteThread({
+ threadInfo: threadInfo,
+ setErrorMessage,
+ });
+
+ const threadSettingsDeleteButton = React.useMemo(
+ () => (
+ <Button
+ onClick={onDeleteThread}
+ disabled={threadSettingsOperationInProgress}
+ variant="filled"
+ buttonColor={buttonThemes.danger}
+ >
+ Delete
+ </Button>
+ ),
+ [onDeleteThread, threadSettingsOperationInProgress],
+ );
+
+ return threadSettingsDeleteButton;
+}
+
+export default ThreadSettingsDeleteButton;
diff --git a/web/modals/threads/settings/thread-settings-delete-tab.css b/web/modals/threads/settings/thread-settings-delete-tab.css
--- a/web/modals/threads/settings/thread-settings-delete-tab.css
+++ b/web/modals/threads/settings/thread-settings-delete-tab.css
@@ -1,9 +1,3 @@
-form.container {
- display: flex;
- flex-direction: column;
- flex: 1;
-}
-
div.warning_container {
display: flex;
flex-direction: row;
diff --git a/web/modals/threads/settings/thread-settings-delete-tab.react.js b/web/modals/threads/settings/thread-settings-delete-tab.react.js
--- a/web/modals/threads/settings/thread-settings-delete-tab.react.js
+++ b/web/modals/threads/settings/thread-settings-delete-tab.react.js
@@ -3,61 +3,21 @@
import * as React from 'react';
import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
-import { type SetState } from 'lib/types/hook-types.js';
-import type { ThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
-import SubmitSection from './submit-section.react.js';
import css from './thread-settings-delete-tab.css';
-import { useOnDeleteThread } from './thread-settings-utils.js';
-import { buttonThemes } from '../../../components/button.react.js';
-
-type ThreadSettingsDeleteTabProps = {
- +threadSettingsOperationInProgress: boolean,
- +threadInfo: ThreadInfo,
- +setErrorMessage: SetState<?string>,
- +errorMessage?: ?string,
-};
-
-function ThreadSettingsDeleteTab(
- props: ThreadSettingsDeleteTabProps,
-): React.Node {
- const {
- threadSettingsOperationInProgress,
- threadInfo,
- setErrorMessage,
- errorMessage,
- } = props;
-
- const onDeleteThread = useOnDeleteThread({
- threadInfo,
- setErrorMessage,
- });
+function ThreadSettingsDeleteTab(): React.Node {
return (
- <form method="POST" className={css.container}>
- <div>
- <div className={css.warning_container}>
- <SWMansionIcon
- icon="warning-circle"
- className={css.warning_icon}
- size={26}
- />
- <p className={css.deletion_warning}>
- Your chat will be permanently deleted. There is no way to reverse
- this.
- </p>
- </div>
- </div>
- <SubmitSection
- errorMessage={errorMessage}
- onClick={onDeleteThread}
- variant="filled"
- buttonColor={buttonThemes.danger}
- disabled={threadSettingsOperationInProgress}
- >
- Delete
- </SubmitSection>
- </form>
+ <div className={css.warning_container}>
+ <SWMansionIcon
+ icon="warning-circle"
+ className={css.warning_icon}
+ size={26}
+ />
+ <p className={css.deletion_warning}>
+ Your chat will be permanently deleted. There is no way to reverse this.
+ </p>
+ </div>
);
}
diff --git a/web/modals/threads/settings/thread-settings-modal.react.js b/web/modals/threads/settings/thread-settings-modal.react.js
--- a/web/modals/threads/settings/thread-settings-modal.react.js
+++ b/web/modals/threads/settings/thread-settings-modal.react.js
@@ -23,6 +23,7 @@
import { type ThreadChanges } from 'lib/types/thread-types.js';
import { useResolvedThreadInfo } from 'lib/utils/entity-helpers.js';
+import ThreadSettingsDeleteButton from './thread-settings-delete-button.react.js';
import ThreadSettingsDeleteTab from './thread-settings-delete-tab.react.js';
import ThreadSettingsGeneralTab from './thread-settings-general-tab.react.js';
import css from './thread-settings-modal.css';
@@ -223,14 +224,7 @@
/>
);
}
- return (
- <ThreadSettingsDeleteTab
- threadSettingsOperationInProgress={changeInProgress}
- threadInfo={threadInfo}
- setErrorMessage={setErrorMessage}
- errorMessage={errorMessage}
- />
- );
+ return <ThreadSettingsDeleteTab />;
}, [
availableRelationshipActions,
changeInProgress,
@@ -242,6 +236,20 @@
threadInfo,
]);
+ const primaryButton = React.useMemo(() => {
+ if (!threadInfo) {
+ return null;
+ }
+
+ return (
+ <ThreadSettingsDeleteButton
+ threadInfo={threadInfo}
+ threadSettingsOperationInProgress={changeInProgress}
+ setErrorMessage={setErrorMessage}
+ />
+ );
+ }, [changeInProgress, threadInfo]);
+
if (!threadInfo) {
return (
<Modal onClose={modalContext.popModal} name="Invalid chat">
@@ -258,9 +266,10 @@
onClose={modalContext.popModal}
icon="settings"
size="fit-content"
+ subheader={tabs}
+ primaryButton={primaryButton}
>
<div className={css.modal_body}>
- {tabs}
<div className={css.tab_body}>{tabContent}</div>
</div>
</Modal>

File Metadata

Mime Type
text/plain
Expires
Mon, Nov 18, 6:21 PM (21 h, 43 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2535415
Default Alt Text
D11032.diff (6 KB)

Event Timeline