linking sdk to web app

app/client/mobile/package.json

@@ -10,7 +10,7 @@
     "test": "jest"
   },
   "dependencies": {
-    "databag-client-sdk": "^0.0.17",
+    "databag-client-sdk": "^0.0.18",
     "react": "18.2.0",
     "react-native": "0.74.3"
   },

app/client/mobile/yarn.lock

@@ -3010,7 +3010,7 @@ __metadata:
     "@types/react": ^18.2.6
     "@types/react-test-renderer": ^18.0.0
     babel-jest: ^29.6.3
-    databag-client-sdk: ^0.0.17
+    databag-client-sdk: ^0.0.18
     eslint: ^8.19.0
     jest: ^29.6.3
     prettier: 2.8.8
@@ -4034,12 +4034,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"databag-client-sdk@npm:^0.0.17":
-  version: 0.0.17
-  resolution: "databag-client-sdk@npm:0.0.17"
+"databag-client-sdk@npm:^0.0.18":
+  version: 0.0.18
+  resolution: "databag-client-sdk@npm:0.0.18"
   dependencies:
     eventemitter3: ^5.0.1
-  checksum: 65961dbb1098e6d0ffb31e4bde1fce4e7f778e85abeabfdceae1af7a6f4620e714e81b035881fb214122baaccce0c84d6a59604df006e34baaec40ba78cfe9e7
+  checksum: d7afa318a9f0b4474d3d9df247f9ee8ed3f473d2163560b93d62716069650306286413b2d83cb4946fc3cf07575291e45c025475aec7a9e428c4a6318f4c29ec
   languageName: node
   linkType: hard
 

app/client/web/package.json

@@ -10,6 +10,7 @@
     "@types/node": "^16.18.101",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
+    "databag-client-sdk": "^0.0.18",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-scripts": "5.0.1",

app/client/web/src/App.tsx

@@ -1,25 +1,28 @@
 import React from 'react';
 import logo from './logo.svg';
 import './App.css';
+import { AppContextProvider } from './context/AppContext';
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <AppContextProvider>
+      <div className="App">
+        <header className="App-header">
+          <img src={logo} className="App-logo" alt="logo" />
+          <p>
+            Edit <code>src/App.tsx</code> and save to reload.
+          </p>
+          <a
+            className="App-link"
+            href="https://reactjs.org"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Learn React
+          </a>
+        </header>
+      </div>
+    </AppContextProvider>
   );
 }
 

app/client/web/src/context/AppContext.js

@@ -0,0 +1,14 @@
+import { createContext } from 'react';
+import { useAppContext } from './useAppContext.hook';
+
+export const AppContext = createContext({});
+
+export function AppContextProvider({ children }) {
+  const { state, actions } = useAppContext();
+  return (
+    <AppContext.Provider value={{ state, actions }}>
+      {children}
+    </AppContext.Provider>
+  );
+}
+

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

@@ -0,0 +1,41 @@
+import { useState, useEffect } from 'react';
+import { DatabagSDK, WebStore, Session } from 'databag-client-sdk';
+
+class Store implements WebStore {
+  public async getValue(key: string): Promise<string> {
+    return '';
+  }
+
+  public async setValue(key: string, value: string): Promise<void> {
+  }
+
+  public async clearValue(key: string): Promise<void> {
+  }
+
+  public async clearAll(): Promise<void> {
+  }
+};
+
+export function useAppContext() {
+  const [state, setState] = useState({});
+
+  const updateState = (value: any) => {
+    setState((s) => ({ ...s, ...value }))
+  }
+
+  useEffect(() => { init() }, []);
+
+  const init = async () => {
+    const sdk = new DatabagSDK(null);
+    const store = new Store();
+    const session: Session | null = await sdk.initOnlineStore(store);
+    console.log(session);
+    updateState({ sdk, session });
+  };
+
+  const actions = {
+  }
+
+  return { state, actions }
+}
+

app/client/web/yarn.lock

@@ -5171,6 +5171,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"databag-client-sdk@npm:^0.0.18":
+  version: 0.0.18
+  resolution: "databag-client-sdk@npm:0.0.18"
+  dependencies:
+    eventemitter3: ^5.0.1
+  checksum: d7afa318a9f0b4474d3d9df247f9ee8ed3f473d2163560b93d62716069650306286413b2d83cb4946fc3cf07575291e45c025475aec7a9e428c4a6318f4c29ec
+  languageName: node
+  linkType: hard
+
 "databag@workspace:.":
   version: 0.0.0-use.local
   resolution: "databag@workspace:."
@@ -5182,6 +5191,7 @@ __metadata:
     "@types/node": ^16.18.101
     "@types/react": ^18.3.3
     "@types/react-dom": ^18.3.0
+    databag-client-sdk: ^0.0.18
     react: ^18.3.1
     react-dom: ^18.3.1
     react-scripts: 5.0.1
@@ -6294,6 +6304,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"eventemitter3@npm:^5.0.1":
+  version: 5.0.1
+  resolution: "eventemitter3@npm:5.0.1"
+  checksum: 543d6c858ab699303c3c32e0f0f47fc64d360bf73c3daf0ac0b5079710e340d6fe9f15487f94e66c629f5f82cd1a8678d692f3dbb6f6fcd1190e1b97fcad36f8
+  languageName: node
+  linkType: hard
+
 "events@npm:^3.2.0":
   version: 3.3.0
   resolution: "events@npm:3.3.0"

app/sdk/package.json

@@ -1,6 +1,6 @@
 {
   "name": "databag-client-sdk",
-  "version": "0.0.17",
+  "version": "0.0.18",
   "description": "an SDK for developing Databag applications",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

app/sdk/src/index.ts

@@ -5,6 +5,9 @@ import { BotModule } from './bot';
 import type { Session, Node, Bot, SqlStore, WebStore } from './api';
 import type { SessionParams } from './types';
 
+export * from './api';
+export * from './types';
+
 export class DatabagSDK {
 
   private crypto: Crypto | null;

app/sdk/tsup.config.ts

@@ -1,7 +1,7 @@
 import { defineConfig } from "tsup";
 
 export default defineConfig({
-  entry: ["src/index.ts", "src/api.ts", "src/types.ts"],
+  entry: ["src/index.ts"],
   format: ["cjs", "esm"], // Build for commonJS and ESmodules
   dts: true, // Generate declaration file (.d.ts)
   splitting: false,