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,