2c0df91351
* Add lint:fix script * Reformat CRM app with eslint fix * Apply eslint fix on data importer codebase * Apply eslint fix on Invoices codebase * Apply eslint fix on Klaviyo codebase * Apply eslint fix on products-feed codebase * Apply eslint fix on monitoring codebase * Apply eslint fix on Search codebase * Apply eslint fix on Slack codebase * cleanup
40 lines
1.2 KiB
TypeScript
40 lines
1.2 KiB
TypeScript
import { useAppBridge } from "@saleor/app-sdk/app-bridge";
|
|
import { useTheme } from "@saleor/macaw-ui";
|
|
import { memo, useEffect } from "react";
|
|
|
|
/**
|
|
* Macaw-ui stores its theme mode in memory and local storage. To synchronize App with Dashboard,
|
|
* Macaw must be informed about this change from AppBridge.
|
|
*
|
|
* If you are not using Macaw, you can remove this.
|
|
*/
|
|
function _ThemeSynchronizer() {
|
|
const { appBridgeState, appBridge } = useAppBridge();
|
|
const { setTheme, themeType } = useTheme();
|
|
|
|
/*
|
|
* todo - replace this hook to appBridge.subscribe and react only only on initial theme event
|
|
* useEffect(() =>{
|
|
* appBridge?.subscribe('theme',console.log)
|
|
* },[appBridge])
|
|
*/
|
|
|
|
useEffect(() => {
|
|
if (!setTheme || !appBridgeState?.theme) {
|
|
return;
|
|
}
|
|
|
|
if (themeType !== appBridgeState?.theme) {
|
|
setTheme(appBridgeState.theme);
|
|
/**
|
|
* Hack to fix macaw, which is going into infinite loop on light mode (probably de-sync local storage with react state)
|
|
* TODO Fix me when Macaw 2.0 is shipped
|
|
*/
|
|
window.localStorage.setItem("macaw-ui-theme", appBridgeState.theme);
|
|
}
|
|
}, [appBridgeState?.theme, setTheme, themeType]);
|
|
|
|
return null;
|
|
}
|
|
|
|
export const ThemeSynchronizer = memo(_ThemeSynchronizer);
|