diff --git a/src/Components/Map/hooks/useItems.tsx b/src/Components/Map/hooks/useItems.tsx index 0dc1a66b..b4b8f073 100644 --- a/src/Components/Map/hooks/useItems.tsx +++ b/src/Components/Map/hooks/useItems.tsx @@ -3,9 +3,6 @@ import * as React from "react"; import { Item, ItemsApi, LayerProps, Tag } from "../../../types"; import { toast } from "react-toastify"; import { useAddLayer } from "./useLayers"; -import { useAddTag, useTags } from "./useTags"; -import { hashTagRegex } from "../../../Utils/HashTagRegex"; -import { randomColor } from "../../../Utils/RandomColor"; type ActionType = @@ -13,7 +10,7 @@ type ActionType = | { type: "UPDATE"; item: Item } | { type: "REMOVE"; item: Item } | { type: "RESET"; layer: LayerProps } - | { type: "ADD_TAGS" }; + ; type UseItemManagerResult = ReturnType; @@ -39,8 +36,6 @@ function useItemsManager(initialItems: Item[]): { } { const addLayer = useAddLayer(); - const tags = useTags(); - const addTag = useAddTag(); const [items, dispatch] = useReducer((state: Item[], action: ActionType) => { switch (action.type) { @@ -63,18 +58,7 @@ function useItemsManager(initialItems: Item[]): { case "REMOVE": return state.filter(item => item !== action.item); case "RESET": - return state.filter(item => item.layer.name !== action.layer.name); - case "ADD_TAGS": - return state.map(item => { - const itemTagStrings = item.text.toLocaleLowerCase().match(hashTagRegex); - const itemTags: Tag[] = []; - itemTagStrings?.map(tag => { - if (tags.find(t => t.id === tag.slice(1))) { - itemTags.push(tags.find(t => t.id === tag.slice(1))!) - } - }) - return { ...item, tags: itemTags } - }) + return state.filter(item => item.layer?.name !== action.layer.name); default: throw new Error(); } @@ -100,14 +84,12 @@ function useItemsManager(initialItems: Item[]): { dispatch({ type: "ADD", item: { ...item, layer: layer } }); }) } - dispatch({ type: "ADD_TAGS" }) }, []) const setItemsData = useCallback((layer: LayerProps) => { layer.data?.map(item => { dispatch({ type: "ADD", item: { ...item, layer: layer } }); }) - dispatch({ type: "ADD_TAGS" }) }, []); @@ -116,7 +98,6 @@ function useItemsManager(initialItems: Item[]): { type: "ADD", item, }); - dispatch({ type: "ADD_TAGS" }) }, []); const updateItem = useCallback(async (item: Item) => { @@ -124,7 +105,6 @@ function useItemsManager(initialItems: Item[]): { type: "UPDATE", item, }); - dispatch({ type: "ADD_TAGS" }) }, []); const removeItem = useCallback((item: Item) => { @@ -141,9 +121,6 @@ function useItemsManager(initialItems: Item[]): { }); }, []); - useEffect(() => { - dispatch({ type: "ADD_TAGS" }) - }, [tags]) return { items, updateItem, addItem, removeItem, resetItems, setItemsApi, setItemsData }; diff --git a/src/Components/Map/hooks/useTags.tsx b/src/Components/Map/hooks/useTags.tsx index 79561185..7a631bbf 100644 --- a/src/Components/Map/hooks/useTags.tsx +++ b/src/Components/Map/hooks/useTags.tsx @@ -1,6 +1,7 @@ import { useCallback, useReducer, createContext, useContext } from "react"; import * as React from "react"; -import { ItemsApi, Tag } from "../../../types"; +import { Item, ItemsApi, Tag } from "../../../types"; +import { hashTagRegex } from "../../../Utils/HashTagRegex"; type ActionType = | { type: "ADD"; tag: Tag } @@ -13,7 +14,8 @@ const TagContext = createContext({ addTag: () => { }, removeTag: () => { }, setTagApi: () => { }, - setTagData: () => { } + setTagData: () => { }, + getItemTags: () => [] }); function useTagsManager(initialTags: Tag[]): { @@ -22,6 +24,7 @@ function useTagsManager(initialTags: Tag[]): { removeTag: (id: string) => void; setTagApi: (api: ItemsApi) => void; setTagData: (data: Tag[]) => void; + getItemTags: (item: Item) => Tag[]; } { const [tags, dispatch] = useReducer((state: Tag[], action: ActionType) => { switch (action.type) { @@ -31,12 +34,12 @@ function useTagsManager(initialTags: Tag[]): { ); if (!exist) return [ ...state, - action.tag, + {...action.tag, id: action.tag.id} ]; else return state; case "REMOVE": - return state.filter(({ id }) => id !== action.id); + return state.filter(({ id }) => id !== action.id.toLocaleLowerCase()); default: throw new Error(); } @@ -68,7 +71,7 @@ function useTagsManager(initialTags: Tag[]): { tag, }); - if (!tags.find((t) => t.id === tag.id)) { + if (!tags.some((t) => t.id === tag.id)) { api?.createItem && api.createItem(tag); } }; @@ -81,8 +84,19 @@ function useTagsManager(initialTags: Tag[]): { api?.deleteItem && api.deleteItem(id); }, []); + const getItemTags = useCallback((item: Item) => { + const itemTagStrings = item.text.toLocaleLowerCase().match(hashTagRegex); + const itemTags: Tag[] = []; + itemTagStrings?.map(tag => { + if (tags.find(t => t.id === tag.slice(1))) { + itemTags.push(tags.find(t => t.id === tag.slice(1))!) + } + }) + return itemTags + }, [tags]); - return { tags, addTag, removeTag, setTagApi, setTagData }; + + return { tags, addTag, removeTag, setTagApi, setTagData, getItemTags }; } export const TagsProvider: React.FunctionComponent<{ @@ -116,4 +130,10 @@ export const useSetTagApi = (): UseTagManagerResult["setTagApi"] => { export const useSetTagData = (): UseTagManagerResult["setTagData"] => { const { setTagData } = useContext(TagContext); return setTagData; +} + + +export const useGetItemTags = (): UseTagManagerResult["getItemTags"] => { + const { getItemTags } = useContext(TagContext); + return getItemTags; } \ No newline at end of file