From 910f902ef1f77fafe2bc3b5ea4a0c7cf734b14e0 Mon Sep 17 00:00:00 2001
From: orlinmalkja <orlin.malkja@sub.uni-goettingen.de>
Date: Mon, 6 Jan 2025 18:03:42 +0100
Subject: [PATCH] style: remove eslint errors

---
 index.html                                    |  9 ++++++++
 src/components/ImageActionButtons.tsx         | 10 ++++-----
 src/components/OpenSeaDragonViewer.tsx        | 22 +++++++++----------
 src/components/PanelsWrapper.tsx              |  2 +-
 src/components/PopoverTree.tsx                |  0
 src/components/panel/PanelTopBar.tsx          | 20 ++++++++---------
 src/components/panel/TextViewsToggle.tsx      | 18 +++++++--------
 .../panel/central-content/ImageView.tsx       | 14 ++++++------
 .../central-content/PanelCentralContent.tsx   | 18 +++++++--------
 .../panel/central-content/SplitView.tsx       | 14 ++++++------
 .../panel/central-content/TextView.tsx        | 10 ++++-----
 .../panel/central-content/TextViewOne.tsx     | 10 ++++-----
 src/components/ui/popover.tsx                 | 10 ++++-----
 src/lib/utils.ts                              |  6 ++---
 src/store/ContentStore.tsx                    | 12 +++++-----
 src/utils/panel.tsx                           |  2 +-
 16 files changed, 93 insertions(+), 84 deletions(-)
 create mode 100644 src/components/PopoverTree.tsx

diff --git a/index.html b/index.html
index 72e1acca..38d97c3e 100644
--- a/index.html
+++ b/index.html
@@ -38,6 +38,15 @@
           colors: {
             primary: '#1E40AF'
           }
+        },
+        { 
+          entrypoint: {
+            url: 'https://api.ahiqar.sub.uni-goettingen.de/textapi/ahiqar/arabic-karshuni/collection.json',
+            type: 'collection'
+          },
+          colors: {
+            primary: 'green'
+          }
         }
       ],
       }
diff --git a/src/components/ImageActionButtons.tsx b/src/components/ImageActionButtons.tsx
index e65ed512..24939b23 100644
--- a/src/components/ImageActionButtons.tsx
+++ b/src/components/ImageActionButtons.tsx
@@ -14,7 +14,7 @@ interface ImageActions {
     tooltip: string
 }
 
-const ImageActionButtons: FC<ImageActionButtonsProps> = ({primaryColor, panelId}) => {
+const ImageActionButtons: FC<ImageActionButtonsProps> = ({ primaryColor, panelId }) => {
     
 const actions: ImageActions[] = [
     {
@@ -46,15 +46,15 @@ const actionButtons =
         <button
             className="t-p-2 t-rounded hover:t-rounded-full hover:t-bg-gray-100 t-mr-1 t-w-8 t-h-8"
             key={i}
-            id = {action.id}
+            id={action.id}
             title={action.tooltip}
             >
-                <div className="t-flex t-items-center t-justify-center" style={{color: primaryColor}}>
-                    <CustomHTML textHtml={action.icon} width='100%' icon={{type:'icon', width:4, height:3}} />
+                <div className="t-flex t-items-center t-justify-center" style={{ color: primaryColor }}>
+                    <CustomHTML textHtml={action.icon} width='100%' icon={{ type:'icon', width:4, height:3 }} />
                 </div>
 
         </button>
-      ));
+      ))
 
   return (
     <div className="t-flex t-items-center t-justify-center image-action-buttons t-mb-1">
diff --git a/src/components/OpenSeaDragonViewer.tsx b/src/components/OpenSeaDragonViewer.tsx
index a6bff8f2..e8465022 100644
--- a/src/components/OpenSeaDragonViewer.tsx
+++ b/src/components/OpenSeaDragonViewer.tsx
@@ -1,5 +1,5 @@
-import React,{ useEffect, useRef, FC } from 'react';
-import OpenSeadragon from 'openseadragon';
+import React,{ useEffect, useRef, FC } from 'react'
+import OpenSeadragon from 'openseadragon'
 
 import ImageActionButtons from '@/components/ImageActionButtons'
 
@@ -9,8 +9,8 @@ interface OpenSeaDragonViewerProps {
   panelId: string
 }
 
-const OpenSeaDragonViewer: FC<OpenSeaDragonViewerProps> = ({imageUrl, primaryColor, panelId}) => {
-  const viewerRef = useRef<OpenSeadragon.Viewer>();
+const OpenSeaDragonViewer: FC<OpenSeaDragonViewerProps> = ({ imageUrl, primaryColor, panelId }) => {
+  const viewerRef = useRef<OpenSeadragon.Viewer>()
   const viewerId = 'viewer-' + panelId
 
   useEffect(() => {
@@ -25,19 +25,19 @@ const OpenSeaDragonViewer: FC<OpenSeaDragonViewerProps> = ({imageUrl, primaryCol
       zoomOutButton: 'zoom-out-' + panelId,
       fullPageButton: 'full-screen-' + panelId,
       homeButton: 'exit-full-screen-' + panelId
-    });
+    })
 
-    viewerRef.current = viewer;
+    viewerRef.current = viewer
 
     return () => {
-      viewerRef.current?.destroy();
-    };
-  }, []);
+      viewerRef.current?.destroy()
+    }
+  }, [])
   return (
       <div>
           <ImageActionButtons primaryColor={primaryColor} panelId={panelId}/>
           <div id={viewerId} style={{ width: '100%', height: '500px' }} />
       </div>
     )
-};
-export default OpenSeaDragonViewer;
\ No newline at end of file
+}
+export default OpenSeaDragonViewer
\ No newline at end of file
diff --git a/src/components/PanelsWrapper.tsx b/src/components/PanelsWrapper.tsx
index 4d4c0692..18e6bd13 100644
--- a/src/components/PanelsWrapper.tsx
+++ b/src/components/PanelsWrapper.tsx
@@ -126,7 +126,7 @@ const PanelsWrapper: FC = () => {
     initData(panels)
   }, [])
   
-  let loadingEl = <div> Loading data ... Please wait a sec</div>
+  const loadingEl = <div> Loading data ... Please wait a sec</div>
   let openedPanels = null
 
   if (!loading && panels) {
diff --git a/src/components/PopoverTree.tsx b/src/components/PopoverTree.tsx
new file mode 100644
index 00000000..e69de29b
diff --git a/src/components/panel/PanelTopBar.tsx b/src/components/panel/PanelTopBar.tsx
index b5fe66ad..843a41c3 100644
--- a/src/components/panel/PanelTopBar.tsx
+++ b/src/components/panel/PanelTopBar.tsx
@@ -1,25 +1,25 @@
-import { FC } from 'react';
+import { FC } from 'react'
 
-import TextViewsToggle from '@/components/panel/TextViewsToggle';
-import CustomHTML from '@/components/CustomHTML';
+import TextViewsToggle from '@/components/panel/TextViewsToggle'
+import CustomHTML from '@/components/CustomHTML'
 import { tree } from '@/utils/icons'
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from "@/components/ui/popover"
+} from '@/components/ui/popover'
 
 interface PanelTopBarProps {
     panelId: string
 }
 
-const PanelTopBar: FC <PanelTopBarProps>= ({panelId}) => {
+const PanelTopBar: FC <PanelTopBarProps>= ({ panelId }) => {
 
   return (
     <div className="panel-top-bar t-mb-6 t-flex">
       <Popover>
         <PopoverTrigger className="open-tree-button t-h-8 t-w-10 t-relative">
-            <CustomHTML textHtml={tree} icon={{type: 'icon', width:6, height: 6}} />
+            <CustomHTML textHtml={tree} icon={{ type: 'icon', width:6, height: 6 }} />
         </PopoverTrigger>
           <PopoverContent className="t-bg-white t-absolute t-z-10">
               <div className="t-flex t-flex-col t-pt-4 t-pl-3 t-w-80 t-shadow-md t-border-[1px] t-border-solid t-border-gray-300 t-rounded-md">
@@ -34,9 +34,9 @@ const PanelTopBar: FC <PanelTopBarProps>= ({panelId}) => {
           </PopoverContent>
       </Popover>
       
-      <TextViewsToggle panelId = {panelId} />
+      <TextViewsToggle panelId={panelId} />
     </div>
-  );
-};
+  )
+}
 
-export default PanelTopBar;
\ No newline at end of file
+export default PanelTopBar
\ No newline at end of file
diff --git a/src/components/panel/TextViewsToggle.tsx b/src/components/panel/TextViewsToggle.tsx
index 53bcae4f..9b8e23ec 100644
--- a/src/components/panel/TextViewsToggle.tsx
+++ b/src/components/panel/TextViewsToggle.tsx
@@ -1,6 +1,6 @@
-import { FC, MouseEvent } from 'react';
+import { FC, MouseEvent } from 'react'
 import { textViewOne, textView, splitView, imageView } from '@/utils/icons'
-import CustomHTML from '@/components/CustomHTML';
+import CustomHTML from '@/components/CustomHTML'
 
 import { contentStore } from '@/store/ContentStore'
 
@@ -15,7 +15,7 @@ interface IconKeys {
   image: string
 }  
 
-const TextViewsToggle: FC <TextViewsToggleProps>= ({panelId}) => {
+const TextViewsToggle: FC <TextViewsToggleProps>= ({ panelId }) => {
     const textViewIndex = contentStore(state => state.openedPanels[panelId].textViewIndex)
     const updateTextViewIndex = contentStore(state => state.updateTextViewIndex)
 
@@ -38,17 +38,17 @@ const TextViewsToggle: FC <TextViewsToggleProps>= ({panelId}) => {
             className="t-px-1 t-py-1 t-w-7 t-h-7  t-rounded t-mr-3"
             key={i}
             onClick={(e) => handleTextViewClick(e, i)}
-            style={{'backgroundColor':(textViewIndex === i) ? '#E5E7EB': 'transparent'}}
+            style={{ 'backgroundColor':(textViewIndex === i) ? '#E5E7EB': 'transparent' }}
         >
-            <CustomHTML textHtml={textViewsIcons[title as keyof IconKeys]} icon={{type:'icon', width: 3, height:2}} />
+            <CustomHTML textHtml={textViewsIcons[title as keyof IconKeys]} icon={{ type:'icon', width: 3, height:2 }} />
         </button>
-    ));
+    ))
 
   return (
     <div className="text-views-toggle t-flex t-row t-ml-[40%] t-p-1 t-rounded-md t-h-8">
       {buttons}
     </div>
-  );
-};
+  )
+}
 
-export default TextViewsToggle;
\ No newline at end of file
+export default TextViewsToggle
\ No newline at end of file
diff --git a/src/components/panel/central-content/ImageView.tsx b/src/components/panel/central-content/ImageView.tsx
index 78f8b854..bcd359f0 100644
--- a/src/components/panel/central-content/ImageView.tsx
+++ b/src/components/panel/central-content/ImageView.tsx
@@ -1,5 +1,5 @@
-import { FC } from 'react';
-import OpenSeaDragonViewer from '@/components/OpenSeaDragonViewer';
+import { FC } from 'react'
+import OpenSeaDragonViewer from '@/components/OpenSeaDragonViewer'
 
 import { contentStore } from '@/store/ContentStore'
 
@@ -8,17 +8,17 @@ interface ImageViewProps {
   panelId: string
 }
 
-const ImageView: FC<ImageViewProps> = ({imageUrl, panelId}) => {
+const ImageView: FC<ImageViewProps> = ({ imageUrl, panelId }) => {
 
   const primaryColor = contentStore(state => state.openedPanels[panelId].primaryColor)
 
   return (
     <div className="">
         <div className="t-flex t-flex-col">
-            <OpenSeaDragonViewer imageUrl= {imageUrl} primaryColor={primaryColor} panelId={panelId} />
+            <OpenSeaDragonViewer imageUrl={imageUrl} primaryColor={primaryColor} panelId={panelId} />
         </div>
     </div>
-  );
-};
+  )
+}
 
-export default ImageView;
\ No newline at end of file
+export default ImageView
\ No newline at end of file
diff --git a/src/components/panel/central-content/PanelCentralContent.tsx b/src/components/panel/central-content/PanelCentralContent.tsx
index 285a9308..5b7069b0 100644
--- a/src/components/panel/central-content/PanelCentralContent.tsx
+++ b/src/components/panel/central-content/PanelCentralContent.tsx
@@ -1,10 +1,10 @@
-import { FC, useEffect, useState } from 'react';
+import { FC, useEffect, useState } from 'react'
 
 import { contentStore } from '@/store/ContentStore'
 
-import TextViewOne from '@/components/panel/central-content/TextViewOne';
+import TextViewOne from '@/components/panel/central-content/TextViewOne'
 import TextView from '@/components/panel/central-content/TextView'
-import SplitView from '@/components/panel/central-content/SplitView';
+import SplitView from '@/components/panel/central-content/SplitView'
 import ImageView from '@/components/panel/central-content/ImageView'
 
 import ErrorComponent from '@/components/ErrorComponent'
@@ -40,7 +40,7 @@ const PanelCentralContent: FC<PanelCentralContentProps> = ({ panelId }) => {
         setText(response.data)
     }
     
-    let contentUrl = content[activeContentTypeIndex].url ?? null
+    const contentUrl = content[activeContentTypeIndex].url ?? null
 
     if (!contentUrl) {
       setError('Error: No content URL found.')
@@ -56,17 +56,17 @@ const PanelCentralContent: FC<PanelCentralContentProps> = ({ panelId }) => {
   }
 
   if (textViewIndex === 0) {
-    return <TextViewOne textHtml = {text}/>
+    return <TextViewOne textHtml={text}/>
   }
   else if (textViewIndex === 1) {
-    return <TextView textHtml = {text} />
+    return <TextView textHtml={text} />
   }
   else if (textViewIndex === 2) {
-    return <SplitView textHtml = {text} imageUrl={imageUrl} panelId = {panelId} />
+    return <SplitView textHtml={text} imageUrl={imageUrl} panelId={panelId} />
   }
   else if (textViewIndex === 3) {
     return <ImageView imageUrl={imageUrl} panelId={panelId}/>
   }
-};
+}
 
-export default PanelCentralContent;
\ No newline at end of file
+export default PanelCentralContent
\ No newline at end of file
diff --git a/src/components/panel/central-content/SplitView.tsx b/src/components/panel/central-content/SplitView.tsx
index 270eeafc..29796ac4 100644
--- a/src/components/panel/central-content/SplitView.tsx
+++ b/src/components/panel/central-content/SplitView.tsx
@@ -1,8 +1,8 @@
-import { FC } from 'react';
+import { FC } from 'react'
 import { contentStore } from '@/store/ContentStore'
-import OpenSeaDragonViewer from '@/components/OpenSeaDragonViewer';
+import OpenSeaDragonViewer from '@/components/OpenSeaDragonViewer'
 
-import CustomHTML from '@/components/CustomHTML';
+import CustomHTML from '@/components/CustomHTML'
 
 interface SplitViewProps {
     textHtml: string,
@@ -18,11 +18,11 @@ const SplitView: FC<SplitViewProps> = ({ textHtml, imageUrl, panelId }) => {
   return (
         <div className="t-flex">
              <div className="t-w-1/2 t-mr-3">
-                <OpenSeaDragonViewer imageUrl= {imageUrl} primaryColor={primaryColor} panelId={panelId} />
+                <OpenSeaDragonViewer imageUrl={imageUrl} primaryColor={primaryColor} panelId={panelId} />
              </div>
             <CustomHTML textHtml={textHtml} width={widthText} />
         </div>
-     );
-};
+     )
+}
 
-export default SplitView;
\ No newline at end of file
+export default SplitView
\ No newline at end of file
diff --git a/src/components/panel/central-content/TextView.tsx b/src/components/panel/central-content/TextView.tsx
index 8be16123..e5441a21 100644
--- a/src/components/panel/central-content/TextView.tsx
+++ b/src/components/panel/central-content/TextView.tsx
@@ -1,6 +1,6 @@
-import { FC } from 'react';
+import { FC } from 'react'
 
-import CustomHTML from '@/components/CustomHTML';
+import CustomHTML from '@/components/CustomHTML'
 
 interface TextViewOneProps {
     textHtml: string
@@ -12,7 +12,7 @@ const TextViewOne: FC<TextViewOneProps> = ({ textHtml }) => {
         <div>
             <CustomHTML textHtml={textHtml} width='100%' />
         </div>
-   );
-};
+   )
+}
 
-export default TextViewOne;
\ No newline at end of file
+export default TextViewOne
\ No newline at end of file
diff --git a/src/components/panel/central-content/TextViewOne.tsx b/src/components/panel/central-content/TextViewOne.tsx
index 3dd22085..01c146f7 100644
--- a/src/components/panel/central-content/TextViewOne.tsx
+++ b/src/components/panel/central-content/TextViewOne.tsx
@@ -1,6 +1,6 @@
-import { FC } from 'react';
+import { FC } from 'react'
 
-import CustomHTML from '@/components/CustomHTML';
+import CustomHTML from '@/components/CustomHTML'
 
 interface TextViewOneProps {
     textHtml: string
@@ -11,7 +11,7 @@ const TextViewOne: FC<TextViewOneProps> = ({ textHtml }) => {
         <div>
             <CustomHTML textHtml={textHtml} width='100'/>
         </div>
-  );
-};
+  )
+}
 
-export default TextViewOne;
\ No newline at end of file
+export default TextViewOne
\ No newline at end of file
diff --git a/src/components/ui/popover.tsx b/src/components/ui/popover.tsx
index 1b3dab4c..8bfac19e 100644
--- a/src/components/ui/popover.tsx
+++ b/src/components/ui/popover.tsx
@@ -1,7 +1,7 @@
-import * as React from "react"
-import * as PopoverPrimitive from "@radix-ui/react-popover"
+import * as React from 'react'
+import * as PopoverPrimitive from '@radix-ui/react-popover'
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils'
 
 const Popover = PopoverPrimitive.Root
 
@@ -10,13 +10,13 @@ const PopoverTrigger = PopoverPrimitive.Trigger
 const PopoverContent = React.forwardRef<
   React.ElementRef<typeof PopoverPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
->(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
       <PopoverPrimitive.Content
         ref={ref}
         align={align}
         sideOffset={sideOffset}
         className={cn(
-          "z-50 w-72 rounded-md border border-gray-200 bg-white p-4 text-gray-950 shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-gray-800 dark:bg-gray-950 dark:text-gray-50",
+          'z-50 w-72 rounded-md border border-gray-200 bg-white p-4 text-gray-950 shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-gray-800 dark:bg-gray-950 dark:text-gray-50',
           className
         )}
         {...props}
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index daab5dec..dad19100 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -1,6 +1,6 @@
-import { clsx, type ClassValue } from "clsx";
-import { twMerge } from "tailwind-merge";
+import { clsx, type ClassValue } from 'clsx'
+import { twMerge } from 'tailwind-merge'
 
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
+  return twMerge(clsx(inputs))
 }
\ No newline at end of file
diff --git a/src/store/ContentStore.tsx b/src/store/ContentStore.tsx
index d3f6e130..adb4bd4d 100644
--- a/src/store/ContentStore.tsx
+++ b/src/store/ContentStore.tsx
@@ -17,13 +17,13 @@ export const contentStore = create<ContentStoreTypes>((set, get) => ({
   openedPanels: {}, 
 
   addPanelContent: (id: string, newPanel: PanelContentStore) => {
-    let newPanels = {...get().openedPanels}
+    const newPanels = { ...get().openedPanels }
     newPanels[id] = newPanel
-    set({openedPanels: newPanels})
+    set({ openedPanels: newPanels })
   },
 
   updateContentToggleIndex: (panelId: string, newContentIndex: number) => {
-    let panel = get().getPanel(panelId)
+    const panel = get().getPanel(panelId)
     if (!panel) return // TODO: add error handling
 
     panel.contentIndex = newContentIndex
@@ -31,7 +31,7 @@ export const contentStore = create<ContentStoreTypes>((set, get) => ({
   },
 
   updateTextViewIndex: (panelId: string, newTextViewIndex: number) => {
-    let panel = get().getPanel(panelId)
+    const panel = get().getPanel(panelId)
     if (!panel) return // TODO: add error handling
 
     panel.textViewIndex = newTextViewIndex
@@ -39,9 +39,9 @@ export const contentStore = create<ContentStoreTypes>((set, get) => ({
   },
 
   updatePanels: (panelId: string, updatedPanel: PanelContentStore) => {
-    let newPanels = {...get().openedPanels}
+    const newPanels = { ...get().openedPanels }
     newPanels[panelId] = updatedPanel
-    set({openedPanels: newPanels})
+    set({ openedPanels: newPanels })
   },
 
   getPanel: (panelId: string) => {
diff --git a/src/utils/panel.tsx b/src/utils/panel.tsx
index f2b4df66..d2e5a84e 100644
--- a/src/utils/panel.tsx
+++ b/src/utils/panel.tsx
@@ -32,7 +32,7 @@ export function isItemContentValid(itemData: Item): boolean {
 
 export function getContentType(value: string): string {
   let type = value.split('type=')[1]
-  type = type.charAt(0).toUpperCase() + type.slice(1); // convert the first letter to upper case
+  type = type.charAt(0).toUpperCase() + type.slice(1) // convert the first letter to upper case
   return type ?? 'missing'
   // when no string stays after type=, then the value is missing
 }