From bb1d8b7e20724828a735560f27c93b88ee94ceb9 Mon Sep 17 00:00:00 2001
From: Kacper Michalik <kacper.michalik@rumblefish.pl>
Date: Thu, 19 Oct 2023 12:05:22 +0200
Subject: [PATCH] feat:use context menu for information about unregistered
 username instead screen

---
 CHANGELOG.md                                  |   2 +
 packages/mobile/src/App.tsx                   |   5 +-
 .../ContextMenu/ContextMenu.component.tsx     |  61 +++--
 .../ContextMenu/ContextMenu.types.ts          |   6 +
 ...egisteredUsernameContextMenu.container.tsx |  20 ++
 .../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, 81 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 {
                 <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
index a62feec289..f90abdfc10 100644
--- a/packages/mobile/src/components/ContextMenu/ContextMenu.component.tsx
+++ b/packages/mobile/src/components/ContextMenu/ContextMenu.component.tsx
@@ -2,9 +2,9 @@ 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'
+import { Button } from '../Button/Button.component'
 
 export const ContextMenu: FC<ContextMenuProps> = ({
   visible,
@@ -16,6 +16,8 @@ export const ContextMenu: FC<ContextMenuProps> = ({
   linkAction = () => {
     console.log('No action attached for link tap gesture.')
   },
+  unregisteredUsername,
+  username,
 }) => {
   const [show, setShow] = React.useState<boolean>(false)
   const slidingAnimation = React.useRef(new Animated.Value(0)).current
@@ -140,24 +142,45 @@ 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>
+            )}
+
+            {unregisteredUsername && username && (
+              <View style={{ padding: 20, alignItems: 'center' }}>
+                <Typography fontSize={14} style={{ textAlign: 'center' }}>
+                  The username{' '}
+                  <Typography fontSize={14} fontWeight={'bold'}>
+                    @{username}
+                  </Typography>{' '}
+                  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,{' '}
+                  <Typography fontSize={14} fontWeight={'bold'}>
+                    @{username}
+                  </Typography>{' '}
+                  will be registered automatically and this alert will go away.
+                </Typography>
+                <Button width={60} title={'OK'} onPress={handleClose} />
+              </View>
+            )}
           </View>
         </TouchableWithoutFeedback>
       </Animated.View>
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..ab66b04c86
--- /dev/null
+++ b/packages/mobile/src/components/ContextMenu/menus/UnregisteredUsernameContextMenu.container.tsx
@@ -0,0 +1,20 @@
+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'
+
+export const UnregisteredUsernameContextMenu: FC = () => {
+  const title = 'Unregistered username'
+  const usernameTakenContextMenu = useContextMenu<UnregisteredUsernameArgs>(MenuName.UnregisteredUsername)
+
+  return (
+    <ContextMenu
+      title={title}
+      items={[]}
+      {...usernameTakenContextMenu}
+      unregisteredUsername
+      username={usernameTakenContextMenu.username}
+    />
+  )
+}
diff --git a/packages/mobile/src/components/UserLabel/Unregistered/UnregisteredUsername.component.tsx b/packages/mobile/src/components/UserLabel/Unregistered/UnregisteredUsername.component.tsx
deleted file mode 100644
index 1d2070400c..0000000000
--- a/packages/mobile/src/components/UserLabel/Unregistered/UnregisteredUsername.component.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { defaultTheme } from '../../../styles/themes/default.theme'
-import React from 'react'
-import { View } from 'react-native'
-import { Appbar } from '../../Appbar/Appbar.component'
-import { Typography } from '../../Typography/Typography.component'
-import { UnregisteredUsernameComponentProps } from 'packages/mobile/src/screens/UnregisteredUsername/UnregisteredUsername.types'
-import { Button } from '../../Button/Button.component'
-
-const UnregisteredUsernameComponent: React.FC<UnregisteredUsernameComponentProps> = ({
-  handleBackButton,
-  username,
-}) => {
-  return (
-    <View
-      style={{ flex: 1, backgroundColor: defaultTheme.palette.background.white }}
-      testID={'unregistered-username-component'}
-    >
-      <Appbar title={'Unregistered username'} back={handleBackButton} crossBackIcon />
-      <View style={{ padding: 20, alignItems: 'center' }}>
-        <Typography fontSize={14} style={{ textAlign: 'center' }}>
-          The username @{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, @{username} will be registered
-          automatically and this alert will go away.
-        </Typography>
-        <Button width={50} title={'OK'} onPress={handleBackButton} />
-      </View>
-    </View>
-  )
-}
-
-export default UnregisteredUsernameComponent
diff --git a/packages/mobile/src/components/UserLabel/Unregistered/UnregisteredUsername.test.tsx b/packages/mobile/src/components/UserLabel/Unregistered/UnregisteredUsername.test.tsx
deleted file mode 100644
index d0faf82b97..0000000000
--- a/packages/mobile/src/components/UserLabel/Unregistered/UnregisteredUsername.test.tsx
+++ /dev/null
@@ -1,234 +0,0 @@
-import { renderComponent } from '../../../utils/functions/renderComponent/renderComponent'
-import UnregisteredUsernameComponent from './UnregisteredUsername.component'
-
-describe('UnregisteredUsername component', () => {
-  it('renders component', () => {
-    const { toJSON } = renderComponent(
-      <UnregisteredUsernameComponent handleBackButton={function (): void {}} username={'johnny'} />
-    )
-    expect(toJSON()).toMatchInlineSnapshot(`
-      <View
-        style={
-          {
-            "backgroundColor": "#ffffff",
-            "flex": 1,
-          }
-        }
-        testID="unregistered-username-component"
-      >
-        <View
-          style={
-            [
-              {
-                "alignItems": "center",
-                "backgroundColor": "#ffffff",
-                "borderBottomColor": "#F0F0F0",
-                "borderBottomWidth": 1,
-                "display": "flex",
-                "flexDirection": "row",
-                "justifyContent": "center",
-                "maxHeight": 52,
-                "minHeight": 52,
-              },
-            ]
-          }
-        >
-          <View
-            style={
-              {
-                "flex": 1,
-              }
-            }
-          >
-            <View
-              accessibilityState={
-                {
-                  "busy": undefined,
-                  "checked": undefined,
-                  "disabled": undefined,
-                  "expanded": undefined,
-                  "selected": undefined,
-                }
-              }
-              accessibilityValue={
-                {
-                  "max": undefined,
-                  "min": undefined,
-                  "now": undefined,
-                  "text": undefined,
-                }
-              }
-              accessible={true}
-              collapsable={false}
-              focusable={true}
-              onClick={[Function]}
-              onResponderGrant={[Function]}
-              onResponderMove={[Function]}
-              onResponderRelease={[Function]}
-              onResponderTerminate={[Function]}
-              onResponderTerminationRequest={[Function]}
-              onStartShouldSetResponder={[Function]}
-              style={
-                {
-                  "opacity": 1,
-                }
-              }
-              testID="appbar_action_item"
-            >
-              <View
-                style={
-                  {
-                    "alignItems": "center",
-                    "height": 50,
-                    "justifyContent": "center",
-                    "width": 64,
-                  }
-                }
-              >
-                <Image
-                  resizeMethod="resize"
-                  resizeMode="cover"
-                  source={
-                    {
-                      "testUri": "../../../assets/icons/icon_close.png",
-                    }
-                  }
-                  style={
-                    {
-                      "height": 16,
-                      "width": 16,
-                    }
-                  }
-                />
-              </View>
-            </View>
-          </View>
-          <View
-            style={
-              {
-                "alignItems": "center",
-                "flex": 4,
-              }
-            }
-          >
-            <Text
-              color="main"
-              fontSize={16}
-              fontWeight="medium"
-              horizontalTextAlign="left"
-              style={
-                [
-                  {
-                    "color": "#000000",
-                    "fontFamily": "Rubik-Medium",
-                    "fontSize": 16,
-                    "textAlign": "left",
-                    "textAlignVertical": "center",
-                  },
-                ]
-              }
-              verticalTextAlign="center"
-            >
-              Unregistered username
-            </Text>
-          </View>
-          <View
-            style={
-              {
-                "flex": 1,
-              }
-            }
-          />
-        </View>
-        <View
-          style={
-            {
-              "alignItems": "center",
-              "padding": 20,
-            }
-          }
-        >
-          <Text
-            color="main"
-            fontSize={14}
-            horizontalTextAlign="left"
-            style={
-              [
-                {
-                  "color": "#000000",
-                  "fontFamily": "Rubik-Regular",
-                  "fontSize": 14,
-                  "textAlign": "left",
-                  "textAlignVertical": "center",
-                },
-                {
-                  "textAlign": "center",
-                },
-              ]
-            }
-            verticalTextAlign="center"
-          >
-            The username @
-            johnny
-             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, @
-            johnny
-             will be registered automatically and this alert will go away.
-          </Text>
-          <View
-            accessibilityState={
-              {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": undefined,
-                "expanded": undefined,
-                "selected": undefined,
-              }
-            }
-            accessible={true}
-            focusable={true}
-            onClick={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
-            style={
-              {
-                "alignItems": "center",
-                "backgroundColor": "#521C74",
-                "borderRadius": 8,
-                "justifyContent": "center",
-                "marginVertical": 12,
-                "minHeight": 45,
-                "paddingVertical": 12,
-                "width": 50,
-              }
-            }
-            testID="button"
-          >
-            <Text
-              color="white"
-              fontSize={14}
-              horizontalTextAlign="left"
-              style={
-                [
-                  {
-                    "color": "#ffffff",
-                    "fontFamily": "Rubik-Regular",
-                    "fontSize": 14,
-                    "textAlign": "left",
-                    "textAlignVertical": "center",
-                  },
-                ]
-              }
-              verticalTextAlign="center"
-            >
-              OK
-            </Text>
-          </View>
-        </View>
-      </View>
-    `)
-  })
-})
diff --git a/packages/mobile/src/const/MenuNames.enum.ts b/packages/mobile/src/const/MenuNames.enum.ts
index c3785667ec..755f8baa62 100644
--- a/packages/mobile/src/const/MenuNames.enum.ts
+++ b/packages/mobile/src/const/MenuNames.enum.ts
@@ -2,4 +2,5 @@ export enum MenuName {
   Community = 'CommunityContextMenu',
   Channel = 'ChannelContextMenu',
   Invitation = 'InvitationContextMenu',
+  UnregisteredUsername = 'UnregisteredUsernameContextMenu',
 }
diff --git a/packages/mobile/src/const/ScreenNames.enum.ts b/packages/mobile/src/const/ScreenNames.enum.ts
index a247293844..bbd8b358c6 100644
--- a/packages/mobile/src/const/ScreenNames.enum.ts
+++ b/packages/mobile/src/const/ScreenNames.enum.ts
@@ -13,7 +13,6 @@ export enum ScreenNames {
   LeaveCommunityScreen = 'LeaveCommunityScreen',
   ConnectionProcessScreen = 'ConnectionProcessScreen',
   DuplicatedUsernameScreen = 'DuplicatedUsernameScreen',
-  UnregisteredUsernameScreen = 'UnregisteredUsernameScreen',
   UsernameTakenScreen = 'UsernameTakenScreen',
   NewUsernameRequestedScreen = 'NewUsernameRequestedScreen',
   PossibleImpersonationAttackScreen = 'PossibleImpersonationAttackScreen',
diff --git a/packages/mobile/src/route.params.ts b/packages/mobile/src/route.params.ts
index 8221547080..d61c85522e 100644
--- a/packages/mobile/src/route.params.ts
+++ b/packages/mobile/src/route.params.ts
@@ -37,9 +37,7 @@ export type RootStackParamList = {
   }
   [ScreenNames.ConnectionProcessScreen]: undefined
   [ScreenNames.DuplicatedUsernameScreen]: undefined
-  [ScreenNames.UnregisteredUsernameScreen]: {
-    username: string
-  }
+
   [ScreenNames.UsernameTakenScreen]: undefined
   [ScreenNames.NewUsernameRequestedScreen]: undefined
   [ScreenNames.PossibleImpersonationAttackScreen]: undefined
@@ -59,8 +57,6 @@ export type ErrorRouteProp = RouteProp<RootStackParamList, ScreenNames.ErrorScre
 
 export type DuplicatedUsernameRouteProps = RouteProp<RootStackParamList, ScreenNames.DuplicatedUsernameScreen>
 
-export type UnregisteredUsernameRouteProps = RouteProp<RootStackParamList, ScreenNames.UnregisteredUsernameScreen>
-
 export type UsernameTakenRouteProps = RouteProp<RootStackParamList, ScreenNames.UsernameTakenScreen>
 
 export type NewUsernameRequestedRouteProps = RouteProp<RootStackParamList, ScreenNames.NewUsernameRequestedScreen>
diff --git a/packages/mobile/src/screens/Channel/Channel.screen.tsx b/packages/mobile/src/screens/Channel/Channel.screen.tsx
index 5b9f8e85c3..c399e8d8d1 100644
--- a/packages/mobile/src/screens/Channel/Channel.screen.tsx
+++ b/packages/mobile/src/screens/Channel/Channel.screen.tsx
@@ -51,10 +51,13 @@ export const ChannelScreen: FC = () => {
   const isWebsocketConnected = useSelector(initSelectors.isWebsocketConnected)
 
   let contextMenu: UseContextMenuType<Record<string, unknown>> | null = useContextMenu(MenuName.Channel)
+
   if (!community?.CA || !isWebsocketConnected) {
     contextMenu = null
   }
 
+  const unregisteredUsernameContextMenu = useContextMenu(MenuName.UnregisteredUsername)
+
   const [uploadingFiles, setUploadingFiles] = React.useState<FilePreviewData>({})
   const filesRef = React.useRef<FilePreviewData>({})
   React.useEffect(() => {
@@ -119,16 +122,9 @@ export const ChannelScreen: FC = () => {
 
   const unregisteredUsernameHandleBack = useCallback(
     (username: string) => {
-      dispatch(
-        navigationActions.navigation({
-          screen: ScreenNames.UnregisteredUsernameScreen,
-          params: {
-            username,
-          },
-        })
-      )
+      unregisteredUsernameContextMenu.handleOpen({ username })
     },
-    [dispatch]
+    [unregisteredUsernameContextMenu]
   )
 
   const sendMessageAction = React.useCallback(
diff --git a/packages/mobile/src/screens/UnregisteredUsername/UnregisteredUsername.screen.tsx b/packages/mobile/src/screens/UnregisteredUsername/UnregisteredUsername.screen.tsx
deleted file mode 100644
index a04bf19009..0000000000
--- a/packages/mobile/src/screens/UnregisteredUsername/UnregisteredUsername.screen.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import React, { FC, useCallback } from 'react'
-import { useDispatch } from 'react-redux'
-import { navigationActions } from '../../store/navigation/navigation.slice'
-import { ScreenNames } from '../../const/ScreenNames.enum'
-import { UnregisteredUsernameScreenProps } from './UnregisteredUsername.types'
-import UnregisteredUsernameComponent from '../../components/UserLabel/Unregistered/UnregisteredUsername.component'
-
-export const UnregisteredUsernameScreen: FC<UnregisteredUsernameScreenProps> = ({ route }) => {
-  const dispatch = useDispatch()
-
-  const { username } = route.params
-
-  const handleBackButton = useCallback(() => {
-    dispatch(
-      navigationActions.replaceScreen({
-        screen: ScreenNames.ChannelScreen,
-      })
-    )
-  }, [dispatch])
-
-  return <UnregisteredUsernameComponent handleBackButton={handleBackButton} username={username} />
-}
diff --git a/packages/mobile/src/screens/UnregisteredUsername/UnregisteredUsername.types.ts b/packages/mobile/src/screens/UnregisteredUsername/UnregisteredUsername.types.ts
deleted file mode 100644
index d11bb7f340..0000000000
--- a/packages/mobile/src/screens/UnregisteredUsername/UnregisteredUsername.types.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { UnregisteredUsernameRouteProps } from '../../route.params'
-
-export interface UnregisteredUsernameScreenProps {
-  route: UnregisteredUsernameRouteProps
-}
-
-export interface UnregisteredUsernameComponentProps {
-  handleBackButton: () => void
-  username: string
-}
diff --git a/packages/mobile/src/store/navigation/navigation.slice.ts b/packages/mobile/src/store/navigation/navigation.slice.ts
index fd9b45717a..5861eb5b27 100644
--- a/packages/mobile/src/store/navigation/navigation.slice.ts
+++ b/packages/mobile/src/store/navigation/navigation.slice.ts
@@ -13,6 +13,7 @@ export class NavigationState {
   public [MenuName.Community] = { open: false, args: {} }
   public [MenuName.Channel] = { open: false, args: {} }
   public [MenuName.Invitation] = { open: false, args: {} }
+  public [MenuName.UnregisteredUsername] = { open: false, args: {} }
   public pendingNavigation: ScreenNames | null = null
 }