🎨(frontend) reduce prop drilling thanks to doc store

We start to have a deep prop drilling with doc,
time to use the doc store to reduce that.
We still prefer to pass the doc as a prop to
keep our component as "pure" as possible, but if
the drilling is too deep, better
to use the doc store.

Author: AntoLC

src/frontend/apps/impress/src/features/docs/doc-editor/stores/useDocStore.tsx

@@ -4,7 +4,7 @@ import * as Y from 'yjs';
 import { create } from 'zustand';
 
 import { providerUrl } from '@/core';
-import { Base64 } from '@/features/docs/doc-management';
+import { Base64, Doc } from '@/features/docs/doc-management';
 
 import { blocksToYDoc } from '../utils';
 
@@ -14,14 +14,17 @@ interface DocStore {
 }
 
 export interface UseDocStore {
+  currentDoc?: Doc;
   docsStore: {
     [storeId: string]: DocStore;
   };
   createProvider: (storeId: string, initialDoc: Base64) => HocuspocusProvider;
   setStore: (storeId: string, props: Partial<DocStore>) => void;
+  setCurrentDoc: (doc: Doc | undefined) => void;
 }
 
 export const useDocStore = create<UseDocStore>((set, get) => ({
+  currentDoc: undefined,
   docsStore: {},
   createProvider: (storeId: string, initialDoc: Base64) => {
     const doc = new Y.Doc({
@@ -52,8 +55,9 @@ export const useDocStore = create<UseDocStore>((set, get) => ({
     return provider;
   },
   setStore: (storeId, props) => {
-    set(({ docsStore }) => {
+    set(({ docsStore }, ...store) => {
       return {
+        ...store,
         docsStore: {
           ...docsStore,
           [storeId]: {
@@ -64,4 +68,7 @@ export const useDocStore = create<UseDocStore>((set, get) => ({
       };
     });
   },
+  setCurrentDoc: (doc) => {
+    set({ currentDoc: doc });
+  },
 }));

src/frontend/apps/impress/src/pages/docs/[id]/index.tsx

@@ -6,7 +6,7 @@ import { useEffect, useState } from 'react';
 import { Box, Text } from '@/components';
 import { TextErrors } from '@/components/TextErrors';
 import { useAuthStore } from '@/core/auth';
-import { DocEditor } from '@/features/docs';
+import { DocEditor, useDocStore } from '@/features/docs';
 import { useDoc } from '@/features/docs/doc-management';
 import { MainLayout } from '@/layouts';
 import { NextPageWithLayout } from '@/types/next';
@@ -35,6 +35,7 @@ const DocPage = ({ id }: DocProps) => {
   const { login } = useAuthStore();
   const { data: docQuery, isError, error } = useDoc({ id });
   const [doc, setDoc] = useState(docQuery);
+  const { setCurrentDoc } = useDocStore();
 
   const navigate = useNavigate();
 
@@ -52,7 +53,12 @@ const DocPage = ({ id }: DocProps) => {
     }
 
     setDoc(docQuery);
-  }, [docQuery]);
+    setCurrentDoc(docQuery);
+
+    return () => {
+      setCurrentDoc(undefined);
+    };
+  }, [docQuery, setCurrentDoc]);
 
   if (isError && error) {
     if (error.status === 404) {