From 9abf6888aa0ad5d5dec0b18e38112211824df4e1 Mon Sep 17 00:00:00 2001
From: Anthony LC <anthony.le-courric@mail.numerique.gouv.fr>
Date: Mon, 14 Oct 2024 14:48:44 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8(frontend)=20reduce=20prop=20drilli?=
 =?UTF-8?q?ng=20thanks=20to=20doc=20store?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 .../features/docs/doc-editor/stores/useDocStore.tsx   | 11 +++++++++--
 .../apps/impress/src/pages/docs/[id]/index.tsx        | 10 ++++++++--
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/stores/useDocStore.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/stores/useDocStore.tsx
index ee575084..c75fe5ef 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-editor/stores/useDocStore.tsx
+++ b/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 });
+  },
 }));
diff --git a/src/frontend/apps/impress/src/pages/docs/[id]/index.tsx b/src/frontend/apps/impress/src/pages/docs/[id]/index.tsx
index f0fdf678..4690312a 100644
--- a/src/frontend/apps/impress/src/pages/docs/[id]/index.tsx
+++ b/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) {