⚡️(app-impress) create pad store

Better to store the WebrtcProvider, we will
reuse the provider if one is already created.

src/frontend/apps/impress/.env.development

@@ -1 +1,2 @@
 NEXT_PUBLIC_API_URL=http://localhost:8071/api/v1.0/
+NEXT_PUBLIC_SIGNALING_URL=ws://localhost:4444

src/frontend/apps/impress/.env.production

@@ -1 +1,2 @@
 NEXT_PUBLIC_API_URL=https://desk-staging.beta.numerique.gouv.fr/api/v1.0/
+NEXT_PUBLIC_SIGNALING_URL=ws://localhost:4444

src/frontend/apps/impress/src/custom-next.d.ts

@@ -20,5 +20,6 @@ declare module '*.svg?url' {
 namespace NodeJS {
   interface ProcessEnv {
     NEXT_PUBLIC_API_URL?: string;
+    NEXT_PUBLIC_SIGNALING_URL?: string;
   }
 }

src/frontend/apps/impress/src/features/pads/pad/components/BlockNoteEditor.tsx

@@ -1,21 +1,37 @@
 import { BlockNoteView, useCreateBlockNote } from '@blocknote/react';
 import '@blocknote/react/style.css';
-import React from 'react';
+import React, { useCallback } from 'react';
-import { WebrtcProvider } from 'y-webrtc';
-import * as Y from 'yjs';
 
-const doc = new Y.Doc();
+import { useAuthStore } from '@/core/auth';
-const provider = new WebrtcProvider('my-document-id4', doc, {
+
-  signaling: ['ws://localhost:4444'],
+import { PadStore, usePadStore } from '../store';
-});
+import { Pad } from '../types';
+
+interface BlockNoteEditorProps {
+  pad: Pad;
+}
+
+export const BlockNoteEditor = ({ pad }: BlockNoteEditorProps) => {
+  const { userData } = useAuthStore();
+  const getProvider = useCallback(
+    (state: PadStore) => {
+      if (!state.providers[pad.id]) {
+        return state.createProvider(pad.id);
+      }
+
+      return state.providers[pad.id];
+    },
+    [pad.id],
+  );
+
+  const provider = usePadStore(getProvider);
 
-export const BlockNoteEditor = () => {
   const editor = useCreateBlockNote({
     collaboration: {
       provider,
-      fragment: doc.getXmlFragment('document-store'),
+      fragment: provider.doc.getXmlFragment('document-store'),
       user: {
-        name: 'My Username',
+        name: userData?.name || userData?.email || 'Anonymous',
         color: '#ff0000',
       },
     },

src/frontend/apps/impress/src/features/pads/pad/components/PadEditor.tsx

@@ -14,7 +14,7 @@ export const PadEditor = ({ pad }: PadEditorProps) => {
   return (
     <Card className="m-b p-b" $height="100%">
       <Text as="h2">{pad.name}</Text>
-      <BlockNoteEditor />
+      <BlockNoteEditor pad={pad} />
     </Card>
   );
 };

src/frontend/apps/impress/src/features/pads/pad/store/index.ts

@@ -0,0 +1 @@
+export * from './usePadStore';

src/frontend/apps/impress/src/features/pads/pad/store/usePadStore.tsx

@@ -0,0 +1,34 @@
+import { WebrtcProvider } from 'y-webrtc';
+import * as Y from 'yjs';
+import { create } from 'zustand';
+
+import { Pad } from '../types';
+
+export interface PadStore {
+  providers: { [padId: Pad['id']]: WebrtcProvider };
+  createProvider: (padId: Pad['id']) => WebrtcProvider;
+}
+
+const initialState = {
+  providers: {},
+};
+
+export const usePadStore = create<PadStore>((set) => ({
+  providers: initialState.providers,
+  createProvider: (padId: string) => {
+    const provider = new WebrtcProvider(padId, new Y.Doc(), {
+      signaling: [process.env.NEXT_PUBLIC_SIGNALING_URL || ''],
+    });
+
+    set(({ providers }) => {
+      return {
+        providers: {
+          ...providers,
+          [padId]: provider,
+        },
+      };
+    });
+
+    return provider;
+  },
+}));