fix: use uuid to identify each panel id and update namings of types

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<OpenSeadragon.Viewer>()
   const viewerId = 'viewer-' + panelId

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 <ErrorComponent message={error} />
 
   if (!loading && panels) {
-    openedPanels = panelIds.current.map((id, i: number) => (
-      <Panel panelId={id} key={i} />
+    openedPanels = panelIds.current.map((panelId, i: number) => (
+      <PanelProvider id={panelId} key={i}>
+        <Panel />
+      </PanelProvider>
     ))
   }
 

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

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<PanelProps> = ({ 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<boolean | string>(false)
@@ -22,15 +16,13 @@ const Panel: FC<PanelProps> = ({ panelId }) => {
   }
 
   return (
-    <PanelProvider id={panelId}>
-      <div className="panel t-flex t-flex-col t-w-[600px] t-mr-6 t-border-solid t-border-2 t-border-slate-200 t-rounded-lg t-mt-4 t-px-2.5 t-pt-8 t-pb-6">
-        <PanelTopBar />
-        <div className="t-flex t-flex-col t-items-center t-mb-6">
-          <ContentTypesToggle />
-        </div>
-        <PanelCentralContent />
+    <div className="panel t-flex t-flex-col t-w-[600px] t-mr-6 t-border-solid t-border-2 t-border-slate-200 t-rounded-lg t-mt-4 t-px-2.5 t-pt-8 t-pb-6">
+      <PanelTopBar />
+      <div className="t-flex t-flex-col t-items-center t-mb-6">
+        <ContentTypesToggle />
       </div>
-    </PanelProvider>
+      <PanelCentralContent />
+    </div>
   )
 }
 

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<HTMLButtonElement>,
     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',
       }}
     >
       <CustomHTML

src/components/panel/views/PanelCentralContent.tsx

@@ -15,16 +15,12 @@ import { request } from '@/utils/http'
 const PanelCentralContent: FC = () => {
   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<string>('')
-  const content = contentStore(
-    (state) => state.openedPanels[panelId].item.content
-  )
+  const content = contentStore((state) => state.panels[panelId].item.content)
 
   const [error, setError] = useState<boolean | string>(false)
 
@@ -54,13 +50,13 @@ const PanelCentralContent: FC = () => {
     return <ErrorComponent message={error} />
   }
 
-  if (textViewIndex === 0) {
+  if (viewIndex === 0) {
     return <TextViewOne textHtml={text} />
-  } else if (textViewIndex === 1) {
+  } else if (viewIndex === 1) {
     return <TextView textHtml={text} />
-  } else if (textViewIndex === 2) {
+  } else if (viewIndex === 2) {
     return <SplitView textHtml={text} />
-  } else if (textViewIndex === 3) {
+  } else if (viewIndex === 3) {
     return <ImageView />
   }
 }

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<ContentStoreTypes>((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<ContentStoreTypes>((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]
   },
 }))

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
   }