@basictech/react 0.1.0 → 0.2.0-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@basictech/react",
-  "version": "0.1.0",
+  "version": "0.2.0-beta.1",
   "description": "",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -17,7 +17,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "jwt-decode": "^4.0.0"
+    "jwt-decode": "^4.0.0",
+    "@repo/sync": "0.1.0-beta.0"
   },
   "devDependencies": {
     "tsup": "^7.2.0",

package/readme.md

@@ -0,0 +1,107 @@
+# @basictech/react
+
+A React package for integrating Basic authentication and database functionality into your React applications.
+
+## Installation
+
+```bash
+npm install @basictech/react
+```
+
+## Usage
+
+### 1. Wrap your application with BasicProvider
+
+In your root component or App.tsx, wrap your application with the `BasicProvider`:
+
+```typescript
+import { BasicProvider } from '@basictech/react';
+
+function App() {
+  return (
+    <BasicProvider project_id="YOUR_PROJECT_ID">
+      {/* Your app components */}
+    </BasicProvider>
+  );
+}
+
+export default App;
+```
+
+Replace `YOUR_PROJECT_ID` with your actual Basic project ID.
+
+### 2. Use the useBasic hook
+
+In your components, you can use the `useBasic` hook to access authentication and database functionality:
+
+```typescript
+import { useBasic } from '@basictech/react';
+
+function MyComponent() {
+  const { user, isSignedIn, signin, signout, db } = useBasic();
+
+  if (!isSignedIn) {
+    return <button onClick={signin}>Sign In</button>;
+  }
+
+  return (
+    <div>
+      <h1>Welcome, {user.name}!</h1>
+      <button onClick={signout}>Sign Out</button>
+    </div>
+  );
+}
+```
+
+### 3. Database Operations
+
+You can perform database operations using the `db` object:
+
+```typescript
+const { db } = useBasic();
+
+// Get data
+const getData = async () => {
+  const data = await db.table('myTable').get();
+  console.log(data);
+};
+
+// Add data
+const addData = async () => {
+  const result = await db.table('myTable').add({ key: 'value' });
+  console.log(result);
+};
+
+// Update data
+const updateData = async () => {
+  const result = await db.table('myTable').update('itemId', { key: 'newValue' });
+  console.log(result);
+};
+```
+
+## API Reference
+
+### useBasic()
+
+Returns an object with the following properties and methods:
+
+- `user`: The current user object
+- `isSignedIn`: Boolean indicating if the user is signed in
+- `signin()`: Function to initiate the sign-in process
+- `signout()`: Function to sign out the user
+- `db`: Object for database operations
+
+### db
+
+The `db` object provides the following methods:
+
+- `table(tableName)`: Selects a table for operations
+  - `get()`: Retrieves all items from the table
+  - `add(value)`: Adds a new item to the table
+  - `update(id, value)`: Updates an item in the table
+
+## License
+
+ISC
+
+---

package/src/AuthContext.tsx

@@ -1,64 +1,170 @@
-//@ts-nocheck
-import React, { createContext, useContext, useEffect, useState } from 'react'
-import { jwtDecode} from 'jwt-decode'
+// @ts-nocheck
 
+import React, { createContext, useContext, useEffect, useState, useRef } from 'react'
+import { jwtDecode } from 'jwt-decode'
+
+
+
+import { BasicSync } from '@repo/sync'
 import { get, add, update, deleteRecord } from './db'
 
-type User = { 
+type BasicSyncType = {
+    basic_schema: any;
+    connect: (options: { access_token: string }) => void;
+    debugeroo: () => void;
+    collection: (name: string) => {
+      ref: {
+        toArray: () => Promise<any[]>;
+        count: () => Promise<number>;
+      };
+    };
+    [key: string]: any; // For other potential methods and properties
+  };
+
+
+enum DBStatus {
+    LOADING = "LOADING",
+    OFFLINE = "OFFLINE",
+    CONNECTING = "CONNECTING",
+    ONLINE = "ONLINE",
+    SYNCING = "SYNCING",
+    ERROR = "ERROR"
+}
+
+type User = {
     name?: string,
     email?: string,
     id?: string,
     primaryEmailAddress?: {
         emailAddress: string
-    }, 
+    },
     fullName?: string
 }
+type Token = {
+    access_token: string,
+    token_type: string,
+    expires_in: number,
+    refresh: string,
+}
 
-export const BasicContext = createContext<{ 
-    unicorn: string, 
+export const BasicContext = createContext<{
+    unicorn: string,
     isLoaded: boolean,
     isSignedIn: boolean,
     user: User | null,
     signout: () => void,
     signin: () => void,
     getToken: () => Promise<string>,
-    getSignInLink: () => string, 
-    db: any
+    getSignInLink: () => string,
+    db: any, 
+    dbStatus: DBStatus
 }>({
-    unicorn: "🦄", 
+    unicorn: "🦄",
     isLoaded: false,
     isSignedIn: false,
     user: null,
-    signout: () => {},
-    signin: () => {},
-    getToken: () => new Promise(() => {}),
+    signout: () => { },
+    signin: () => { },
+    getToken: () => new Promise(() => { }),
     getSignInLink: () => "",
-    db: {}
+    db: {},
+    dbStatus: DBStatus.OFFLINE
 });
 
-type Token = { 
-    access_token: string,
-    token_type: string,
-    expires_in: number,
-    refresh: string,
-} 
+const EmptyDB: BasicSyncType = {
+    isOpen: false,
+    collection: () => {
+        return {
+            ref: {
+                toArray: () => [],
+                count: () => 0
+            }
+        }
+    }
+}
 
-export function BasicProvider({children, project_id}: {children: React.ReactNode, project_id: string}) {
+
+function getSyncStatus(statusCode: number): string {
+    switch (statusCode) {
+        case -1:
+            return "ERROR";
+        case 0:
+            return "OFFLINE";
+        case 1:
+            return "CONNECTING";
+        case 2:
+            return "ONLINE";
+        case 3:
+            return "SYNCING";
+        case 4:
+            return "ERROR_WILL_RETRY";
+        default:
+            return "UNKNOWN";
+    }
+}
+
+export function BasicProvider({ children, project_id, schema }: { children: React.ReactNode, project_id: string, schema: any }) {
     const [isLoaded, setIsLoaded] = useState(false)
-    const [isSignedIn, setIsSignedIn] = useState(false) 
+    const [isSignedIn, setIsSignedIn] = useState(false)
     const [token, setToken] = useState<Token | null>(null)
     const [authCode, setAuthCode] = useState<string | null>(null)
-    const [user, setUser] = useState<User>({}) 
+    const [user, setUser] = useState<User>({})
+
+    const [dbStatus, setDbStatus] = useState<DBStatus>(DBStatus.OFFLINE)
+
+
+    const syncRef = useRef<BasicSync | null>(null);
+
+    useEffect(() => {
+        if (!syncRef.current) {
+            syncRef.current = new BasicSync('basicdb', { schema: schema });
+
+            // console.log('db is open', syncRef.current.isOpen())
+            // syncRef.current.open()
+            // .then(() => {
+            //     console.log("is open now:", syncRef.current.isOpen())
+            // })
+
+            syncRef.current.handleStatusChange((status: number, url: string) => {
+                setDbStatus(getSyncStatus(status))
+            })
+
+            syncRef.current.syncable.getStatus().then((status) => {
+                console.log('sync status', getSyncStatus(status))
+            })
+
+        }
+    }, []);
+
 
     //todo: 
     //add random state to signin link & verify random state
 
+    const connectToDb = async () => {
+
+        const tok = await getToken()
+
+        console.log('connecting to db...', tok.substring(0, 10))
+
+        syncRef.current.connect({ access_token: tok })
+            .catch((e) => {
+                console.log('error connecting to db', e)
+            })
+    }
+
+    useEffect(() => {
+        if (token) {
+            connectToDb()
+        }
+    }, [token])
+
     const getSignInLink = () => {
         console.log('getting sign in link...')
 
         const randomState = Math.random().toString(36).substring(7);
 
-        let baseUrl = "https://api.basic.tech/auth/authorize"
+        // let baseUrl = "https://api.basic.tech/auth/authorize"
+        let baseUrl = "http://localhost:3003/auth/authorize"
         baseUrl += `?client_id=${project_id}`
         baseUrl += `&redirect_uri=${encodeURIComponent(window.location.href)}`
         baseUrl += `&response_type=code`
@@ -68,8 +174,8 @@ export function BasicProvider({children, project_id}: {children: React.ReactNode
         return baseUrl;
     }
 
-    const signin = () => { 
-        console.log('signing in: ', getSignInLink()) 
+    const signin = () => {
+        console.log('signing in: ', getSignInLink())
         const signInLink = getSignInLink()
         //todo: change to the other thing?
         window.location.href = signInLink;
@@ -84,23 +190,23 @@ export function BasicProvider({children, project_id}: {children: React.ReactNode
         document.cookie = `basic_token=; Secure; SameSite=Strict`;
     }
 
-    const getToken = async () : Promise<string> => {
+    const getToken = async (): Promise<string> => {
         console.log('getting token...')
-    
+
         if (!token) {
             console.log('no token found')
-            return ''
+            throw new Error('no token found')
         }
-    
+
         const decoded = jwtDecode(token?.access_token)
         const isExpired = decoded.exp && decoded.exp < Date.now() / 1000
-    
+
         if (isExpired) {
             console.log('token is expired - refreshing ...')
             const newToken = await fetchToken(token?.refresh)
             return newToken?.access_token || ''
         }
-    
+
         return token?.access_token || ''
     }
 
@@ -119,21 +225,21 @@ export function BasicProvider({children, project_id}: {children: React.ReactNode
         return cookieValue;
     }
 
-    const fetchToken = async (code: string) => { 
+    const fetchToken = async (code: string) => {
         const token = await fetch('https://api.basic.tech/auth/token', {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json'
             },
-            body: JSON.stringify({code: code})
+            body: JSON.stringify({ code: code })
         })
-        .then(response => response.json())
-        .catch(error => console.error('Error:', error))
+            .then(response => response.json())
+            .catch(error => console.error('Error:', error))
 
         if (token.error) {
             console.log('error fetching token', token.error)
             return
-        } else { 
+        } else {
             // console.log('token', token)
             setToken(token)
         }
@@ -141,42 +247,46 @@ export function BasicProvider({children, project_id}: {children: React.ReactNode
     }
 
     useEffect(() => {
-        let cookie_token = getCookie('basic_token')
-        if (cookie_token !== '') {
-            setToken(JSON.parse(cookie_token))
-        }
-        
-        if (window.location.search.includes('code')) {
-            let code = window.location.search.split('code=')[1].split('&')[0]
-            // console.log('code found', code)
-            
-            // todo: check state is valid
-            setAuthCode(code) // remove this? dont need to store code?
-            fetchToken(code)
-
-            window.history.pushState({}, document.title, "/");
-
-        } else { 
-            setIsLoaded(true)
+        try {
+            let cookie_token = getCookie('basic_token')
+            if (cookie_token !== '') {
+                setToken(JSON.parse(cookie_token))
+            }
+
+            if (window.location.search.includes('code')) {
+                let code = window.location?.search?.split('code=')[1].split('&')[0]
+                // console.log('code found', code)
+
+                // todo: check state is valid
+                setAuthCode(code) // remove this? dont need to store code?
+                fetchToken(code)
+
+                window.history.pushState({}, document.title, "/");
+
+            } else {
+                setIsLoaded(true)
+            }
+        } catch (e) {
+            console.log('error getting cookie', e)
         }
     }, [])
 
     useEffect(() => {
-        async function fetchUser (acc_token: string) {
+        async function fetchUser(acc_token: string) {
             const user = await fetch('https://api.basic.tech/auth/userInfo', {
                 method: 'GET',
                 headers: {
                     'Authorization': `Bearer ${acc_token}`
                 }
             })
-            .then(response => response.json())
-            .catch(error => console.error('Error:', error))
+                .then(response => response.json())
+                .catch(error => console.error('Error:', error))
 
             if (user.error) {
                 console.log('error fetching user', user.error)
                 // refreshToken()
                 return
-            } else { 
+            } else {
                 // console.log('user', user)
                 document.cookie = `basic_token=${JSON.stringify(token)}; Secure; SameSite=Strict`;
                 setUser(user)
@@ -185,7 +295,7 @@ export function BasicProvider({children, project_id}: {children: React.ReactNode
             }
         }
 
-        async function checkToken () { 
+        async function checkToken() {
             if (!token) {
                 console.log('error: no user token found')
                 return
@@ -198,71 +308,69 @@ export function BasicProvider({children, project_id}: {children: React.ReactNode
                 console.log('token is expired - refreshing ...')
                 const newToken = await fetchToken(token?.refresh)
                 fetchUser(newToken.access_token)
-            } else { 
+            } else {
                 fetchUser(token.access_token)
             }
         }
 
-        if (token) { 
+        if (token) {
             checkToken()
             setIsLoaded(true)
         }
     }, [token])
 
-    
 
-
-    const db = (tableName : string) => {
-        const checkSignIn = () => { 
+    const db_ = (tableName: string) => {
+        const checkSignIn = () => {
             if (!isSignedIn) {
                 throw new Error('cannot use db. user not logged in.')
             }
         }
 
-        return { 
-            get: async () => { 
-                checkSignIn() 
+        return {
+            get: async () => {
+                checkSignIn()
                 const tok = await getToken()
-                return get({projectId: project_id, accountId: user.id, tableName: tableName, token: tok } )
+                return get({ projectId: project_id, accountId: user.id, tableName: tableName, token: tok })
             },
-            add: async (value: any) => { 
-                checkSignIn() 
+            add: async (value: any) => {
+                checkSignIn()
                 const tok = await getToken()
-                return add({projectId: project_id, accountId: user.id, tableName: tableName, value: value, token: tok } )
+                return add({ projectId: project_id, accountId: user.id, tableName: tableName, value: value, token: tok })
             },
-            update: async (id: string,value : any) => { 
-                checkSignIn() 
+            update: async (id: string, value: any) => {
+                checkSignIn()
                 const tok = await getToken()
-                return update({projectId: project_id, accountId: user.id, tableName: tableName, id: id, value: value, token: tok } )
+                return update({ projectId: project_id, accountId: user.id, tableName: tableName, id: id, value: value, token: tok })
             },
-            delete: async (id: string) => { 
-                checkSignIn() 
+            delete: async (id: string) => {
+                checkSignIn()
                 const tok = await getToken()
-                return deleteRecord({projectId: project_id, accountId: user.id, tableName: tableName, id: id, token: tok } )
+                return deleteRecord({ projectId: project_id, accountId: user.id, tableName: tableName, id: id, token: tok })
             }
-            
+
         }
-    
+
     }
 
     return (
-    <BasicContext.Provider value={{
-        unicorn: "🦄",
-        isLoaded,
-        isSignedIn,
-        user,
-        signout,
-        signin,
-        getToken,
-        getSignInLink, 
-        db, 
-        
-    }}>
-    {children}
-    </BasicContext.Provider>
+        <BasicContext.Provider value={{
+            unicorn: "🦄",
+            isLoaded,
+            isSignedIn,
+            user,
+            signout,
+            signin,
+            getToken,
+            getSignInLink,
+            db: syncRef.current,
+            dbStatus
+        }}>
+            {syncRef.current ? children : null}
+        </BasicContext.Provider>
     )
-  }
+}
 
 export function useBasic() {
     return useContext(BasicContext);
-  }
+}

package/src/index.ts

@@ -1,5 +1,6 @@
 import { useBasic, BasicProvider } from "./AuthContext";
+import { useLiveQuery as useQuery } from "dexie-react-hooks";
 
 export {
-    useBasic, BasicProvider
+    useBasic, BasicProvider, useQuery
 }

package/tsup.config.ts

@@ -7,4 +7,5 @@ export default defineConfig({
   splitting: false,
   sourcemap: true,
   clean: true,
+  noExternal: ['@repo/sync']
 })