diff --git a/src/Components/Map/Subcomponents/Controls/FilterControl.tsx b/src/Components/Map/Subcomponents/Controls/FilterControl.tsx index 2ede15b7..56a5e1e1 100644 --- a/src/Components/Map/Subcomponents/Controls/FilterControl.tsx +++ b/src/Components/Map/Subcomponents/Controls/FilterControl.tsx @@ -1,94 +1,55 @@ -import * as React from 'react'; -import { useState, useEffect } from 'react'; +import * as React from 'react' +import * as L from 'leaflet' +import { useLayers } from '../../hooks/useLayers'; +import { useAddVisibleGroupType, useIsGroupTypeVisible, useToggleVisibleGroupType } from '../../hooks/useFilter'; +import { useEffect } from 'react'; -const typeMapping = [ - {value: null, label: 'Kein Filter'}, - {value: 'kompass', label: 'Würdekompass'}, - {value: 'themenkompass', label: 'Themenkompass-Gruppe'}, - {value: 'liebevoll.jetzt', label: 'liebevoll.jetzt'} -]; +export function FilterControl() { -const CustomFilterIcon = ({ size = 20 }) => ( - - - -); + const [open, setOpen] = React.useState(false); -const CheckmarkIcon = () => ( - - - -); + const groupTypes = [{text: "Regional Gruppe", value: "wuerdekompass" },{text: "Themen Gruppe", value:"themenkompass"}, {text: "liebevoll.jetzt", value: "liebevoll.jetzt"}] -const FilterControl = ({ activeFilter, setActiveFilter }) => { - const [isOpen, setIsOpen] = useState(false); - const toggleFilter = () => { - setIsOpen(!isOpen); - }; + useEffect(() => { + groupTypes.map(layer => + addVisibleGroupType(layer.value) + ) + }, []) - const applyFilter = (filterValue) => { - setActiveFilter(filterValue); - setIsOpen(false); - }; + + const isGroupTypeVisible = useIsGroupTypeVisible(); + const toggleVisibleGroupType = useToggleVisibleGroupType(); + const addVisibleGroupType = useAddVisibleGroupType(); return ( -
-
- {activeFilter !== null && ( - - )} - -
+
+ { + open ? +
+ +
    + { + groupTypes.map(groupType => +
    • + ) + } +
+
+ : +
{ + setOpen(true) + }}> + + + +
+ + } - {isOpen && ( -
-
    - {typeMapping.map((type) => ( -
  • - -
    • - ))} -
-
- )}
- ); -}; - -export default FilterControl; \ No newline at end of file + ) +} diff --git a/src/Components/Map/Subcomponents/Controls/LayerControl.tsx b/src/Components/Map/Subcomponents/Controls/LayerControl.tsx index ad9b53ca..d31c542c 100644 --- a/src/Components/Map/Subcomponents/Controls/LayerControl.tsx +++ b/src/Components/Map/Subcomponents/Controls/LayerControl.tsx @@ -10,18 +10,12 @@ export function LayerControl() { const layers = useLayers(); - useEffect(() => { - layers.map(layer => - addVisibleLayer(layer) - ) - }, [layers]) - const isLayerVisible = useIsLayerVisible(); const toggleVisibleLayer = useToggleVisibleLayer(); const addVisibleLayer = useAddVisibleLayer(); return ( -
+
{ open ?
@@ -45,6 +39,8 @@ export function LayerControl() { + +
} diff --git a/src/Components/Map/hooks/useFilter.tsx b/src/Components/Map/hooks/useFilter.tsx index 33aec09f..9e15aab5 100644 --- a/src/Components/Map/hooks/useFilter.tsx +++ b/src/Components/Map/hooks/useFilter.tsx @@ -12,6 +12,9 @@ type ActionType = | { type: "TOGGLE_LAYER"; layer: LayerProps } | { type: "ADD_LAYER"; layer: LayerProps } | { type: "RESET_LAYERS" } + | { type: "TOGGLE_GROUP_TYPE"; groupType: string } + | { type: "ADD_GROUP_TYPE"; groupType: string } + | { type: "RESET_GROUP_TYPE" } ; type UseFilterManagerResult = ReturnType; @@ -27,7 +30,11 @@ const FilterContext = createContext({ addVisibleLayer: () => { }, toggleVisibleLayer: () => { }, resetVisibleLayers: () => { }, - isLayerVisible: () => true + isLayerVisible: () => true, + + addVisibleGroupType: () => { }, + toggleVisibleGroupType: () => { }, + isGroupTypeVisible: () => true }); function useFilterManager(initialTags: Tag[]): { @@ -42,6 +49,9 @@ function useFilterManager(initialTags: Tag[]): { toggleVisibleLayer: (layer: LayerProps) => void; resetVisibleLayers: () => void; isLayerVisible: (layer: LayerProps) => boolean; + addVisibleGroupType: (groupType: string) => void; + toggleVisibleGroupType: (groupType: string) => void; + isGroupTypeVisible: (groupType: string) => boolean; } { const [filterTags, dispatchTags] = useReducer((state: Tag[], action: ActionType) => { switch (action.type) { @@ -90,6 +100,29 @@ function useFilterManager(initialTags: Tag[]): { } }, initialLayers); + const [visibleGroupTypes, dispatchGroupTypes] = useReducer((state: string[], action: ActionType) => { + switch (action.type) { + case "ADD_GROUP_TYPE": + const exist1 = state.find((groupType) => + groupType === action.groupType ? true : false + ); + if (!exist1) return [ + ...state, + action.groupType, + ]; + else return state; + case "TOGGLE_GROUP_TYPE": + const exist2 = state.some((groupType) => + groupType === action.groupType); + if(exist2) return state.filter((groupType) => groupType != action.groupType); + else return [... state, action.groupType]; + case "RESET_GROUP_TYPE": + return initialLayers; + default: + throw new Error(); + } + }, initialLayers); + const [searchPhrase, searchPhraseSet] = React.useState(""); const addFilterTag = (tag: Tag) => { @@ -170,11 +203,31 @@ function useFilterManager(initialTags: Tag[]): { return visibleLayers.some(l => l.name === layer.name) }, [visibleLayers]); + const addVisibleGroupType = (groupType: string) => { + dispatchGroupTypes({ + type: "ADD_GROUP_TYPE", + groupType, + }); + + }; + + const toggleVisibleGroupType = (groupType: string) => { + dispatchGroupTypes({ + type: "TOGGLE_GROUP_TYPE", + groupType, + }); + + }; + + const isGroupTypeVisible = useCallback((groupType: string) => { + return visibleGroupTypes.some(gt => gt === groupType) + }, [visibleGroupTypes]); + const setSearchPhrase = useCallback((phrase: string) => { searchPhraseSet(phrase) }, []); - return { filterTags, addFilterTag, removeFilterTag, resetFilterTags, setSearchPhrase, searchPhrase, visibleLayers, toggleVisibleLayer, resetVisibleLayers, isLayerVisible, addVisibleLayer }; + return { filterTags, addFilterTag, removeFilterTag, resetFilterTags, setSearchPhrase, searchPhrase, visibleLayers, toggleVisibleLayer, resetVisibleLayers, isLayerVisible, addVisibleLayer, addVisibleGroupType, toggleVisibleGroupType, isGroupTypeVisible }; } export const FilterProvider: React.FunctionComponent<{ @@ -239,4 +292,21 @@ export const useResetVisibleLayers = (): UseFilterManagerResult["resetVisibleLay export const useIsLayerVisible = (): UseFilterManagerResult["isLayerVisible"] => { const { isLayerVisible } = useContext(FilterContext); return isLayerVisible; +}; + +export const useAddVisibleGroupType = (): UseFilterManagerResult["addVisibleGroupType"] => { + const { addVisibleGroupType } = useContext(FilterContext); + return addVisibleGroupType; +}; + + +export const useToggleVisibleGroupType = (): UseFilterManagerResult["toggleVisibleGroupType"] => { + const { toggleVisibleGroupType } = useContext(FilterContext); + return toggleVisibleGroupType; +}; + + +export const useIsGroupTypeVisible = (): UseFilterManagerResult["isGroupTypeVisible"] => { + const { isGroupTypeVisible } = useContext(FilterContext); + return isGroupTypeVisible }; \ No newline at end of file