feat: create api and websocket managers

Author: Auto Version Bump

standalone/server/src/models/Diagram.ts

@@ -1,14 +1,13 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import mongoose, { Document, Schema } from "mongoose"
 
 export interface IDiagram extends Document {
   _id: string // Custom ID from library
   version: string
   title: string
   type: string
-  nodes: any[] // JSON array for nodes
-  edges: any[] // JSON array for edges
-  assessments: Record<string, any> // Optional JSON object for assessments
+  nodes: Schema.Types.Mixed[] // JSON array for nodes
+  edges: Schema.Types.Mixed[] // JSON array for edges
+  assessments: Record<string, Schema.Types.Mixed> // Optional JSON object for assessments
 }
 
 const diagramSchema: Schema = new Schema(
@@ -23,6 +22,15 @@ const diagramSchema: Schema = new Schema(
   },
   {
     minimize: false, // Disable minimization of the document
+    versionKey: false,
+    timestamps: true, // Automatically manage createdAt and updatedAt fields
+    toJSON: {
+      virtuals: true, // expose `id`
+      transform: (_doc, ret) => {
+        ret.id = ret._id // copy _id to id
+        delete ret._id // optional: remove _id
+      },
+    },
   }
 )
 

standalone/webapp/src/components/modals/ShareModal.tsx

@@ -5,7 +5,7 @@ import { toast } from "react-toastify"
 import { useEditorContext, useModalContext } from "@/contexts"
 import { useNavigate } from "react-router"
 import { DiagramView } from "@/types"
-import { backendURL } from "@/constants"
+import { DiagramAPIManager } from "@/services/DiagramAPIManager"
 
 export const ShareModal = () => {
   const { editor } = useEditorContext()
@@ -17,36 +17,26 @@ export const ShareModal = () => {
       toast.error("Editor instance is not available.")
       return
     }
-    const model = editor.model
 
-    await fetch(`${backendURL}/api/`, {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify(model),
-    })
-      .then(async (res) => {
-        if (res.ok) {
-          const diagramID = (await res.json())._id
+    try {
+      const model = editor.model
+      const { id: diagramID } = await DiagramAPIManager.createDiagram(model)
 
-          const newurl = `${window.location.origin}/${diagramID}?view=${viewType}`
-          copyToClipboard(newurl)
-          navigate(`/${diagramID}?view=${viewType}`)
+      const newurl = `${window.location.origin}/${diagramID}?view=${viewType}`
+      copyToClipboard(newurl)
+      navigate(`/${diagramID}?view=${viewType}`)
 
-          toast.success(
-            `The link has been copied to your clipboard and can be shared to collaborate, simply by pasting the link. You can re-access the link by going to share menu.`,
-            {
-              autoClose: 10000,
-            }
-          )
-          closeModal()
-        } else {
-          throw new Error("Network response was not ok")
+      toast.success(
+        `The link has been copied to your clipboard and can be shared to collaborate, simply by pasting the link. You can re-access the link by going to share menu.`,
+        {
+          autoClose: 10000,
         }
-      })
-      .catch((err) => {
-        console.error("Error in setDiagram endpoint:", err)
-        toast.error("Error in setDiagram endpoint:", err)
-      })
+      )
+      closeModal()
+    } catch (err) {
+      console.error("Error creating diagram:", err)
+      toast.error("Could not create diagram.")
+    }
   }
 
   const copyToClipboard = (link: string) => {

standalone/webapp/src/pages/ApollonWithConnection.tsx

@@ -1,49 +1,11 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import React, { useEffect, useRef, useState } from "react"
 import { useEditorContext } from "@/contexts"
-import {
-  ApollonEditor,
-  ApollonMode,
-  ApollonOptions,
-  UMLModel,
-} from "@tumaet/apollon"
+import { ApollonEditor, ApollonMode, ApollonOptions } from "@tumaet/apollon"
 import { useNavigate, useParams, useSearchParams } from "react-router"
 import { toast } from "react-toastify"
-import { backendURL, backendWSSUrl } from "@/constants"
-import { DiagramView, WebSocketMessage } from "@/types"
-
-const fetchDiagramData = (diagramId: string): Promise<any> => {
-  return fetch(`${backendURL}/api/${diagramId}`, {
-    method: "GET",
-    headers: {
-      "Content-Type": "application/json",
-    },
-  }).then((res) => {
-    if (res.ok) {
-      return res.json()
-    } else {
-      throw new Error("Failed to fetch diagram data")
-    }
-  })
-}
-
-const sendPutRequest = async (diagramId: string, data: UMLModel) => {
-  try {
-    const response = await fetch(`${backendURL}/api/${diagramId}`, {
-      method: "PUT",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify(data),
-    })
-    if (!response.ok) {
-      throw new Error("Failed to send PUT request")
-    }
-  } catch (error) {
-    console.error("Error in PUT request:", error)
-    toast.error("Failed to sync diagram data")
-  }
-}
+import { DiagramView } from "@/types"
+import { WebSocketManager } from "@/services/WebSocketManager"
+import { DiagramAPIManager } from "@/services/DiagramAPIManager"
 
 export const ApollonWithConnection: React.FC = () => {
   const { diagramId } = useParams()
@@ -52,149 +14,93 @@ export const ApollonWithConnection: React.FC = () => {
   const { setEditor } = useEditorContext()
   const [isLoading, setIsLoading] = useState(true)
   const containerRef = useRef<HTMLDivElement | null>(null)
-  const websocketRef = useRef<WebSocket | null>(null)
-  const intervalRef = useRef<NodeJS.Timeout | null>(null) // Ref to store interval ID
+  const wsManagerRef = useRef<WebSocketManager | null>(null)
+  const syncIntervalRef = useRef<NodeJS.Timeout | null>(null)
   const diagramIsUpdated = useRef(false)
 
   useEffect(() => {
     let instance: ApollonEditor | null = null
-    if (containerRef.current && diagramId) {
-      const initializeApollon = async () => {
-        try {
-          const viewType = searchParams.get("view")
-          const validViewTypes: string[] = [
-            DiagramView.COLLABORATE,
-            DiagramView.GIVE_FEEDBACK,
-            DiagramView.SEE_FEEDBACK,
-            DiagramView.EDIT,
-          ]
-          const isValidView = viewType && validViewTypes.includes(viewType)
 
-          if (!isValidView) {
-            toast.error("Invalid view type")
-            navigate("/")
-            return
-          }
-
-          const diagram = await fetchDiagramData(diagramId)
+    const initialize = async () => {
+      if (!containerRef.current || !diagramId) return
 
-          const editorOptions: ApollonOptions = {
-            model: diagram,
-          }
-
-          if (viewType === DiagramView.GIVE_FEEDBACK) {
-            editorOptions.mode = ApollonMode.Assessment
-            editorOptions.readonly = false
-          } else if (viewType === DiagramView.SEE_FEEDBACK) {
-            editorOptions.mode = ApollonMode.Assessment
-            editorOptions.readonly = true
-          } else if (viewType === DiagramView.EDIT) {
-            editorOptions.mode = ApollonMode.Modelling
-            editorOptions.readonly = false
-          } else {
-            editorOptions.mode = ApollonMode.Modelling
-            editorOptions.readonly = false
-          }
-
-          instance = new ApollonEditor(containerRef.current!, editorOptions)
-          setEditor(instance)
-          setIsLoading(false)
-
-          const makeConnection =
-            viewType === DiagramView.COLLABORATE ||
-            viewType === DiagramView.GIVE_FEEDBACK ||
-            viewType === DiagramView.SEE_FEEDBACK
+      try {
+        const viewType = searchParams.get("view")
+        const validViews = Object.values(DiagramView)
+        if (!viewType || !validViews.includes(viewType as DiagramView)) {
+          toast.error("Invalid view type")
+          navigate("/")
+          return
+        }
+        console.log("Initializing Apollon editor with view type:", viewType)
 
-          if (makeConnection) {
-            // Set up the WebSocket connection
-            websocketRef.current = new WebSocket(
-              `${backendWSSUrl}?diagramId=${diagramId}`
-            )
+        const diagram = await DiagramAPIManager.fetchDiagramData(diagramId)
+        console.log("Fetched diagram data:", diagram)
 
-            // Handle incoming Yjs updates
-            websocketRef.current.onmessage = (event: MessageEvent<string>) => {
-              const receiveWebSocketMessage = JSON.parse(
-                event.data
-              ) as WebSocketMessage
-              instance?.receiveBroadcastedMessage(
-                receiveWebSocketMessage.diagramData
-              )
-            }
+        const editorOptions: ApollonOptions = {
+          model: diagram,
+        }
 
-            // Wait until socket is open before starting sync
-            websocketRef.current.onopen = () => {
-              instance?.sendBroadcastMessage((diagramData) => {
-                if (websocketRef.current?.readyState === WebSocket.OPEN) {
-                  const sendData = { diagramData }
-                  websocketRef.current.send(JSON.stringify(sendData))
-                } else {
-                  console.warn("Tried to send while WebSocket not open")
-                }
-              })
+        if (viewType === DiagramView.GIVE_FEEDBACK) {
+          editorOptions.mode = ApollonMode.Assessment
+          editorOptions.readonly = false
+        } else if (viewType === DiagramView.SEE_FEEDBACK) {
+          editorOptions.mode = ApollonMode.Assessment
+          editorOptions.readonly = true
+        } else if (viewType === DiagramView.EDIT) {
+          editorOptions.mode = ApollonMode.Modelling
+          editorOptions.readonly = false
+        } else {
+          editorOptions.mode = ApollonMode.Modelling
+          editorOptions.readonly = false
+        }
 
-              const initialSyncMessage =
-                ApollonEditor.generateInitialSyncMessage()
-              const initialMessage = JSON.stringify({
-                diagramData: initialSyncMessage,
-              })
-              websocketRef.current?.send(initialMessage)
-            }
+        instance = new ApollonEditor(containerRef.current!, editorOptions)
+        setEditor(instance)
+        setIsLoading(false)
 
-            websocketRef.current.onerror = (err) => {
-              console.error("WebSocket error", err)
-              toast.error("WebSocket connection error")
-            }
+        if (
+          [
+            DiagramView.COLLABORATE,
+            DiagramView.GIVE_FEEDBACK,
+            DiagramView.SEE_FEEDBACK,
+          ].includes(viewType as DiagramView)
+        ) {
+          wsManagerRef.current = new WebSocketManager(diagramId, instance, () =>
+            toast.error("WebSocket error")
+          )
+          wsManagerRef.current.startConnection()
+        }
 
-            intervalRef.current = setInterval(() => {
-              if (instance && diagramId && diagramIsUpdated.current) {
-                const diagramData = instance.model
-                sendPutRequest(diagramId, diagramData)
-                diagramIsUpdated.current = false
-              }
-            }, 5000)
+        syncIntervalRef.current = setInterval(() => {
+          if (diagramIsUpdated.current && diagramId) {
+            DiagramAPIManager.sendDiagramUpdate(
+              diagramId,
+              instance!.model
+            ).catch(() => toast.error("Failed to sync changes"))
+            diagramIsUpdated.current = false
           }
-
-          instance.subscribeToModelChange(() => {
-            diagramIsUpdated.current = true
-          })
-
-          // Return cleanup function for Apollon2 and WebSocket
-        } catch (error) {
-          toast.error("Error loading diagram. Please try again.")
-          navigate("/")
-          console.error("Error setting up Apollon2:", error)
-        }
+        }, 5000)
+
+        instance.subscribeToModelChange(() => {
+          diagramIsUpdated.current = true
+        })
+      } catch {
+        toast.error("Failed to initialize diagram")
+        navigate("/")
       }
-
-      initializeApollon()
     }
 
-    return () => {
-      setEditor(undefined) // Clear context
-
-      // Clear interval if it exists
-      if (intervalRef.current) {
-        clearInterval(intervalRef.current)
-        intervalRef.current = null
-      }
+    initialize()
 
-      // Clean up WebSocket
-      if (
-        websocketRef.current &&
-        websocketRef.current.readyState === WebSocket.OPEN
-      ) {
-        console.log("Clearing WebSocket connection")
-        websocketRef.current.close()
-        websocketRef.current = null
-      }
-
-      if (instance) {
-        instance.destroy()
-        instance = null
+    return () => {
+      setEditor(undefined)
+      wsManagerRef.current?.cleanup()
+      if (syncIntervalRef.current) {
+        clearInterval(syncIntervalRef.current)
       }
+      instance?.destroy()
     }
-
-    // Implicitly return undefined if conditions are not met
   }, [diagramId, searchParams, setEditor])
 
   return (