Type clusterRef (WIP)

utopia-os · Jan 31, 2025 · a27d568 · a27d568
1 parent 4b444b6
commit a27d568
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 17 deletions.
diff --git a/src/Components/Map/UtopiaMapInner.tsx b/src/Components/Map/UtopiaMapInner.tsx
@@ -1,11 +1,6 @@
 /* eslint-disable @typescript-eslint/no-empty-function */
 /* eslint-disable @typescript-eslint/restrict-plus-operands */
 /* eslint-disable @typescript-eslint/restrict-template-expressions */
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */
-/* eslint-disable @typescript-eslint/no-unsafe-member-access */
-/* eslint-disable @typescript-eslint/no-unsafe-call */
-/* eslint-disable @typescript-eslint/no-unsafe-argument */
 import { LatLng } from 'leaflet'
 import {
   Children,
@@ -47,6 +42,7 @@ import { SelectPosition } from './Subcomponents/SelectPosition'
 import type { ItemFormPopupProps } from '#types/ItemFormPopupProps'
 import type { UtopiaMapProps } from '#types/UtopiaMapProps'
 import type { Feature, Geometry as GeoJSONGeometry } from 'geojson'
+import type { MutableRefObject, SetStateAction } from 'react'
 
 const mapDivRef = createRef()
 
@@ -154,7 +150,7 @@ export function UtopiaMapInner({
           url='https://tile.osmand.net/hd/{z}/{x}/{y}.png'
         />
         <MarkerClusterGroup
-          ref={(r) => setClusterRef(r)}
+          ref={(r: SetStateAction<MutableRefObject<typeof MarkerClusterGroup>>) => setClusterRef(r)}
           showCoverageOnHover
           chunkedLoading
           maxClusterRadius={50}
@@ -164,7 +160,7 @@ export function UtopiaMapInner({
             isValidElement<{
               setItemFormPopup: React.Dispatch<React.SetStateAction<ItemFormPopupProps>>
               itemFormPopup: ItemFormPopupProps | null
-              clusterRef: React.MutableRefObject<undefined>
+              clusterRef: React.MutableRefObject<typeof MarkerClusterGroup>
             }>(child)
               ? cloneElement(child, { setItemFormPopup, itemFormPopup, clusterRef })
               : child,

diff --git a/src/Components/Map/hooks/useClusterRef.tsx b/src/Components/Map/hooks/useClusterRef.tsx
@@ -1,23 +1,26 @@
 /* eslint-disable react/prop-types */
 /* eslint-disable @typescript-eslint/no-empty-function */
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import { createContext, useContext, useState } from 'react'
 
+import type MarkerClusterGroup from 'react-leaflet-cluster'
+
 type UseClusterRefManagerResult = ReturnType<typeof useClusterRefManager>
 
+type ClusterRef = React.MutableRefObject<typeof MarkerClusterGroup>
+
 const ClusterRefContext = createContext<UseClusterRefManagerResult>({
-  clusterRef: {} as React.MutableRefObject<undefined>,
+  clusterRef: {} as typeof MarkerClusterGroup,
   setClusterRef: () => {},
 })
 
 function useClusterRefManager(): {
-  clusterRef: any
-  setClusterRef: React.Dispatch<React.SetStateAction<React.MutableRefObject<undefined>>>
+  clusterRef: typeof MarkerClusterGroup
+  setClusterRef: React.Dispatch<
+    React.SetStateAction<React.MutableRefObject<typeof MarkerClusterGroup>>
+  >
 } {
-  const [clusterRef, setClusterRef] = useState<React.MutableRefObject<undefined>>(
-    {} as React.MutableRefObject<undefined>,
-  )
+  const [clusterRef, setClusterRef] = useState<ClusterRef>({} as React.MutableRefObject<undefined>)
 
   return { clusterRef, setClusterRef }
 }
@@ -28,7 +31,7 @@ export const ClusterRefProvider: React.FunctionComponent<{
   <ClusterRefContext.Provider value={useClusterRefManager()}>{children}</ClusterRefContext.Provider>
 )
 
-export const useClusterRef = (): any => {
+export const useClusterRef = (): typeof MarkerClusterGroup => {
   const { clusterRef } = useContext(ClusterRefContext)
   return clusterRef
 }

diff --git a/types/LayerProps.d.ts b/types/LayerProps.d.ts
@@ -2,6 +2,7 @@ import type { Item } from './Item'
 import type { ItemFormPopupProps } from './ItemFormPopupProps'
 import type { ItemsApi } from './ItemsApi'
 import type { ItemType } from './ItemType'
+import type MarkerClusterGroup from 'react-leaflet-cluster'
 
 export interface LayerProps {
   id?: string
@@ -37,6 +38,5 @@ export interface LayerProps {
   item_presets?: Record<string, unknown>
   setItemFormPopup?: React.Dispatch<React.SetStateAction<ItemFormPopupProps | null>>
   itemFormPopup?: ItemFormPopupProps | null
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  clusterRef?: any
+  clusterRef?: React.MutableRefObject<typeof MarkerClusterGroup>[]
 }