@etsoo/react 1.3.52 → 1.3.56

package/lib/app/ReactApp.js

@@ -1,5 +1,4 @@
 import { CoreApp, createClient } from '@etsoo/appscript';
-import { Utils } from '@etsoo/shared';
 import React from 'react';
 import { NotifierMU } from '../mu/NotifierMU';
 import { ProgressCount } from '../mu/ProgressCount';
@@ -19,16 +18,29 @@ let globalApp;
  */
 export function ReactAppStateDetector(props) {
     // Destruct
-    const { update } = props;
+    const { targetFields, update } = props;
     // Context
     const { state } = globalApp == null
         ? { state: {} }
         : React.useContext(globalApp.userState.context);
+    // Match fields
+    const changedFields = state.lastChangedFields;
+    let matchedFields;
+    if (targetFields == null || changedFields == null) {
+        matchedFields = changedFields;
+    }
+    else {
+        matchedFields = [];
+        targetFields.forEach((targetField) => {
+            if (changedFields.includes(targetField))
+                matchedFields === null || matchedFields === void 0 ? void 0 : matchedFields.push(targetField);
+        });
+    }
     // Ready
     React.useEffect(() => {
         // Callback
-        update(state.authorized);
-    }, [state.authorized]);
+        update(state.authorized, matchedFields);
+    }, [state.authorized, matchedFields]);
     // return
     return React.createElement(React.Fragment);
 }
@@ -198,15 +210,10 @@ export class ReactApp extends CoreApp {
      * @param keep Keep in local storage or not
      */
     userLogin(user, refreshToken, keep) {
-        // Changed
-        const dataChanged = !this.authorized ||
-            this.userData == null ||
-            !Utils.objectEqual(this.userData, user, ['seconds', 'token']);
         // Super call, set token
         super.userLogin(user, refreshToken, keep);
         // Dispatch action
-        // Only when unauthorized or with changes except 'token' and 'seconds'
-        if (this.userStateDispatch != null && dataChanged)
+        if (this.userStateDispatch != null)
             this.userStateDispatch({
                 type: UserActionType.Login,
                 user

package/lib/mu/pages/CommonPage.js

@@ -22,23 +22,18 @@ export const CommonPageScrollContainer = global;
  */
 export function CommonPage(props) {
     // Destruct
-    const { children, disableGutters = true, fabButtons, fabColumnDirection, fabPaddingAdjust = 1.5, fabSize = 'small', maxWidth = false, moreActions, onRefresh, onUpdate, onUpdateAll, paddings = MUGlobal.pagePaddings, scrollContainer, pullContainer, sx = {}, ...rest } = props;
+    const { children, disableGutters = true, fabButtons, fabColumnDirection, fabPaddingAdjust = 1.5, fabSize = 'small', maxWidth = false, moreActions, onRefresh, onUpdate, onUpdateAll, paddings = MUGlobal.pagePaddings, scrollContainer, targetFields, pullContainer, sx = {}, ...rest } = props;
     // Merge style
     Object.assign(sx, {
         padding: paddings
     });
-    const [state] = React.useState({});
     // Fab padding
     const fabPadding = MUGlobal.increase(MUGlobal.pagePaddings, fabPaddingAdjust);
     // Labels
     const labels = Labels.CommonPage;
     // Update
     const update = onUpdateAll
-        ? async (authorized) => {
-            state.loading = true;
-            await onUpdateAll(authorized);
-            state.firstLoaded = true;
-        }
+        ? onUpdateAll
         : onUpdate
             ? (authorized) => {
                 if (authorized == null || authorized)
@@ -50,25 +45,9 @@ export function CommonPage(props) {
                         onRefresh();
                 }
                 : undefined;
-    React.useEffect(() => {
-        return () => {
-            state.loading = false;
-            state.firstLoaded = false;
-        };
-    }, []);
-    React.useEffect(() => {
-        if (state.loading) {
-            state.loading = false;
-            return;
-        }
-        // onUpdateAll support to load after page loaded
-        if (onUpdateAll != null && state.firstLoaded) {
-            onUpdateAll();
-        }
-    });
     // Return the UI
     return (React.createElement(React.Fragment, null,
-        update && React.createElement(ReactAppStateDetector, { update: update }),
+        update && (React.createElement(ReactAppStateDetector, { targetFields: targetFields, update: update })),
         React.createElement(Container, { disableGutters: disableGutters, maxWidth: maxWidth, sx: sx, id: "page-container", ...rest },
             React.createElement(FabBox, { sx: {
                     zIndex: 1,

package/lib/mu/pages/CommonPageProps.d.ts

@@ -52,4 +52,8 @@ export interface CommonPageProps extends Omit<ContainerProps, 'id'> {
      * Scroll container
      */
     scrollContainer?: HTMLElement | object;
+    /**
+     * State last changed fields
+     */
+    targetFields?: string[];
 }

package/lib/states/IState.d.ts

@@ -17,12 +17,19 @@ export interface IUpdate<S extends IState, A extends IAction> {
  * State update interface
  */
 export interface IStateUpdate {
-    (authorized?: boolean): PromiseLike<void> | void;
+    (authorized?: boolean, matchedFields?: string[]): PromiseLike<void> | void;
 }
 /**
  * State update props
  */
 export interface IStateProps {
+    /**
+     * State last changed fields
+     */
+    targetFields?: string[];
+    /**
+     * State update callback
+     */
     update: IStateUpdate;
 }
 /**

package/lib/states/UserState.d.ts

@@ -53,4 +53,5 @@ export declare class UserState<D extends IUser> {
      * Constructor
      */
     constructor();
+    private getChangedFields;
 }

package/lib/states/UserState.js

@@ -1,3 +1,4 @@
+import { Utils } from '@etsoo/shared';
 import { State } from './State';
 /**
  * User action type
@@ -26,10 +27,18 @@ export class UserState {
             // User reducer
             switch (action.type) {
                 case UserActionType.Login:
-                    return { ...action.user, authorized: true };
+                    const lastChangedFields = state.authorized && action.user
+                        ? this.getChangedFields(action.user, state)
+                        : [];
+                    return {
+                        ...action.user,
+                        authorized: true,
+                        lastChangedFields
+                    };
                 case UserActionType.Logout:
                     return {
                         ...state,
+                        lastChangedFields: undefined,
                         token: undefined,
                         authorized: false // Flag as unauthorized
                     };
@@ -37,6 +46,7 @@ export class UserState {
                     if (action.update) {
                         var newState = { ...state };
                         action.update(newState);
+                        newState.lastChangedFields = this.getChangedFields(newState, state);
                         return newState;
                     }
                     return state;
@@ -46,6 +56,7 @@ export class UserState {
                         return state;
                     return {
                         ...state,
+                        lastChangedFields: undefined,
                         authorized: false // Flag as unauthorized
                     };
                 default:
@@ -55,4 +66,10 @@ export class UserState {
         this.context = context;
         this.provider = provider;
     }
+    getChangedFields(input, init) {
+        return Utils.objectUpdated(input, init, [
+            'seconds',
+            'lastChangedFields'
+        ]);
+    }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/react",
-    "version": "1.3.52",
+    "version": "1.3.56",
     "description": "TypeScript ReactJs framework",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
@@ -50,9 +50,9 @@
         "@emotion/react": "^11.7.1",
         "@emotion/style": "^0.8.0",
         "@emotion/styled": "^11.6.0",
-        "@etsoo/appscript": "^1.1.77",
+        "@etsoo/appscript": "^1.1.79",
         "@etsoo/notificationbase": "^1.0.94",
-        "@etsoo/shared": "^1.0.76",
+        "@etsoo/shared": "^1.0.78",
         "@mui/icons-material": "^5.2.4",
         "@mui/material": "^5.2.4",
         "@reach/router": "^1.3.4",
@@ -89,7 +89,7 @@
         "eslint-plugin-react": "^7.27.1",
         "jest": "^27.4.5",
         "react-test-renderer": "^17.0.2",
-        "ts-jest": "^27.1.1",
+        "ts-jest": "^27.1.2",
         "typescript": "^4.5.4"
     }
 }

package/src/app/ReactApp.ts

@@ -7,7 +7,7 @@ import {
     IUserData
 } from '@etsoo/appscript';
 import { NotificationRenderProps } from '@etsoo/notificationbase';
-import { DataTypes, Utils } from '@etsoo/shared';
+import { DataTypes } from '@etsoo/shared';
 import React from 'react';
 import { NotifierMU } from '../mu/NotifierMU';
 import { ProgressCount } from '../mu/ProgressCount';
@@ -42,7 +42,7 @@ let globalApp: IReactApp<IAppSettings, any, IPageData>;
  */
 export function ReactAppStateDetector(props: IStateProps) {
     // Destruct
-    const { update } = props;
+    const { targetFields, update } = props;
 
     // Context
     const { state } =
@@ -52,11 +52,24 @@ export function ReactAppStateDetector(props: IStateProps) {
                   (globalApp.userState as UserState<IUser>).context
               );
 
+    // Match fields
+    const changedFields = state.lastChangedFields;
+    let matchedFields: string[] | undefined;
+    if (targetFields == null || changedFields == null) {
+        matchedFields = changedFields;
+    } else {
+        matchedFields = [];
+        targetFields.forEach((targetField) => {
+            if (changedFields.includes(targetField))
+                matchedFields?.push(targetField);
+        });
+    }
+
     // Ready
     React.useEffect(() => {
         // Callback
-        update(state.authorized);
-    }, [state.authorized]);
+        update(state.authorized, matchedFields);
+    }, [state.authorized, matchedFields]);
 
     // return
     return React.createElement(React.Fragment);
@@ -343,18 +356,11 @@ export class ReactApp<
         refreshToken: string,
         keep?: boolean
     ): void {
-        // Changed
-        const dataChanged =
-            !this.authorized ||
-            this.userData == null ||
-            !Utils.objectEqual(this.userData, user, ['seconds', 'token']);
-
         // Super call, set token
         super.userLogin(user, refreshToken, keep);
 
         // Dispatch action
-        // Only when unauthorized or with changes except 'token' and 'seconds'
-        if (this.userStateDispatch != null && dataChanged)
+        if (this.userStateDispatch != null)
             this.userStateDispatch({
                 type: UserActionType.Login,
                 user

package/src/mu/pages/CommonPage.tsx

@@ -40,6 +40,7 @@ export function CommonPage(props: CommonPageProps) {
         onUpdateAll,
         paddings = MUGlobal.pagePaddings,
         scrollContainer,
+        targetFields,
         pullContainer,
         sx = {},
         ...rest
@@ -50,11 +51,6 @@ export function CommonPage(props: CommonPageProps) {
         padding: paddings
     });
 
-    const [state] = React.useState<{
-        firstLoaded?: boolean;
-        loading?: boolean;
-    }>({});
-
     // Fab padding
     const fabPadding = MUGlobal.increase(
         MUGlobal.pagePaddings,
@@ -66,11 +62,7 @@ export function CommonPage(props: CommonPageProps) {
 
     // Update
     const update = onUpdateAll
-        ? async (authorized?: boolean) => {
-              state.loading = true;
-              await onUpdateAll(authorized);
-              state.firstLoaded = true;
-          }
+        ? onUpdateAll
         : onUpdate
         ? (authorized?: boolean) => {
               if (authorized == null || authorized) onUpdate();
@@ -81,29 +73,15 @@ export function CommonPage(props: CommonPageProps) {
           }
         : undefined;
 
-    React.useEffect(() => {
-        return () => {
-            state.loading = false;
-            state.firstLoaded = false;
-        };
-    }, []);
-
-    React.useEffect(() => {
-        if (state.loading) {
-            state.loading = false;
-            return;
-        }
-
-        // onUpdateAll support to load after page loaded
-        if (onUpdateAll != null && state.firstLoaded) {
-            onUpdateAll();
-        }
-    });
-
     // Return the UI
     return (
         <React.Fragment>
-            {update && <ReactAppStateDetector update={update} />}
+            {update && (
+                <ReactAppStateDetector
+                    targetFields={targetFields}
+                    update={update}
+                />
+            )}
             <Container
                 disableGutters={disableGutters}
                 maxWidth={maxWidth}

package/src/mu/pages/CommonPageProps.ts

@@ -62,4 +62,9 @@ export interface CommonPageProps extends Omit<ContainerProps, 'id'> {
      * Scroll container
      */
     scrollContainer?: HTMLElement | object;
+
+    /**
+     * State last changed fields
+     */
+    targetFields?: string[];
 }

package/src/states/IState.ts

@@ -20,13 +20,21 @@ export interface IUpdate<S extends IState, A extends IAction> {
  * State update interface
  */
 export interface IStateUpdate {
-    (authorized?: boolean): PromiseLike<void> | void;
+    (authorized?: boolean, matchedFields?: string[]): PromiseLike<void> | void;
 }
 
 /**
  * State update props
  */
 export interface IStateProps {
+    /**
+     * State last changed fields
+     */
+    targetFields?: string[];
+
+    /**
+     * State update callback
+     */
     update: IStateUpdate;
 }
 

package/src/states/UserState.ts

@@ -1,4 +1,5 @@
 import { IAction, IUser, IUserData } from '@etsoo/appscript';
+import { Utils } from '@etsoo/shared';
 import { IProviderProps, IUpdate } from './IState';
 import { State } from './State';
 
@@ -73,10 +74,19 @@ export class UserState<D extends IUser> {
                 // User reducer
                 switch (action.type) {
                     case UserActionType.Login:
-                        return { ...action.user!, authorized: true } as D;
+                        const lastChangedFields =
+                            state.authorized && action.user
+                                ? this.getChangedFields(action.user, state)
+                                : [];
+                        return {
+                            ...action.user!,
+                            authorized: true,
+                            lastChangedFields
+                        } as D;
                     case UserActionType.Logout:
                         return {
                             ...state, // Keep other user data
+                            lastChangedFields: undefined,
                             token: undefined, // Remove token
                             authorized: false // Flag as unauthorized
                         };
@@ -84,6 +94,10 @@ export class UserState<D extends IUser> {
                         if (action.update) {
                             var newState = { ...state };
                             action.update(newState);
+                            newState.lastChangedFields = this.getChangedFields(
+                                newState,
+                                state
+                            );
                             return newState;
                         }
                         return state;
@@ -93,6 +107,7 @@ export class UserState<D extends IUser> {
 
                         return {
                             ...state, // Keep other user data and token for refresh
+                            lastChangedFields: undefined,
                             authorized: false // Flag as unauthorized
                         };
                     default:
@@ -106,4 +121,11 @@ export class UserState<D extends IUser> {
         this.context = context;
         this.provider = provider;
     }
+
+    private getChangedFields(input: {}, init: {}) {
+        return Utils.objectUpdated(input, init, [
+            'seconds',
+            'lastChangedFields'
+        ]);
+    }
 }