formatting

app/client/mobile/src/access/Access.tsx

@@ -6,14 +6,21 @@ import {
   View,
   Image,
 } from 'react-native';
-import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'
+import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view';
 import {useAccess} from './useAccess.hook';
 import {styles} from './Access.styled';
 import left from '../images/login.png';
-import {IconButton, Modal, Surface, Text, TextInput, Button} from 'react-native-paper';
+import {
+  IconButton,
+  Modal,
+  Surface,
+  Text,
+  TextInput,
+  Button,
+} from 'react-native-paper';
 import {SafeAreaView} from 'react-native-safe-area-context';
-import { BlurView } from "@react-native-community/blur";
+import {BlurView} from '@react-native-community/blur';
-import { InputCode } from '../utils/InputCode';
+import {InputCode} from '../utils/InputCode';
 
 export function Access() {
   const [text, setText] = useState('');
@@ -64,7 +71,9 @@ export function Access() {
       {state.layout === 'large' && (
         <Image style={styles.left} source={left} resizeMode="contain" />
       )}
-      <KeyboardAwareScrollView style={styles.frame} contentContainerStyle={styles.scroll}>
+      <KeyboardAwareScrollView
+        style={styles.frame}
+        contentContainerStyle={styles.scroll}>
         <SafeAreaView style={styles.right} edges={['top', 'bottom']}>
           <View style={styles.header}>
             <View style={styles.admin} />
@@ -92,9 +101,7 @@ export function Access() {
           </View>
           {state.mode === 'account' && (
             <View style={styles.body}>
-              <Text variant="headlineSmall">
+              <Text variant="headlineSmall">{state.strings.accountLogin}</Text>
-                {state.strings.accountLogin}
-              </Text>
               <TextInput
                 style={styles.input}
                 mode="flat"
@@ -160,9 +167,7 @@ export function Access() {
           )}
           {state.mode === 'reset' && (
             <View style={styles.body}>
-              <Text variant="headlineSmall">
+              <Text variant="headlineSmall">{state.strings.accessAccount}</Text>
-                {state.strings.accessAccount}
-              </Text>
               <TextInput
                 style={styles.input}
                 mode="flat"
@@ -202,9 +207,7 @@ export function Access() {
           )}
           {state.mode === 'create' && (
             <View style={styles.body}>
-              <Text variant="headlineSmall">
+              <Text variant="headlineSmall">{state.strings.createAccount}</Text>
-                {state.strings.createAccount}
-              </Text>
               <View style={styles.spacer}>
                 {!state.available && (
                   <TextInput
@@ -365,7 +368,12 @@ export function Access() {
         </SafeAreaView>
       </KeyboardAwareScrollView>
       {(alert || otp) && (
-        <BlurView style={styles.blur} blurType="dark" blurAmount={2} reducedTransparencyFallbackColor="dark" />
+        <BlurView
+          style={styles.blur}
+          blurType="dark"
+          blurAmount={2}
+          reducedTransparencyFallbackColor="dark"
+        />
       )}
       <Modal
         visible={alert}
@@ -395,7 +403,7 @@ export function Access() {
               mode="outlined"
               style={styles.submit}
               onPress={() => setOtp(false)}>
-                {state.strings.cancel}
+              {state.strings.cancel}
             </Button>
             <Button
               mode="contained"
@@ -405,7 +413,7 @@ export function Access() {
               disabled={state.code.length !== 6}>
               {state.strings.login}
             </Button>
-          </View> 
+          </View>
         </Surface>
       </Modal>
     </Surface>

app/client/mobile/src/access/useAccess.hook.ts

@@ -47,8 +47,7 @@ export function useAccess() {
         if (node) {
           const available = await app.actions.getAvailable(node, secure);
           updateState({available});
-        }
+        } else {
-        else {
           updateState({available: 0});
         }
       } catch (err) {
@@ -76,9 +75,8 @@ export function useAccess() {
             secure,
           );
           updateState({taken: !available});
-        }
+        } else {
-        else {
+          updateState({taken: false});
-          updateState({ taken: false });
         }
       } catch (err) {
         console.log(err);

app/client/mobile/src/channels/Channels.tsx

@@ -1,9 +1,11 @@
-import { useContext } from 'react';
+import {useContext} from 'react';
-import { Text, Button } from 'react-native-paper';
+import {Text, Button} from 'react-native-paper';
-import { SafeAreaView } from 'react-native';
+import {SafeAreaView} from 'react-native';
 
 export function Channels() {
   return (
-    <SafeAreaView><Text>CHANNELS</Text></SafeAreaView>
+    <SafeAreaView>
+      <Text>CHANNELS</Text>
+    </SafeAreaView>
   );
 }

app/client/mobile/src/contacts/Contacts.tsx

@@ -1,9 +1,11 @@
-import { useContext } from 'react';
+import {useContext} from 'react';
-import { Text, Button } from 'react-native-paper';
+import {Text, Button} from 'react-native-paper';
-import { SafeAreaView } from 'react-native';
+import {SafeAreaView} from 'react-native';
 
 export function Contacts() {
   return (
-    <SafeAreaView><Text>Contacts</Text></SafeAreaView>
+    <SafeAreaView>
+      <Text>Contacts</Text>
+    </SafeAreaView>
   );
 }

app/client/mobile/src/context/useAppContext.hook.ts

@@ -47,7 +47,7 @@ export function useAppContext() {
         appName: 'databag',
       };
 
-console.log("SDK LOGIN:", username, password, node, secure);
+      console.log('SDK LOGIN:', username, password, node, secure);
 
       const login = await sdk.current.login(
         username,

app/client/mobile/src/context/useDisplayContext.hook.ts

@@ -16,8 +16,8 @@ export function useDisplayContext() {
   };
 
   useEffect(() => {
-    const layout = dim.width < SMALL_LARGE ? 'small' : 'large'
+    const layout = dim.width < SMALL_LARGE ? 'small' : 'large';
-    updateState({ layout });
+    updateState({layout});
   }, [dim.width]);
 
   const actions = {};

app/client/mobile/src/details/Details.tsx

@@ -1,5 +1,5 @@
 import {Text} from 'react-native-paper';
 
 export function Details() {
-  return <Text>DETAILS</Text>
+  return <Text>DETAILS</Text>;
 }

app/client/mobile/src/profile/Profile.tsx

@@ -1,3 +1,3 @@
 export function Profile() {
-  return <></>
+  return <></>;
 }

app/client/mobile/src/registry/Registry.tsx

@@ -1,4 +1,3 @@
 export function Registry() {
-  return <></>
+  return <></>;
 }
-

app/client/mobile/src/session/Session.styled.ts

@@ -21,4 +21,3 @@ export const styles = StyleSheet.create({
     flexGrow: 1,
   },
 });
-

app/client/mobile/src/session/Session.tsx

@@ -1,17 +1,17 @@
-import { useState, useContext } from 'react';
+import {useState, useContext} from 'react';
-import { View, SafeAreaView } from 'react-native';
+import {View, SafeAreaView} from 'react-native';
 import {styles} from './Session.styled';
-import { BottomNavigation, Button, Text } from 'react-native-paper';
+import {BottomNavigation, Button, Text} from 'react-native-paper';
-import { DisplayContext } from '../context/DisplayContext';
+import {DisplayContext} from '../context/DisplayContext';
-import { Settings } from '../settings/Settings';
+import {Settings} from '../settings/Settings';
-import { Channels } from '../channels/Channels';
+import {Channels} from '../channels/Channels';
-import { Contacts } from '../contacts/Contacts';
+import {Contacts} from '../contacts/Contacts';
-import { Registry } from '../registry/Registry';
+import {Registry} from '../registry/Registry';
-import { Profile } from '../profile/Profile';
+import {Profile} from '../profile/Profile';
-import { Details } from '../details/Details';
+import {Details} from '../details/Details';
 
-import { NavigationContainer } from '@react-navigation/native';
+import {NavigationContainer} from '@react-navigation/native';
-import { createDrawerNavigator } from '@react-navigation/drawer';
+import {createDrawerNavigator} from '@react-navigation/drawer';
 
 const ChannelsRoute = () => <Channels />;
 const ContactsRoute = () => <Contacts />;
@@ -27,11 +27,26 @@ export function Session() {
   const display = useContext(DisplayContext);
   const [index, setIndex] = useState(0);
   const [routes] = useState([
-    { key: 'channels', title: 'Channels', focusedIcon: 'comment-multiple', unfocusedIcon: 'comment-multiple-outline' },
+    {
-    { key: 'contacts', title: 'Contacts', focusedIcon: 'contacts', unfocusedIcon: 'contacts-outline' },
+      key: 'channels',
-    { key: 'settings', title: 'Settings', focusedIcon: 'cog', unfocusedIcon: 'cog-outline' },
+      title: 'Channels',
+      focusedIcon: 'comment-multiple',
+      unfocusedIcon: 'comment-multiple-outline',
+    },
+    {
+      key: 'contacts',
+      title: 'Contacts',
+      focusedIcon: 'contacts',
+      unfocusedIcon: 'contacts-outline',
+    },
+    {
+      key: 'settings',
+      title: 'Settings',
+      focusedIcon: 'cog',
+      unfocusedIcon: 'cog-outline',
+    },
   ]);
-  const sessionNav = { settings: null };
+  const sessionNav = {settings: null};
 
   const renderScene = BottomNavigation.SceneMap({
     channels: ChannelsRoute,
@@ -44,7 +59,7 @@ export function Session() {
       {display.state.layout !== 'large' && (
         <BottomNavigation
           labeled={false}
-          navigationState={{ index, routes }}
+          navigationState={{index, routes}}
           onIndexChange={setIndex}
           renderScene={renderScene}
         />
@@ -56,9 +71,9 @@ export function Session() {
       )}
     </View>
   );
-};
+}
 
-function DetailsScreen({ nav }) {
+function DetailsScreen({nav}) {
   return (
     <ProfileDrawer.Navigator
       id="ProfileDrawer"
@@ -67,16 +82,17 @@ function DetailsScreen({ nav }) {
         drawerPosition: 'right',
         drawerType: 'front',
         headerShown: false,
-      }}
+      }}>
-    >
       <ProfileDrawer.Screen name="profile">
-        {({ navigation }) => <ProfileScreen nav={{...nav, details: navigation}} />}
+        {({navigation}) => (
+          <ProfileScreen nav={{...nav, details: navigation}} />
+        )}
       </ProfileDrawer.Screen>
     </ProfileDrawer.Navigator>
-  )
+  );
 }
 
-function ProfileScreen({ nav }) {
+function ProfileScreen({nav}) {
   return (
     <ProfileDrawer.Navigator
       id="ProfileDrawer"
@@ -85,16 +101,17 @@ function ProfileScreen({ nav }) {
         drawerPosition: 'right',
         drawerType: 'front',
         headerShown: false,
-      }}
+      }}>
-    >
       <ProfileDrawer.Screen name="registry">
-        {({ navigation }) => <RegistryScreen nav={{...nav, profile: navigation}} />}
+        {({navigation}) => (
+          <RegistryScreen nav={{...nav, profile: navigation}} />
+        )}
       </ProfileDrawer.Screen>
     </ProfileDrawer.Navigator>
-  )
+  );
 }
 
-function RegistryScreen({ nav }) {
+function RegistryScreen({nav}) {
   return (
     <RegistryDrawer.Navigator
       id="RegistryDrawer"
@@ -103,16 +120,17 @@ function RegistryScreen({ nav }) {
         drawerPosition: 'right',
         drawerType: 'front',
         headerShown: false,
-      }}
+      }}>
-    >
       <RegistryDrawer.Screen name="contacts">
-        {({ navigation }) => <ContactsScreen nav={{...nav, registry: navigation}} />}
+        {({navigation}) => (
+          <ContactsScreen nav={{...nav, registry: navigation}} />
+        )}
       </RegistryDrawer.Screen>
     </RegistryDrawer.Navigator>
-  )
+  );
 }
 
-function ContactsScreen({ nav }) {
+function ContactsScreen({nav}) {
   return (
     <ContactsDrawer.Navigator
       id="ContactsDrawer"
@@ -121,16 +139,17 @@ function ContactsScreen({ nav }) {
         drawerPosition: 'right',
         drawerType: 'front',
         headerShown: false,
-      }}
+      }}>
-    >
       <ContactsDrawer.Screen name="settings">
-        {({ navigation }) => <SettingsScreen nav={{...nav, contacts: navigation}} />}
+        {({navigation}) => (
+          <SettingsScreen nav={{...nav, contacts: navigation}} />
+        )}
       </ContactsDrawer.Screen>
     </ContactsDrawer.Navigator>
-  )
+  );
 }
 
-function SettingsScreen({ nav }) {
+function SettingsScreen({nav}) {
   return (
     <SettingsDrawer.Navigator
       id="SettingsDrawer"
@@ -139,16 +158,15 @@ function SettingsScreen({ nav }) {
         drawerPosition: 'right',
         drawerType: 'front',
         headerShown: false,
-      }}
+      }}>
-    >
       <SettingsDrawer.Screen name="home">
-        {({ navigation }) => <HomeScreen nav={{...nav, settings: navigation}} />}
+        {({navigation}) => <HomeScreen nav={{...nav, settings: navigation}} />}
       </SettingsDrawer.Screen>
     </SettingsDrawer.Navigator>
-  )
+  );
 }
 
-function HomeScreen({ nav }) {
+function HomeScreen({nav}) {
   return (
     <SafeAreaView style={styles.frame}>
       <View style={styles.left}>

app/client/mobile/src/settings/Settings.tsx

@@ -1,14 +1,16 @@
-import { useContext } from 'react';
+import {useContext} from 'react';
-import { AppContext } from '../context/AppContext';
+import {AppContext} from '../context/AppContext';
-import { Text, Button } from 'react-native-paper';
+import {Text, Button} from 'react-native-paper';
-import { SafeAreaView } from 'react-native';
+import {SafeAreaView} from 'react-native';
 
 export function Settings() {
   const app = useContext(AppContext);
 
   return (
     <SafeAreaView>
-      <Button mode="contained" onPress={app.actions.accountLogout}>Logout</Button>
+      <Button mode="contained" onPress={app.actions.accountLogout}>
+        Logout
+      </Button>
     </SafeAreaView>
   );
 }

app/client/mobile/src/utils/InputCode.tsx

@@ -1,50 +1,135 @@
-import { TextInput, Text, View, TouchableOpacity } from 'react-native';
+import {TextInput, Text, View, TouchableOpacity} from 'react-native';
-import { useState, useRef } from 'react';
+import {useState, useRef} from 'react';
-
-export function InputCode({ onChangeText, style }) {
 
+export function InputCode({onChangeText, style}) {
   const [code, setCode] = useState('');
   const ref = useRef();
 
-  const updateCode = (value) => {
+  const updateCode = value => {
     if (value.length >= 6) {
       onChangeText(value.slice(0, 6));
       if (ref.current) {
         ref.current.blur();
       }
-    }
+    } else {
-    else {
       onChangeText('');
     }
     setCode(value.slice(0, 6));
-  }
+  };
 
   return (
     <View style={style}>
-      <View style={{ width: '100%', height: 32 }}>
+      <View style={{width: '100%', height: 32}}>
-        <View style={{ width: '100%', height: '100%', display: 'flex', flexDirection: 'row', justifyContent: 'space-between' }}>
+        <View
-          <View style={{ width: 32, height: '100%', borderWidth: 1, borderRadius: 4, backgroundColor: '#dddddd', borderColor: '#aaaaaa', alignItems: 'center', justifyContent: 'center', display: 'flex' }}>
+          style={{
-            <Text style={{ fontSize: 20 }}>{ code.charAt(0) }</Text>
+            width: '100%',
+            height: '100%',
+            display: 'flex',
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+          }}>
+          <View
+            style={{
+              width: 32,
+              height: '100%',
+              borderWidth: 1,
+              borderRadius: 4,
+              backgroundColor: '#dddddd',
+              borderColor: '#aaaaaa',
+              alignItems: 'center',
+              justifyContent: 'center',
+              display: 'flex',
+            }}>
+            <Text style={{fontSize: 20}}>{code.charAt(0)}</Text>
           </View>
-          <View style={{ width: 32, height: '100%', borderWidth: 1, borderRadius: 4, backgroundColor: '#dddddd', borderColor: '#aaaaaa', alignItems: 'center', justifyContent: 'center', display: 'flex' }}>
+          <View
-            <Text style={{ fontSize: 20 }}>{ code.charAt(1) }</Text>
+            style={{
+              width: 32,
+              height: '100%',
+              borderWidth: 1,
+              borderRadius: 4,
+              backgroundColor: '#dddddd',
+              borderColor: '#aaaaaa',
+              alignItems: 'center',
+              justifyContent: 'center',
+              display: 'flex',
+            }}>
+            <Text style={{fontSize: 20}}>{code.charAt(1)}</Text>
           </View>
-          <View style={{ width: 32, height: '100%', borderWidth: 1, borderRadius: 4, backgroundColor: '#dddddd', borderColor: '#aaaaaa', alignItems: 'center', justifyContent: 'center', display: 'flex' }}>
+          <View
-            <Text style={{ fontSize: 20 }}>{ code.charAt(2) }</Text>
+            style={{
+              width: 32,
+              height: '100%',
+              borderWidth: 1,
+              borderRadius: 4,
+              backgroundColor: '#dddddd',
+              borderColor: '#aaaaaa',
+              alignItems: 'center',
+              justifyContent: 'center',
+              display: 'flex',
+            }}>
+            <Text style={{fontSize: 20}}>{code.charAt(2)}</Text>
           </View>
-          <View style={{ width: 32, height: '100%', borderWidth: 1, borderRadius: 4, backgroundColor: '#dddddd', borderColor: '#aaaaaa', alignItems: 'center', justifyContent: 'center', display: 'flex' }}>
+          <View
-            <Text style={{ fontSize: 20 }}>{ code.charAt(3) }</Text>
+            style={{
+              width: 32,
+              height: '100%',
+              borderWidth: 1,
+              borderRadius: 4,
+              backgroundColor: '#dddddd',
+              borderColor: '#aaaaaa',
+              alignItems: 'center',
+              justifyContent: 'center',
+              display: 'flex',
+            }}>
+            <Text style={{fontSize: 20}}>{code.charAt(3)}</Text>
           </View>
-          <View style={{ width: 32, height: '100%', borderWidth: 1, borderRadius: 4, backgroundColor: '#dddddd', borderColor: '#aaaaaa', alignItems: 'center', justifyContent: 'center', display: 'flex' }}>
+          <View
-            <Text style={{ fontSize: 20 }}>{ code.charAt(4) }</Text>
+            style={{
+              width: 32,
+              height: '100%',
+              borderWidth: 1,
+              borderRadius: 4,
+              backgroundColor: '#dddddd',
+              borderColor: '#aaaaaa',
+              alignItems: 'center',
+              justifyContent: 'center',
+              display: 'flex',
+            }}>
+            <Text style={{fontSize: 20}}>{code.charAt(4)}</Text>
           </View>
-          <View style={{ width: 32, height: '100%', borderWidth: 1, borderRadius: 4, backgroundColor: '#dddddd', borderColor: '#aaaaaa', alignItems: 'center', justifyContent: 'center', display: 'flex' }}>
+          <View
-            <Text style={{ fontSize: 20 }}>{ code.charAt(5) }</Text>
+            style={{
+              width: 32,
+              height: '100%',
+              borderWidth: 1,
+              borderRadius: 4,
+              backgroundColor: '#dddddd',
+              borderColor: '#aaaaaa',
+              alignItems: 'center',
+              justifyContent: 'center',
+              display: 'flex',
+            }}>
+            <Text style={{fontSize: 20}}>{code.charAt(5)}</Text>
           </View>
         </View>
-        <TextInput style={{ width: '100%', height: '100%', opacity: 0, position: 'absolute', top: 0, left: 0 }} keyboardType={Platform.OS === 'ios' ? 'numeric' : 'number-pad'} onChangeText={updateCode} autoCorrect={false} autoCapitalize="none" maxLength={6} ref={ref} />
+        <TextInput
+          style={{
+            width: '100%',
+            height: '100%',
+            opacity: 0,
+            position: 'absolute',
+            top: 0,
+            left: 0,
+          }}
+          keyboardType={Platform.OS === 'ios' ? 'numeric' : 'number-pad'}
+          onChangeText={updateCode}
+          autoCorrect={false}
+          autoCapitalize="none"
+          maxLength={6}
+          ref={ref}
+        />
       </View>
     </View>
   );
 }
-