@nu-art/ts-focused-object-frontend 0.400.5

package/components/Component_FocusedEntityRef.d.ts

@@ -0,0 +1,32 @@
+import { ComponentSync } from '@nu-art/thunderstorm-frontend/index';
+import { FocusData_Map, FocusedEntity } from '@nu-art/ts-focused-object-shared';
+import { UniqueId } from '@nu-art/ts-common';
+import { OnFocusedDataReceived } from '../modules/ModuleFE_FocusedObject.js';
+import './Component_FocusedEntityRef.scss';
+type Props = {
+    focusedEntities?: FocusedEntity[];
+    ignoreCurrentUser?: boolean;
+};
+type State = {
+    focusedEntities?: FocusedEntity[];
+    ignoreCurrentUser?: boolean;
+    accountIds: UniqueId[];
+};
+export declare class Component_FocusedEntityRef extends ComponentSync<Props, State> implements OnFocusedDataReceived {
+    __onFocusedDataReceived(map: FocusData_Map): void;
+    protected deriveStateFromProps(nextProps: Props, state: State): State;
+    /**
+     * Mount / Unmount logic handled in
+     * - ComponentWillUnmount
+     * - ComponentDidMount
+     * - ComponentDidUpdate
+     *
+     * It must be the case, in order for un-focusing and focusing to happen in the correct order
+     * no matter how the component is rendered or recycled.
+     */
+    componentWillUnmount(): void;
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: Readonly<Props>, prevState: Readonly<State>, snapshot?: any): void;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export {};

package/components/Component_FocusedEntityRef.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ComponentSync, LL_H_C, Show } from '@nu-art/thunderstorm-frontend/index';
+import { compare, filterDuplicates } from '@nu-art/ts-common';
+import { ModuleFE_FocusedObject } from '../modules/ModuleFE_FocusedObject.js';
+import { Component_AccountThumbnail, ModuleFE_Account } from '@nu-art/user-account-frontend/index';
+import './Component_FocusedEntityRef.scss';
+export class Component_FocusedEntityRef extends ComponentSync {
+    // ######################## Lifecycle ########################
+    __onFocusedDataReceived(map) {
+        this.reDeriveState();
+    }
+    deriveStateFromProps(nextProps, state) {
+        state.focusedEntities = nextProps.focusedEntities;
+        state.ignoreCurrentUser = nextProps.ignoreCurrentUser;
+        state.accountIds = state.focusedEntities?.reduce((accountIds, focusedEntity) => {
+            const accountIdsForFocusedItem = ModuleFE_FocusedObject.getAccountIdsForFocusedItem(focusedEntity.dbKey, focusedEntity.itemId, state.ignoreCurrentUser);
+            return filterDuplicates([...accountIds, ...accountIdsForFocusedItem]);
+        }, []) || [];
+        return state;
+    }
+    /**
+     * Mount / Unmount logic handled in
+     * - ComponentWillUnmount
+     * - ComponentDidMount
+     * - ComponentDidUpdate
+     *
+     * It must be the case, in order for un-focusing and focusing to happen in the correct order
+     * no matter how the component is rendered or recycled.
+     */
+    componentWillUnmount() {
+        if (this.state.focusedEntities)
+            ModuleFE_FocusedObject.unfocus(this.state.focusedEntities);
+    }
+    componentDidMount() {
+        //If mounted with focus entities, focus on them
+        if (this.state.focusedEntities)
+            ModuleFE_FocusedObject.focus(this.state.focusedEntities);
+    }
+    componentDidUpdate(prevProps, prevState, snapshot) {
+        //Change in focused entities, set new focused
+        if (!compare(prevState.focusedEntities, this.state.focusedEntities)) {
+            //Unfocus previous entities
+            if (this.state.focusedEntities)
+                ModuleFE_FocusedObject.unfocus(this.state.focusedEntities);
+            //focus current entities
+            if (prevState.focusedEntities)
+                ModuleFE_FocusedObject.focus(prevState.focusedEntities);
+        }
+    }
+    // ######################## Render ########################
+    render() {
+        return _jsx(LL_H_C, { className: 'component--focused-object', children: this.state.accountIds.map(id => {
+                const account = ModuleFE_Account.cache.unique(id);
+                return _jsxs(Show, { children: [_jsx(Show.If, { condition: !!account, children: _jsx(Component_AccountThumbnail, { accountId: () => id }) }), _jsx(Show.Else, { children: _jsx("div", { children: "Bug" }) })] }, id);
+            }) });
+    }
+}

package/components/Component_FocusedEntityRef.scss

@@ -0,0 +1,3 @@
+.component--focused-object {
+
+}

package/index.d.ts

@@ -0,0 +1 @@
+export * from './modules/ModuleFE_FocusedObject.js';

package/index.js

@@ -0,0 +1 @@
+export * from './modules/ModuleFE_FocusedObject.js';

package/modules/ModuleFE_FocusedObject.d.ts

@@ -0,0 +1,57 @@
+import { Module, UniqueId } from '@nu-art/ts-common';
+import { ApiDefCaller } from '@nu-art/thunderstorm-shared';
+import { ThunderDispatcher } from '@nu-art/thunderstorm-frontend/index';
+import { ApiStruct_FocusedObject, FocusData_Map, FocusedEntity } from '@nu-art/ts-focused-object-shared';
+import { OnLoginStatusUpdated } from '@nu-art/user-account-frontend/index';
+export interface OnFocusedDataReceived {
+    __onFocusedDataReceived: (map: FocusData_Map) => void;
+}
+export declare const dispatch_onFocusedDataReceived: ThunderDispatcher<OnFocusedDataReceived, "__onFocusedDataReceived", [map: FocusData_Map], void>;
+export declare class ModuleFE_FocusedObject_Class extends Module implements OnLoginStatusUpdated {
+    readonly _v1: ApiDefCaller<ApiStruct_FocusedObject>['_v1'];
+    private focusFirebaseListener;
+    private focusDataMap;
+    private currentlyFocused;
+    private readonly apiDebounce;
+    private windowIsFocused;
+    private unfocusTimeout;
+    private keepAliveTimeout;
+    __onLoginStatusUpdated(): void;
+    constructor();
+    init(): void;
+    private initFirebaseListening;
+    private initWindowFocusListeners;
+    private initWindowCloseListeners;
+    private onRTDBChange;
+    /**
+     * Callback for when the current window is focused.
+     * we change the class property "windowIsFocused" to true so when the time comes to
+     * send a keepalive to BE, the request will be sent if the window is focused.
+     * Will also trigger keepalive timer if the time is not already set
+     */
+    private onWindowFocus;
+    /**
+     * Callback for when the current window is un-focused.
+     * we change the class property "windowIsFocused" to false so when the time comes to
+     * send a keepalive to BE, the request will not be sent if the window is not focused
+     */
+    private onWindowBlur;
+    private onUserLoggedOut;
+    private triggerKeepAlive;
+    private triggerUnfocus;
+    private clearKeepAlive;
+    private clearUnfocus;
+    private updateRTDB;
+    focus: (entities: FocusedEntity[]) => void;
+    unfocus: (entities: FocusedEntity[]) => void;
+    getFocusData: (dbKey: string, itemId: UniqueId) => {
+        [s: string]: {
+            [s: string]: {
+                [s: string]: number;
+            };
+        };
+    };
+    getAccountIdsForFocusedItem: (dbKey: string, itemId: UniqueId, ignoreCurrentUser?: boolean) => UniqueId[];
+    private translateCurrentlyFocusedToFocusedEntities;
+}
+export declare const ModuleFE_FocusedObject: ModuleFE_FocusedObject_Class;

package/modules/ModuleFE_FocusedObject.js

@@ -0,0 +1,161 @@
+import { _keys, debounce, filterDuplicates, Module, removeItemFromArray, Second } from '@nu-art/ts-common';
+import { apiWithBody, ThunderDispatcher } from '@nu-art/thunderstorm-frontend/index';
+import { ModuleFE_FirebaseListener } from '@nu-art/firebase-frontend/ModuleFE_FirebaseListener/ModuleFE_FirebaseListener';
+import { ApiDef_FocusedObject, } from '@nu-art/ts-focused-object-shared';
+import { LoggedStatus, ModuleFE_Account } from '@nu-art/user-account-frontend/index';
+import { DefaultTTL_FocusedObject, getRelationalPath } from '@nu-art/ts-focused-object-shared/consts';
+export const dispatch_onFocusedDataReceived = new ThunderDispatcher('__onFocusedDataReceived');
+export class ModuleFE_FocusedObject_Class extends Module {
+    _v1;
+    focusFirebaseListener;
+    focusDataMap;
+    currentlyFocused = {};
+    apiDebounce;
+    windowIsFocused = true;
+    unfocusTimeout;
+    keepAliveTimeout;
+    __onLoginStatusUpdated() {
+        const status = ModuleFE_Account.getLoggedStatus();
+        if (status === LoggedStatus.LOGGED_OUT)
+            this.onUserLoggedOut();
+    }
+    constructor() {
+        super();
+        this.focusDataMap = {};
+        this._v1 = {
+            // updateFocusData: apiWithBody(ApiDef_FocusedObject._v1.updateFocusData),
+            // setFocusStatusByTabId: apiWithBody(ApiDef_FocusedObject._v1.setFocusStatusByTabId),
+            // releaseObject: apiWithBody(ApiDef_FocusedObject._v1.releaseObject),
+            // releaseByTabId: apiWithBody(ApiDef_FocusedObject._v1.releaseByTabId),
+            update: apiWithBody(ApiDef_FocusedObject._v1.update),
+        };
+        this.apiDebounce = debounce(this.updateRTDB, 2 * Second, 10 * Second);
+    }
+    init() {
+        this.initFirebaseListening();
+        this.initWindowFocusListeners();
+        this.initWindowCloseListeners();
+    }
+    // ######################## Init listeners ########################
+    initFirebaseListening = () => {
+        this.focusFirebaseListener = ModuleFE_FirebaseListener.createListener(getRelationalPath());
+        this.focusFirebaseListener.startListening(this.onRTDBChange);
+    };
+    initWindowFocusListeners() {
+        window.addEventListener('focus', this.onWindowFocus);
+        window.addEventListener('blur', this.onWindowBlur);
+    }
+    initWindowCloseListeners() {
+        window.addEventListener('beforeunload', async (event) => {
+            this._v1.update({ focusedEntities: [] }).execute();
+            // navigator.sendBeacon('/log', JSON.stringify({ type:'application/json' }));
+        });
+    }
+    // ######################## Listener Callbacks ########################
+    onRTDBChange = (snapshot) => {
+        this.focusDataMap = snapshot.val() ?? {};
+        this.logDebug('Received firebase focus data', this.focusDataMap);
+        // Update all the FocusedEntityRef components
+        dispatch_onFocusedDataReceived.dispatchAll(this.focusDataMap);
+    };
+    /**
+     * Callback for when the current window is focused.
+     * we change the class property "windowIsFocused" to true so when the time comes to
+     * send a keepalive to BE, the request will be sent if the window is focused.
+     * Will also trigger keepalive timer if the time is not already set
+     */
+    onWindowFocus = () => {
+        this.windowIsFocused = true;
+        //If the keep alive counter still exists, no need to trigger any extra further logic
+        if (this.keepAliveTimeout)
+            return;
+        this.apiDebounce();
+    };
+    /**
+     * Callback for when the current window is un-focused.
+     * we change the class property "windowIsFocused" to false so when the time comes to
+     * send a keepalive to BE, the request will not be sent if the window is not focused
+     */
+    onWindowBlur = () => {
+        this.windowIsFocused = false;
+    };
+    onUserLoggedOut = () => {
+        this.currentlyFocused = {};
+    };
+    // ######################## Timer Interactions ########################
+    triggerKeepAlive = () => {
+        this.clearKeepAlive();
+        //No need to set keepalive timeout if currentlyFocused has no data
+        if (!_keys(this.currentlyFocused).length)
+            return;
+        this.keepAliveTimeout = setTimeout(() => {
+            //No need to keepalive if window is not focused
+            if (!this.windowIsFocused)
+                return this.clearKeepAlive();
+            this.apiDebounce();
+        }, DefaultTTL_FocusedObject - 20 * Second);
+    };
+    triggerUnfocus = () => {
+        this.clearUnfocus();
+        this.unfocusTimeout = setTimeout(() => this.apiDebounce(), 20 * Second);
+    };
+    clearKeepAlive = () => {
+        clearTimeout(this.keepAliveTimeout);
+        delete this.keepAliveTimeout;
+    };
+    clearUnfocus = () => {
+        clearTimeout(this.unfocusTimeout);
+        delete this.unfocusTimeout;
+    };
+    // ######################## API Logic ########################
+    updateRTDB = () => {
+        //Call API
+        const focusedEntities = this.translateCurrentlyFocusedToFocusedEntities();
+        this._v1.update({ focusedEntities })
+            .executeSync()
+            .then()
+            .catch(e => {
+            this.logError('Update focused object failed', e);
+        })
+            .finally(() => {
+            this.clearUnfocus();
+            this.triggerKeepAlive();
+        });
+    };
+    // ######################## Logic ########################
+    focus = (entities) => {
+        entities.forEach(entity => {
+            if (!this.currentlyFocused[entity.dbKey])
+                this.currentlyFocused[entity.dbKey] = [];
+            this.currentlyFocused[entity.dbKey] = filterDuplicates([...this.currentlyFocused[entity.dbKey], entity.itemId]);
+        });
+        this.apiDebounce();
+    };
+    unfocus = (entities) => {
+        entities.forEach(entity => {
+            if (!this.currentlyFocused[entity.dbKey])
+                return;
+            this.currentlyFocused[entity.dbKey] = removeItemFromArray(this.currentlyFocused[entity.dbKey], entity.itemId);
+        });
+        this.triggerUnfocus();
+    };
+    getFocusData = (dbKey, itemId) => {
+        return this.focusDataMap[dbKey]?.[itemId];
+    };
+    getAccountIdsForFocusedItem = (dbKey, itemId, ignoreCurrentUser = true) => {
+        const data = this.getFocusData(dbKey, itemId);
+        const userIds = data ? _keys(data) : [];
+        const account = ModuleFE_Account.getCurrentlyLoggedAccount();
+        return ignoreCurrentUser ? userIds.filter(id => id !== account?._id) : userIds;
+    };
+    translateCurrentlyFocusedToFocusedEntities = () => {
+        const focusedEntities = [];
+        _keys(this.currentlyFocused).forEach(dbKey => {
+            this.currentlyFocused[dbKey].forEach(itemId => {
+                focusedEntities.push({ dbKey: dbKey, itemId });
+            });
+        });
+        return focusedEntities;
+    };
+}
+export const ModuleFE_FocusedObject = new ModuleFE_FocusedObject_Class();

package/modules/module-pack.d.ts

@@ -0,0 +1,3 @@
+import { Module } from '@nu-art/ts-common';
+export declare const ModulePack_FocusedObjectFE: Module[];
+export declare const ModulePackFE_FocusedObject: Module<any, any, import("@nu-art/ts-common").Validator<any> | import("@nu-art/ts-common").TypeValidator<any>>[];

package/modules/module-pack.js

@@ -0,0 +1,5 @@
+import { ModuleFE_FocusedObject } from './ModuleFE_FocusedObject.js';
+export const ModulePack_FocusedObjectFE = [
+    ModuleFE_FocusedObject
+];
+export const ModulePackFE_FocusedObject = ModulePack_FocusedObjectFE;

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@nu-art/ts-focused-object-frontend",
+  "version": "0.400.5",
+  "description": "ts-focused-object - Express & Typescript based backend framework Frontend",
+  "keywords": [
+    "TacB0sS",
+    "infra",
+    "nu-art",
+    "thunderstorm",
+    "typescript",
+    "ts-focused-object"
+  ],
+  "homepage": "https://github.com/nu-art-js/thunderstorm",
+  "bugs": {
+    "url": "https://github.com/nu-art-js/thunderstorm/issues"
+  },
+  "publishConfig": {
+    "directory": "dist",
+    "linkDirectory": true
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com:nu-art-js/thunderstorm.git"
+  },
+  "license": "Apache-2.0",
+  "author": "TacB0sS",
+  "files": [
+    "**/*"
+  ],
+  "scripts": {
+    "build": "tsc"
+  },
+  "dependencies": {
+    "@nu-art/ts-focused-object-shared": "0.400.5",
+    "@nu-art/firebase-frontend": "0.400.5",
+    "@nu-art/firebase-shared": "0.400.5",
+    "@nu-art/thunderstorm-frontend": "0.400.5",
+    "@nu-art/thunderstorm-shared": "0.400.5",
+    "@nu-art/ts-common": "0.400.5",
+    "@nu-art/user-account-frontend": "0.400.5",
+    "@nu-art/user-account-shared": "0.400.5",
+    "firebase": "^11.9.0",
+    "firebase-admin": "13.4.0",
+    "firebase-functions": "6.3.2",
+    "react": "^18.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/chai": "^4.3.4",
+    "@types/mocha": "^10.0.1"
+  },
+  "unitConfig": {
+    "type": "typescript-lib"
+  },
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./index.js"
+    },
+    "./*": {
+      "types": "./*.d.ts",
+      "import": "./*.js"
+    }
+  }
+}