From 83a57a3bc6dd058881bfccfb6e6533ed7fa1fb2b Mon Sep 17 00:00:00 2001 From: William Grant Date: Wed, 12 Jun 2024 14:40:22 +1000 Subject: [PATCH] fix: move shortcuts back into edit profile use region comments --- .../dialog/edit-profile/EditProfileDialog.tsx | 100 +++++++++++++++++- .../dialog/edit-profile/shortcuts.tsx | 97 ----------------- 2 files changed, 98 insertions(+), 99 deletions(-) delete mode 100644 ts/components/dialog/edit-profile/shortcuts.tsx diff --git a/ts/components/dialog/edit-profile/EditProfileDialog.tsx b/ts/components/dialog/edit-profile/EditProfileDialog.tsx index 77bdcd9c1..dc86f6a18 100644 --- a/ts/components/dialog/edit-profile/EditProfileDialog.tsx +++ b/ts/components/dialog/edit-profile/EditProfileDialog.tsx @@ -1,9 +1,10 @@ import { isEmpty } from 'lodash'; -import { useRef, useState } from 'react'; +import { RefObject, useRef, useState } from 'react'; import { useDispatch } from 'react-redux'; import useKey from 'react-use/lib/useKey'; import styled from 'styled-components'; +import { Dispatch } from '@reduxjs/toolkit'; import { SyncUtils, UserUtils } from '../../../session/utils'; import { YourSessionIDPill, YourSessionIDSelectable } from '../../basic/YourSessionIDPill'; @@ -21,7 +22,102 @@ import { SessionInput } from '../../inputs'; import { SessionSpinner } from '../../loading'; import { sanitizeDisplayNameOrToast } from '../../registration/utils'; import { ProfileHeader, ProfileName, QRView } from './components'; -import { handleKeyCancel, handleKeyEditMode, handleKeyEscape, handleKeyQRMode } from './shortcuts'; + +// #region Shortcuts +const handleKeyQRMode = ( + mode: ProfileDialogModes, + setMode: (mode: ProfileDialogModes) => void, + loading: boolean +) => { + if (loading) { + return; + } + switch (mode) { + case 'default': + setMode('qr'); + break; + case 'qr': + setMode('default'); + break; + case 'edit': + default: + } +}; + +const handleKeyEditMode = ( + mode: ProfileDialogModes, + setMode: (mode: ProfileDialogModes) => void, + onClick: () => Promise, + loading: boolean +) => { + if (loading) { + return; + } + switch (mode) { + case 'default': + setMode('edit'); + break; + case 'edit': + void onClick(); + break; + case 'qr': + default: + } +}; + +const handleKeyCancel = + ( + mode: ProfileDialogModes, + setMode: (mode: ProfileDialogModes) => void, + inputRef: RefObject, + updatedProfileName: string, + setProfileName: (name: string) => void, + setProfileNameError: (error: string | undefined) => void, + loading: boolean + ) => + () => { + if (loading) { + return; + } + switch (mode) { + case 'edit': + case 'qr': + if (inputRef.current !== null && document.activeElement === inputRef.current) { + return; + } + setMode('default'); + if (mode === 'edit') { + setProfileNameError(undefined); + setProfileName(updatedProfileName); + } + break; + case 'default': + default: + } + }; + +const handleKeyEscape = ( + mode: ProfileDialogModes, + setMode: (mode: ProfileDialogModes) => void, + updatedProfileName: string, + setProfileName: (name: string) => void, + setProfileNameError: (error: string | undefined) => void, + loading: boolean, + dispatch: Dispatch +) => { + if (loading) { + return; + } + if (mode === 'edit') { + setMode('default'); + setProfileNameError(undefined); + setProfileName(updatedProfileName); + } else { + dispatch(editProfileModal(null)); + } +}; + +// #endregion const StyledEditProfileDialog = styled.div` .session-modal { diff --git a/ts/components/dialog/edit-profile/shortcuts.tsx b/ts/components/dialog/edit-profile/shortcuts.tsx deleted file mode 100644 index bf40cb86b..000000000 --- a/ts/components/dialog/edit-profile/shortcuts.tsx +++ /dev/null @@ -1,97 +0,0 @@ -import { Dispatch } from '@reduxjs/toolkit'; -import { RefObject } from 'react'; -import { editProfileModal } from '../../../state/ducks/modalDialog'; -import { ProfileDialogModes } from './EditProfileDialog'; - -export const handleKeyQRMode = ( - mode: ProfileDialogModes, - setMode: (mode: ProfileDialogModes) => void, - loading: boolean -) => { - if (loading) { - return; - } - switch (mode) { - case 'default': - setMode('qr'); - break; - case 'qr': - setMode('default'); - break; - case 'edit': - default: - } -}; - -export const handleKeyEditMode = ( - mode: ProfileDialogModes, - setMode: (mode: ProfileDialogModes) => void, - onClick: () => Promise, - loading: boolean -) => { - if (loading) { - return; - } - switch (mode) { - case 'default': - setMode('edit'); - break; - case 'edit': - void onClick(); - break; - case 'qr': - default: - } -}; - -export const handleKeyCancel = - ( - mode: ProfileDialogModes, - setMode: (mode: ProfileDialogModes) => void, - inputRef: RefObject, - updatedProfileName: string, - setProfileName: (name: string) => void, - setProfileNameError: (error: string | undefined) => void, - loading: boolean - ) => - () => { - if (loading) { - return; - } - switch (mode) { - case 'edit': - case 'qr': - if (inputRef.current !== null && document.activeElement === inputRef.current) { - return; - } - setMode('default'); - if (mode === 'edit') { - setProfileNameError(undefined); - setProfileName(updatedProfileName); - } - break; - case 'default': - default: - } - }; - -export const handleKeyEscape = ( - mode: ProfileDialogModes, - setMode: (mode: ProfileDialogModes) => void, - updatedProfileName: string, - setProfileName: (name: string) => void, - setProfileNameError: (error: string | undefined) => void, - loading: boolean, - dispatch: Dispatch -) => { - if (loading) { - return; - } - if (mode === 'edit') { - setMode('default'); - setProfileNameError(undefined); - setProfileName(updatedProfileName); - } else { - dispatch(editProfileModal(null)); - } -};