chore(frontend-react): Modernize React code based on v19 improvements

wuespace · Dec 7, 2024 · 1c47710 · 1c47710
1 parent c4c1177
commit 1c47710
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 12 deletions.
diff --git a/frontend-react/src/lib/application/hooks/use-widget-config.ts b/frontend-react/src/lib/application/hooks/use-widget-config.ts
@@ -1,5 +1,5 @@
-import { useContext } from 'react';
-import { widgetConfigContext } from '../../widget';
+import { use } from 'react';
+import { WidgetConfigContext } from '../../widget';
 
 /**
  * Retrieves the widget configuration from the widgetConfigContext.
@@ -11,7 +11,7 @@ import { widgetConfigContext } from '../../widget';
 // The type is safe due to the surrounding application structure.
 // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-parameters
 export function useWidgetConfig<T>(): T {
-	const widgetConfig = useContext(widgetConfigContext);
+	const widgetConfig = use(WidgetConfigContext);
 	if (!widgetConfig) {
 		throw new Error(
 			'useWidgetConfig must be used within a WidgetConfigProvider'

diff --git a/frontend-react/src/lib/widget/component/widget-renderer.tsx b/frontend-react/src/lib/widget/component/widget-renderer.tsx
@@ -10,7 +10,7 @@ export interface WidgetRendererProps {
 	widgetInstanceId: string;
 }
 
-export const widgetConfigContext = createContext<unknown>(undefined);
+export const WidgetConfigContext = createContext<unknown>(undefined);
 
 /**
  * Renders a widget based on the provided widgetInstanceId.
@@ -42,14 +42,14 @@ registerWidget({
 			style={{ '--id': CSS.escape(widgetInstanceId) }}
 		>
 			{widget ? (
-				<widgetConfigContext.Provider
+				<WidgetConfigContext
 					key={`renderer-${widgetInstanceId}`}
 					value={widgetInstance.configuration}
 				>
 					<ErrorBoundary FallbackComponent={ErrorFallback}>
 						{widget.element}
 					</ErrorBoundary>
-				</widgetConfigContext.Provider>
+				</WidgetConfigContext>
 			) : (
 				<div>
 					<p>Widget isn't registered.</p>

diff --git a/frontend-react/src/lib/widget/configuration/configuration-context.tsx b/frontend-react/src/lib/widget/configuration/configuration-context.tsx
@@ -1,4 +1,4 @@
-import { createContext, ReactNode, SetStateAction, useContext } from 'react';
+import { createContext, ReactNode, SetStateAction, use } from 'react';
 import {
 	BaseWidgetConfiguration,
 	WidgetConfigurationContextValue
@@ -37,9 +37,7 @@ const WidgetConfigurationContext =
  * @returns the current widget configuration and a function to update it
  */
 export function useConfigureWidget() {
-	const { configuration, setConfiguration } = useContext(
-		WidgetConfigurationContext
-	);
+	const { configuration, setConfiguration } = use(WidgetConfigurationContext);
 
 	return [configuration, setConfiguration] as const;
 }
@@ -80,13 +78,13 @@ export function WidgetConfigurationContextProvider(props: {
 	};
 
 	return (
-		<WidgetConfigurationContext.Provider
+		<WidgetConfigurationContext
 			value={{
 				configuration: props.createConfig(props.value),
 				setConfiguration: onSetConfiguration
 			}}
 		>
 			{props.children}
-		</WidgetConfigurationContext.Provider>
+		</WidgetConfigurationContext>
 	);
 }