diff --git a/lib/src/Components/Item/PopupView.tsx b/lib/src/Components/Item/PopupView.tsx
index 6eea6e43..5b79fde8 100644
--- a/lib/src/Components/Item/PopupView.tsx
+++ b/lib/src/Components/Item/PopupView.tsx
@@ -173,7 +173,8 @@ export const PopupView = ({ children }: { children?: React.ReactNode }) => {
- {item.name}
+ {item.name ||
+ (item.layer?.name.endsWith('s') ? item.layer.name.slice(0, -1) : item.layer?.name)}
diff --git a/lib/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx b/lib/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx
index d31f3cd3..d0916512 100644
--- a/lib/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx
+++ b/lib/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx
@@ -60,7 +60,9 @@ export function HeaderView({
const avatar =
(item?.image && appState.assetsApi.url + item.image + '?width=160&heigth=160') ||
item?.image_external
- const title = item?.name
+ const title =
+ item?.name ??
+ (item?.layer?.name.endsWith('s') ? item.layer?.name.slice(0, -1) : item?.layer?.name)
const subtitle = item?.subname
const [address] = useState('')
diff --git a/lib/src/Components/Map/hooks/useItems.tsx b/lib/src/Components/Map/hooks/useItems.tsx
index 0fb1af78..7c4ac890 100644
--- a/lib/src/Components/Map/hooks/useItems.tsx
+++ b/lib/src/Components/Map/hooks/useItems.tsx
@@ -5,9 +5,11 @@
/* eslint-disable @typescript-eslint/restrict-template-expressions */
/* eslint-disable @typescript-eslint/no-misused-promises */
-import { useCallback, useReducer, createContext, useContext, useState } from 'react'
+import { useCallback, useReducer, createContext, useContext, useState, useEffect, useRef } from 'react'
import { toast } from 'react-toastify'
+import { useAuth } from '#components/Auth/useAuth'
+
import { useAddLayer } from './useLayers'
import type { Item } from '#types/Item'
@@ -18,6 +20,7 @@ type ActionType =
| { type: 'UPDATE'; item: Item }
| { type: 'REMOVE'; item: Item }
| { type: 'RESET'; layer: LayerProps }
+ | { type: 'CLEAR_ALL' }
type UseItemManagerResult = ReturnType
@@ -43,8 +46,10 @@ function useItemsManager(initialItems: Item[]): {
allItemsLoaded: boolean
} {
const addLayer = useAddLayer()
+ const { user } = useAuth()
const [allItemsLoaded, setallItemsLoaded] = useState(false)
+ const layersRef = useRef([])
const [items, dispatch] = useReducer((state: Item[], action: ActionType) => {
switch (action.type) {
@@ -65,6 +70,8 @@ function useItemsManager(initialItems: Item[]): {
return state.filter((item) => item !== action.item)
case 'RESET':
return state.filter((item) => item.layer?.name !== action.layer.name)
+ case 'CLEAR_ALL':
+ return []
default:
throw new Error()
}
@@ -72,6 +79,7 @@ function useItemsManager(initialItems: Item[]): {
const setItemsApi = useCallback(async (layer: LayerProps) => {
addLayer(layer)
+ layersRef.current.push(layer)
const result = await toast.promise(layer.api!.getItems(), {
pending: `loading ${layer.name} ...`,
success: `${layer.name} loaded`,
@@ -127,6 +135,34 @@ function useItemsManager(initialItems: Item[]): {
})
}, [])
+ const reloadAllItems = useCallback(async () => {
+ dispatch({ type: 'CLEAR_ALL' })
+ setallItemsLoaded(false)
+
+ for (const layer of layersRef.current) {
+ if (layer.api) {
+ try {
+ const result = await layer.api.getItems()
+ result.map((item) => {
+ dispatch({ type: 'ADD', item: { ...item, layer } })
+ return null
+ })
+ } catch (error) {
+ console.error(`Failed to reload items for layer ${layer.name}:`, error)
+ }
+ }
+ }
+
+ setallItemsLoaded(true)
+ }, [])
+
+ useEffect(() => {
+ if (layersRef.current.length > 0) {
+ void reloadAllItems()
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [user?.id])
+
return {
items,
updateItem,