From 41f2406f1d61eb16c04fd542cc2acf1df2989ab9 Mon Sep 17 00:00:00 2001 From: orlinmalkja Date: Tue, 7 Jan 2025 18:20:21 +0100 Subject: [PATCH] fix: use uuid to identify each panel id and update namings of types --- src/components/OpenSeaDragonViewer.tsx | 4 +-- src/components/PanelsWrapper.tsx | 13 ++++--- src/components/panel/ContentTypesToggle.tsx | 4 +-- src/components/panel/Panel.tsx | 22 ++++-------- src/components/panel/TextViewsToggle.tsx | 10 +++--- .../panel/views/PanelCentralContent.tsx | 18 ++++------ src/store/ContentStore.tsx | 36 +++++++++---------- src/types.d.ts | 4 +-- 8 files changed, 49 insertions(+), 62 deletions(-) diff --git a/src/components/OpenSeaDragonViewer.tsx b/src/components/OpenSeaDragonViewer.tsx index 3dfc0c5c..e79ad10f 100644 --- a/src/components/OpenSeaDragonViewer.tsx +++ b/src/components/OpenSeaDragonViewer.tsx @@ -10,9 +10,7 @@ import ImageActionButtons from '@/components/ImageActionButtons' const OpenSeaDragonViewer: FC = () => { const { panelId } = usePanel() - const imageUrl = contentStore( - (state) => state.openedPanels[panelId].item.image?.id - ) + const imageUrl = contentStore((state) => state.panels[panelId].item.image?.id) const viewerRef = useRef() const viewerId = 'viewer-' + panelId diff --git a/src/components/PanelsWrapper.tsx b/src/components/PanelsWrapper.tsx index 6d934bdc..13ddb412 100644 --- a/src/components/PanelsWrapper.tsx +++ b/src/components/PanelsWrapper.tsx @@ -2,6 +2,7 @@ import { FC, useEffect, useRef, useState } from 'react' import { contentStore } from '@/store/ContentStore' import { useConfig } from '@/contexts/ConfigContext' +import { PanelProvider } from '@/contexts/PanelContext' import Panel from '@/components/panel/Panel' @@ -117,14 +118,14 @@ const PanelsWrapper: FC = () => { if (!itemData) continue const contentTypes: string[] = getContentTypes(itemData.content) - // id of PanelContent object - const panelId = 'panel-' + i + // unique id of PanelContent object + const panelId = crypto.randomUUID() panelIds.current.push(panelId) addPanelContent(panelId, { item: itemData, contentIndex: 0, - textViewIndex: 0, + viewIndex: 0, contentTypes: contentTypes, primaryColor: config.colors.primary, }) @@ -144,8 +145,10 @@ const PanelsWrapper: FC = () => { if (error) return if (!loading && panels) { - openedPanels = panelIds.current.map((id, i: number) => ( - + openedPanels = panelIds.current.map((panelId, i: number) => ( + + + )) } diff --git a/src/components/panel/ContentTypesToggle.tsx b/src/components/panel/ContentTypesToggle.tsx index 9f3e08a8..71a794c9 100644 --- a/src/components/panel/ContentTypesToggle.tsx +++ b/src/components/panel/ContentTypesToggle.tsx @@ -7,10 +7,10 @@ const ContentTypesToggle: FC = () => { const { panelId } = usePanel() const contentTypes = contentStore( - (state) => state.openedPanels[panelId].contentTypes + (state) => state.panels[panelId].contentTypes ) const activeContentTypeIndex = contentStore( - (state) => state.openedPanels[panelId].contentIndex + (state) => state.panels[panelId].contentIndex ) const updateContentToggleIndex = contentStore( (state) => state.updateContentToggleIndex diff --git a/src/components/panel/Panel.tsx b/src/components/panel/Panel.tsx index ec20e28c..eb0c75ac 100644 --- a/src/components/panel/Panel.tsx +++ b/src/components/panel/Panel.tsx @@ -1,18 +1,12 @@ import { FC, useState } from 'react' -import { PanelProvider } from '@/contexts/PanelContext' - import ContentTypesToggle from '@/components/panel/ContentTypesToggle' import PanelCentralContent from '@/components/panel/views/PanelCentralContent' import PanelTopBar from '@/components/panel/PanelTopBar' import ErrorComponent from '@/components/ErrorComponent' -interface PanelProps { - panelId: string -} - -const Panel: FC = ({ panelId }) => { +const Panel: FC = () => { // TODO: one should get a potential error regarding this panel from probably panels wrapper or a global state of error // and display the respective error component const [error] = useState(false) @@ -22,15 +16,13 @@ const Panel: FC = ({ panelId }) => { } return ( - -
- -
- -
- +
+ +
+
- + +
) } diff --git a/src/components/panel/TextViewsToggle.tsx b/src/components/panel/TextViewsToggle.tsx index 1011eb8f..b9270482 100644 --- a/src/components/panel/TextViewsToggle.tsx +++ b/src/components/panel/TextViewsToggle.tsx @@ -15,17 +15,15 @@ interface IconKeys { const TextViewsToggle: FC = () => { const { panelId } = usePanel() - const textViewIndex = contentStore( - (state) => state.openedPanels[panelId].textViewIndex - ) - const updateTextViewIndex = contentStore((state) => state.updateTextViewIndex) + const viewIndex = contentStore((state) => state.panels[panelId].viewIndex) + const updateViewIndex = contentStore((state) => state.updateViewIndex) function handleTextViewClick( e: MouseEvent, newIndex: number ) { e.preventDefault() - updateTextViewIndex(panelId, newIndex) + updateViewIndex(panelId, newIndex) } const textViewsIcons = { @@ -41,7 +39,7 @@ const TextViewsToggle: FC = () => { key={i} onClick={(e) => handleTextViewClick(e, i)} style={{ - backgroundColor: textViewIndex === i ? '#E5E7EB' : 'transparent', + backgroundColor: viewIndex === i ? '#E5E7EB' : 'transparent', }} > { const { panelId } = usePanel() - const textViewIndex = contentStore( - (state) => state.openedPanels[panelId].textViewIndex - ) + const viewIndex = contentStore((state) => state.panels[panelId].viewIndex) const activeContentTypeIndex = contentStore( - (state) => state.openedPanels[panelId].contentIndex + (state) => state.panels[panelId].contentIndex ) const [text, setText] = useState('') - const content = contentStore( - (state) => state.openedPanels[panelId].item.content - ) + const content = contentStore((state) => state.panels[panelId].item.content) const [error, setError] = useState(false) @@ -54,13 +50,13 @@ const PanelCentralContent: FC = () => { return } - if (textViewIndex === 0) { + if (viewIndex === 0) { return - } else if (textViewIndex === 1) { + } else if (viewIndex === 1) { return - } else if (textViewIndex === 2) { + } else if (viewIndex === 2) { return - } else if (textViewIndex === 3) { + } else if (viewIndex === 3) { return } } diff --git a/src/store/ContentStore.tsx b/src/store/ContentStore.tsx index 27af5322..ca2739bc 100644 --- a/src/store/ContentStore.tsx +++ b/src/store/ContentStore.tsx @@ -1,28 +1,28 @@ import { create } from 'zustand' -interface VisiblePanels { - [id: string]: PanelContentStore +interface PanelStates { + [id: string]: PanelState } interface ContentStoreTypes { - openedPanels: VisiblePanels // or panels: each panel has one opened item - addPanelContent: (id: string, newPanel: PanelContentStore) => void - updatePanels: (panelId: string, updatedItem: PanelContentStore) => void + panels: PanelStates // or panels: each panel has one opened item + addPanelContent: (id: string, newPanel: PanelState) => void + updatePanels: (panelId: string, updatedItem: PanelState) => void updateContentToggleIndex: ( panelIndex: string, newContentIndex: number ) => void - updateTextViewIndex: (panelId: string, newTextIndex: number) => void - getPanel: (panelId: string) => PanelContentStore | null + updateViewIndex: (panelId: string, newViewIndex: number) => void + getPanel: (panelId: string) => PanelState | null } export const contentStore = create((set, get) => ({ - openedPanels: {}, + panels: {}, - addPanelContent: (id: string, newPanel: PanelContentStore) => { - const newPanels = { ...get().openedPanels } + addPanelContent: (id: string, newPanel: PanelState) => { + const newPanels = { ...get().panels } newPanels[id] = newPanel - set({ openedPanels: newPanels }) + set({ panels: newPanels }) }, updateContentToggleIndex: (panelId: string, newContentIndex: number) => { @@ -33,22 +33,22 @@ export const contentStore = create((set, get) => ({ get().updatePanels(panelId, panel) }, - updateTextViewIndex: (panelId: string, newTextViewIndex: number) => { + updateViewIndex: (panelId: string, newViewIndex: number) => { const panel = get().getPanel(panelId) if (!panel) return // TODO: add error handling - panel.textViewIndex = newTextViewIndex + panel.viewIndex = newViewIndex get().updatePanels(panelId, panel) }, - updatePanels: (panelId: string, updatedPanel: PanelContentStore) => { - const newPanels = { ...get().openedPanels } + updatePanels: (panelId: string, updatedPanel: PanelState) => { + const newPanels = { ...get().panels } newPanels[panelId] = updatedPanel - set({ openedPanels: newPanels }) + set({ panels: newPanels }) }, getPanel: (panelId: string) => { - if (!(panelId in get().openedPanels)) return null - return get().openedPanels[panelId] + if (!(panelId in get().panels)) return null + return get().panels[panelId] }, })) diff --git a/src/types.d.ts b/src/types.d.ts index 34ea0b25..46fc45bf 100644 --- a/src/types.d.ts +++ b/src/types.d.ts @@ -136,12 +136,12 @@ declare global { modules?: Module[] } - interface PanelContentStore { + interface PanelState { item: Item texts?: string[] contentTypes?: string[] contentIndex: number - textViewIndex: number + viewIndex: number imageUrl?: string primaryColor: string }