@basictech/react 0.2.0-beta.1 → 0.2.0-beta.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@basictech/react",
-  "version": "0.2.0-beta.1",
+  "version": "0.2.0-beta.10",
   "description": "",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -17,15 +17,21 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "ajv": "^8.17.1",
+    "dexie": "^4.0.8",
+    "dexie-observable": "^4.0.1-beta.13",
+    "dexie-react-hooks": "^1.1.7",
+    "dexie-syncable": "^4.0.1-beta.13",
     "jwt-decode": "^4.0.0",
-    "@repo/sync": "0.1.0-beta.0"
+    "uuid": "^10.0.0",
+    "@basictech/schema": "0.1.0-beta.0"
   },
   "devDependencies": {
+    "@repo/typescript-config": "*",
     "tsup": "^7.2.0",
-    "typescript": "^5.0.0",
-    "@repo/typescript-config": "*"
+    "typescript": "^5.0.0"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
   }
-}
+}

package/readme.md

@@ -17,9 +17,31 @@ In your root component or App.tsx, wrap your application with the `BasicProvider
 ```typescript
 import { BasicProvider } from '@basictech/react';
 
+const schema = {
+  tables: { 
+    todos: { 
+      fields: { 
+        id: { 
+          type: "string",
+          primary: true
+        },
+        title: { 
+          type: "string",
+          indexed: true
+        },
+        completed: { 
+          type: "boolean",
+          indexed: true
+        }
+      }
+    }
+  } 
+}
+
+
 function App() {
   return (
-    <BasicProvider project_id="YOUR_PROJECT_ID">
+    <BasicProvider project_id="YOUR_PROJECT_ID" schema={schema} debug>
       {/* Your app components */}
     </BasicProvider>
   );
@@ -53,33 +75,50 @@ function MyComponent() {
 }
 ```
 
-### 3. Database Operations
+## API Reference
+
+
+### <BasicProvider>
+
+The `BasicProvider` component accepts the following props:
+
+- `project_id` (required): String - Your Basic project ID.
+- `schema` (required): Object - The schema definition for your database.
+- `debug` (optional): Boolean - Enable debug mode for additional logging. Default is `false`.
+- `children` (required): React.ReactNode - The child components to be wrapped by the provider.
+
+
+
 
-You can perform database operations using the `db` object:
+### useQuery
+
+returns a react hook that will automatically update data based on your query 
+
+usage: 
 
 ```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);
-};
+import { useQuery } from '@basictech/react'
+
+function MyComponent() {
+  const data = useQuery(db.collection('data').getAll())
+
+  return (
+    <div>
+      { 
+        data.map((item: any) => {
+          <> 
+          // render your data here
+          </>
+        })
+      }
+    </div>
+  );
+}
 ```
+Notes:
+- must pass in a db function, ie `db.collection('todos').getAll()`
+- default will be empty array (this might change in the future)
 
-## API Reference
 
 ### useBasic()
 
@@ -91,14 +130,47 @@ Returns an object with the following properties and methods:
 - `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
+db methods: 
+
+- `collection(name: string)`: returns a collection object
+
+
+db.collection(name) methods: 
+
+- `getAll()`: returns all items in the collection
+- `get(id: string)`: returns a single item from the collection
+- `add(data: any)`: adds a new item to the collection
+- `put(data: any)`: updates an item in the collection
+- `update(id: string, data: any)`: updates an item in the collection
+- `delete(id: string)`: deletes an item from the collection
+
+all db.collection() methods return a promise 
+
+example usage: 
+
+```typescript
+import { useBasic } from '@basictech/react';
+
+function MyComponent() {
+  const { db } = useBasic();
+
+  async function addTodo() {
+    await db.collection('todos').add({
+      title: 'test',
+      completed: false
+    })
+  }
+
+  return (
+    <div>
+      <button onClick={addTodo}>Add Todo</button>
+    </div>
+  );
+}
+
+```
 
 ## License
 

package/src/AuthContext.tsx

@@ -3,23 +3,54 @@
 import React, { createContext, useContext, useEffect, useState, useRef } from 'react'
 import { jwtDecode } from 'jwt-decode'
 
-
-
-import { BasicSync } from '@repo/sync'
+import { BasicSync } from './sync'
 import { get, add, update, deleteRecord } from './db'
+import { validateSchema } from './schema'
+
+import { log } from './config'
+
+/*
+schema todo:
+    field types
+    array types
+    relations
+*/
+
+
+// const example = {
+//     project_id: '123',
+//     version: 0,
+//     tables: {
+//         example: {
+//             name: 'example',
+//             type: 'collection',
+//             fields: {
+//                 id: {
+//                     type: 'uuid',
+//                     primary: true,
+//                 },
+//                 value: {
+//                     type: 'string',
+//                     indexed: true,
+//                 },
+//             }
+//         }
+//     }
+// }
+
 
 type BasicSyncType = {
     basic_schema: any;
     connect: (options: { access_token: string }) => void;
     debugeroo: () => void;
     collection: (name: string) => {
-      ref: {
-        toArray: () => Promise<any[]>;
-        count: () => Promise<number>;
-      };
+        ref: {
+            toArray: () => Promise<any[]>;
+            count: () => Promise<number>;
+        };
     };
     [key: string]: any; // For other potential methods and properties
-  };
+};
 
 
 enum DBStatus {
@@ -49,18 +80,18 @@ type Token = {
 
 export const BasicContext = createContext<{
     unicorn: string,
-    isLoaded: boolean,
+    isAuthReady: boolean,
     isSignedIn: boolean,
     user: User | null,
     signout: () => void,
     signin: () => void,
     getToken: () => Promise<string>,
     getSignInLink: () => string,
-    db: any, 
+    db: any,
     dbStatus: DBStatus
 }>({
     unicorn: "🦄",
-    isLoaded: false,
+    isAuthReady: false,
     isSignedIn: false,
     user: null,
     signout: () => { },
@@ -68,7 +99,7 @@ export const BasicContext = createContext<{
     getToken: () => new Promise(() => { }),
     getSignInLink: () => "",
     db: {},
-    dbStatus: DBStatus.OFFLINE
+    dbStatus: DBStatus.LOADING
 });
 
 const EmptyDB: BasicSyncType = {
@@ -103,98 +134,143 @@ function getSyncStatus(statusCode: number): string {
     }
 }
 
-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)
+type ErrorObject = {
+    code: string;
+    title: string;
+    message: string;
+}
+
+export function BasicProvider({ children, project_id, schema, debug = false }: { children: React.ReactNode, project_id: string, schema: any, debug?: boolean }) {
+    const [isAuthReady, setIsAuthReady] = useState(false)
+    const [isSignedIn, setIsSignedIn] = useState<boolean>(false)
     const [token, setToken] = useState<Token | null>(null)
-    const [authCode, setAuthCode] = useState<string | null>(null)
     const [user, setUser] = useState<User>({})
 
-    const [dbStatus, setDbStatus] = useState<DBStatus>(DBStatus.OFFLINE)
-
+    const [dbStatus, setDbStatus] = useState<DBStatus>(DBStatus.LOADING)
+    const [error, setError] = useState<ErrorObject | null>(null)
 
     const syncRef = useRef<BasicSync | null>(null);
 
+
     useEffect(() => {
-        if (!syncRef.current) {
-            syncRef.current = new BasicSync('basicdb', { schema: schema });
+        function initDb() {
+            const valid = validateSchema(schema)
+            if (!valid.valid) {
+                log('Basic Schema is invalid!', valid.errors)
+                console.group('Schema Errors')
+                let errorMessage = ''
+                valid.errors.forEach((error, index) => {
+                    log(`${index + 1}:`, error.message, ` - at ${error.instancePath}`)
+                    errorMessage += `${index + 1}: ${error.message} - at ${error.instancePath}\n`
+                })
+                console.groupEnd('Schema Errors')
+                setError({
+                    code: 'schema_invalid',
+                    title: 'Basic Schema is invalid!',
+                    message: errorMessage
+                })
+                return null
+            }
 
-            // console.log('db is open', syncRef.current.isOpen())
-            // syncRef.current.open()
-            // .then(() => {
-            //     console.log("is open now:", syncRef.current.isOpen())
-            // })
+            if (!syncRef.current) {
+                log('Initializing BasicDB')
+                syncRef.current = new BasicSync('basicdb', { schema: schema });
 
-            syncRef.current.handleStatusChange((status: number, url: string) => {
-                setDbStatus(getSyncStatus(status))
-            })
+                // log('db is open', syncRef.current.isOpen())
+                // syncRef.current.open()
+                // .then(() => {
+                //     log("is open now:", syncRef.current.isOpen())
+                // })
+            }
+        }
 
-            syncRef.current.syncable.getStatus().then((status) => {
-                console.log('sync status', getSyncStatus(status))
-            })
+        initDb()
+    }, []);
 
+    useEffect(() => {
+        if (!syncRef.current) {
+            return
         }
-    }, []);
 
+        // syncRef.current.handleStatusChange((status: number, url: string) => {
+        //     setDbStatus(getSyncStatus(status))
+        // })
 
-    //todo: 
-    //add random state to signin link & verify random state
+        syncRef.current.syncable.on('statusChanged', (status: number, url: string) => {
+            setDbStatus(getSyncStatus(status))
+        })
 
-    const connectToDb = async () => {
+        syncRef.current.syncable.getStatus().then((status) => {
+            setDbStatus(getSyncStatus(status))
+        })
+    }, [syncRef.current])
 
+
+    const connectToDb = async () => {
         const tok = await getToken()
+        if (!tok) {
+            log('no token found')
+            return
+        }
+
+        log('connecting to db...')
 
-        console.log('connecting to db...', tok.substring(0, 10))
+        // TODO: handle if signed out after connect() is already called
 
         syncRef.current.connect({ access_token: tok })
             .catch((e) => {
-                console.log('error connecting to db', e)
+                log('error connecting to db', e)
             })
     }
 
     useEffect(() => {
-        if (token) {
+        if (token && syncRef.current && isSignedIn && isSignedIn) {
             connectToDb()
         }
-    }, [token])
+    }, [isSignedIn])
 
     const getSignInLink = () => {
-        console.log('getting sign in link...')
+        log('getting sign in link...')
 
-        const randomState = Math.random().toString(36).substring(7);
+        const randomState = Math.random().toString(36).substring(6);
+        localStorage.setItem('basic_auth_state', randomState)
 
-        // let baseUrl = "https://api.basic.tech/auth/authorize"
-        let baseUrl = "http://localhost:3003/auth/authorize"
+        let baseUrl = "https://api.basic.tech/auth/authorize"
         baseUrl += `?client_id=${project_id}`
         baseUrl += `&redirect_uri=${encodeURIComponent(window.location.href)}`
         baseUrl += `&response_type=code`
         baseUrl += `&scope=openid`
-        baseUrl += `&state=1234zyx`
+        baseUrl += `&state=${randomState}`
 
         return baseUrl;
     }
 
     const signin = () => {
-        console.log('signing in: ', getSignInLink())
+        log('signing in: ', getSignInLink())
         const signInLink = getSignInLink()
         //todo: change to the other thing?
         window.location.href = signInLink;
     }
 
     const signout = () => {
-        console.log('signing out!')
+        log('signing out!')
         setUser({})
         setIsSignedIn(false)
         setToken(null)
-        setAuthCode(null)
         document.cookie = `basic_token=; Secure; SameSite=Strict`;
+        localStorage.removeItem('basic_auth_state')
+
+        if (syncRef.current) {
+            // WIP - BUG - sometimes connects even after signout
+            syncRef.current.disconnect()
+        }
     }
 
     const getToken = async (): Promise<string> => {
-        console.log('getting token...')
+        log('getting token...')
 
         if (!token) {
-            console.log('no token found')
+            log('no token found')
             throw new Error('no token found')
         }
 
@@ -202,7 +278,7 @@ export function BasicProvider({ children, project_id, schema }: { children: Reac
         const isExpired = decoded.exp && decoded.exp < Date.now() / 1000
 
         if (isExpired) {
-            console.log('token is expired - refreshing ...')
+            log('token is expired - refreshing ...')
             const newToken = await fetchToken(token?.refresh)
             return newToken?.access_token || ''
         }
@@ -234,45 +310,56 @@ export function BasicProvider({ children, project_id, schema }: { children: Reac
             body: JSON.stringify({ code: code })
         })
             .then(response => response.json())
-            .catch(error => console.error('Error:', error))
+            .catch(error => log('Error:', error))
 
         if (token.error) {
-            console.log('error fetching token', token.error)
+            log('error fetching token', token.error)
             return
         } else {
-            // console.log('token', token)
+            // log('token', token)
             setToken(token)
         }
         return token
     }
 
     useEffect(() => {
-        try {
-            let cookie_token = getCookie('basic_token')
-            if (cookie_token !== '') {
-                setToken(JSON.parse(cookie_token))
-            }
+        localStorage.setItem('basic_debug', debug ? 'true' : 'false')
 
+        try {
             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)
+                const state = localStorage.getItem('basic_auth_state')
+                if (!state || state !== window.location.search.split('state=')[1].split('&')[0]) {
+                    log('error: auth state does not match')
+                    setIsAuthReady(true)
 
-                window.history.pushState({}, document.title, "/");
+                    localStorage.removeItem('basic_auth_state')
+                    window.history.pushState({}, document.title, "/");
+                    return
+                }
 
-            } else {
-                setIsLoaded(true)
+                localStorage.removeItem('basic_auth_state')
+
+                fetchToken(code)                
+            } else { 
+                let cookie_token = getCookie('basic_token')
+                if (cookie_token !== '') {
+                    setToken(JSON.parse(cookie_token))
+                } else { 
+                    setIsAuthReady(true)
+                }
             }
+
+
         } catch (e) {
-            console.log('error getting cookie', e)
+            log('error getting cookie', e)
         }
     }, [])
 
     useEffect(() => {
         async function fetchUser(acc_token: string) {
+            console.info('fetching user')
             const user = await fetch('https://api.basic.tech/auth/userInfo', {
                 method: 'GET',
                 headers: {
@@ -280,24 +367,32 @@ export function BasicProvider({ children, project_id, schema }: { children: Reac
                 }
             })
                 .then(response => response.json())
-                .catch(error => console.error('Error:', error))
+                .catch(error => log('Error:', error))
 
             if (user.error) {
-                console.log('error fetching user', user.error)
+                log('error fetching user', user.error)
                 // refreshToken()
                 return
             } else {
-                // console.log('user', user)
+                // log('user', user)
                 document.cookie = `basic_token=${JSON.stringify(token)}; Secure; SameSite=Strict`;
+                
+                if (window.location.search.includes('code')) {
+                    window.history.pushState({}, document.title, "/");
+                }
+                
                 setUser(user)
                 setIsSignedIn(true)
-                setIsLoaded(true)
+
+                setIsAuthReady(true)
             }
         }
 
         async function checkToken() {
             if (!token) {
-                console.log('error: no user token found')
+                log('error: no user token found')
+
+                setIsAuthReady(true)
                 return
             }
 
@@ -305,7 +400,7 @@ export function BasicProvider({ children, project_id, schema }: { children: Reac
             const isExpired = decoded.exp && decoded.exp < Date.now() / 1000
 
             if (isExpired) {
-                console.log('token is expired - refreshing ...')
+                log('token is expired - refreshing ...')
                 const newToken = await fetchToken(token?.refresh)
                 fetchUser(newToken.access_token)
             } else {
@@ -315,8 +410,7 @@ export function BasicProvider({ children, project_id, schema }: { children: Reac
 
         if (token) {
             checkToken()
-            setIsLoaded(true)
-        }
+        } 
     }, [token])
 
 
@@ -356,7 +450,7 @@ export function BasicProvider({ children, project_id, schema }: { children: Reac
     return (
         <BasicContext.Provider value={{
             unicorn: "🦄",
-            isLoaded,
+            isAuthReady,
             isSignedIn,
             user,
             signout,
@@ -366,11 +460,39 @@ export function BasicProvider({ children, project_id, schema }: { children: Reac
             db: syncRef.current,
             dbStatus
         }}>
+            {error && <ErrorDisplay error={error} />}
             {syncRef.current ? children : null}
         </BasicContext.Provider>
     )
 }
 
+function ErrorDisplay({ error }: { error: ErrorObject }) {
+    return <div style={{ 
+        position: 'absolute',
+        top: 20, 
+        left: 20,
+        color: 'black',
+        backgroundColor: '#f8d7da',
+        border: '1px solid #f5c6cb',
+        borderRadius: '4px',
+        padding: '20px',
+        maxWidth: '400px',
+        margin: '20px auto',
+        boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
+        fontFamily: 'monospace', 
+     }}>
+        <h3 style={{fontSize: '0.8rem', opacity: 0.8}}>code: {error.code}</h3>
+        <h1 style={{fontSize: '1.2rem', lineHeight: '1.5'}}>{error.title}</h1>
+        <p>{error.message}</p>
+    </div>
+}
+
+/*
+possible errors: 
+- projectid missing / invalid
+- schema missing / invalid
+*/
+
 export function useBasic() {
     return useContext(BasicContext);
-}
+}

package/src/config.ts

@@ -0,0 +1,27 @@
+
+export const SERVER_URL = "https://api.basic.tech"
+//  export const SERVER_URL = "http://localhost:3000"
+
+
+export const log = (...args: any[]) => {
+    try { 
+        if (localStorage.getItem('basic_debug') === 'true') {
+            console.log('[basic]', ...args)
+        }
+    } catch (e) {
+        // console.log('error logging', e)
+    }
+}
+
+// export const log = (message: string, ...args: any[]) => {
+//     try {
+//         if (process.env.NODE_ENV === 'development') {
+//             const stack = new Error().stack;
+//             const caller = stack?.split('\n')[2]?.trim();
+//             console.log(`[basic] ${message}`, ...args);
+//             // console.log(`[stack] ${caller}`);
+//         }
+//     } catch (e) {
+//         console.error('Error in logWithStack:', e);
+//     }
+// }