From e6990f0ddf7516033a859246141caacdd8897d0f Mon Sep 17 00:00:00 2001
From: balzack <roland.osborne@gmail.com>
Date: Wed, 14 Aug 2024 21:46:59 -0700
Subject: [PATCH] fixing offline store

---
 app/client/mobile/src/SessionStore.ts          |  5 +++--
 app/client/mobile/src/access/Access.styled.ts  |  9 +++++----
 app/client/mobile/src/access/Access.tsx        | 18 +++++++++---------
 app/client/mobile/src/access/useAccess.hook.ts |  2 ++
 .../mobile/src/context/useAppContext.hook.ts   | 14 ++++++++------
 5 files changed, 27 insertions(+), 21 deletions(-)

diff --git a/app/client/mobile/src/SessionStore.ts b/app/client/mobile/src/SessionStore.ts
index 56305c3b..950c4cba 100644
--- a/app/client/mobile/src/SessionStore.ts
+++ b/app/client/mobile/src/SessionStore.ts
@@ -1,8 +1,7 @@
 import { SqlStore} from 'databag-client-sdk';
 import SQLite from 'react-native-sqlite-storage';
-const DATABAG_DB = 'db_v200.db';
 
-class SessionStore implements SqlStore {
+export class SessionStore implements SqlStore {
   private db: any = null;
 
   constructor() {
@@ -18,6 +17,7 @@ class SessionStore implements SqlStore {
     stmt: string,
     params: (string | number | null)[],
   ): Promise<void> {
+    console.log("SET: ", stmt);
     await this.db.executeSql(stmt, params);
   }
 
@@ -25,6 +25,7 @@ class SessionStore implements SqlStore {
     stmt: string,
     params: (string | number | null)[],
   ): Promise<any[]> {
+    console.log("GET: ", stmt);
     const res = await this.db.executeSql(stmt, params);
     const rows = [];
     if (res[0] && res[0].rows && res[0].rows > 1) {
diff --git a/app/client/mobile/src/access/Access.styled.ts b/app/client/mobile/src/access/Access.styled.ts
index 12b67b0d..5a8cc42c 100644
--- a/app/client/mobile/src/access/Access.styled.ts
+++ b/app/client/mobile/src/access/Access.styled.ts
@@ -46,7 +46,6 @@ export const styles = StyleSheet.create({
   right: {
     flex: 1,
     height: '100%',
-    overflow: 'scroll',
   },
   left: {
     flex: 1,
@@ -61,11 +60,12 @@ export const styles = StyleSheet.create({
     height: '100%',
     display: 'flex',
     flexDirection: 'column',
-    justifyContent: 'center',
-    alignItems: 'center',
-    padding: 16,
     gap: 8,
   },
+  scroll: {
+    flexGrow: 1,
+    justifyContent: 'space-between',
+  },
   header: {
     display: 'flex',
     flexDirection: 'row',
@@ -98,6 +98,7 @@ export const styles = StyleSheet.create({
   },
   submit: {
     marginTop: 32,
+    marginBottom: 8,
     width: 'auto',
   },
   float: {
diff --git a/app/client/mobile/src/access/Access.tsx b/app/client/mobile/src/access/Access.tsx
index 15d4e857..5accd372 100644
--- a/app/client/mobile/src/access/Access.tsx
+++ b/app/client/mobile/src/access/Access.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { View, Image } from 'react-native';
+import { ScrollView, View, Image } from 'react-native';
 import { useAccess } from './useAccess.hook'
 import { styles } from './Access.styled'
 import left from '../images/login.png'
@@ -24,7 +24,7 @@ export function Access() {
         } else if (state.mode === 'admin') {
           await actions.adminLogin()
         }
-        otpClose()
+        console.log("OTP CLOSE");
       } catch (err) {
         console.log(err.message)
         if (
@@ -37,9 +37,9 @@ export function Access() {
           } else {
             setDisabled(false)
           }
-          otpOpen()
+          console.log("DONE LOGIN");
         } else {
-          alertOpen()
+          console.log("ALERT ERROR");
         }
       }
       actions.setLoading(false)
@@ -52,7 +52,7 @@ export function Access() {
         <Image style={styles.left} source={left} resizeMode="contain" />
       )}
       <SafeAreaView style={styles.right} edges={['top', 'bottom']}>
-        <View style={styles.frame}>
+        <ScrollView style={styles.frame} contentContainerStyle={styles.scroll}>
           <View style={styles.header}>
             <View style={styles.admin} />
             <Text style={styles.label} variant="headlineLarge">Databag</Text>
@@ -109,7 +109,7 @@ export function Access() {
               <Button
                 mode="contained"
                 style={styles.submit}
-                onClick={login}
+                onPress={login}
                 loading={state.loading}
                 disabled={!state.username || !state.password}
               >
@@ -118,13 +118,13 @@ export function Access() {
 
                 <Button
                   mode="text"
-                  onClick={() => actions.setMode('create')}
+                  onPress={() => actions.setMode('create')}
                 >
                   {state.strings.createAccount}
                 </Button>
                 <Button
                   mode="text"
-                  onClick={() => actions.setMode('reset')}
+                  onPress={() => actions.setMode('reset')}
                 >
                   {state.strings.forgotPassword}
                 </Button>
@@ -132,7 +132,7 @@ export function Access() {
 
             </View>
           )}
-        </View>
+        </ScrollView>
       </SafeAreaView>
     </View>
   )
diff --git a/app/client/mobile/src/access/useAccess.hook.ts b/app/client/mobile/src/access/useAccess.hook.ts
index bccde5e0..f253605f 100644
--- a/app/client/mobile/src/access/useAccess.hook.ts
+++ b/app/client/mobile/src/access/useAccess.hook.ts
@@ -105,6 +105,8 @@ export function useAccess() {
     },
     accountLogin: async () => {
       const { username, password, node, secure, code } = state
+console.log("LOGIN:", username, password, node, secure, code);
+
       await app.actions.accountLogin(username, password, node, secure, code)
     },
     accountCreate: async () => {
diff --git a/app/client/mobile/src/context/useAppContext.hook.ts b/app/client/mobile/src/context/useAppContext.hook.ts
index 352fa050..5787b07a 100644
--- a/app/client/mobile/src/context/useAppContext.hook.ts
+++ b/app/client/mobile/src/context/useAppContext.hook.ts
@@ -1,6 +1,7 @@
 import { useState, useEffect, useRef } from 'react'
 import { DatabagSDK, Session } from 'databag-client-sdk'
 import { SessionStore } from '../SessionStore'
+const DATABAG_DB = 'db_v200.db';
 
 export function useAppContext() {
   const sdk = useRef(new DatabagSDK(null))
@@ -13,18 +14,19 @@ export function useAppContext() {
     setState((s) => ({ ...s, ...value }))
   }
 
-  useEffect(() => {
-    init()
-  }, [])
-
-  const init = async () => {
+  const setup = async () => {
     const store = new SessionStore()
-    const session: Session | null = await sdk.current.initOnlineStore(store)
+    await store.open(DATABAG_DB);
+    const session: Session | null = await sdk.current.initOfflineStore(store)
     if (session) {
       updateState({ session })
     }
   }
 
+  useEffect(() => {
+    setup()
+  }, [])
+
   const actions = {
     accountLogin: async (
       username: string,