From a3a0aa6181f76043aeaeb4f6848889f7dfea3f50 Mon Sep 17 00:00:00 2001 From: Kacper-RF <111343884+Kacper-RF@users.noreply.github.com> Date: Fri, 20 Oct 2023 11:51:25 +0200 Subject: [PATCH] mobile/1649 - feat:use context menu for information about unregistered username instead screen (#1985) * feat:use context menu for information about unregistered username instead screen * fix:child component and spacing * fix:add top border * fix: appearance --------- Co-authored-by: siepra --- CHANGELOG.md | 2 + packages/mobile/src/App.tsx | 5 +- .../ContextMenu/ContextMenu.component.tsx | 43 ++-- .../ContextMenu/ContextMenu.types.ts | 6 + ...egisteredUsernameContextMenu.container.tsx | 47 ++++ .../UnregisteredUsername.component.tsx | 31 --- .../UnregisteredUsername.test.tsx | 234 ------------------ packages/mobile/src/const/MenuNames.enum.ts | 1 + packages/mobile/src/const/ScreenNames.enum.ts | 1 - packages/mobile/src/route.params.ts | 6 +- .../src/screens/Channel/Channel.screen.tsx | 14 +- .../UnregisteredUsername.screen.tsx | 22 -- .../UnregisteredUsername.types.ts | 10 - .../src/store/navigation/navigation.slice.ts | 1 + 14 files changed, 90 insertions(+), 333 deletions(-) create mode 100644 packages/mobile/src/components/ContextMenu/menus/UnregisteredUsernameContextMenu.container.tsx delete mode 100644 packages/mobile/src/components/UserLabel/Unregistered/UnregisteredUsername.component.tsx delete mode 100644 packages/mobile/src/components/UserLabel/Unregistered/UnregisteredUsername.test.tsx delete mode 100644 packages/mobile/src/screens/UnregisteredUsername/UnregisteredUsername.screen.tsx delete mode 100644 packages/mobile/src/screens/UnregisteredUsername/UnregisteredUsername.types.ts diff --git a/CHANGELOG.md b/CHANGELOG.md index 7fe34a70e5..11be2c541d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,8 @@ * Fixed mobile bugs - joining by QR code and not showing username taken screen for user who has unique name +* Use context menu for information about unregistered username instead screen + * Shorter dots-placeholder for invite link * Removed registration attempts selector and corresponding usage. diff --git a/packages/mobile/src/App.tsx b/packages/mobile/src/App.tsx index 49b1e7019d..3b777d1164 100644 --- a/packages/mobile/src/App.tsx +++ b/packages/mobile/src/App.tsx @@ -45,10 +45,11 @@ import StoreProvider from './Provider' import { RootStackParamList } from './route.params' import ConnectionProcessScreen from './screens/ConnectionProcess/ConnectionProcess.screen' import { DuplicatedUsernameScreen } from './screens/DuplicatedUsername/DuplicatedUsername.screen' -import { UnregisteredUsernameScreen } from './screens/UnregisteredUsername/UnregisteredUsername.screen' + import UsernameTakenScreen from './screens/UsernameTaken/UsernameTaken.screen' import NewUsernameRequestedScreen from './screens/NewUsernameRequested/NewUsernameRequested.screen' import { PossibleImpersonationAttackScreen } from './screens/PossibleImpersonationAttack/PossibleImpersonationAttack.screen' +import { UnregisteredUsernameContextMenu } from './components/ContextMenu/menus/UnregisteredUsernameContextMenu.container' LogBox.ignoreAllLogs() @@ -105,7 +106,6 @@ function App(): JSX.Element { - + diff --git a/packages/mobile/src/components/ContextMenu/ContextMenu.component.tsx b/packages/mobile/src/components/ContextMenu/ContextMenu.component.tsx index a62feec289..f8ff1e4db3 100644 --- a/packages/mobile/src/components/ContextMenu/ContextMenu.component.tsx +++ b/packages/mobile/src/components/ContextMenu/ContextMenu.component.tsx @@ -2,7 +2,6 @@ import React, { FC } from 'react' import { View, Image, FlatList, TouchableWithoutFeedback, TouchableOpacity, Animated } from 'react-native' import { Typography } from '../Typography/Typography.component' import { ContextMenuItemProps, ContextMenuProps } from './ContextMenu.types' - import { defaultPalette } from '../../styles/palettes/default.palette' import { appImages } from '../../assets' @@ -16,6 +15,7 @@ export const ContextMenu: FC = ({ linkAction = () => { console.log('No action attached for link tap gesture.') }, + children, }) => { const [show, setShow] = React.useState(false) const slidingAnimation = React.useRef(new Animated.Value(0)).current @@ -140,24 +140,29 @@ export const ContextMenu: FC = ({ )} - - item.title} - renderItem={({ item, index }) => ( - - - - )} - style={{ backgroundColor: defaultPalette.background.white }} - showsVerticalScrollIndicator={false} - /> - + + {items.length !== 0 && ( + + item.title} + renderItem={({ item, index }) => ( + + + + )} + style={{ backgroundColor: defaultPalette.background.white }} + showsVerticalScrollIndicator={false} + /> + + )} + + {children} diff --git a/packages/mobile/src/components/ContextMenu/ContextMenu.types.ts b/packages/mobile/src/components/ContextMenu/ContextMenu.types.ts index 286de05220..2a768d2a85 100644 --- a/packages/mobile/src/components/ContextMenu/ContextMenu.types.ts +++ b/packages/mobile/src/components/ContextMenu/ContextMenu.types.ts @@ -9,9 +9,15 @@ export interface ContextMenuProps { link?: string linkAction?: () => void style?: TextStyle + unregisteredUsername?: boolean + username?: string } export interface ContextMenuItemProps { title: string action: () => void } + +export type UnregisteredUsernameArgs = { + username: string +} diff --git a/packages/mobile/src/components/ContextMenu/menus/UnregisteredUsernameContextMenu.container.tsx b/packages/mobile/src/components/ContextMenu/menus/UnregisteredUsernameContextMenu.container.tsx new file mode 100644 index 0000000000..0952c7c442 --- /dev/null +++ b/packages/mobile/src/components/ContextMenu/menus/UnregisteredUsernameContextMenu.container.tsx @@ -0,0 +1,47 @@ +import React, { FC } from 'react' +import { useContextMenu } from '../../../hooks/useContextMenu' +import { MenuName } from '../../../const/MenuNames.enum' +import { ContextMenu } from '../ContextMenu.component' +import { UnregisteredUsernameArgs } from '../ContextMenu.types' +import { View } from 'react-native' +import { Typography } from '../../Typography/Typography.component' +import { Button } from '../../Button/Button.component' +import { defaultPalette } from '../../../styles/palettes/default.palette' + +export const UnregisteredUsernameContextMenu: FC = () => { + const title = 'Unregistered username' + const usernameTakenContextMenu = useContextMenu(MenuName.UnregisteredUsername) + + return ( + + + + + The username{' '} + + @{usernameTakenContextMenu.username} + {' '} + has not been registered yet with the community owner, so it’s still possible for someone else to register + the same username. + + + + + + When the community owner is online,{' '} + + @{usernameTakenContextMenu.username} + {' '} + will be registered automatically and this alert will go away. + + + + +