From 90e3c830c5ec72c57efb5800809eb29055d3c543 Mon Sep 17 00:00:00 2001 From: Kacper Michalik Date: Wed, 20 Sep 2023 13:10:42 +0200 Subject: [PATCH 01/41] desktop - container, stories, test --- packages/desktop/src/renderer/Root.tsx | 2 + .../CreateUsernameComponent.tsx | 49 +++++- .../UsernameTakenModal.container.tsx | 15 ++ .../UsernameTakenModal.stories.tsx | 33 ++++ .../UsernameTakenModal.test.tsx | 146 ++++++++++++++++++ .../src/renderer/sagas/modals/modals.slice.ts | 3 +- .../src/renderer/sagas/modals/modals.types.ts | 1 + 7 files changed, 241 insertions(+), 8 deletions(-) create mode 100644 packages/desktop/src/renderer/components/widgets/usernameTakenModal/UsernameTakenModal.container.tsx create mode 100644 packages/desktop/src/renderer/components/widgets/usernameTakenModal/UsernameTakenModal.stories.tsx create mode 100644 packages/desktop/src/renderer/components/widgets/usernameTakenModal/UsernameTakenModal.test.tsx diff --git a/packages/desktop/src/renderer/Root.tsx b/packages/desktop/src/renderer/Root.tsx index 8717893233..e5df08a227 100644 --- a/packages/desktop/src/renderer/Root.tsx +++ b/packages/desktop/src/renderer/Root.tsx @@ -31,6 +31,7 @@ import ChannelCreationModal from './components/ChannelCreationModal/ChannelCreat import { SaveStateComponent } from './components/SaveState/SaveStateComponent' import UnregisteredModalContainer from './components/widgets/userLabel/unregistered/UnregisteredModal.container' import DuplicateModalContainer from './components/widgets/userLabel/duplicate/DuplicateModal.container' +import UsernameTakenModalContainer from './components/widgets/usernameTakenModal/UsernameTakenModal.container' // Trigger lerna export const persistor = persistStore(store) @@ -49,6 +50,7 @@ export default () => { + diff --git a/packages/desktop/src/renderer/components/CreateUsername/CreateUsernameComponent.tsx b/packages/desktop/src/renderer/components/CreateUsername/CreateUsernameComponent.tsx index b26d4b49a5..e6bd961bdf 100644 --- a/packages/desktop/src/renderer/components/CreateUsername/CreateUsernameComponent.tsx +++ b/packages/desktop/src/renderer/components/CreateUsername/CreateUsernameComponent.tsx @@ -15,7 +15,7 @@ import { userNameField } from '../../forms/fields/createUserFields' import { parseName } from '@quiet/common' -const PREFIX = 'CreateUsernameComponent' +const PREFIX = 'CreateUsernameComponent-' const classes = { focus: `${PREFIX}focus`, @@ -31,6 +31,7 @@ const classes = { rootBar: `${PREFIX}rootBar`, progressBar: `${PREFIX}progressBar`, info: `${PREFIX}info`, + inputLabel: `${PREFIX}inputLabel`, } const StyledModalContent = styled(Grid)(({ theme }) => ({ @@ -113,6 +114,12 @@ const StyledModalContent = styled(Grid)(({ theme }) => ({ lineHeight: '19px', color: theme.palette.colors.darkGray, }, + + [`& .${classes.inputLabel}`]: { + marginTop: 24, + marginBottom: 2, + color: theme.palette.colors.black30, + }, })) const userFields = { @@ -123,12 +130,19 @@ interface CreateUserValues { userName: string } +enum UsernameVariant { + NEW_USER = 'new-user', + USERNAME_TAKEN = 'username-taken', +} + export interface CreateUsernameComponentProps { open: boolean registerUsername: (name: string) => void certificateRegistrationError?: string certificate?: string | null handleClose: () => void + currentUsername?: string + variant?: UsernameVariant } export const CreateUsernameComponent: React.FC = ({ @@ -137,7 +151,11 @@ export const CreateUsernameComponent: React.FC = ( certificateRegistrationError, certificate, handleClose, + currentUsername, + variant = UsernameVariant.NEW_USER, }) => { + const isNewUser = variant === UsernameVariant.NEW_USER + const [formSent, setFormSent] = useState(false) const [userName, setUserName] = useState('') const [parsedNameDiffers, setParsedNameDiffers] = useState(false) @@ -193,10 +211,27 @@ export const CreateUsernameComponent: React.FC = ( <>
- - Register a username - - Choose your favorite username + {isNewUser ? ( + <> + + Register a username + + Choose your favorite username + + ) : ( + <> + + We’re sorry, but the username {currentUsername && `@${currentUsername}`} was + already claimed by someone else.
+ Can you choose another name? + + + + Enter username + + + )} + = ( [classes.margin]: true, [classes.error]: errors.userName, })} - placeholder={'Enter a username'} + placeholder={isNewUser ? 'Enter a username' : 'Username'} errors={errors} onPaste={e => e.preventDefault()} variant='outlined' @@ -253,7 +288,7 @@ export const CreateUsernameComponent: React.FC = ( inProgress={waitingForResponse} disabled={waitingForResponse} type='submit' - text={'Register'} + text={isNewUser ? 'Register' : 'Continue'} classes={{ button: classes.button }} /> diff --git a/packages/desktop/src/renderer/components/widgets/usernameTakenModal/UsernameTakenModal.container.tsx b/packages/desktop/src/renderer/components/widgets/usernameTakenModal/UsernameTakenModal.container.tsx new file mode 100644 index 0000000000..9ba1063016 --- /dev/null +++ b/packages/desktop/src/renderer/components/widgets/usernameTakenModal/UsernameTakenModal.container.tsx @@ -0,0 +1,15 @@ +import React from 'react' +import { useModal } from '../../../containers/hooks' +import { ModalName } from '../../../sagas/modals/modals.types' + +const UsernameTakenModalContainer = () => { + const usernameTakenModal = useModal(ModalName.usernameTakenModal) + + const enterUsername = () => {} + + const currentUsername = 'johhny' + + return

test

+} + +export default UsernameTakenModalContainer diff --git a/packages/desktop/src/renderer/components/widgets/usernameTakenModal/UsernameTakenModal.stories.tsx b/packages/desktop/src/renderer/components/widgets/usernameTakenModal/UsernameTakenModal.stories.tsx new file mode 100644 index 0000000000..4ad6edf423 --- /dev/null +++ b/packages/desktop/src/renderer/components/widgets/usernameTakenModal/UsernameTakenModal.stories.tsx @@ -0,0 +1,33 @@ +// import React from 'react' +// import { ComponentStory, ComponentMeta } from '@storybook/react' +// import { withTheme } from '../../../storybook/decorators' +// import AggressiveWarningModalComponent, { +// AggressiveWarningModalComponentProps, +// } from './AggressiveWarningModal.component' + +// const Template: ComponentStory = args => { +// return ( +//
+// +//
+// ) +// } + +// export const Component = Template.bind({}) + +// const args: AggressiveWarningModalComponentProps = { +// handleClose: function (): void {}, +// open: true, +// communityName: 'devteam', +// leaveCommunity: function (): void {}, +// } + +// Component.args = args + +// const component: ComponentMeta = { +// title: 'Components/AggressiveWarningModalComponent', +// decorators: [withTheme], +// component: AggressiveWarningModalComponent, +// } + +// export default component diff --git a/packages/desktop/src/renderer/components/widgets/usernameTakenModal/UsernameTakenModal.test.tsx b/packages/desktop/src/renderer/components/widgets/usernameTakenModal/UsernameTakenModal.test.tsx new file mode 100644 index 0000000000..9b7a402e8c --- /dev/null +++ b/packages/desktop/src/renderer/components/widgets/usernameTakenModal/UsernameTakenModal.test.tsx @@ -0,0 +1,146 @@ +// import React from 'react' +// import theme from '../../../theme' +// import { ThemeProvider } from '@mui/material/styles' +// import { renderComponent } from '../../../testUtils/renderComponent' +// import AggressiveWarningModalComponent from './AggressiveWarningModal.component' + +// describe('AgressiveWarningModalComponent', () => { +// it('renderComponent', () => { +// const result = renderComponent( +// +// {}} +// open={true} +// communityName={'devteam'} +// leaveCommunity={() => {}} +// /> +// +// ) +// expect(result.baseElement).toMatchInlineSnapshot(` +// +//