antontranelis/utopia-ui
1
0
Fork 0
mirror of https://github.com/utopia-os/utopia-ui.git synced 2025-12-13 07:46:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

implemented useFilter hook

Browse Source
This commit is contained in:
Anton 2023-08-29 18:38:03 +02:00
parent c92b2be9fc
commit c32b7b8f51
4 changed files with 48 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/Components/Map/Layer.tsx
View File

@ -6,7 +6,7 @@ import { ItemViewPopup } from './Subcomponents/ItemViewPopup'
import { useItems, useResetItems, useSetItemsApi, useSetItemsData } from './hooks/useItems'
import { useEffect, useState } from 'react'
import { ItemFormPopupProps, ItemFormPopup } from './Subcomponents/ItemFormPopup'
import { useFilterTags } from './hooks/useFilter'
import { useAddFilterTag, useFilterTags } from './hooks/useFilter'
export const Layer = (props: LayerProps) => {
@ -14,6 +14,11 @@ export const Layer = (props: LayerProps) => {
const [itemFormPopup, setItemFormPopup] = useState<ItemFormPopupProps | null>(null);
const filterTags = useFilterTags();
const setFilterTag = useAddFilterTag();
// setFilterTag({id: "healing", color: "#000"})
const items = useItems();
const setItemsApi = useSetItemsApi();
@ -31,7 +36,8 @@ export const Layer = (props: LayerProps) => {
return (
<>
{items &&
items.filter(item => item.layer?.name === props.name)?.filter(item => item)?.map((place: Item) => {
items.filter(item => item.layer?.name === props.name)?.filter(item =>
filterTags.length == 0 ? item : item.tags?.some(tag => filterTags.some(filterTag => filterTag.id === tag.id)))?.map((place: Item) => {
const tags = place.tags;
if(place.name === "docutopia")
console.log(tags);

55
src/Components/Map/UtopiaMap.tsx
View File

@ -11,6 +11,7 @@ import { ItemFormPopupProps } from "./Subcomponents/ItemFormPopup";
import { ItemsProvider } from "./hooks/useItems";
import { TagsProvider } from "./hooks/useTags";
import { LayersProvider } from "./hooks/useLayers";
import { FilterProvider } from "./hooks/useFilter";
export interface MapEventListenerProps {
@ -55,34 +56,36 @@ function UtopiaMap({
return (
<LayersProvider initialLayers={[]}>
<TagsProvider initialTags={[]}>
<ItemsProvider initialItems={[]}>
<div className={(selectMode != null ? "crosshair-cursor-enabled" : undefined)}>
<MapContainer ref={mapDivRef} style={{ height: height, width: width }} center={center} zoom={zoom}>
<TileLayer
attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
url="https://tile.osmand.net/hd/{z}/{x}/{y}.png" />
<MarkerClusterGroup showCoverageOnHover chunkedLoading maxClusterRadius={50}>
{
React.Children.toArray(children).map((child) =>
React.isValidElement<{ setItemFormPopup: React.Dispatch<React.SetStateAction<ItemFormPopupProps>>, itemFormPopup: ItemFormPopupProps | null }>(child) ?
React.cloneElement(child, { setItemFormPopup: setItemFormPopup, itemFormPopup: itemFormPopup }) : child
)
}
</MarkerClusterGroup>
<MapEventListener setSelectMode={setSelectMode} selectMode={selectMode} setItemFormPopup={setItemFormPopup} />
<AddButton setSelectMode={setSelectMode}></AddButton>
</MapContainer>
{selectMode != null &&
<div className="tw-button tw-z-500 tw-absolute tw-right-5 tw-top-20 tw-drop-shadow-md">
<div className="tw-alert tw-bg-white tw-text-green-900">
<div>
<span>Select {selectMode.name} position!</span>
<FilterProvider initialTags={[]}>
<ItemsProvider initialItems={[]}>
<div className={(selectMode != null ? "crosshair-cursor-enabled" : undefined)}>
<MapContainer ref={mapDivRef} style={{ height: height, width: width }} center={center} zoom={zoom}>
<TileLayer
attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
url="https://tile.osmand.net/hd/{z}/{x}/{y}.png" />
<MarkerClusterGroup showCoverageOnHover chunkedLoading maxClusterRadius={50}>
{
React.Children.toArray(children).map((child) =>
React.isValidElement<{ setItemFormPopup: React.Dispatch<React.SetStateAction<ItemFormPopupProps>>, itemFormPopup: ItemFormPopupProps | null }>(child) ?
React.cloneElement(child, { setItemFormPopup: setItemFormPopup, itemFormPopup: itemFormPopup }) : child
)
}
</MarkerClusterGroup>
<MapEventListener setSelectMode={setSelectMode} selectMode={selectMode} setItemFormPopup={setItemFormPopup} />
<AddButton setSelectMode={setSelectMode}></AddButton>
</MapContainer>
{selectMode != null &&
<div className="tw-button tw-z-500 tw-absolute tw-right-5 tw-top-20 tw-drop-shadow-md">
<div className="tw-alert tw-bg-white tw-text-green-900">
<div>
<span>Select {selectMode.name} position!</span>
</div>
</div>
</div>
</div>
}
</div>
</ItemsProvider>
}
</div>
</ItemsProvider>
</FilterProvider>
</TagsProvider>
</LayersProvider>
);

22
src/Components/Map/hooks/useFilter.tsx
View File

@ -6,16 +6,16 @@ type ActionType =
| { type: "ADD"; tag: Tag }
| { type: "REMOVE"; id: string };
type UseTagManagerResult = ReturnType<typeof useTagsManager>;
type UseFilterManagerResult = ReturnType<typeof useFilterManager>;
const TagContext = createContext<UseTagManagerResult>({
const FilterContext = createContext<UseFilterManagerResult>({
filterTags: [],
addFilterTag: () => { },
removeFilterTag: () => { },
});
function useTagsManager(initialTags: Tag[]): {
function useFilterManager(initialTags: Tag[]): {
filterTags: Tag[];
addFilterTag: (tag: Tag) => void;
removeFilterTag: (id: string) => void;
@ -60,25 +60,25 @@ function useTagsManager(initialTags: Tag[]): {
return { filterTags, addFilterTag, removeFilterTag };
}
export const TagsProvider: React.FunctionComponent<{
export const FilterProvider: React.FunctionComponent<{
initialTags: Tag[], children?: React.ReactNode
}> = ({ initialTags, children }) => (
<TagContext.Provider value={useTagsManager(initialTags)}>
<FilterContext.Provider value={useFilterManager(initialTags)}>
{children}
</TagContext.Provider>
</FilterContext.Provider>
);
export const useFilterTags = (): Tag[] => {
const { filterTags } = useContext(TagContext);
const { filterTags } = useContext(FilterContext);
return filterTags;
};
export const useAddFilterTag = (): UseTagManagerResult["addFilterTag"] => {
const { addFilterTag } = useContext(TagContext);
export const useAddFilterTag = (): UseFilterManagerResult["addFilterTag"] => {
const { addFilterTag } = useContext(FilterContext);
return addFilterTag;
};
export const useRemoveFilterTag = (): UseTagManagerResult["removeFilterTag"] => {
const { removeFilterTag } = useContext(TagContext);
export const useRemoveFilterTag = (): UseFilterManagerResult["removeFilterTag"] => {
const { removeFilterTag } = useContext(FilterContext);
return removeFilterTag;
};

0
src/Utils/HeighlightTags.ts → src/Utils/HeighlightTags.tsx
View File