diff --git a/src/Components/Map/Layer.tsx b/src/Components/Map/Layer.tsx index e99ce436..777d391a 100644 --- a/src/Components/Map/Layer.tsx +++ b/src/Components/Map/Layer.tsx @@ -6,7 +6,7 @@ import { ItemViewPopup } from './Subcomponents/ItemViewPopup' import { useAllItemsLoaded, useItems, useSetItemsApi, useSetItemsData } from './hooks/useItems' import { useEffect, useState } from 'react' import { ItemFormPopup } from './Subcomponents/ItemFormPopup' -import { useFilterTags, useIsGroupTypeVisible, useIsLayerVisible } from './hooks/useFilter' +import { useFilterTags, useIsGroupTypeVisible, useIsLayerVisible, useVisibleGroupType } from './hooks/useFilter' import { useAddTag, useAllTagsLoaded, useGetItemTags, useTags } from './hooks/useTags' import { useAddMarker, useAddPopup, useLeafletRefs } from './hooks/useLeafletRefs' import { Popup } from 'leaflet' @@ -81,6 +81,8 @@ export const Layer = ({ const isGroupTypeVisible = useIsGroupTypeVisible(); + const visibleGroupTypes = useVisibleGroupType(); + useEffect(() => { @@ -149,7 +151,7 @@ export const Layer = ({ filter(item => filterTags.length == 0 ? item : filterTags.every(tag => getItemTags(item).some(filterTag => filterTag.name.toLocaleLowerCase() === tag.name.toLocaleLowerCase())))?. filter(item => item.layer && isLayerVisible(item.layer)). - filter(item => item.group_type && isGroupTypeVisible(item.group_type)||item.group_type==null). + filter(item => item.group_type && isGroupTypeVisible(item.group_type)|| visibleGroupTypes.length == 0). map((item: Item) => { if (getValue(item, itemLongitudeField) && getValue(item, itemLatitudeField)) { diff --git a/src/Components/Map/hooks/useFilter.tsx b/src/Components/Map/hooks/useFilter.tsx index 9e15aab5..cd948ce0 100644 --- a/src/Components/Map/hooks/useFilter.tsx +++ b/src/Components/Map/hooks/useFilter.tsx @@ -23,6 +23,7 @@ const FilterContext = createContext({ filterTags: [], searchPhrase: "", visibleLayers: [], + visibleGroupTypes: [], addFilterTag: () => { }, removeFilterTag: () => { }, resetFilterTags: () => { }, @@ -41,6 +42,7 @@ function useFilterManager(initialTags: Tag[]): { filterTags: Tag[]; searchPhrase: string; visibleLayers: LayerProps[]; + visibleGroupTypes: string[]; addFilterTag: (tag: Tag) => void; removeFilterTag: (name: string) => void; resetFilterTags: () => void; @@ -117,11 +119,11 @@ function useFilterManager(initialTags: Tag[]): { if(exist2) return state.filter((groupType) => groupType != action.groupType); else return [... state, action.groupType]; case "RESET_GROUP_TYPE": - return initialLayers; + return []; default: throw new Error(); } - }, initialLayers); + },[]); const [searchPhrase, searchPhraseSet] = React.useState(""); @@ -227,7 +229,7 @@ function useFilterManager(initialTags: Tag[]): { searchPhraseSet(phrase) }, []); - return { filterTags, addFilterTag, removeFilterTag, resetFilterTags, setSearchPhrase, searchPhrase, visibleLayers, toggleVisibleLayer, resetVisibleLayers, isLayerVisible, addVisibleLayer, addVisibleGroupType, toggleVisibleGroupType, isGroupTypeVisible }; + return { filterTags, addFilterTag, removeFilterTag, resetFilterTags, setSearchPhrase, searchPhrase, visibleLayers, toggleVisibleLayer, resetVisibleLayers, isLayerVisible, addVisibleLayer, visibleGroupTypes, addVisibleGroupType, toggleVisibleGroupType, isGroupTypeVisible }; } export const FilterProvider: React.FunctionComponent<{ @@ -309,4 +311,9 @@ export const useToggleVisibleGroupType = (): UseFilterManagerResult["toggleVisib export const useIsGroupTypeVisible = (): UseFilterManagerResult["isGroupTypeVisible"] => { const { isGroupTypeVisible } = useContext(FilterContext); return isGroupTypeVisible +}; + +export const useVisibleGroupType = (): UseFilterManagerResult["visibleGroupTypes"] => { + const { visibleGroupTypes } = useContext(FilterContext); + return visibleGroupTypes; }; \ No newline at end of file