From fd989e9b16bf7a9b67449b1bce0bb27409052d90 Mon Sep 17 00:00:00 2001 From: Anton Tranelis Date: Tue, 23 Jul 2024 13:46:37 +0200 Subject: [PATCH] outsourced profile item functions in new file --- src/Components/Profile/ProfileView.tsx | 118 +----------------------- src/Components/Profile/itemFunctions.ts | 101 ++++++++++++++++++++ 2 files changed, 106 insertions(+), 113 deletions(-) create mode 100644 src/Components/Profile/itemFunctions.ts diff --git a/src/Components/Profile/ProfileView.tsx b/src/Components/Profile/ProfileView.tsx index c4596137..6061896d 100644 --- a/src/Components/Profile/ProfileView.tsx +++ b/src/Components/Profile/ProfileView.tsx @@ -1,18 +1,11 @@ import { MapOverlayPage } from '../Templates' -import { useAddItem, useItems, useRemoveItem, useUpdateItem } from '../Map/hooks/useItems' +import { useItems, useRemoveItem, useUpdateItem } from '../Map/hooks/useItems' import { useLocation, useNavigate } from 'react-router-dom' import { useEffect, useRef, useState } from 'react'; import { Item, Tag } from '../../types'; import { useMap } from 'react-leaflet'; import { LatLng } from 'leaflet'; -import { useAddTag, useTags } from '../Map/hooks/useTags'; -import { useResetFilterTags } from '../Map/hooks/useFilter'; import { useHasUserPermission } from '../Map/hooks/usePermissions'; -import { hashTagRegex } from '../../Utils/HashTagRegex'; -import { randomColor } from '../../Utils/RandomColor'; -import { toast } from 'react-toastify'; -import { useAuth } from '../Auth'; -import { useLayers } from '../Map/hooks/useLayers'; import { HeaderView } from '../Map/Subcomponents/ItemPopupComponents/HeaderView'; import { useSelectPosition, useSetSelectPosition } from '../Map/hooks/useSelectPosition'; import { useClusterRef } from '../Map/hooks/useClusterRef'; @@ -21,6 +14,8 @@ import { getValue } from '../../Utils/GetValue'; import { Tabs } from './Templates/Tabs'; import { Onepager } from './Templates/Onepager'; import { Simple } from './Templates/Simple'; +import { handleDelete, linkItem, unlinkItem } from './itemFunctions'; +import { useTags } from '../Map/hooks/useTags'; export function ProfileView({ userType }: { userType: string }) { @@ -37,15 +32,10 @@ export function ProfileView({ userType }: { userType: string }) { const updateItem = useUpdateItem(); const [item, setItem] = useState({} as Item) const map = useMap(); - const layers = useLayers(); const selectPosition = useSelectPosition(); const removeItem = useRemoveItem(); const tags = useTags(); const navigate = useNavigate(); - const addTag = useAddTag(); - const resetFilterTags = useResetFilterTags(); - const addItem = useAddItem(); - const { user } = useAuth(); const hasUserPermission = useHasUserPermission(); const setSelectPosition = useSetSelectPosition(); const clusterRef = useClusterRef(); @@ -61,8 +51,6 @@ export function ProfileView({ userType }: { userType: string }) { scroll(); }, [addItemPopupType]) - - useEffect(() => { const itemId = location.pathname.split("/")[2]; const item = items.find(i => i.id === itemId); @@ -138,102 +126,6 @@ export function ProfileView({ userType }: { userType: string }) { selectPosition && map.closePopup(); }, [selectPosition]) - const submitNewItem = async (evt: any, type: string) => { - evt.preventDefault(); - const formItem: Item = {} as Item; - Array.from(evt.target).forEach((input: HTMLInputElement) => { - if (input.name) { - formItem[input.name] = input.value; - } - }); - setLoading(true); - formItem.text && formItem.text.toLocaleLowerCase().match(hashTagRegex)?.map(tag => { - if (!tags.find((t) => t.name.toLocaleLowerCase() === tag.slice(1).toLocaleLowerCase())) { - addTag({ id: crypto.randomUUID(), name: tag.slice(1), color: randomColor() }) - } - }); - const uuid = crypto.randomUUID(); - - const layer = layers.find(l => l.name.toLocaleLowerCase().replace("s", "") == addItemPopupType.toLocaleLowerCase()) - - let success = false; - try { - await layer?.api?.createItem!({ ...formItem, id: uuid, type: type, parent: item.id }); - await linkItem(uuid); - success = true; - } catch (error) { - toast.error(error.toString()); - } - if (success) { - addItem({ ...formItem, id: uuid, type: type, layer: layer, user_created: user, parent: item.id }); - toast.success("New item created"); - resetFilterTags(); - } - setLoading(false); - setAddItemPopupType(""); - } - - const linkItem = async (id: string) => { - let new_relations = item.relations || []; - new_relations?.push({ items_id: item.id, related_items_id: id }) - const updatedItem = { id: item.id, relations: new_relations } - - let success = false; - try { - await item?.layer?.api?.updateItem!(updatedItem) - success = true; - } catch (error) { - toast.error(error.toString()); - } - if (success) { - updateItem({ ...item, relations: new_relations }) - toast.success("Item linked"); - } - } - - const unlinkItem = async (id: string) => { - console.log(id); - - let new_relations = item.relations?.filter(r => r.related_items_id !== id) - console.log(new_relations); - - const updatedItem = { id: item.id, relations: new_relations } - - - let success = false; - try { - await item?.layer?.api?.updateItem!(updatedItem) - success = true; - } catch (error) { - toast.error(error.toString()); - } - if (success) { - updateItem({ ...item, relations: new_relations }) - toast.success("Item unlinked"); - } - - } - - const handleDelete = async (event: React.MouseEvent) => { - event.stopPropagation(); - setLoading(true); - let success = false; - try { - await item.layer?.api?.deleteItem!(item.id) - success = true; - } catch (error) { - toast.error(error.toString()); - } - if (success) { - removeItem(item); - toast.success("Item deleted"); - } - setLoading(false); - map.closePopup(); - let params = new URLSearchParams(window.location.search); - window.history.pushState({}, "", "/" + `${params ? `?${params}` : ""}`); - navigate("/"); - } const [template, setTemplate] = useState("") @@ -247,7 +139,7 @@ export function ProfileView({ userType }: { userType: string }) { <>
- navigate("/edit-item/" + item.id)} setPositionCallback={() => { map.closePopup(); setSelectPosition(item); navigate("/") }} big truncateSubname={false} /> + handleDelete(e, item, setLoading, removeItem, map, navigate)} editCallback={() => navigate("/edit-item/" + item.id)} setPositionCallback={() => { map.closePopup(); setSelectPosition(item); navigate("/") }} big truncateSubname={false} />
@@ -260,7 +152,7 @@ export function ProfileView({ userType }: { userType: string }) { } {template == "tabs" && - + linkItem(id, item, updateItem)} unlinkItem={(id) => unlinkItem(id, item, updateItem)}/> } diff --git a/src/Components/Profile/itemFunctions.ts b/src/Components/Profile/itemFunctions.ts new file mode 100644 index 00000000..4620aa0e --- /dev/null +++ b/src/Components/Profile/itemFunctions.ts @@ -0,0 +1,101 @@ +import { Item } from '../../types'; +import { hashTagRegex } from '../../Utils/HashTagRegex'; +import { randomColor } from '../../Utils/RandomColor'; +import { toast } from 'react-toastify'; + +export const submitNewItem = async (evt: any, type: string, item, user, setLoading, tags, addTag, addItem, linkItem, resetFilterTags, layers, addItemPopupType, setAddItemPopupType,) => { + evt.preventDefault(); + const formItem: Item = {} as Item; + Array.from(evt.target).forEach((input: HTMLInputElement) => { + if (input.name) { + formItem[input.name] = input.value; + } + }); + setLoading(true); + formItem.text && formItem.text.toLocaleLowerCase().match(hashTagRegex)?.map(tag => { + if (!tags.find((t) => t.name.toLocaleLowerCase() === tag.slice(1).toLocaleLowerCase())) { + addTag({ id: crypto.randomUUID(), name: tag.slice(1), color: randomColor() }) + } + }); + const uuid = crypto.randomUUID(); + + const layer = layers.find(l => l.name.toLocaleLowerCase().replace("s", "") == addItemPopupType.toLocaleLowerCase()) + + let success = false; + try { + await layer?.api?.createItem!({ ...formItem, id: uuid, type: type, parent: item.id }); + await linkItem(uuid); + success = true; + } catch (error) { + toast.error(error.toString()); + } + if (success) { + addItem({ ...formItem, id: uuid, type: type, layer: layer, user_created: user, parent: item.id }); + toast.success("New item created"); + resetFilterTags(); + } + setLoading(false); + setAddItemPopupType(""); +} + +export const linkItem = async (id: string, item, updateItem) => { + let new_relations = item.relations || []; + new_relations?.push({ items_id: item.id, related_items_id: id }) + const updatedItem = { id: item.id, relations: new_relations } + + let success = false; + try { + await item?.layer?.api?.updateItem!(updatedItem) + success = true; + } catch (error) { + toast.error(error.toString()); + } + if (success) { + updateItem({ ...item, relations: new_relations }) + toast.success("Item linked"); + } +} + +export const unlinkItem = async (id: string, item, updateItem) => { + console.log(id); + + let new_relations = item.relations?.filter(r => r.related_items_id !== id) + console.log(new_relations); + + const updatedItem = { id: item.id, relations: new_relations } + + + let success = false; + try { + await item?.layer?.api?.updateItem!(updatedItem) + success = true; + } catch (error) { + toast.error(error.toString()); + } + if (success) { + updateItem({ ...item, relations: new_relations }) + toast.success("Item unlinked"); + } + +} + +export const handleDelete = async (event: React.MouseEvent, item, setLoading, removeItem, map, navigate) => { + event.stopPropagation(); + setLoading(true); + let success = false; + try { + await item.layer?.api?.deleteItem!(item.id) + success = true; + } catch (error) { + toast.error(error.toString()); + } + if (success) { + removeItem(item); + toast.success("Item deleted"); + } + setLoading(false); + map.closePopup(); + let params = new URLSearchParams(window.location.search); + window.history.pushState({}, "", "/" + `${params ? `?${params}` : ""}`); + navigate("/"); +} \ No newline at end of file