Fix tests and prepare for react 18.

Author: SebastianStehle

backend/tests/Notifo.Domain.Tests/Integrations/Discord/DiscordTests.cs

@@ -80,7 +80,8 @@ public async Task Should_send_full_message()
     [Fact]
     public async Task Should_fail_on_user()
     {
-        var invalidUser = Guid.NewGuid().ToString();
+        // Discord only uses numbers in IDs with 18 characeters, therefore we cannot use GUID or so.
+        var invalidUser = "112233445566778899";
 
         var message = new MessagingMessage
         {

frontend/.eslintrc.js

@@ -13,7 +13,8 @@ module.exports = {
     "parserOptions": {
         "project": "tsconfig.json"
     },
-    "plugins": [
+    "plugins": [   
+        "eslint-plugin-react-compiler",
         "eslint-plugin-import",
         "sort-keys-fix",
         "@typescript-eslint",
@@ -105,6 +106,7 @@ module.exports = {
         ],
         "operator-linebreak": "off",
         "prefer-destructuring": "off",
+        "react-compiler/react-compiler": "error",
         "sort-imports": [
             "error",
             {

frontend/package-lock.json

@@ -19,6 +19,7 @@
     "core-js": "3.33.2",
     "date-fns": "2.30.0",
     "emoji-mart": "^5.5.2",
+    "eslint-plugin-react-compiler": "^0.0.0-experimental-51a85ea-20240601",
     "history": "^5.3.0",
     "mousetrap": "1.6.5",
     "oidc-client-ts": "^2.4.0",

frontend/package.json

@@ -12,8 +12,6 @@ import * as ReactDOM from 'react-dom';
 import { ClickOutside } from './ClickOutside';
 import { useEventCallback } from './hooks';
 
-/* eslint-disable react-hooks/exhaustive-deps */
-
 export class OverlayController {
     private static openController?: OverlayController;
     private listener?: (opened: boolean) => void;
@@ -115,7 +113,7 @@ export const OverlayDropdown = (props: OverlayDropdownProps) => {
 
     React.useEffect(() => {
         update();
-    }, [show]);
+    }, [show, update]);
 
     React.useEffect(() => {
         return controller?.listen(value => {

frontend/src/app/framework/react/OverlayDropdown.tsx

@@ -6,6 +6,7 @@
  */
 
 /* eslint-disable no-console */
+/* eslint-disable react-compiler/react-compiler */
 /* eslint-disable react-hooks/exhaustive-deps */
 
 import * as React from 'react';

frontend/src/app/framework/react/hooks.ts

@@ -32,15 +32,15 @@ export const IntegrationImage = (props: IntegrationImageProps) => {
 };
 
 const RenderSVG = ({ svg }: { svg: string }) => {
-    const [div, setDiv] = React.useState<HTMLDivElement | null>(null);
-
-    React.useEffect(() => {
-        if (!div || !svg) {
-            return;
+    const html = React.useMemo(() => {
+        if (!svg) {
+            return null;
         }
+        
 
         const prefix = Numbers.guid();
 
+        const div = document.createElement('div');
         div.innerHTML = svg;
         div.querySelectorAll('*').forEach(element => {
             const id = element.getAttribute('id');
@@ -66,9 +66,15 @@ const RenderSVG = ({ svg }: { svg: string }) => {
                 }
             }
         });
-    }, [div, svg]);
+
+        return { __html: div.innerHTML };
+    }, [svg]);
+
+    if (!html) {
+        return null;
+    }
 
     return (
-        <div ref={setDiv} />
+        <div dangerouslySetInnerHTML={html} />
     );
 };

frontend/src/app/pages/integrations/IntegrationImage.tsx

@@ -8,8 +8,6 @@ import { ClickOutside, Icon, OverlayDropdown, useEventCallback } from '@app/fram
 import { texts } from '@app/texts';
 import { MediaPicker } from './MediaPicker';
 
-/* eslint-disable react-hooks/exhaustive-deps */
-
 export interface PickerOptions {
     // True when emojis can be added.
     pickEmoji?: boolean;
@@ -64,7 +62,7 @@ export const Picker = (props: PickerProps) => {
 
     React.useEffect(() => {
         update();
-    }, [openPicker]);
+    }, [openPicker, update]);
 
     const doSelectUrl = useEventCallback((url: string) => {
         onPick(url);