Feature/redux toolkit migration

.gitignore

@@ -105,3 +105,4 @@ build
 /.idea/
 
 /diagrams/
+.DS_Store

.nvmrc

@@ -0,0 +1 @@
+v20.18.0

packages/shared/src/main/diagram-dto.ts

@@ -1,13 +1,12 @@
 import { UMLModel } from '@ls1intum/apollon';
-import { Moment } from 'moment';
 
 export class DiagramDTO {
   id: string;
   title: string;
   model: UMLModel;
-  lastUpdate: Moment;
+  lastUpdate: string;
 
-  constructor(id: string, title: string, model: UMLModel, lastUpdate: Moment) {
+  constructor(id: string, title: string, model: UMLModel, lastUpdate: string) {
     this.id = id;
     this.title = title;
     this.model = model;

packages/webapp/package.json

@@ -16,6 +16,7 @@
   },
   "dependencies": {
     "@ls1intum/apollon": "3.3.14",
+    "@reduxjs/toolkit": "2.2.7",
     "@sentry/react": "7.110.1",
     "bootstrap": "5.3.3",
     "moment": "2.30.1",
@@ -27,8 +28,6 @@
     "react-dom": "18.2.0",
     "react-redux": "8.1.3",
     "react-router-dom": "6.22.3",
-    "redux": "4.2.1",
-    "redux-observable": "2.0.0",
     "rxjs": "7.8.1",
     "shared": "2.1.3",
     "styled-components": "6.1.8",
@@ -50,9 +49,10 @@
     "@types/react": "18.2.79",
     "@types/react-bootstrap": "0.32.36",
     "@types/react-dom": "18.2.25",
-    "@types/react-redux": "7.1.33",
+    "@types/react-redux": "^7.1.33",
     "@types/styled-components": "5.1.34",
     "@types/uuid": "9.0.8",
+    "@types/websocket": "^1.0.10",
     "@typescript-eslint/eslint-plugin": "6.21.0",
     "@typescript-eslint/parser": "6.21.0",
     "circular-dependency-plugin": "5.2.2",

packages/webapp/src/main/application.tsx

@@ -1,104 +1,46 @@
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { ApplicationBar } from './components/application-bar/application-bar';
-import { ApollonEditorWrapper } from './components/apollon-editor-component/apollon-editor-component';
+import { ApollonEditorComponent } from './components/apollon-editor-component/ApollonEditorComponent';
 import { ApollonEditor } from '@ls1intum/apollon';
-import { ApplicationStore } from './components/store/application-store';
-import { ApplicationState } from './components/store/application-state';
-import {
-  localStorageCollaborationColor,
-  localStorageCollaborationName,
-  localStorageDiagramPrefix,
-  localStorageLatest,
-  POSTHOG_HOST,
-  POSTHOG_KEY,
-} from './constant';
-import {
-  ApollonEditorContext,
-  ApollonEditorProvider,
-} from './components/apollon-editor-component/apollon-editor-context';
-import { uuid } from './utils/uuid';
-import moment from 'moment';
+import { POSTHOG_HOST, POSTHOG_KEY } from './constant';
+import { ApollonEditorProvider } from './components/apollon-editor-component/apollon-editor-context';
 import { FirefoxIncompatibilityHint } from './components/incompatability-hints/firefox-incompatibility-hint';
-import { defaultEditorOptions } from './services/editor-options/editor-options-reducer';
-import { EditorOptions } from './services/editor-options/editor-options-types';
 import { ErrorPanel } from './components/error-handling/error-panel';
-import { Diagram } from './services/diagram/diagram-types';
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import { ApplicationModal } from './components/modals/application-modal';
 import { ToastContainer } from 'react-toastify';
 import { PostHogProvider } from 'posthog-js/react';
+import { ApplicationStore } from './components/store/application-store';
+import { ApollonEditorComponentWithConnection } from './components/apollon-editor-component/ApollonEditorComponentWithConnection';
 
 const postHogOptions = {
   api_host: POSTHOG_HOST,
 };
 
-const getInitialStore = (): ApplicationState => {
-  const latestId: string | null = window.localStorage.getItem(localStorageLatest);
-  let diagram: { diagram: Diagram };
-  const editorOptions: EditorOptions = defaultEditorOptions;
-  if (latestId) {
-    const latestDiagram: Diagram = JSON.parse(window.localStorage.getItem(localStorageDiagramPrefix + latestId)!);
-    diagram = { diagram: latestDiagram };
-    editorOptions.type = latestDiagram?.model?.type ? latestDiagram.model.type : editorOptions.type;
-  } else {
-    diagram = {
-      diagram: { id: uuid(), title: 'UMLClassDiagram', model: undefined, lastUpdate: moment() },
-    };
-  }
-
-  // initial application state
-  return {
-    ...diagram,
-    editorOptions,
-    errors: [],
-    modal: {
-      type: null,
-      size: 'sm',
-    },
-    share: {
-      collaborationName: window.localStorage.getItem(localStorageCollaborationName) || '',
-      collaborationColor: window.localStorage.getItem(localStorageCollaborationColor) || '',
-      collaborators: [],
-      fromServer: false,
-    },
-  };
-};
-
-const initialStore = getInitialStore();
-
-export const Application = () => {
+export function RoutedApplication() {
   const [editor, setEditor] = useState<ApollonEditor>();
-  const handleSetEditor = (ref: ApollonEditor) => {
-    if (ref) {
-      setEditor(ref);
-    }
+  const handleSetEditor = (newEditor: ApollonEditor) => {
+    setEditor(newEditor);
   };
-  const isFirefox: boolean = /Firefox/i.test(navigator.userAgent);
-  const context: ApollonEditorContext | null = { editor, setEditor: handleSetEditor };
+  const isFirefox = useMemo(() => /Firefox/i.test(navigator.userAgent), []);
 
   return (
     <PostHogProvider apiKey={POSTHOG_KEY} options={postHogOptions}>
-      <ApollonEditorProvider value={context}>
-        <ApplicationStore initialState={initialStore}>
-          <ApplicationBar />
-          <ApplicationModal />
-          {isFirefox && <FirefoxIncompatibilityHint />}
-          <ErrorPanel />
-          <ApollonEditorWrapper />
-        </ApplicationStore>
-        <ToastContainer />
-      </ApollonEditorProvider>
+      <ApplicationStore>
+        <BrowserRouter>
+          <ApollonEditorProvider value={{ editor, setEditor: handleSetEditor }}>
+            <ApplicationBar />
+            <ApplicationModal />
+            {isFirefox && <FirefoxIncompatibilityHint />}
+            <Routes>
+              <Route path={'/:token'} element={<ApollonEditorComponentWithConnection />} />
+              <Route path={'/'} element={<ApollonEditorComponent />} />
+            </Routes>
+            <ErrorPanel />
+            <ToastContainer />
+          </ApollonEditorProvider>
+        </BrowserRouter>
+      </ApplicationStore>
     </PostHogProvider>
   );
-};
-
-export function RoutedApplication() {
-  return (
-    <BrowserRouter>
-      <Routes>
-        <Route path={'/:token'} element={<Application />} />
-        <Route path={'/'} element={<Application />} />
-      </Routes>
-    </BrowserRouter>
-  );
 }

packages/webapp/src/main/components/apollon-editor-component/ApollonEditorComponent.tsx

@@ -0,0 +1,52 @@
+import { ApollonEditor, Patch, UMLModel } from '@ls1intum/apollon';
+import React, { useEffect, useRef, useMemo, useContext } from 'react';
+import styled from 'styled-components';
+import { uuid } from '../../utils/uuid';
+
+import { setCreateNewEditor, updateDiagramThunk, selectCreatenewEditor } from '../../services/diagram/diagramSlice';
+import { ApollonEditorContext } from './apollon-editor-context';
+import { useAppDispatch, useAppSelector } from '../store/hooks';
+
+const ApollonContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex-grow: 2;
+  overflow: hidden;
+`;
+
+export const ApollonEditorComponent: React.FC = () => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const editorRef = useRef<ApollonEditor | null>(null);
+  const dispatch = useAppDispatch();
+  const { diagram: reduxDiagram } = useAppSelector((state) => state.diagram);
+  const options = useAppSelector((state) => state.diagram.editorOptions);
+  const createNewEditor = useAppSelector(selectCreatenewEditor);
+  const editorContext = useContext(ApollonEditorContext);
+  const setEditor = editorContext?.setEditor;
+
+  useEffect(() => {
+    const initializeEditor = async () => {
+      if (containerRef.current != null && createNewEditor) {
+        editorRef.current = new ApollonEditor(containerRef.current, options);
+        await editorRef.current?.nextRender;
+
+        if (reduxDiagram.model) {
+          editorRef.current.model = reduxDiagram.model;
+        }
+        editorRef.current.subscribeToModelChange((model: UMLModel) => {
+          const diagram = { ...reduxDiagram, model };
+          dispatch(updateDiagramThunk(diagram));
+        });
+
+        setEditor!(editorRef.current);
+        dispatch(setCreateNewEditor(false));
+      }
+    };
+
+    initializeEditor();
+  }, [containerRef.current, createNewEditor]);
+
+  const key = reduxDiagram?.id || uuid();
+
+  return <ApollonContainer key={key} ref={containerRef} />;
+};