From 1c477101bfe253d739d121ad6754b4f07b07da94 Mon Sep 17 00:00:00 2001
From: Zuri Klaschka <pklaschka@users.noreply.github.com>
Date: Sat, 7 Dec 2024 15:06:38 +0100
Subject: [PATCH] chore(frontend-react): Modernize React code based on v19
 improvements

---
 .../src/lib/application/hooks/use-widget-config.ts     |  6 +++---
 .../src/lib/widget/component/widget-renderer.tsx       |  6 +++---
 .../lib/widget/configuration/configuration-context.tsx | 10 ++++------
 3 files changed, 10 insertions(+), 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
index 0b720e94..d5cd3d24 100644
--- 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
index ac2d2fa5..48bdfa58 100644
--- 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
index fd061051..20fdd506 100644
--- 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>
 	);
 }