Changeset View
Changeset View
Standalone View
Standalone View
web/modals/threads/settings/thread-settings-delete-tab.react.js
// @flow | // @flow | ||||
import * as React from 'react'; | import * as React from 'react'; | ||||
import { | import { | ||||
deleteThreadActionTypes, | deleteThreadActionTypes, | ||||
deleteThread, | deleteThread, | ||||
} from 'lib/actions/thread-actions'; | } from 'lib/actions/thread-actions'; | ||||
import { type SetState } from 'lib/types/hook-types'; | import { type SetState } from 'lib/types/hook-types'; | ||||
import { type ThreadInfo } from 'lib/types/thread-types'; | import { type ThreadInfo } from 'lib/types/thread-types'; | ||||
import { | import { | ||||
useDispatchActionPromise, | useDispatchActionPromise, | ||||
useServerCall, | useServerCall, | ||||
} from 'lib/utils/action-utils'; | } from 'lib/utils/action-utils'; | ||||
import Button from '../../../components/button.react'; | |||||
import SWMansionIcon from '../../../SWMansionIcon.react'; | import SWMansionIcon from '../../../SWMansionIcon.react'; | ||||
import Input from '../../input.react'; | import Input from '../../input.react'; | ||||
import { useModalContext } from '../../modal-provider.react'; | import { useModalContext } from '../../modal-provider.react'; | ||||
import SubmitSection from './submit-section.react'; | |||||
import css from './thread-settings-delete-tab.css'; | import css from './thread-settings-delete-tab.css'; | ||||
type ThreadSettingsDeleteTabProps = { | type ThreadSettingsDeleteTabProps = { | ||||
+threadSettingsOperationInProgress: boolean, | +threadSettingsOperationInProgress: boolean, | ||||
+threadInfo: ThreadInfo, | +threadInfo: ThreadInfo, | ||||
+setErrorMessage: SetState<string>, | +setErrorMessage: SetState<?string>, | ||||
+errorMessage?: ?string, | |||||
}; | }; | ||||
function ThreadSettingsDeleteTab( | function ThreadSettingsDeleteTab( | ||||
props: ThreadSettingsDeleteTabProps, | props: ThreadSettingsDeleteTabProps, | ||||
): React.Node { | ): React.Node { | ||||
const { | const { | ||||
threadSettingsOperationInProgress, | threadSettingsOperationInProgress, | ||||
threadInfo, | threadInfo, | ||||
setErrorMessage, | setErrorMessage, | ||||
errorMessage, | |||||
} = props; | } = props; | ||||
const modalContext = useModalContext(); | const modalContext = useModalContext(); | ||||
const dispatchActionPromise = useDispatchActionPromise(); | const dispatchActionPromise = useDispatchActionPromise(); | ||||
const callDeleteThread = useServerCall(deleteThread); | const callDeleteThread = useServerCall(deleteThread); | ||||
const accountPasswordInputRef = React.useRef(); | const accountPasswordInputRef = React.useRef(); | ||||
const [accountPassword, setAccountPassword] = React.useState(''); | const [accountPassword, setAccountPassword] = React.useState(''); | ||||
Show All 35 Lines | const onDelete = React.useCallback( | ||||
(event: SyntheticEvent<HTMLElement>) => { | (event: SyntheticEvent<HTMLElement>) => { | ||||
event.preventDefault(); | event.preventDefault(); | ||||
dispatchActionPromise(deleteThreadActionTypes, deleteThreadAction()); | dispatchActionPromise(deleteThreadActionTypes, deleteThreadAction()); | ||||
}, | }, | ||||
[deleteThreadAction, dispatchActionPromise], | [deleteThreadAction, dispatchActionPromise], | ||||
); | ); | ||||
return ( | return ( | ||||
<form method="POST"> | <form method="POST" className={css.container}> | ||||
<div> | <div> | ||||
<SWMansionIcon icon="warning-circle" size={22} /> | <SWMansionIcon icon="warning-circle" size={22} /> | ||||
<p className={css.deletion_warning}> | <p className={css.deletion_warning}> | ||||
Your chat will be permanently deleted. There is no way to reverse | Your chat will be permanently deleted. There is no way to reverse | ||||
this. | this. | ||||
</p> | </p> | ||||
</div> | </div> | ||||
<div> | <div> | ||||
<p className={css.confirm_account_password}> | <p className={css.confirm_account_password}> | ||||
Please enter your account password to confirm your identity. | Please enter your account password to confirm your identity. | ||||
</p> | </p> | ||||
<div className={css.form_title}>Account password</div> | <div className={css.form_title}>Account password</div> | ||||
<div className={css.form_content}> | <div className={css.form_content}> | ||||
<Input | <Input | ||||
type="password" | type="password" | ||||
placeholder="Password" | placeholder="Password" | ||||
value={accountPassword} | value={accountPassword} | ||||
onChange={onChangeAccountPassword} | onChange={onChangeAccountPassword} | ||||
disabled={threadSettingsOperationInProgress} | disabled={threadSettingsOperationInProgress} | ||||
ref={accountPasswordInputRef} | ref={accountPasswordInputRef} | ||||
/> | /> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
<Button | <SubmitSection | ||||
errorMessage={errorMessage} | |||||
onClick={onDelete} | onClick={onDelete} | ||||
variant="danger" | variant="danger" | ||||
disabled={ | disabled={ | ||||
threadSettingsOperationInProgress || accountPassword.length === 0 | threadSettingsOperationInProgress || accountPassword.length === 0 | ||||
} | } | ||||
className={css.delete_button} | |||||
> | > | ||||
Delete | Delete | ||||
</Button> | </SubmitSection> | ||||
</form> | </form> | ||||
); | ); | ||||
} | } | ||||
export default ThreadSettingsDeleteTab; | export default ThreadSettingsDeleteTab; |