♻️(frontend) simplify useDocStore

We moved the editor store to its own store in the previous
commit. This change allow us to simplify useDocStore.
This commit is contained in:
Anthony LC
2024-11-09 10:39:44 +01:00
committed by Anthony LC
parent a09e740648
commit e4dfae1905
5 changed files with 27 additions and 36 deletions

View File

@@ -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;

View File

@@ -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<DocStore>) => void;
setProviders: (storeId: string, providers: HocuspocusProvider) => void;
setCurrentDoc: (doc: Doc | undefined) => void;
}
export const useDocStore = create<UseDocStore>((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<UseDocStore>((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 });

View File

@@ -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({

View File

@@ -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) {