diff --git a/ts/components/conversation/right-panel/RightPanel.tsx b/ts/components/conversation/right-panel/RightPanel.tsx index e83324832..eff9b25dc 100644 --- a/ts/components/conversation/right-panel/RightPanel.tsx +++ b/ts/components/conversation/right-panel/RightPanel.tsx @@ -2,7 +2,7 @@ import styled from 'styled-components'; import { useRightOverlayMode } from '../../../hooks/useUI'; import { isRtlBody } from '../../../util/i18n'; import { Flex } from '../../basic/Flex'; -import { OverlayRightPanelSettings } from './overlay/OverlayRightPanelSettings'; +import { OverlayRightPanelSettings2 } from './overlay/OverlayRightPanelSettings2'; import { OverlayDisappearingMessages } from './overlay/disappearing-messages/OverlayDisappearingMessages'; import { OverlayMessageInfo } from './overlay/message-info/OverlayMessageInfo'; @@ -107,7 +107,8 @@ const ClosableOverlay = () => { case 'message_info': return ; default: - return ; + // TODO[epic=ses-50] revert to proper right panel settings later + return ; } }; diff --git a/ts/components/conversation/right-panel/overlay/OverlayRightPanelSettings2.tsx b/ts/components/conversation/right-panel/overlay/OverlayRightPanelSettings2.tsx new file mode 100644 index 000000000..28ee7af39 --- /dev/null +++ b/ts/components/conversation/right-panel/overlay/OverlayRightPanelSettings2.tsx @@ -0,0 +1,108 @@ +import { useEffect, useState } from 'react'; + +import { MAX_USERNAME_BYTES } from '../../../../session/constants'; +import { ToastUtils } from '../../../../session/utils'; +import { sanitizeSessionUsername } from '../../../../session/utils/String'; +import { useSelectedConversationKey } from '../../../../state/selectors/selectedConversation'; +import { Flex } from '../../../basic/Flex'; +import { SessionButton } from '../../../basic/SessionButton'; +import { SpacerLG, SpacerXL } from '../../../basic/Text'; +import { SessionInput2 } from '../../../inputs'; +import { SessionProgressBar } from '../../../loading'; +import { StyledScrollContainer } from './components'; + +export const OverlayRightPanelSettings2 = () => { + const selectedConvoKey = useSelectedConversationKey(); + + // TODO[epic=ses-50] move this into already have an account screen + // #region for testing + const [progress, setProgress] = useState(0); + const [inputValue, setInputValue] = useState(''); + const [inputError, setInputError] = useState(undefined); + + function sanitizeDisplayNameOrToast( + displayName: string, + setDisplayName: (sanitized: string) => void, + setDisplayNameError: (error: string | undefined) => void + ) { + try { + const sanitizedName = sanitizeSessionUsername(displayName); + const trimName = sanitizedName.trim(); + setDisplayName(sanitizedName); + setDisplayNameError(!trimName ? window.i18n('displayNameEmpty') : undefined); + } catch (e) { + setDisplayName(displayName); + setDisplayNameError(window.i18n('displayNameTooLong')); + ToastUtils.pushToastError('toolong', window.i18n('displayNameTooLong')); + } + } + + const handleInputChanged = (name: string) => { + sanitizeDisplayNameOrToast(name, setInputValue, setInputError); + if (name.length > 8) { + setInputError(window.i18n('displayNameTooLong')); + } + }; + + const handleEnterPressed = (name: string) => { + if (name) { + sanitizeDisplayNameOrToast(name, setInputValue, setInputError); + ToastUtils.pushToastSuccess('success', window.i18n('done')); + } + }; + + useEffect(() => { + const interval = setInterval(() => { + setProgress(oldProgress => { + if (oldProgress === 100) { + clearInterval(interval); + return 100; + } + return Math.min(oldProgress + 10, 100); + }); + }, 1000); + + return () => clearInterval(interval); + }, []); + // #endregion + + if (!selectedConvoKey) { + return null; + } + + return ( + + + + + { + window.log.debug( + `WIP: [OverlayRightPanelSettings] clicked continuing your session! ` + ); + }} + text={window.i18n('continueYourSession')} + /> + } + /> + + + + + ); +}; diff --git a/ts/components/dialog/ModalContainer.tsx b/ts/components/dialog/ModalContainer.tsx index 952ba1ca8..7092ffd90 100644 --- a/ts/components/dialog/ModalContainer.tsx +++ b/ts/components/dialog/ModalContainer.tsx @@ -14,7 +14,6 @@ import { getRecoveryPhraseDialog, getRemoveModeratorsModal, getSessionPasswordDialog, - getTermsOfServicePrivacyModalState, getUpdateGroupMembersModal, getUpdateGroupNameModal, getUserDetailsModal, @@ -33,7 +32,6 @@ import { SessionConfirm } from './SessionConfirm'; import { SessionNicknameDialog } from './SessionNicknameDialog'; import { SessionPasswordDialog } from './SessionPasswordDialog'; import { SessionSeedModal } from './SessionSeedModal'; -import { TermsOfServicePrivacyDialog } from './TermsOfServicePrivacyDialog'; import { UpdateGroupMembersDialog } from './UpdateGroupMembersDialog'; import { UpdateGroupNameDialog } from './UpdateGroupNameDialog'; import { UserDetailsDialog } from './UserDetailsDialog'; @@ -56,7 +54,6 @@ export const ModalContainer = () => { const reactListModalState = useSelector(getReactListDialog); const reactClearAllModalState = useSelector(getReactClearAllDialog); const editProfilePictureModalState = useSelector(getEditProfilePictureModalState); - const termsOfServicePrivacyModalState = useSelector(getTermsOfServicePrivacyModalState); return ( <> @@ -81,9 +78,6 @@ export const ModalContainer = () => { {editProfilePictureModalState && ( )} - {termsOfServicePrivacyModalState && ( - - )} ); }; diff --git a/ts/state/ducks/modalDialog.tsx b/ts/state/ducks/modalDialog.tsx index 5a715d0b7..187d5fe2b 100644 --- a/ts/state/ducks/modalDialog.tsx +++ b/ts/state/ducks/modalDialog.tsx @@ -2,7 +2,6 @@ import { createSlice, PayloadAction } from '@reduxjs/toolkit'; import { EditProfilePictureModalProps } from '../../components/dialog/EditProfilePictureModal'; import { SessionConfirmDialogProps } from '../../components/dialog/SessionConfirm'; import { PasswordAction } from '../../components/dialog/SessionPasswordDialog'; -import { TermsOfServicePrivacyDialogProps } from '../../components/dialog/TermsOfServicePrivacyDialog'; import { Noop } from '../../types/Util'; export type BanType = 'ban' | 'unban'; @@ -39,8 +38,6 @@ export type ReactModalsState = { export type EditProfilePictureModalState = EditProfilePictureModalProps | null; -export type TermsOfServicePrivacyModalState = TermsOfServicePrivacyDialogProps | null; - export type ModalState = { confirmModal: ConfirmModalState; inviteContactModal: InviteContactModalState; @@ -59,7 +56,6 @@ export type ModalState = { reactListModalState: ReactModalsState; reactClearAllModalState: ReactModalsState; editProfilePictureModalState: EditProfilePictureModalState; - termsOfServicePrivacyModalState: TermsOfServicePrivacyModalState; }; export const initialModalState: ModalState = { @@ -80,7 +76,6 @@ export const initialModalState: ModalState = { reactListModalState: null, reactClearAllModalState: null, editProfilePictureModalState: null, - termsOfServicePrivacyModalState: null, }; const ModalSlice = createSlice({ @@ -138,12 +133,6 @@ const ModalSlice = createSlice({ updateEditProfilePictureModel(state, action: PayloadAction) { return { ...state, editProfilePictureModalState: action.payload }; }, - updateTermsOfServicePrivacyModal( - state, - action: PayloadAction - ) { - return { ...state, termsOfServicePrivacyModalState: action.payload }; - }, }, }); @@ -166,6 +155,5 @@ export const { updateReactListModal, updateReactClearAllModal, updateEditProfilePictureModel, - updateTermsOfServicePrivacyModal, } = actions; export const modalReducer = reducer; diff --git a/ts/state/selectors/modal.ts b/ts/state/selectors/modal.ts index 5f001cc04..beaa1ce41 100644 --- a/ts/state/selectors/modal.ts +++ b/ts/state/selectors/modal.ts @@ -15,7 +15,6 @@ import { RecoveryPhraseModalState, RemoveModeratorsModalState, SessionPasswordModalState, - TermsOfServicePrivacyModalState, UpdateGroupMembersModalState, UpdateGroupNameModalState, UserDetailsModalState, @@ -110,8 +109,3 @@ export const getEditProfilePictureModalState = createSelector( getModal, (state: ModalState): EditProfilePictureModalState => state.editProfilePictureModalState ); - -export const getTermsOfServicePrivacyModalState = createSelector( - getModal, - (state: ModalState): TermsOfServicePrivacyModalState => state.termsOfServicePrivacyModalState -);