feat: mobile part

CHANGELOG.md

@@ -1,3 +1,7 @@
+[unreleased]
+
+* Better descriptions of the joining process
+
 [2.0.3-alpha.5]
 
 * Fix network data proceeding when using custom protocol multiple times #1847

packages/backend/src/nest/tor/tor.service.ts

@@ -227,28 +227,6 @@ export class Tor extends EventEmitter implements OnModuleInit {
 
       this.process.stdout.on('data', (data: any) => {
         this.logger(data.toString())
-        const info = data.toString()
-
-        const textIndex = info.indexOf('):') + 2
-        const text = info.slice(textIndex).trim()
-
-        switch (text) {
-          case ConnectionProcessInfo.TOR_1:
-            this.emit(SocketActionTypes.CONNECTION_PROCESS_INFO, ConnectionProcessInfo.TOR_1)
-            break
-          case ConnectionProcessInfo.TOR_2:
-            this.emit(SocketActionTypes.CONNECTION_PROCESS_INFO, ConnectionProcessInfo.TOR_2)
-            break
-          case ConnectionProcessInfo.TOR_3:
-            this.emit(SocketActionTypes.CONNECTION_PROCESS_INFO, ConnectionProcessInfo.TOR_3)
-            break
-          case ConnectionProcessInfo.TOR_4:
-            this.emit(SocketActionTypes.CONNECTION_PROCESS_INFO, ConnectionProcessInfo.TOR_4)
-            break
-          case ConnectionProcessInfo.TOR_5:
-            this.emit(SocketActionTypes.CONNECTION_PROCESS_INFO, ConnectionProcessInfo.TOR_5)
-            break
-        }
 
         const regexp = /Bootstrapped 0/
         if (regexp.test(data.toString())) {

packages/desktop/src/renderer/components/LoadingPanel/JoiningPanelComponent.test.tsx

@@ -71,7 +71,7 @@ describe('Create JoiningPanelComponent', () => {
                 style="width: 600px;"
               >
                 <div
-                  class="MuiGrid-root MuiGrid-container JoiningPanelComponentroot css-kpkqnh-MuiGrid-root"
+                  class="MuiGrid-root MuiGrid-container JoiningPanelComponentroot css-1vn3v3s-MuiGrid-root"
                 >
                   <div
                     class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-column JoiningPanelComponentcontentWrapper css-t0zib5-MuiGrid-root"
@@ -95,11 +95,14 @@ describe('Create JoiningPanelComponent', () => {
                         <div
                           class="JoiningPanelComponentprogress"
                         />
+                        <div
+                          class=""
+                        />
                       </div>
                       <p
                         class="MuiTypography-root MuiTypography-body2 css-16d47hw-MuiTypography-root"
                       >
-                        Initializing storage
+                        Initialized backend modules
                       </p>
                     </div>
                     <p
@@ -205,7 +208,7 @@ describe('Create JoiningPanelComponent', () => {
                 style="width: 600px;"
               >
                 <div
-                  class="MuiGrid-root MuiGrid-container JoiningPanelComponentroot css-kpkqnh-MuiGrid-root"
+                  class="MuiGrid-root MuiGrid-container JoiningPanelComponentroot css-1vn3v3s-MuiGrid-root"
                 >
                   <div
                     class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-column JoiningPanelComponentcontentWrapper css-t0zib5-MuiGrid-root"
@@ -229,11 +232,14 @@ describe('Create JoiningPanelComponent', () => {
                         <div
                           class="JoiningPanelComponentprogress"
                         />
+                        <div
+                          class=""
+                        />
                       </div>
                       <p
                         class="MuiTypography-root MuiTypography-body2 css-16d47hw-MuiTypography-root"
                       >
-                        Initializing storage
+                        Initialized backend modules
                       </p>
                     </div>
                     <p

packages/mobile/src/components/ConnectionProcess/ConnectionProcess.component.tsx

@@ -5,6 +5,7 @@ import { Typography } from '../Typography/Typography.component'
 import { ConnectionProcessComponentProps } from './ConnectionProcess.types'
 import JoinCommunityImg from '../../../assets/icons/join-community.png'
 import { Site } from '@quiet/common'
+import { ConnectionProcessInfo } from '@quiet/types'
 
 const ConnectionProcessComponent: FC<ConnectionProcessComponentProps> = ({ connectionProcess, openUrl }) => {
   const animationValue = useRef(new Animated.Value(0)).current
@@ -25,6 +26,28 @@ const ConnectionProcessComponent: FC<ConnectionProcessComponentProps> = ({ conne
     outputRange: ['0deg', '360deg'],
   })
 
+  const processAnimation = useRef(new Animated.Value(0)).current
+
+  useEffect(() => {
+    if (connectionProcess.text === ConnectionProcessInfo.CONNECTING_TO_COMMUNITY) {
+      Animated.loop(
+        Animated.timing(processAnimation, {
+          toValue: 1,
+          duration: 6000,
+          easing: Easing.linear,
+          useNativeDriver: false,
+        })
+      ).start()
+    } else {
+      processAnimation.stopAnimation()
+    }
+  }, [processAnimation, connectionProcess])
+
+  const processAnimationWidth = processAnimation.interpolate({
+    inputRange: [0, 1],
+    outputRange: [150, 300],
+  })
+
   return (
     <View style={{ flex: 1, backgroundColor: defaultPalette.background.white }} testID={'connection-process-component'}>
       <View
@@ -51,10 +74,39 @@ const ConnectionProcessComponent: FC<ConnectionProcessComponentProps> = ({ conne
           Joining now!
         </Typography>
 
-        <View style={{ width: 300, height: 4, backgroundColor: '#F0F0F0', borderRadius: 4 }}>
+        <View
+          style={{
+            width: 300,
+            height: 4,
+            backgroundColor: '#F0F0F0',
+            borderRadius: 4,
+            position: 'relative',
+            zIndex: 1,
+          }}
+        >
           <View
-            style={{ backgroundColor: '#67BFD3', height: 4, width: connectionProcess.number * 3, borderRadius: 4 }}
+            style={{
+              backgroundColor: '#2196f3',
+              height: 4,
+              width: connectionProcess.number * 3,
+              borderRadius: 4,
+              position: 'relative',
+              zIndex: 3,
+            }}
           ></View>
+
+          {connectionProcess.text === ConnectionProcessInfo.CONNECTING_TO_COMMUNITY && (
+            <Animated.View
+              style={{
+                backgroundColor: '#67BFD3',
+                height: 4,
+                width: processAnimationWidth,
+                borderRadius: 4,
+                position: 'absolute',
+                zIndex: 2,
+              }}
+            />
+          )}
         </View>
         <Typography
           testID='connection-process-text'

packages/mobile/src/components/ConnectionProcess/ConnectionProcess.stories.tsx

@@ -6,8 +6,8 @@ import ConnectionProcessComponent from './ConnectionProcess.component'
 storiesOf('ConnectionProcess', module).add('Default', () => (
   <ConnectionProcessComponent
     connectionProcess={{
-      number: 40,
-      text: ConnectionProcessInfo.SPAWNING_HIDDEN_SERVICE,
+      number: 50,
+      text: ConnectionProcessInfo.CONNECTING_TO_COMMUNITY,
     }}
     openUrl={() => console.log('open')}
   />

packages/mobile/src/components/ConnectionProcess/ConnectionProcess.test.tsx

@@ -85,17 +85,21 @@ describe('ConnectionProcessComponent', () => {
                 "backgroundColor": "#F0F0F0",
                 "borderRadius": 4,
                 "height": 4,
+                "position": "relative",
                 "width": 300,
+                "zIndex": 1,
               }
             }
           >
             <View
               style={
                 {
-                  "backgroundColor": "#67BFD3",
+                  "backgroundColor": "#2196f3",
                   "borderRadius": 4,
                   "height": 4,
+                  "position": "relative",
                   "width": 120,
+                  "zIndex": 3,
                 }
               }
             />

packages/mobile/src/components/ConnectionProcess/ConnectionProcess.types.ts

@@ -1,4 +1,6 @@
+import { ConnectionProcessInfo } from '@quiet/types'
+
 export interface ConnectionProcessComponentProps {
-  connectionProcess: { number: number; text: string }
+  connectionProcess: { number: number; text: ConnectionProcessInfo }
   openUrl: (url: string) => void
 }

packages/mobile/src/tests/joining.process.test.tsx

@@ -54,12 +54,12 @@ describe('Joining process', () => {
     const processText = screen.getByTestId('connection-process-text')
     expect(processText.props.children).toEqual('Connecting process started')
 
-    store.dispatch(connection.actions.setConnectionProcess(ConnectionProcessInfo.INITIALIZING_LIBP2P))
+    store.dispatch(connection.actions.setConnectionProcess(ConnectionProcessInfo.INITIALIZING_IPFS))
     await act(async () => {})
 
     const processText2 = screen.getByTestId('connection-process-text')
     console.log(processText2.props)
-    expect(processText2.props.children).toEqual('Initializing libp2p')
+    expect(processText2.props.children).toEqual('Initialized backend modules')
 
     store.dispatch(connection.actions.setConnectionProcess(ConnectionProcessInfo.LAUNCHED_COMMUNITY))
     await act(async () => {})

packages/state-manager/src/sagas/appConnection/connection.slice.ts

@@ -56,7 +56,7 @@ export const connectionSlice = createSlice({
 
       switch (info) {
         case ConnectionProcessInfo.REGISTERING_OWNER_CERTIFICATE:
-          state.connectionProcess = { number: 30, text: ConnectionProcessInfo.REGISTERING_OWNER_CERTIFICATE }
+          state.connectionProcess = { number: 50, text: ConnectionProcessInfo.REGISTERING_OWNER_CERTIFICATE }
           break
         case ConnectionProcessInfo.INITIALIZING_IPFS:
           if (state.connectionProcess.number > 30) break

packages/types/src/connection.ts

@@ -16,11 +16,7 @@ export interface NetworkStats {
 }
 
 export enum ConnectionProcessInfo {
-  CONNECTING_TO_COMMUNITY = 'Connecting to community members via Tor',
   REGISTERING_USER_CERTIFICATE = 'Registering user certificate',
-  // SAVING_USER_CSR = 'Saving user csr',
-  // WAITING_FOR_METADATA = 'Waiting for metadata',
-  REGISTERING_OWNER_CERTIFICATE = 'Registering owner certificate',
   LAUNCHING_COMMUNITY = 'Launching community',
   SPAWNING_HIDDEN_SERVICE = 'Spawning hidden service for community',
   INITIALIZING_STORAGE = 'Initializing storage',
@@ -32,16 +28,12 @@ export enum ConnectionProcessInfo {
   LAUNCHED_COMMUNITY = 'Launched community',
   CHANNELS_REPLICATED = 'Channels replicated',
   CERTIFICATES_REPLICATED = 'Certificates replicated',
-  // ____
+
   CONNECTION_STARTED = 'Connecting process started',
   LOADING_MESSAGES = 'Loading messages',
   BACKEND_MODULES = 'Initialized backend modules',
-  // ____
-  TOR_1 = 'Handshaking with a relay',
-  TOR_2 = 'Loading authority key certs',
-  TOR_3 = 'Loaded enough directory info to build circuits',
-  TOR_4 = 'Handshake finished with a relay to build circuits',
-  TOR_5 = 'Establishing a Tor circuit',
+  REGISTERING_OWNER_CERTIFICATE = 'Registering owner certificate',
+  CONNECTING_TO_COMMUNITY = 'Connecting to community members via Tor',
 }
 
 export const TOR_BOOTSTRAP_COMPLETE = 'Bootstrapped 100% (done)'