support offline api

Author: lebalz

src/api/OfflineApi/Adapter/MemoryDb.ts

@@ -11,9 +11,9 @@ class MemoryDbAdapter implements DbAdapter {
 
     async getAll<T>(storeName: string): Promise<T[]> {
         if (!this.db[storeName]) {
-            return [];
+            return Promise.resolve([]);
         }
-        return Object.values(this.db[storeName]) as T[];
+        return Promise.resolve(Object.values(this.db[storeName]) as T[]);
     }
 
     async byDocumentRootId<T extends DocumentType>(
@@ -22,31 +22,34 @@ class MemoryDbAdapter implements DbAdapter {
         if (!documentRootId) {
             return Promise.resolve([]);
         }
-        return this.filter('documents', (doc) => doc.documentRootId === documentRootId) as Promise<
-            Document<T>[]
-        >;
+        return Promise.resolve(
+            this.filter('documents', (doc) => doc.documentRootId === documentRootId) as Promise<Document<T>[]>
+        );
     }
 
     async put<T>(storeName: string, item: T & { id: string }): Promise<void> {
         if (!this.db[storeName]) {
             this.db[storeName] = {};
         }
         this.db[storeName][item.id] = item;
+        return Promise.resolve();
     }
 
     async delete(storeName: string, id: string): Promise<void> {
         if (this.db[storeName] && this.db[storeName][id]) {
             delete this.db[storeName][id];
         }
+        return Promise.resolve();
     }
     async filter<T>(storeName: string, filterFn: (item: T) => boolean): Promise<T[]> {
         const allItems = await this.getAll<T>(storeName);
-        return allItems.filter(filterFn);
+        return Promise.resolve(allItems.filter(filterFn));
     }
 
     async destroyDb(): Promise<void> {
         this.db = {};
         console.log('MemoryDbAdapter: Database destroyed');
+        return Promise.resolve();
     }
 }
 

src/api/OfflineApi/index.ts

@@ -18,6 +18,7 @@ const LOG_REQUESTS = false;
 let OfflineUser: User = {
     id: 'c23c0238-4aeb-457f-9a2c-3d2d5d8931c0',
     email: '[email protected]',
+    name: 'Offline User',
     firstName: 'Offline',
     lastName: 'User',
     role: process.env.NODE_ENV === 'production' ? Role.STUDENT : Role.ADMIN,
@@ -29,6 +30,7 @@ const DB_NAME = `${siteConfig.organizationName ?? 'gbsl'}-${siteConfig.projectNa
 const DOCUMENTS_STORE = 'documents';
 const STUDENT_GROUPS_STORE = 'studentGroups';
 const PERMISSIONS_STORE = 'permissions';
+export const getOfflineUser = () => ({ ...OfflineUser });
 
 const resolveResponse = <T>(data: T, statusCode: number = 200, statusText: string = ''): AxiosPromise<T> => {
     return Promise.resolve({
@@ -90,6 +92,7 @@ export default class OfflineApi {
                 this.dbAdapter = new MemoryDbAdapter();
             }
         } else {
+            console.log('setup memory adapter');
             this.dbAdapter = new MemoryDbAdapter();
         }
         if (LOG_REQUESTS) {

src/stores/SocketDataStore.ts

@@ -61,7 +61,9 @@ export class SocketDataStore extends iStore<'ping'> {
         reaction(
             () => this.isLive,
             action((isLive) => {
-                console.log('Socket.IO live:', isLive);
+                if (!OFFLINE_API) {
+                    console.log('Socket.IO live:', isLive);
+                }
             })
         );
     }

src/theme/Root.tsx

@@ -9,6 +9,7 @@ import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import { useHistory } from '@docusaurus/router';
 import LoggedOutOverlay from '@tdev-components/LoggedOutOverlay';
 import { authClient } from '@tdev/auth-client';
+import { getOfflineUser } from '@tdev-api/OfflineApi';
 const { OFFLINE_API, SENTRY_DSN } = siteConfig.customFields as {
     SENTRY_DSN?: string;
     OFFLINE_API?: boolean | 'memory' | 'indexedDB';
@@ -43,11 +44,18 @@ const RemoteNavigationHandler = observer(() => {
     return null;
 });
 
-const Authentication = observer(() => {
-    const { data: session } = authClient.useSession();
+const ExposeRootStoreToWindow = observer(() => {
     React.useEffect(() => {
+        /**
+         * Expose the store to the window object
+         */
         (window as any).store = rootStore;
     }, [rootStore]);
+    return null;
+});
+
+const Authentication = observer(() => {
+    const { data: session } = authClient.useSession();
     React.useEffect(() => {
         if (!rootStore) {
             return;
@@ -61,6 +69,18 @@ const Authentication = observer(() => {
     return null;
 });
 
+const OfflineApi = observer(() => {
+    React.useEffect(() => {
+        if (!OFFLINE_API) {
+            return;
+        }
+        console.log('Using Offline API mode:', OFFLINE_API);
+        const offlineUser = getOfflineUser();
+        rootStore.load(offlineUser.id);
+    }, []);
+    return null;
+});
+
 const Sentry = observer(() => {
     React.useEffect(() => {
         import('@sentry/react')
@@ -83,12 +103,6 @@ const Sentry = observer(() => {
 
 function Root({ children }: { children: React.ReactNode }) {
     const { siteConfig } = useDocusaurusContext();
-    React.useEffect(() => {
-        /**
-         * Expose the store to the window object
-         */
-        (window as any).store = rootStore;
-    }, [rootStore]);
 
     return (
         <>
@@ -100,7 +114,10 @@ function Root({ children }: { children: React.ReactNode }) {
                 />
             </Head>
             <StoresProvider value={rootStore}>
-                {!OFFLINE_API && (
+                <ExposeRootStoreToWindow />
+                {OFFLINE_API ? (
+                    <OfflineApi />
+                ) : (
                     <>
                         <Authentication />
                         <RemoteNavigationHandler />