displaying admin setup

app/client/mobile/src/constants/Strings.ts

@@ -17,6 +17,7 @@ export const en = {
   noAccess: 'No Access', 
   connecting: 'Connecting',
 
+  setup: 'Setup',
   accounts: 'Accounts',
   noAccounts: 'No Accounts',
 
@@ -172,7 +173,6 @@ export const en = {
   mb: 'MB',
   gb: 'GB',
   copied: 'Copied',
-  accounts: 'Accounts',
   accessAccount: 'Access Account',
   browserLink: 'Browser Link',
   mobileToken: 'Mobile Token',
@@ -303,6 +303,7 @@ export const fr = {
   noAccess: 'Pas d\'Accès',
   connecting: 'Démarrage de la Connexion',
 
+  setup: 'Installation',
   accounts: 'Comptes',
   noAccounts: 'Aucun Compte',
 
@@ -475,7 +476,6 @@ export const fr = {
   mb: 'Mo',
   gb: 'Go',
   copied: 'Copié',
-  accounts: 'Comptes',
   accessAccount: 'Accéder au Compte',
   browserLink: 'Lien du Navigateur',
   mobileToken: 'Code Mobile',
@@ -584,6 +584,7 @@ export const sp = {
   reportTopicPrompt: '¿Estás seguro de que deseas reportar este tema para revisión del administrador?',
   connecting: 'Conexión Inicial',
 
+  setup: 'Configuración',
   accounts: 'Cuentas',
   noAccounts: 'No hay cuentas',
 
@@ -757,7 +758,6 @@ export const sp = {
   mb: 'MB',
   gb: 'GB',
   copied: 'Copiado',
-  accounts: 'Cuentas',
   accessAccount: 'Acceder a la Cuenta',
   browserLink: 'Enlace del Navegador',
   mobileToken: 'Código Móvil',
@@ -865,6 +865,7 @@ export const pt = {
   reportTopicPrompt: 'Tem certeza de que deseja denunciar este tópico para revisão do administrador?',
   connecting: 'Iniciando Conexão',
 
+  setup: 'configurar',
   accounts: 'Contas',
   noAccounts: 'Sem Contas',
 
@@ -1038,7 +1039,6 @@ export const pt = {
   mb: 'MB',
   gb: 'GB',
   copied: 'Copiado',
-  accounts: 'Contas',
   accessAccount: 'Acessar conta',
   browserLink: 'Link do navegador',
   mobileToken: 'Token móvel',
@@ -1147,6 +1147,7 @@ export const de = {
   reportTopicPrompt: 'Sind Sie sicher, dass Sie dieses Thema zur Überprüfung durch den Administrator melden möchten?',
   connecting: 'Startverbindung',
 
+  setup: 'Aufstellen',
   accounts: 'Konten',
   noAccounts: 'Keine Konten',
 
@@ -1319,7 +1320,6 @@ export const de = {
   mb: 'MB',
   gb: 'GB',
   copied: 'Kopiert',
-  accounts: 'Konten',
   accessAccount: 'Kontozugriff',
   browserLink: 'Browser-Link',
   mobileToken: 'Mobilcode',
@@ -1428,6 +1428,7 @@ export const ru = {
   reportTopicPrompt: 'Вы уверены, что хотите отправить эту тему на рассмотрение администратору?',
   connecting: 'начало соединения',
 
+  setup: 'настраивать',
   accounts: 'Учетные записи',
   noAccounts: 'Нет учетных записей',
 
@@ -1600,7 +1601,6 @@ export const ru = {
   mb: 'МБ',
   gb: 'ГБ',
   copied: 'Скопировано',
-  accounts: 'Аккаунты',
   accessAccount: 'Доступ к аккаунту',
   browserLink: 'Ссылка на браузер',
   mobileToken: 'Мобильный токен',

app/client/mobile/src/setup/Setup.styled.ts

@@ -3,15 +3,40 @@ import { Colors } from '../constants/Colors';
 
 export const styles = StyleSheet.create({
   setup: {
+    position: 'relative',
     width: '100%',
     height: '100%',
     display: 'flex',
     flexDirection: 'column',
+    minHeight: 0,
+  },
+  title: {
+    fontSize: 20,
+    textAlign: 'center',
+    flexGrow: 1,
   },
   header: {
     display: 'flex',
     flexDirection: 'row',
     justifyContent: 'center',
+    alignItems: 'center',
+    width: '100%',
+    height: 48,
+  },
+  line: {
+    width: '100%',
+  },
+  form: {
+    width: '100%',
+    flexGrow: 1,
+    flexShrink: 1,
+    minHeight: 0,
+    height: 100,
+  },
+  content: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
     width: '100%',
   },
 });

app/client/mobile/src/setup/Setup.tsx

@@ -1,14 +1,23 @@
 import React from 'react';
 import {SafeAreaView, Image, View, Pressable} from 'react-native';
-import {Text} from 'react-native-paper';
+import {Divider, Text} from 'react-native-paper';
 import {styles} from './Setup.styled';
+import {useSetup} from './useSetup.hook';
+import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view';
 
 export function Setup() {
+  const { state, actions } = useSetup();
+
   return (
     <View style={styles.setup}>
       <View style={styles.header}>
-        <Text>SETUP</Text>
+        <Text style={styles.title}>{ state.strings.setup }</Text>
       </View>
+      <Divider style={styles.line} bold={true} />
+      <KeyboardAwareScrollView enableOnAndroid={true} style={styles.form} contentContainerStyle={styles.content}>
+        <Text>CONTENT</Text>
+      </KeyboardAwareScrollView>
+      <Divider style={styles.line} bold={true} />
     </View>
   );
 }

app/client/mobile/src/setup/useSetup.hook.ts

@@ -0,0 +1,43 @@
+import {useEffect, useState, useContext, useRef} from 'react';
+import {AppContext} from '../context/AppContext';
+import {DisplayContext} from '../context/DisplayContext';
+import {ContextType} from '../context/ContextType';
+import type { Member } from 'databag-client-sdk';
+
+export function useSetup() {
+  const app = useContext(AppContext);
+  const display = useContext(DisplayContext);
+  const [state, setState] = useState({
+    layout: '',
+    strings: {},
+  });
+
+  const updateState = (value: any) => {
+    setState(s => ({...s, ...value}));
+  };
+
+  const sync = async () => {
+    try {
+      const service = app.state.service;
+      //
+    } catch (err) {
+      console.log(err);
+    }
+  }
+
+  useEffect(() => {
+    const { layout, strings} = display.state;
+    updateState({ layout, strings});
+  }, [display.state]);
+
+  useEffect(() => {
+    if (app.state.service) {
+      sync();
+    }
+  }, [app.state.service]);
+
+  const actions = {
+  };
+
+  return {state, actions};
+}