fix(frontend): migrate code to use the commons workspace

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>

frontend/docker/Dockerfile

@@ -13,15 +13,21 @@ USER node
 WORKDIR /usr/src/app
 
 COPY --chown=node .yarn/plugins .yarn/plugins
+COPY --chown=node .yarn/patches .yarn/patches
 COPY --chown=node .yarn/releases .yarn/releases
 COPY --chown=node .yarnrc.yml .yarnrc.yml
 COPY --chown=node package.json package.json
 COPY --chown=node yarn.lock yarn.lock
 COPY --chown=node backend/package.json backend/
+COPY --chown=node commons commons
 COPY --chown=node frontend frontend
 RUN --mount=type=cache,sharing=locked,uid=1000,gid=1000,target=/tmp/.yarn \
     yarn install --immutable && yarn workspaces focus @hedgedoc/frontend
 
+WORKDIR /usr/src/app/commons
+
+RUN yarn build
+
 WORKDIR /usr/src/app/frontend
 
 RUN rm -rf public/public && \

frontend/package.json

@@ -46,9 +46,9 @@
     "@codemirror/theme-one-dark": "6.1.0",
     "@codemirror/view": "6.7.0",
     "@fontsource/source-sans-pro": "4.5.11",
+    "@hedgedoc/commons": "workspace:commons",
     "@hedgedoc/html-to-react": "1.4.5",
     "@hedgedoc/markdown-it-plugins": "1.0.0",
-    "@hedgedoc/realtime": "0.3.0",
     "@mrdrogdrog/optional": "1.0.0",
     "@react-hook/resize-observer": "1.2.6",
     "@redux-devtools/core": "3.13.1",

frontend/src/components/editor-page/editor-pane/hooks/yjs/mock-connection.ts

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 import { MARKDOWN_CONTENT_CHANNEL_NAME } from './use-markdown-content-y-text'
-import { YDocMessageTransporter } from '@hedgedoc/realtime'
+import { YDocMessageTransporter } from '@hedgedoc/commons'
 import type { Awareness } from 'y-protocols/awareness'
 import type { Doc } from 'yjs'
 

frontend/src/components/editor-page/editor-pane/hooks/yjs/use-insert-note-content-into-y-text-in-mock-mode-effect.ts

@@ -6,7 +6,7 @@
 import { getGlobalState } from '../../../../../redux'
 import { isMockMode } from '../../../../../utils/test-modes'
 import { MockConnection } from './mock-connection'
-import type { YDocMessageTransporter } from '@hedgedoc/realtime'
+import type { YDocMessageTransporter } from '@hedgedoc/commons'
 import { useEffect } from 'react'
 
 /**

frontend/src/components/editor-page/editor-pane/hooks/yjs/use-is-connection-synced.ts

@@ -3,7 +3,7 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-import type { YDocMessageTransporter } from '@hedgedoc/realtime'
+import type { YDocMessageTransporter } from '@hedgedoc/commons'
 import { useEffect, useState } from 'react'
 
 /**
@@ -18,9 +18,11 @@ export const useIsConnectionSynced = (connection: YDocMessageTransporter): boole
   useEffect(() => {
     const enableEditor = () => setEditorEnabled(true)
     const disableEditor = () => setEditorEnabled(false)
-    connection.on('synced', enableEditor).on('disconnected', disableEditor)
+    connection.on('synced', enableEditor)
+    connection.on('disconnected', disableEditor)
     return () => {
-      connection.off('synced', enableEditor).off('disconnected', disableEditor)
+      connection.off('synced', enableEditor)
+      connection.off('disconnected', disableEditor)
     }
   }, [connection])
 

frontend/src/components/editor-page/editor-pane/hooks/yjs/use-on-metadata-updated.ts

@@ -4,8 +4,8 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 import { updateMetadata } from '../../../../../redux/note-details/methods'
-import type { YDocMessageTransporter } from '@hedgedoc/realtime'
-import { MessageType } from '@hedgedoc/realtime'
+import type { YDocMessageTransporter } from '@hedgedoc/commons'
+import { MessageType } from '@hedgedoc/commons'
 import { useCallback, useEffect } from 'react'
 
 /**
@@ -19,9 +19,9 @@ export const useOnMetadataUpdated = (websocketConnection: YDocMessageTransporter
   }, [])
 
   useEffect(() => {
-    websocketConnection.on(MessageType.METADATA_UPDATED, updateMetadataHandler)
+    websocketConnection.on(String(MessageType.METADATA_UPDATED), () => void updateMetadataHandler())
     return () => {
-      websocketConnection.off(MessageType.METADATA_UPDATED, updateMetadataHandler)
+      websocketConnection.off(String(MessageType.METADATA_UPDATED), () => void updateMetadataHandler())
     }
   })
 }

frontend/src/components/editor-page/editor-pane/hooks/yjs/use-on-note-deleted.ts

@@ -6,8 +6,8 @@
 import { useApplicationState } from '../../../../../hooks/common/use-application-state'
 import { Logger } from '../../../../../utils/logger'
 import { useUiNotifications } from '../../../../notifications/ui-notification-boundary'
-import type { YDocMessageTransporter } from '@hedgedoc/realtime'
-import { MessageType } from '@hedgedoc/realtime'
+import type { YDocMessageTransporter } from '@hedgedoc/commons'
+import { MessageType } from '@hedgedoc/commons'
 import { useRouter } from 'next/router'
 import { useCallback, useEffect } from 'react'
 
@@ -35,9 +35,9 @@ export const useOnNoteDeleted = (websocketConnection: YDocMessageTransporter): v
   }, [router, noteTitle, dispatchUiNotification])
 
   useEffect(() => {
-    websocketConnection.on(MessageType.DOCUMENT_DELETED, noteDeletedHandler)
+    websocketConnection.on(String(MessageType.DOCUMENT_DELETED), noteDeletedHandler)
     return () => {
-      websocketConnection.off(MessageType.DOCUMENT_DELETED, noteDeletedHandler)
+      websocketConnection.off(String(MessageType.DOCUMENT_DELETED), noteDeletedHandler)
     }
   })
 }

frontend/src/components/editor-page/editor-pane/hooks/yjs/use-websocket-connection.ts

@@ -7,7 +7,7 @@ import { isMockMode } from '../../../../../utils/test-modes'
 import { MockConnection } from './mock-connection'
 import { useWebsocketUrl } from './use-websocket-url'
 import { WebsocketConnection } from './websocket-connection'
-import type { YDocMessageTransporter } from '@hedgedoc/realtime'
+import type { YDocMessageTransporter } from '@hedgedoc/commons'
 import { useEffect, useMemo } from 'react'
 import type { Awareness } from 'y-protocols/awareness'
 import type { Doc } from 'yjs'

frontend/src/components/editor-page/editor-pane/hooks/yjs/websocket-connection.ts

@@ -8,7 +8,7 @@ import {
   encodeCompleteAwarenessStateRequestMessage,
   encodeDocumentUpdateMessage,
   WebsocketTransporter
-} from '@hedgedoc/realtime'
+} from '@hedgedoc/commons'
 import WebSocket from 'isomorphic-ws'
 import type { Awareness } from 'y-protocols/awareness'
 import type { Doc } from 'yjs'