From 542cf7d6f286f1cf6054f5833cabdce6bbf5b5dc Mon Sep 17 00:00:00 2001 From: Anthony LC Date: Sat, 26 Oct 2024 22:04:56 +0200 Subject: [PATCH 1/2] =?UTF-8?q?=E2=99=BB=EF=B8=8F(frontend)=20move=20edito?= =?UTF-8?q?r=20store=20to=20useEditorStore?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Previous changes migrated the editor store to doc-management, we move it back doc-editor and simplify it. --- .../doc-editor/components/BlockNoteEditor.tsx | 17 ++++++++++------- .../docs/doc-editor/components/PanelEditor.tsx | 4 +--- .../features/docs/doc-editor/stores/index.ts | 1 + .../docs/doc-editor/stores/useEditorStore.tsx | 14 ++++++++++++++ .../docs/doc-header/components/DocToolBox.tsx | 12 ++++++------ .../docs/doc-header/components/ModalExport.tsx | 7 +++---- .../docs/doc-management/stores/useDocStore.tsx | 2 -- .../components/TableContent.tsx | 9 +++------ .../doc-versioning/components/ModalVersion.tsx | 6 +----- 9 files changed, 39 insertions(+), 33 deletions(-) create mode 100644 src/frontend/apps/impress/src/features/docs/doc-editor/stores/useEditorStore.tsx diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx index 3c1a9527d..54ec994f1 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx @@ -11,11 +11,11 @@ import { useTranslation } from 'react-i18next'; import { Box, TextErrors } from '@/components'; import { mediaUrl } from '@/core'; import { useAuthStore } from '@/core/auth'; -import { Doc, useDocStore } from '@/features/docs/doc-management'; +import { Doc } from '@/features/docs/doc-management'; import { useCreateDocAttachment } from '../api/useCreateDocUpload'; import useSaveDoc from '../hook/useSaveDoc'; -import { useHeadingStore } from '../stores'; +import { useEditorStore, useHeadingStore } from '../stores'; import { randomColor } from '../utils'; import { BlockNoteToolbar } from './BlockNoteToolbar'; @@ -86,11 +86,10 @@ export const BlockNoteEditor = ({ }: BlockNoteEditorProps) => { const isVersion = doc.id !== storeId; const { userData } = useAuthStore(); - const { setStore, docsStore } = useDocStore(); + const { setEditor } = useEditorStore(); const readOnly = !doc.abilities.partial_update || isVersion; useSaveDoc(doc.id, provider.document, !readOnly); - const storedEditor = docsStore?.[storeId]?.editor; const { mutateAsync: createDocAttachment, isError: isErrorAttachment, @@ -132,8 +131,12 @@ export const BlockNoteEditor = ({ ); useEffect(() => { - setStore(storeId, { editor }); - }, [setStore, storeId, editor]); + setEditor(editor); + + return () => { + setEditor(undefined); + }; + }, [setEditor, editor]); useEffect(() => { setHeadings(editor); @@ -160,7 +163,7 @@ export const BlockNoteEditor = ({ )} )} - {isPanelTableContentOpen && ( - - )} + {isPanelTableContentOpen && } {!isPanelTableContentOpen && doc.abilities.versions_list && ( )} diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/stores/index.ts b/src/frontend/apps/impress/src/features/docs/doc-editor/stores/index.ts index 71a6b7650..499405d49 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-editor/stores/index.ts +++ b/src/frontend/apps/impress/src/features/docs/doc-editor/stores/index.ts @@ -1,2 +1,3 @@ +export * from './useEditorStore'; export * from './useHeadingStore'; export * from './usePanelEditorStore'; diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/stores/useEditorStore.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/stores/useEditorStore.tsx new file mode 100644 index 000000000..025f2ad8e --- /dev/null +++ b/src/frontend/apps/impress/src/features/docs/doc-editor/stores/useEditorStore.tsx @@ -0,0 +1,14 @@ +import { BlockNoteEditor } from '@blocknote/core'; +import { create } from 'zustand'; + +export interface UseEditorstore { + editor?: BlockNoteEditor; + setEditor: (editor: BlockNoteEditor | undefined) => void; +} + +export const useEditorStore = create((set) => ({ + editor: undefined, + setEditor: (editor) => { + set({ editor }); + }, +})); diff --git a/src/frontend/apps/impress/src/features/docs/doc-header/components/DocToolBox.tsx b/src/frontend/apps/impress/src/features/docs/doc-header/components/DocToolBox.tsx index 6095a102f..47bf9b787 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-header/components/DocToolBox.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-header/components/DocToolBox.tsx @@ -8,17 +8,18 @@ import { useTranslation } from 'react-i18next'; import { Box, DropButton, IconOptions } from '@/components'; import { useAuthStore } from '@/core'; -import { usePanelEditorStore } from '@/features/docs/doc-editor/'; +import { + useEditorStore, + usePanelEditorStore, +} from '@/features/docs/doc-editor/'; import { Doc, ModalRemoveDoc, ModalShare, - useDocStore, } from '@/features/docs/doc-management'; +import { ModalVersion, Versions } from '@/features/docs/doc-versioning'; import { useResponsiveStore } from '@/stores'; -import { ModalVersion, Versions } from '../../doc-versioning'; - import { ModalPDF } from './ModalExport'; interface DocToolBoxProps { @@ -36,13 +37,12 @@ export const DocToolBox = ({ doc, versionId }: DocToolBoxProps) => { const [isModalVersionOpen, setIsModalVersionOpen] = useState(false); const { isSmallMobile } = useResponsiveStore(); const { authenticated } = useAuthStore(); - const { docsStore } = useDocStore(); + const { editor } = useEditorStore(); const { toast } = useToastProvider(); const copyCurrentEditorToClipboard = async ( asFormat: 'html' | 'markdown', ) => { - const editor = docsStore[doc.id]?.editor; if (!editor) { toast(t('Editor unavailable'), VariantType.ERROR, { duration: 3000 }); return; diff --git a/src/frontend/apps/impress/src/features/docs/doc-header/components/ModalExport.tsx b/src/frontend/apps/impress/src/features/docs/doc-header/components/ModalExport.tsx index c22dc1512..b4507f8e1 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-header/components/ModalExport.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-header/components/ModalExport.tsx @@ -14,7 +14,8 @@ import { t } from 'i18next'; import { useEffect, useMemo, useState } from 'react'; import { Box, Text } from '@/components'; -import { Doc, useDocStore } from '@/features/docs/doc-management'; +import { useEditorStore } from '@/features/docs/doc-editor'; +import { Doc } from '@/features/docs/doc-management'; import { useExport } from '../api/useExport'; import { TemplatesOrdering, useTemplates } from '../api/useTemplates'; @@ -30,7 +31,7 @@ export const ModalPDF = ({ onClose, doc }: ModalPDFProps) => { ordering: TemplatesOrdering.BY_CREATED_ON_DESC, }); const { toast } = useToastProvider(); - const { docsStore } = useDocStore(); + const { editor } = useEditorStore(); const { mutate: createExport, data: documentGenerated, @@ -103,8 +104,6 @@ export const ModalPDF = ({ onClose, doc }: ModalPDFProps) => { return; } - const editor = docsStore[doc.id].editor; - if (!editor) { toast(t('No editor found'), VariantType.ERROR); return; diff --git a/src/frontend/apps/impress/src/features/docs/doc-management/stores/useDocStore.tsx b/src/frontend/apps/impress/src/features/docs/doc-management/stores/useDocStore.tsx index 8d38fb561..2461d0aa5 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-management/stores/useDocStore.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-management/stores/useDocStore.tsx @@ -1,4 +1,3 @@ -import { BlockNoteEditor } from '@blocknote/core'; import { HocuspocusProvider } from '@hocuspocus/provider'; import * as Y from 'yjs'; import { create } from 'zustand'; @@ -8,7 +7,6 @@ import { Base64, Doc, blocksToYDoc } from '@/features/docs/doc-management'; interface DocStore { provider: HocuspocusProvider; - editor?: BlockNoteEditor; } export interface UseDocStore { diff --git a/src/frontend/apps/impress/src/features/docs/doc-table-content/components/TableContent.tsx b/src/frontend/apps/impress/src/features/docs/doc-table-content/components/TableContent.tsx index f97400303..f765eb799 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-table-content/components/TableContent.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-table-content/components/TableContent.tsx @@ -2,22 +2,19 @@ import React, { useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { Box, BoxButton, Text } from '@/components'; -import { HeadingBlock } from '@/features/docs/doc-editor'; -import { Doc, useDocStore } from '@/features/docs/doc-management'; +import { HeadingBlock, useEditorStore } from '@/features/docs/doc-editor'; import { useResponsiveStore } from '@/stores'; import { Heading } from './Heading'; interface TableContentProps { - doc: Doc; headings: HeadingBlock[]; } -export const TableContent = ({ doc, headings }: TableContentProps) => { - const { docsStore } = useDocStore(); +export const TableContent = ({ headings }: TableContentProps) => { + const { editor } = useEditorStore(); const { isMobile } = useResponsiveStore(); const { t } = useTranslation(); - const editor = docsStore?.[doc.id]?.editor; const [headingIdHighlight, setHeadingIdHighlight] = useState(); // To highlight the first heading in the viewport diff --git a/src/frontend/apps/impress/src/features/docs/doc-versioning/components/ModalVersion.tsx b/src/frontend/apps/impress/src/features/docs/doc-versioning/components/ModalVersion.tsx index bc7a0d9b0..5ca10764c 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-versioning/components/ModalVersion.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-versioning/components/ModalVersion.tsx @@ -32,7 +32,7 @@ export const ModalVersion = ({ }: ModalVersionProps) => { const { toast } = useToastProvider(); const router = useRouter(); - const { docsStore, setStore } = useDocStore(); + const { docsStore } = useDocStore(); const { mutate: updateDoc } = useUpdateDoc({ listInvalideQueries: [KEY_LIST_DOC_VERSIONS], onSuccess: () => { @@ -46,10 +46,6 @@ export const ModalVersion = ({ return; } - setStore(docId, { - editor: undefined, - }); - revertUpdate( docsStore[docId].provider.document, docsStore[docId].provider.document, From b51153678a10cea965358e719536b82277d3eb23 Mon Sep 17 00:00:00 2001 From: Anthony LC Date: Sat, 9 Nov 2024 10:39:44 +0100 Subject: [PATCH 2/2] =?UTF-8?q?=E2=99=BB=EF=B8=8F(frontend)=20simplify=20u?= =?UTF-8?q?seDocStore?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit We moved the editor store to its own store in the previous commit. This change allow us to simplify useDocStore. --- CHANGELOG.md | 1 + .../docs/doc-editor/components/DocEditor.tsx | 12 +++---- .../doc-management/stores/useDocStore.tsx | 34 +++++++------------ .../components/ModalVersion.tsx | 12 +++---- .../impress/src/pages/docs/[id]/index.tsx | 4 +-- 5 files changed, 27 insertions(+), 36 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 195092b34..d0d1d22a0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -18,6 +18,7 @@ and this project adheres to - 🚸(backend) improve users similarity search and sort results #391 - 🌐(backend) add german translation #259 +- ♻️(frontend) simplify stores #402 ## Fixed diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/DocEditor.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/DocEditor.tsx index 902b27924..b40e26e76 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/DocEditor.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/DocEditor.tsx @@ -32,8 +32,8 @@ export const DocEditor = ({ doc }: DocEditorProps) => { const { colorsTokens } = useCunninghamTheme(); - const { docsStore } = useDocStore(); - const provider = docsStore?.[doc.id]?.provider; + const { providers } = useDocStore(); + const provider = providers?.[doc.id]; if (!provider) { return null; @@ -98,7 +98,7 @@ export const DocVersionEditor = ({ doc, versionId }: DocVersionEditorProps) => { docId: doc.id, versionId, }); - const { createProvider, docsStore } = useDocStore(); + const { createProvider, providers } = useDocStore(); const navigate = useNavigate(); @@ -107,11 +107,11 @@ export const DocVersionEditor = ({ doc, versionId }: DocVersionEditorProps) => { return; } - const provider = docsStore?.[version.id]?.provider; + const provider = providers?.[version.id]; if (!provider || provider.document.guid !== version.id) { createProvider(version.id, version.content); } - }, [createProvider, docsStore, version]); + }, [createProvider, providers, version]); if (isError && error) { if (error.status === 404) { @@ -143,7 +143,7 @@ export const DocVersionEditor = ({ doc, versionId }: DocVersionEditorProps) => { ); } - const provider = docsStore?.[version.id]?.provider; + const provider = providers?.[version.id]; if (!provider) { return null; diff --git a/src/frontend/apps/impress/src/features/docs/doc-management/stores/useDocStore.tsx b/src/frontend/apps/impress/src/features/docs/doc-management/stores/useDocStore.tsx index 2461d0aa5..3bc2a95cf 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-management/stores/useDocStore.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-management/stores/useDocStore.tsx @@ -5,23 +5,19 @@ import { create } from 'zustand'; import { providerUrl } from '@/core'; import { Base64, Doc, blocksToYDoc } from '@/features/docs/doc-management'; -interface DocStore { - provider: HocuspocusProvider; -} - export interface UseDocStore { currentDoc?: Doc; - docsStore: { - [storeId: string]: DocStore; + providers: { + [storeId: string]: HocuspocusProvider; }; createProvider: (storeId: string, initialDoc: Base64) => HocuspocusProvider; - setStore: (storeId: string, props: Partial) => void; + setProviders: (storeId: string, providers: HocuspocusProvider) => void; setCurrentDoc: (doc: Doc | undefined) => void; } export const useDocStore = create((set, get) => ({ currentDoc: undefined, - docsStore: {}, + providers: {}, createProvider: (storeId: string, initialDoc: Base64) => { const doc = new Y.Doc({ guid: storeId, @@ -46,23 +42,17 @@ export const useDocStore = create((set, get) => ({ document: doc, }); - get().setStore(storeId, { provider }); + get().setProviders(storeId, provider); return provider; }, - setStore: (storeId, props) => { - set(({ docsStore }, ...store) => { - return { - ...store, - docsStore: { - ...docsStore, - [storeId]: { - ...docsStore[storeId], - ...props, - }, - }, - }; - }); + setProviders: (storeId, provider) => { + set(({ providers }) => ({ + providers: { + ...providers, + [storeId]: provider, + }, + })); }, setCurrentDoc: (doc) => { set({ currentDoc: doc }); diff --git a/src/frontend/apps/impress/src/features/docs/doc-versioning/components/ModalVersion.tsx b/src/frontend/apps/impress/src/features/docs/doc-versioning/components/ModalVersion.tsx index 5ca10764c..97f3fb43b 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-versioning/components/ModalVersion.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-versioning/components/ModalVersion.tsx @@ -32,7 +32,7 @@ export const ModalVersion = ({ }: ModalVersionProps) => { const { toast } = useToastProvider(); const router = useRouter(); - const { docsStore } = useDocStore(); + const { providers } = useDocStore(); const { mutate: updateDoc } = useUpdateDoc({ listInvalideQueries: [KEY_LIST_DOC_VERSIONS], onSuccess: () => { @@ -41,15 +41,15 @@ export const ModalVersion = ({ router.push(`/docs/${docId}`); }; - if (!docsStore?.[docId]?.provider || !docsStore?.[versionId]?.provider) { + if (!providers?.[docId] || !providers?.[versionId]) { onDisplaySuccess(); return; } revertUpdate( - docsStore[docId].provider.document, - docsStore[docId].provider.document, - docsStore[versionId].provider.document, + providers[docId].document, + providers[docId].document, + providers[versionId].document, ); onDisplaySuccess(); @@ -79,7 +79,7 @@ export const ModalVersion = ({ fullWidth onClick={() => { const newDoc = toBase64( - Y.encodeStateAsUpdate(docsStore?.[versionId]?.provider.document), + Y.encodeStateAsUpdate(providers?.[versionId].document), ); updateDoc({ 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 b9d73257f..24eda8b74 100644 --- a/src/frontend/apps/impress/src/pages/docs/[id]/index.tsx +++ b/src/frontend/apps/impress/src/pages/docs/[id]/index.tsx @@ -43,11 +43,11 @@ const DocPage = ({ id }: DocProps) => { const { login } = useAuthStore(); const { data: docQuery, isError, error } = useDoc({ id }); const [doc, setDoc] = useState(docQuery); - const { setCurrentDoc, createProvider, docsStore } = useDocStore(); + const { setCurrentDoc, createProvider, providers } = useDocStore(); const { setBroadcastProvider, addTask } = useBroadcastStore(); const queryClient = useQueryClient(); const navigate = useNavigate(); - const provider = docsStore?.[id]?.provider; + const provider = providers?.[id]; useEffect(() => { if (doc?.title) {