From 9aeec86c8c5668d69381d71af463ecc9189c1575 Mon Sep 17 00:00:00 2001 From: Lene Gadewoll Date: Thu, 7 Nov 2024 14:08:12 +0100 Subject: [PATCH] refactor: subscribe to vis color store on unmount --- .../src/views/color_palette/color_palette.js | 6 +++++- .../color_palette/color_palette_quantitative.js | 6 +++++- .../src/views/color_picker/color_palette_display.js | 13 ++++++++++--- .../src/views/color_picker/color_palette_picker.js | 13 ++++++++++--- .../src-docs/src/views/elastic_charts/theming.tsx | 13 ++++++++++--- .../color_palette_display.stories.tsx | 13 ++++++++++--- .../color_palette_picker.stories.tsx | 13 ++++++++++--- .../utilities/color_palettes/overview.mdx | 6 +++++- 8 files changed, 65 insertions(+), 18 deletions(-) diff --git a/packages/eui/src-docs/src/views/color_palette/color_palette.js b/packages/eui/src-docs/src/views/color_palette/color_palette.js index a37097bbaee..7ebc6ae9354 100644 --- a/packages/eui/src-docs/src/views/color_palette/color_palette.js +++ b/packages/eui/src-docs/src/views/color_palette/color_palette.js @@ -54,10 +54,14 @@ export default () => { }; useEffect(() => { - EUI_VIS_COLOR_STORE.subscribe( + const storeId = EUI_VIS_COLOR_STORE.subscribe( VIS_COLOR_STORE_EVENTS.UPDATE, handleVisColorThemeChange ); + + return () => { + EUI_VIS_COLOR_STORE.unsubscribe(VIS_COLOR_STORE_EVENTS.UPDATE, storeId); + }; }, []); return ( diff --git a/packages/eui/src-docs/src/views/color_palette/color_palette_quantitative.js b/packages/eui/src-docs/src/views/color_palette/color_palette_quantitative.js index 8e3273b915f..38e9de17da8 100644 --- a/packages/eui/src-docs/src/views/color_palette/color_palette_quantitative.js +++ b/packages/eui/src-docs/src/views/color_palette/color_palette_quantitative.js @@ -49,10 +49,14 @@ export default () => { }; useEffect(() => { - EUI_VIS_COLOR_STORE.subscribe( + const storeId = EUI_VIS_COLOR_STORE.subscribe( VIS_COLOR_STORE_EVENTS.UPDATE, handleVisColorThemeChange ); + + return () => { + EUI_VIS_COLOR_STORE.unsubscribe(VIS_COLOR_STORE_EVENTS.UPDATE, storeId); + }; }, []); return ( diff --git a/packages/eui/src-docs/src/views/color_picker/color_palette_display.js b/packages/eui/src-docs/src/views/color_picker/color_palette_display.js index 06910fed7c4..8c4c88625cd 100644 --- a/packages/eui/src-docs/src/views/color_picker/color_palette_display.js +++ b/packages/eui/src-docs/src/views/color_picker/color_palette_display.js @@ -91,9 +91,16 @@ export default () => { const [palettes, setPalettes] = useState(getPalettes()); useEffect(() => { - EUI_VIS_COLOR_STORE.subscribe(VIS_COLOR_STORE_EVENTS.UPDATE, () => { - setPalettes(getPalettes()); - }); + const storeId = EUI_VIS_COLOR_STORE.subscribe( + VIS_COLOR_STORE_EVENTS.UPDATE, + () => { + setPalettes(getPalettes()); + } + ); + + return () => { + EUI_VIS_COLOR_STORE.unsubscribe(VIS_COLOR_STORE_EVENTS.UPDATE, storeId); + }; }, [getPalettes]); const onChangeSize = (e) => { diff --git a/packages/eui/src-docs/src/views/color_picker/color_palette_picker.js b/packages/eui/src-docs/src/views/color_picker/color_palette_picker.js index 7a4c8cbd518..83be7c66030 100644 --- a/packages/eui/src-docs/src/views/color_picker/color_palette_picker.js +++ b/packages/eui/src-docs/src/views/color_picker/color_palette_picker.js @@ -94,9 +94,16 @@ export default () => { const [selectedPalette, setSelectedPalette] = useState('palette_1'); useEffect(() => { - EUI_VIS_COLOR_STORE.subscribe(VIS_COLOR_STORE_EVENTS.UPDATE, () => { - setPalettes(getPalettes()); - }); + const storeId = EUI_VIS_COLOR_STORE.subscribe( + VIS_COLOR_STORE_EVENTS.UPDATE, + () => { + setPalettes(getPalettes()); + } + ); + + return () => { + EUI_VIS_COLOR_STORE.unsubscribe(VIS_COLOR_STORE_EVENTS.UPDATE, storeId); + }; }, []); return ( diff --git a/packages/eui/src-docs/src/views/elastic_charts/theming.tsx b/packages/eui/src-docs/src/views/elastic_charts/theming.tsx index 3a736e2b912..8b1d619648a 100644 --- a/packages/eui/src-docs/src/views/elastic_charts/theming.tsx +++ b/packages/eui/src-docs/src/views/elastic_charts/theming.tsx @@ -69,9 +69,16 @@ export default () => { ); useEffect(() => { - EUI_VIS_COLOR_STORE.subscribe(VIS_COLOR_STORE_EVENTS.UPDATE, () => { - setPalettes(getPalettes()); - }); + const storeId = EUI_VIS_COLOR_STORE.subscribe( + VIS_COLOR_STORE_EVENTS.UPDATE, + () => { + setPalettes(getPalettes()); + } + ); + + return () => { + EUI_VIS_COLOR_STORE.unsubscribe(VIS_COLOR_STORE_EVENTS.UPDATE, storeId); + }; }, []); /** diff --git a/packages/eui/src/components/color_picker/color_palette_display/color_palette_display.stories.tsx b/packages/eui/src/components/color_picker/color_palette_display/color_palette_display.stories.tsx index 727703b3fd4..c06306cd8bf 100644 --- a/packages/eui/src/components/color_picker/color_palette_display/color_palette_display.stories.tsx +++ b/packages/eui/src/components/color_picker/color_palette_display/color_palette_display.stories.tsx @@ -43,9 +43,16 @@ export const Playground: Story = { // subscribe to theme-related vis_color changes useEffect(() => { - EUI_VIS_COLOR_STORE.subscribe(VIS_COLOR_STORE_EVENTS.UPDATE, () => { - setPalette(euiPaletteColorBlind()); - }); + const storeId = EUI_VIS_COLOR_STORE.subscribe( + VIS_COLOR_STORE_EVENTS.UPDATE, + () => { + setPalette(euiPaletteColorBlind()); + } + ); + + return () => { + EUI_VIS_COLOR_STORE.unsubscribe(VIS_COLOR_STORE_EVENTS.UPDATE, storeId); + }; }, []); useUpdateEffect(() => { diff --git a/packages/eui/src/components/color_picker/color_palette_picker/color_palette_picker.stories.tsx b/packages/eui/src/components/color_picker/color_palette_picker/color_palette_picker.stories.tsx index 15ff8070d0a..fe56d0afac7 100644 --- a/packages/eui/src/components/color_picker/color_palette_picker/color_palette_picker.stories.tsx +++ b/packages/eui/src/components/color_picker/color_palette_picker/color_palette_picker.stories.tsx @@ -68,9 +68,16 @@ export const Playground: Story = { // subscribe to theme-related vis_color changes useEffect(() => { - EUI_VIS_COLOR_STORE.subscribe(VIS_COLOR_STORE_EVENTS.UPDATE, () => { - setPalettes(getInitialPalettes()); - }); + const storeId = EUI_VIS_COLOR_STORE.subscribe( + VIS_COLOR_STORE_EVENTS.UPDATE, + () => { + setPalettes(getInitialPalettes()); + } + ); + + return () => { + EUI_VIS_COLOR_STORE.unsubscribe(VIS_COLOR_STORE_EVENTS.UPDATE, storeId); + }; }, []); useUpdateEffect(() => { diff --git a/packages/website/docs/components/utilities/color_palettes/overview.mdx b/packages/website/docs/components/utilities/color_palettes/overview.mdx index 1faffa2d892..8385fe758e1 100644 --- a/packages/website/docs/components/utilities/color_palettes/overview.mdx +++ b/packages/website/docs/components/utilities/color_palettes/overview.mdx @@ -121,10 +121,14 @@ export default () => { }; useEffect(() => { - EUI_VIS_COLOR_STORE.subscribe( + const storeId = EUI_VIS_COLOR_STORE.subscribe( VIS_COLOR_STORE_EVENTS.UPDATE, handleVisColorThemeChange ); + + return () => { + EUI_VIS_COLOR_STORE.unsubscribe(VIS_COLOR_STORE_EVENTS.UPDATE, storeId); + }; }, []); return (