diff --git a/web/modals/threads/thread-settings-delete-tab.react.js b/web/modals/threads/thread-settings-delete-tab.react.js index 98f219386..72c4ef95f 100644 --- a/web/modals/threads/thread-settings-delete-tab.react.js +++ b/web/modals/threads/thread-settings-delete-tab.react.js @@ -1,108 +1,110 @@ // @flow import * as React from 'react'; import { deleteThreadActionTypes, deleteThread, } from 'lib/actions/thread-actions'; import { type SetState } from 'lib/types/hook-types.js'; import { type ThreadInfo } from 'lib/types/thread-types'; import { useDispatchActionPromise, useServerCall, } from 'lib/utils/action-utils'; import Button from '../../components/button.react.js'; import { useModalContext } from '../modal-provider.react.js'; import css from './thread-settings-modal.css'; type ThreadSettingsDeleteTabProps = { +accountPassword: string, +setAccountPassword: SetState, +onChangeAccountPassword: (event: SyntheticEvent) => void, +inputDisabled: boolean, +threadInfo: ThreadInfo, +setErrorMessage: SetState, }; function ThreadSettingsDeleteTab( props: ThreadSettingsDeleteTabProps, ): React.Node { const { accountPassword, setAccountPassword, onChangeAccountPassword, inputDisabled, threadInfo, setErrorMessage, } = props; const modalContext = useModalContext(); const dispatchActionPromise = useDispatchActionPromise(); const callDeleteThread = useServerCall(deleteThread); + const accountPasswordInputRef = React.useRef(); + const deleteThreadAction = React.useCallback(async () => { try { const response = await callDeleteThread(threadInfo.id, accountPassword); modalContext.popModal(); return response; } catch (e) { setErrorMessage( e.message === 'invalid_credentials' ? 'wrong password' : 'unknown error', ); setAccountPassword(''); - // TODO: accountPasswordInput.focus() - // (once ref is moved up to functional component) + accountPasswordInputRef.current?.focus(); throw e; } }, [ accountPassword, callDeleteThread, modalContext, setAccountPassword, setErrorMessage, threadInfo.id, ]); const onDelete = React.useCallback( (event: SyntheticEvent) => { event.preventDefault(); dispatchActionPromise(deleteThreadActionTypes, deleteThreadAction()); }, [deleteThreadAction, dispatchActionPromise], ); return ( <>

Your thread will be permanently deleted. There is no way to reverse this.

Please enter your account password to confirm your identity

Account password
); } export default ThreadSettingsDeleteTab;