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

state management cleanup

Browse Source
This commit is contained in:
Anton 2023-09-14 08:31:08 +02:00
parent 5da17ff553
commit 1f675ccf3c
2 changed files with 28 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/Components/Map/hooks/useItems.tsx
View File

@ -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<typeof useItemsManager>;
@ -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 };

32
src/Components/Map/hooks/useTags.tsx
View File

@ -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<UseTagManagerResult>({
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<Tag>) => 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;
}