@etsoo/materialui 1.4.73 → 1.4.75

package/lib/mjs/app/ReactApp.d.ts

@@ -2,41 +2,26 @@ import { AppTryLoginParams, CoreApp, FormatResultCustomCallback, IApp, IAppSetti
 import { INotifier, NotificationReturn } from "@etsoo/notificationbase";
 import { DataTypes, IActionResult } from "@etsoo/shared";
 import React from "react";
-import { CultureAction, CultureState, INotificationReact, InputDialogProps, IPageData, IStateProps, NotificationReactCallProps, PageAction, PageState, UserAction, UserState } from "@etsoo/react";
+import { CultureAction, CultureState, INotificationReact, InputDialogProps, IStateProps, NotificationReactCallProps, UserAction, UserState } from "@etsoo/react";
 import { NavigateFunction, NavigateOptions } from "react-router";
 /**
  * React Application Type
  */
 export type ReactAppType = IApp & IReactAppBase;
-/**
- * React application data
- */
-export type ReactAppData<A extends ReactAppType> = {
-    /**
-     * Current application
-     */
-    app: A;
-};
 /**
  * React application context
  */
-export declare const ReactAppContext: React.Context<ReactAppData<ReactAppType> | null>;
+export declare const ReactAppContext: React.Context<ReactAppType | null>;
 /**
- * Global application
+ * Get React application context hook
+ * @returns React application
  */
-export declare let globalApp: ReactAppType | null;
+export declare function useAppContext(): ReactAppType | null;
 /**
- * React app state detector
- * Case 1: undefined, when refresh the whole page
- * Case 2: false, unauthorized
- * Case 3: true, authorized or considered as authorized (maynot, like token expiry)
- * Case 4: property or properties changed
- * @param props Props
- * @returns Component
+ * Get React application context hook
+ * @returns React application
  */
-export declare function ReactAppStateDetector(props: IStateProps): React.FunctionComponentElement<{
-    children?: React.ReactNode | undefined;
-}>;
+export declare function useRequiredAppContext(): IApp & IReactAppBase;
 /**
  * React implemented base
  */
@@ -45,10 +30,6 @@ export interface IReactAppBase {
      * Override Notifier as React specific
      */
     readonly notifier: INotifier<React.ReactNode, NotificationReactCallProps>;
-    /**
-     * User state
-     */
-    readonly userState: UserState<any>;
     /**
      * Is screen size down 'sm'
      */
@@ -68,46 +49,30 @@ export interface IReactAppBase {
      * @returns Props
      */
     getMoneyFormatProps(currency?: string): object;
-    /**
-     * Set page data
-     * @param data Page data
-     */
-    setPageData(data: IPageData): void;
-    /**
-     * Set page title and subtitle
-     * @param title Page title
-     * @param subtitle Page subtitle
-     */
-    setPageTitle(title: string, subtitle?: string): void;
-    /**
-     * Set page title and data
-     * @param title Page title
-     */
-    setPageTitle(title: string): void;
     /**
      * Show input dialog
      * @param props Props
      */
     showInputDialog({ title, message, callback, ...rest }: InputDialogProps): INotificationReact;
+    /**
+     * State detector component
+     * @param props Props
+     */
+    stateDetector(props: IStateProps): React.ReactNode;
 }
 /**
  * Core application interface
  */
-export interface IReactApp<S extends IAppSettings, D extends IUser, P extends IPageData> extends ICoreApp<D, S, React.ReactNode, NotificationReactCallProps>, IReactAppBase {
+export interface IReactApp<S extends IAppSettings, D extends IUser> extends ICoreApp<D, S, React.ReactNode, NotificationReactCallProps>, Omit<IReactAppBase, "userState"> {
     /**
      * User state
      */
     readonly userState: UserState<D>;
-    /**
-     * Set page data
-     * @param data Page data
-     */
-    setPageData(data: P): void;
 }
 /**
  * React application
  */
-export declare class ReactApp<S extends IAppSettings, D extends IUser, P extends IPageData> extends CoreApp<D, S, React.ReactNode, NotificationReactCallProps> implements IReactApp<S, D, P> {
+export declare class ReactApp<S extends IAppSettings, D extends IUser> extends CoreApp<D, S, React.ReactNode, NotificationReactCallProps> implements IReactApp<S, D> {
     private static _notifierProvider;
     /**
      * Get notifier provider
@@ -118,10 +83,6 @@ export declare class ReactApp<S extends IAppSettings, D extends IUser, P extends
      * Culture state
      */
     readonly cultureState: CultureState;
-    /**
-     * Page state
-     */
-    readonly pageState: PageState<P>;
     /**
      * User state
      */
@@ -138,10 +99,6 @@ export declare class ReactApp<S extends IAppSettings, D extends IUser, P extends
      * Navigate function
      */
     navigateFunction?: NavigateFunction;
-    /**
-     * Page state dispatch
-     */
-    pageStateDispatch?: React.Dispatch<PageAction<P>>;
     /**
      * User state dispatch
      */
@@ -205,33 +162,20 @@ export declare class ReactApp<S extends IAppSettings, D extends IUser, P extends
      * @returns Result
      */
     protected tryLoginIgnoreResult(result: IActionResult): boolean;
-    /**
-     * Set page data
-     * @param data Page data
-     */
-    setPageData(data: P): void;
-    /**
-     * Set page title and subtitle
-     * @param title Page title
-     * @param subtitle Page subtitle
-     */
-    setPageTitle(title: string, subtitle?: string): void;
     /**
      * Navigate to Url or delta
      * @param url Url or delta
      * @param options Options
      */
     navigate<T extends number | string | URL>(to: T, options?: T extends number ? never : NavigateOptions): void;
-    /**
-     * Set page title and data
-     * @param key Page title resource key
-     */
-    setPageKey(key: string): void;
     /**
      * Show input dialog
      * @param props Props
      */
     showInputDialog({ title, message, callback, ...rest }: InputDialogProps): INotificationReact;
+    stateDetector(props: IStateProps): React.FunctionComponentElement<{
+        children?: React.ReactNode | undefined;
+    }>;
     /**
      * User login extended
      * @param user New user

package/lib/mjs/app/ReactApp.js

@@ -5,51 +5,24 @@ import React from "react";
 import { NotifierMU } from "../NotifierMU";
 import { ProgressCount } from "../ProgressCount";
 import { Labels } from "./Labels";
-import { CultureState, PageActionType, PageState, UserActionType, UserState } from "@etsoo/react";
+import { CultureState, UserActionType, useRequiredContext, UserState } from "@etsoo/react";
 /**
  * React application context
  */
 export const ReactAppContext = React.createContext(null);
 /**
- * Global application
+ * Get React application context hook
+ * @returns React application
  */
-export let globalApp;
+export function useAppContext() {
+    return React.useContext(ReactAppContext);
+}
 /**
- * React app state detector
- * Case 1: undefined, when refresh the whole page
- * Case 2: false, unauthorized
- * Case 3: true, authorized or considered as authorized (maynot, like token expiry)
- * Case 4: property or properties changed
- * @param props Props
- * @returns Component
+ * Get React application context hook
+ * @returns React application
  */
-export function ReactAppStateDetector(props) {
-    // Destruct
-    const { targetFields, update } = props;
-    // Context
-    const { state } = globalApp == null
-        ? {}
-        : React.useContext(globalApp.userState.context);
-    // Ready
-    React.useEffect(() => {
-        // 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?.push(targetField);
-            });
-        }
-        // Callback
-        update(state.authorized, matchedFields);
-    }, [state]);
-    // return
-    return React.createElement(React.Fragment);
+export function useRequiredAppContext() {
+    return useRequiredContext(ReactAppContext);
 }
 /**
  * React application
@@ -71,10 +44,6 @@ export class ReactApp extends CoreApp {
      * Culture state
      */
     cultureState;
-    /**
-     * Page state
-     */
-    pageState;
     /**
      * User state
      */
@@ -91,10 +60,6 @@ export class ReactApp extends CoreApp {
      * Navigate function
      */
     navigateFunction;
-    /**
-     * Page state dispatch
-     */
-    pageStateDispatch;
     /**
      * User state dispatch
      */
@@ -113,8 +78,6 @@ export class ReactApp extends CoreApp {
             });
         }
         this.cultureState = new CultureState(settings.currentCulture);
-        this.pageState = new PageState();
-        globalApp = this;
     }
     /**
      * Override alert action result
@@ -280,35 +243,6 @@ export class ReactApp extends CoreApp {
         else
             return false;
     }
-    /**
-     * Set page data
-     * @param data Page data
-     */
-    setPageData(data) {
-        // Dispatch the change
-        if (this.pageStateDispatch != null) {
-            this.pageStateDispatch({
-                type: PageActionType.Data,
-                data
-            });
-        }
-    }
-    /**
-     * Set page title and subtitle
-     * @param title Page title
-     * @param subtitle Page subtitle
-     */
-    setPageTitle(title, subtitle) {
-        // Data
-        const data = { title, subtitle };
-        // Dispatch the change
-        if (this.pageStateDispatch != null) {
-            this.pageStateDispatch({
-                type: PageActionType.Title,
-                data
-            });
-        }
-    }
     /**
      * Navigate to Url or delta
      * @param url Url or delta
@@ -322,13 +256,6 @@ export class ReactApp extends CoreApp {
         else
             this.navigateFunction(to, options);
     }
-    /**
-     * Set page title and data
-     * @param key Page title resource key
-     */
-    setPageKey(key) {
-        this.setPageTitle(this.get(key) ?? "");
-    }
     /**
      * Show input dialog
      * @param props Props
@@ -336,6 +263,32 @@ export class ReactApp extends CoreApp {
     showInputDialog({ title, message, callback, ...rest }) {
         return this.notifier.prompt(message, callback, title, rest);
     }
+    stateDetector(props) {
+        // Destruct
+        const { targetFields, update } = props;
+        // Context
+        const { state } = React.useContext(this.userState.context);
+        // Ready
+        React.useEffect(() => {
+            // 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?.push(targetField);
+                });
+            }
+            // Callback
+            update(state.authorized, matchedFields);
+        }, [state]);
+        // return
+        return React.createElement(React.Fragment);
+    }
     /**
      * User login extended
      * @param user New user

package/lib/mjs/app/ServiceApp.d.ts

@@ -1,7 +1,6 @@
 import { ApiRefreshTokenDto, AppLoginParams, AppTryLoginParams, ExternalEndpoint, IApi, IApiPayload } from "@etsoo/appscript";
 import { IServiceApp } from "./IServiceApp";
 import { IServiceAppSettings } from "./IServiceAppSettings";
-import { IServicePageData } from "./IServicePage";
 import { IServiceUser, ServiceUserToken } from "./IServiceUser";
 import { ReactApp } from "./ReactApp";
 import { IActionResult } from "@etsoo/shared";
@@ -11,7 +10,7 @@ import { IActionResult } from "@etsoo/shared";
  * Use the acess token to the service api, get a service access token
  * Use the new acess token and refresh token to login
  */
-export declare class ServiceApp<U extends IServiceUser = IServiceUser, P extends IServicePageData = IServicePageData, S extends IServiceAppSettings = IServiceAppSettings> extends ReactApp<S, U, P> implements IServiceApp {
+export declare class ServiceApp<U extends IServiceUser = IServiceUser, S extends IServiceAppSettings = IServiceAppSettings> extends ReactApp<S, U> implements IServiceApp {
     /**
      * Core endpoint
      */

package/lib/mjs/custom/CustomFieldWindow.js

@@ -2,9 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Utils } from "@etsoo/shared";
 import { Grid2, Stack } from "@mui/material";
 import React from "react";
-import { globalApp } from "../app/ReactApp";
 import { MUGlobal } from "../MUGlobal";
 import { CustomFieldUtils } from "./CustomFieldUtils";
+import { useRequiredAppContext } from "../app/ReactApp";
 function calculateKeys(data) {
     let count = 0;
     for (const key in data) {
@@ -40,11 +40,8 @@ function parseJsonData(jsonData) {
  * @returns Component
  */
 export function CustomFieldWindow(props) {
-    // Validate app
-    const app = globalApp;
-    if (app == null) {
-        throw new Error("No globalApp");
-    }
+    // Global app
+    const app = useRequiredAppContext();
     const { children, label = app.get("jsonData"), gridProps, jsonData, inputName = "jsonData", inputRef, onUpdate } = props;
     const spacing = MUGlobal.half(MUGlobal.pagePaddings);
     const [count, setCount] = React.useState(0);

package/lib/mjs/index.d.ts

@@ -1,7 +1,6 @@
 export * from "./app/CommonApp";
 export * from "./app/IServiceApp";
 export * from "./app/IServiceAppSettings";
-export * from "./app/IServicePage";
 export * from "./app/IServiceUser";
 export * from "./app/ISmartERPUser";
 export * from "./app/Labels";

package/lib/mjs/index.js

@@ -1,7 +1,6 @@
 export * from "./app/CommonApp";
 export * from "./app/IServiceApp";
 export * from "./app/IServiceAppSettings";
-export * from "./app/IServicePage";
 export * from "./app/IServiceUser";
 export * from "./app/ISmartERPUser";
 export * from "./app/Labels";

package/lib/mjs/pages/CommonPage.js

@@ -8,12 +8,14 @@ import { Container, Fab, useTheme } from "@mui/material";
 import RefreshIcon from "@mui/icons-material/Refresh";
 import { BackButton } from "../BackButton";
 import { Labels } from "../app/Labels";
-import { ReactAppStateDetector } from "../app/ReactApp";
+import { useAppContext } from "../app/ReactApp";
 /**
  * Common page
  * @param props Props
  */
 export function CommonPage(props) {
+    // Global app
+    const app = useAppContext();
     // Destruct
     const { children, disableGutters = true, fabTop, fabButtons, fabColumnDirection, fabPanel, fabPaddingAdjust = 1.5, fabSize = "small", maxWidth = false, moreActions, onRefresh, onUpdate, onUpdateAll, paddings = MUGlobal.pagePaddings, scrollContainer, supportBack = false, targetFields, sx = {}, ...rest } = props;
     // Fab padding
@@ -51,7 +53,7 @@ export function CommonPage(props) {
         }
     }, [update]);
     // Return the UI
-    return (_jsxs(React.Fragment, { children: [update && (_jsx(ReactAppStateDetector, { targetFields: targetFields, update: update })), _jsxs(Container, { disableGutters: disableGutters, maxWidth: maxWidth, sx: sx, id: "page-container", ...rest, children: [_jsxs(FabBox, { sx: {
+    return (_jsxs(React.Fragment, { children: [update && app?.stateDetector({ targetFields, update }), _jsxs(Container, { disableGutters: disableGutters, maxWidth: maxWidth, sx: sx, id: "page-container", ...rest, children: [_jsxs(FabBox, { sx: {
                             zIndex: 1,
                             ...(typeof fabTop === "function"
                                 ? fabTop(theme, fabPadding)

package/lib/mjs/pages/LeftDrawer.js

@@ -3,10 +3,12 @@ import { Avatar, Divider, Drawer, IconButton, List, Typography } from "@mui/mate
 import React from "react";
 import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
 import { DrawerHeader } from "./DrawerHeader";
-import { globalApp } from "../app/ReactApp";
+import { useAppContext } from "../app/ReactApp";
 export function LeftDrawer(props) {
+    // Global app
+    const app = useAppContext();
     // Destruct
-    const { mdUp, width, appName = globalApp?.get("appName"), logoUrl = "/logo192.png", onMinimize, open = mdUp, children } = props;
+    const { mdUp, width, appName = app?.get("appName"), logoUrl = "/logo192.png", onMinimize, open = mdUp, children } = props;
     // Menu open/close state
     const [openLocal, setOpen] = React.useState();
     const handleDrawerClose = () => {
@@ -27,5 +29,5 @@ export function LeftDrawer(props) {
             }
         }, anchor: "left", variant: mdUp ? "persistent" : "temporary", open: open, transitionDuration: 0, onClose: mdUp ? undefined : handleDrawerClose, ModalProps: {
             keepMounted: true // Better open performance on mobile.
-        }, children: [_jsxs(DrawerHeader, { children: [_jsx("a", { href: "https://www.etsoo.com", title: globalApp?.get("etsoo") ?? "ETSOO", target: "_blank", rel: "noreferrer", children: _jsx(Avatar, { src: logoUrl, variant: "square", sx: { marginLeft: -0.5, marginRight: 1.5, marginBottom: 1 } }) }), _jsx(Typography, { noWrap: true, component: "div", title: appName, sx: { flexGrow: 2 }, children: appName }), _jsx(IconButton, { size: "small", onClick: handleDrawerClose, children: _jsx(ChevronLeftIcon, {}) })] }), _jsx(Divider, {}), _jsx(List, { onClick: mdUp ? undefined : handleDrawerClose, children: children })] }));
+        }, children: [_jsxs(DrawerHeader, { children: [_jsx("a", { href: "https://www.etsoo.com", title: app?.get("etsoo") ?? "ETSOO", target: "_blank", rel: "noreferrer", children: _jsx(Avatar, { src: logoUrl, variant: "square", sx: { marginLeft: -0.5, marginRight: 1.5, marginBottom: 1 } }) }), _jsx(Typography, { noWrap: true, component: "div", title: appName, sx: { flexGrow: 2 }, children: appName }), _jsx(IconButton, { size: "small", onClick: handleDrawerClose, children: _jsx(ChevronLeftIcon, {}) })] }), _jsx(Divider, {}), _jsx(List, { onClick: mdUp ? undefined : handleDrawerClose, children: children })] }));
 }

package/lib/mjs/pages/ViewPage.js

@@ -1,17 +1,17 @@
 import { createElement as _createElement } from "react";
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { ScrollRestoration } from "@etsoo/react";
-import { DateUtils, Utils } from "@etsoo/shared";
+import { Utils } from "@etsoo/shared";
 import { Grid2, LinearProgress, Stack, Typography } from "@mui/material";
 import React from "react";
 import { Labels } from "../app/Labels";
-import { globalApp } from "../app/ReactApp";
 import { GridDataFormat } from "../GridDataFormat";
 import { MUGlobal } from "../MUGlobal";
 import { PullToRefreshUI } from "../PullToRefreshUI";
 import { CommonPage } from "./CommonPage";
 import { MessageUtils } from "../messages/MessageUtils";
 import { OperationMessageContainer } from "../messages/OperationMessageContainer";
+import { useRequiredAppContext } from "../app/ReactApp";
 /**
  * View page grid item
  * @param props Props
@@ -31,15 +31,13 @@ export function ViewPageGridItem(props) {
     // Layout
     return (_jsxs(Grid2, { ...gridProps, ...options, children: [label != null && (_jsxs(Typography, { variant: "caption", component: "div", children: [label, ":"] })), typeof data === "object" ? (data) : (_jsx(Typography, { variant: "subtitle2", children: data }))] }));
 }
-function formatItemData(fieldData) {
+function formatItemData(app, fieldData) {
     if (fieldData == null)
         return undefined;
     if (typeof fieldData === "string")
         return fieldData;
     if (fieldData instanceof Date)
-        return globalApp
-            ? globalApp.formatDate(fieldData, "d")
-            : DateUtils.format(fieldData, "d");
+        return app.formatDate(fieldData, "d");
     return `${fieldData}`;
 }
 function getResp(singleRow) {
@@ -58,13 +56,13 @@ function getResp(singleRow) {
                 };
     return { size };
 }
-function getItemField(field, data) {
+function getItemField(app, field, data) {
     // Item data and label
     let itemData, itemLabel, gridProps = {};
     if (Array.isArray(field)) {
         const [fieldData, fieldType, renderProps, singleRow = "small"] = field;
         itemData = GridDataFormat(data[fieldData], fieldType, renderProps);
-        itemLabel = globalApp?.get(fieldData) ?? fieldData;
+        itemLabel = app.get(fieldData) ?? fieldData;
         gridProps = { ...getResp(singleRow) };
     }
     else if (typeof field === "object") {
@@ -78,7 +76,7 @@ function getItemField(field, data) {
         if (typeof fieldData === "function")
             itemData = fieldData(data);
         else if (dataType == null)
-            itemData = formatItemData(data[fieldData]);
+            itemData = formatItemData(app, data[fieldData]);
         else
             itemData = GridDataFormat(data[fieldData], dataType, renderProps);
         // Field label
@@ -86,12 +84,12 @@ function getItemField(field, data) {
             typeof fieldLabel === "function"
                 ? fieldLabel(data)
                 : fieldLabel != null
-                    ? globalApp?.get(fieldLabel) ?? fieldLabel
+                    ? app.get(fieldLabel) ?? fieldLabel
                     : fieldLabel;
     }
     else {
-        itemData = formatItemData(data[field]);
-        itemLabel = globalApp?.get(field) ?? field;
+        itemData = formatItemData(app, data[field]);
+        itemLabel = app.get(field) ?? field;
     }
     return [itemData, itemLabel, gridProps];
 }
@@ -100,6 +98,8 @@ function getItemField(field, data) {
  * @param props Props
  */
 export function ViewPage(props) {
+    // Global app
+    const app = useRequiredAppContext();
     // Destruct
     const { actions, children, fields, loadData, paddings = MUGlobal.pagePaddings, spacing = MUGlobal.half(MUGlobal.pagePaddings), supportRefresh = true, fabColumnDirection = true, fabTop = true, supportBack = true, pullToRefresh = true, gridRef, operationMessageHandler, ...rest } = props;
     // Data
@@ -140,7 +140,7 @@ export function ViewPage(props) {
                             // Most flexible way, do whatever you want
                             return field(data, refresh);
                         }
-                        const [itemData, itemLabel, gridProps] = getItemField(field, data);
+                        const [itemData, itemLabel, gridProps] = getItemField(app, field, data);
                         // Some callback function may return '' instead of undefined
                         if (itemData == null || itemData === "")
                             return undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.4.73",
+  "version": "1.4.75",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",
@@ -40,9 +40,9 @@
     "@dnd-kit/sortable": "^10.0.0",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
-    "@etsoo/appscript": "^1.5.88",
-    "@etsoo/notificationbase": "^1.1.55",
-    "@etsoo/react": "^1.8.24",
+    "@etsoo/appscript": "^1.5.90",
+    "@etsoo/notificationbase": "^1.1.56",
+    "@etsoo/react": "^1.8.26",
     "@etsoo/shared": "^1.2.58",
     "@mui/icons-material": "^6.3.1",
     "@mui/material": "^6.3.1",

package/src/AddresSelector.tsx

@@ -7,11 +7,11 @@ import {
 } from "@etsoo/appscript";
 import { FormLabel, Grid2, GridSize } from "@mui/material";
 import React from "react";
-import { globalApp } from "./app/ReactApp";
 import { ComboBox } from "./ComboBox";
 import { Tiplist } from "./Tiplist";
 import { ResponsiveStyleValue } from "./ResponsiveStyleValue";
 import { RegionsRQ } from "./RegionsRQ";
+import { useAppContext } from "./app/ReactApp";
 
 /**
  * Address field
@@ -166,13 +166,16 @@ export type AddressSelectorProps = {
  * @param props Props
  */
 export function AddressSelector(props: AddressSelectorProps) {
+  // Global app
+  const app = useAppContext();
+
   // Labels
   const {
     city: cityDefault = "City",
     district: districtDefault = "District",
     region: regionDefault = "Region",
     state: stateDefault = "State"
-  } = globalApp?.getLabels("region", "state", "city", "district") ?? {};
+  } = app?.getLabels("region", "state", "city", "district") ?? {};
 
   // Destruct
   const {

package/src/AuditDisplay.tsx

@@ -1,10 +1,10 @@
 import { Utils } from "@etsoo/shared";
 import { Button, Divider, Theme, Typography, useTheme } from "@mui/material";
 import React, { CSSProperties } from "react";
-import { globalApp } from "./app/ReactApp";
 import { ListMoreDisplay, ListMoreDisplayProps } from "./ListMoreDisplay";
 import { ShowDataComparison } from "./ShowDataComparison";
 import { AuditLineDto } from "@etsoo/appscript";
+import { useAppContext } from "./app/ReactApp";
 
 /**
  * Audit display props
@@ -32,17 +32,6 @@ export interface AuditDisplayProps
   itemRenderer?: (data: AuditLineDto, index: number) => React.ReactNode;
 }
 
-// Get label
-const getLabel = (key: string) => {
-  return globalApp?.get(Utils.formatInitial(key)) ?? key;
-};
-
-// Format date
-const formatDate = (date: Date) => {
-  if (globalApp) return globalApp.formatDate(date, "ds");
-  return date.toUTCString();
-};
-
 /**
  * Audit display
  * @param props Props
@@ -52,6 +41,19 @@ export function AuditDisplay(props: AuditDisplayProps) {
   // Theme
   const theme = useTheme();
 
+  // Global app
+  const app = useAppContext();
+
+  // Get label
+  const getLabel = (key: string) => {
+    return app?.get(Utils.formatInitial(key)) ?? key;
+  };
+
+  // Format date
+  const formatDate = (date: Date) => {
+    return app?.formatDate(date, "ds") ?? date.toUTCString();
+  };
+
   // Title
   var title = getLabel("dataComparison");