mobile/1649 - feat:use context menu for information about unregistere…

…d 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 <[email protected]>
TryQuiet · Oct 20, 2023 · a3a0aa6 · a3a0aa6
1 parent d58b32c
commit a3a0aa6
Show file tree

Hide file tree

Showing 14 changed files with 90 additions and 333 deletions.
diff --git 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
@@ -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 {
                 <Screen component={SuccessScreen} name={ScreenNames.SuccessScreen} />
                 <Screen component={ErrorScreen} name={ScreenNames.ErrorScreen} />
                 <Screen component={DuplicatedUsernameScreen} name={ScreenNames.DuplicatedUsernameScreen} />
-                <Screen component={UnregisteredUsernameScreen} name={ScreenNames.UnregisteredUsernameScreen} />
                 <Screen component={UsernameTakenScreen} name={ScreenNames.UsernameTakenScreen} />
                 <Screen component={NewUsernameRequestedScreen} name={ScreenNames.NewUsernameRequestedScreen} />
                 <Screen
@@ -116,6 +116,7 @@ function App(): JSX.Element {
               <CommunityContextMenu />
               <ChannelContextMenu />
               <InvitationContextMenu />
+              <UnregisteredUsernameContextMenu />
               <ConfirmationBox {...confirmationBox} />
             </ThemeProvider>
           </MenuProvider>

diff --git 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<ContextMenuProps> = ({
   linkAction = () => {
     console.log('No action attached for link tap gesture.')
   },
+  children,
 }) => {
   const [show, setShow] = React.useState<boolean>(false)
   const slidingAnimation = React.useRef(new Animated.Value(0)).current
@@ -140,24 +140,29 @@ export const ContextMenu: FC<ContextMenuProps> = ({
                 </Typography>
               </View>
             )}
-            <View style={{ width: '100%', paddingBottom: 10 }}>
-              <FlatList
-                data={items}
-                keyExtractor={item => item.title}
-                renderItem={({ item, index }) => (
-                  <View
-                    style={[
-                      { borderTopWidth: 1, borderColor: defaultPalette.background.gray06 },
-                      index === items.length - 1 ? { borderBottomWidth: 1 } : { borderBottomWidth: 0 },
-                    ]}
-                  >
-                    <ContextMenuItem {...item} />
-                  </View>
-                )}
-                style={{ backgroundColor: defaultPalette.background.white }}
-                showsVerticalScrollIndicator={false}
-              />
-            </View>
+
+            {items.length !== 0 && (
+              <View style={{ width: '100%', paddingBottom: 10 }}>
+                <FlatList
+                  data={items}
+                  keyExtractor={item => item.title}
+                  renderItem={({ item, index }) => (
+                    <View
+                      style={[
+                        { borderTopWidth: 1, borderColor: defaultPalette.background.gray06 },
+                        index === items.length - 1 ? { borderBottomWidth: 1 } : { borderBottomWidth: 0 },
+                      ]}
+                    >
+                      <ContextMenuItem {...item} />
+                    </View>
+                  )}
+                  style={{ backgroundColor: defaultPalette.background.white }}
+                  showsVerticalScrollIndicator={false}
+                />
+              </View>
+            )}
+
+            {children}
           </View>
         </TouchableWithoutFeedback>
       </Animated.View>

diff --git 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/...ges/mobile/src/components/ContextMenu/menus/UnregisteredUsernameContextMenu.container.tsx b/...ges/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<UnregisteredUsernameArgs>(MenuName.UnregisteredUsername)
+
+  return (
+    <ContextMenu title={title} items={[]} {...usernameTakenContextMenu}>
+      <View
+        style={{ padding: 20, alignItems: 'center', borderTopWidth: 1, borderColor: defaultPalette.background.gray06 }}
+      >
+        <View>
+          <Typography fontSize={14} style={{ textAlign: 'center', lineHeight: 20 }}>
+            The username{' '}
+            <Typography fontSize={14} fontWeight={'bold'}>
+              @{usernameTakenContextMenu.username}
+            </Typography>{' '}
+            has not been registered yet with the community owner, so it’s still possible for someone else to register
+            the same username.
+          </Typography>
+        </View>
+
+        <View style={{ marginTop: 20 }}>
+          <Typography fontSize={14} style={{ textAlign: 'center', lineHeight: 20 }}>
+            When the community owner is online,{' '}
+            <Typography fontSize={14} fontWeight={'bold'}>
+              @{usernameTakenContextMenu.username}
+            </Typography>{' '}
+            will be registered automatically and this alert will go away.
+          </Typography>
+        </View>
+
+        <View style={{ marginTop: 20 }}>
+          <Button width={160} title={'OK'} onPress={usernameTakenContextMenu.handleClose} />
+        </View>
+      </View>
+    </ContextMenu>
+  )
+}
diff --git a/packages/mobile/src/components/UserLabel/Unregistered/UnregisteredUsername.component.tsx b/packages/mobile/src/components/UserLabel/Unregistered/UnregisteredUsername.component.tsx