From c92b2be9fcfad3f0c74285c991285758076415cc Mon Sep 17 00:00:00 2001 From: Anton Date: Tue, 29 Aug 2023 13:11:39 +0200 Subject: [PATCH] refactoring hooks and api --- dependency-graph.svg | 652 ++++++++++-------- rollup.config.js | 2 +- src/Components/Map/Layer.tsx | 73 +- .../Map/Subcomponents/ItemFormPopup.tsx | 14 +- .../ItemPopupComponents/HeaderView.tsx | 8 +- src/Components/Map/hooks/useFilter.tsx | 84 +++ src/Components/Map/hooks/useItems.tsx | 148 ++-- src/Components/Map/hooks/useLayers.tsx | 3 +- src/Components/Map/hooks/useTags.tsx | 3 +- src/Utils/RandomColor.ts | 24 +- src/types.ts | 3 +- 11 files changed, 580 insertions(+), 434 deletions(-) create mode 100644 src/Components/Map/hooks/useFilter.tsx diff --git a/dependency-graph.svg b/dependency-graph.svg index 63564442..45c2f1fc 100644 --- a/dependency-graph.svg +++ b/dependency-graph.svg @@ -4,15 +4,15 @@ - - + + dependency-cruiser output - + cluster_src - -src + +src cluster_src/Components @@ -56,8 +56,8 @@ cluster_src/Components/Map/hooks - -hooks + +hooks cluster_src/Components/Profile @@ -71,18 +71,18 @@ cluster_src/Components/Typography - -Typography + +Typography cluster_src/SampleData - -SampleData + +SampleData cluster_src/Utils - -Utils + +Utils @@ -187,8 +187,8 @@ src/Components/Auth/LoginPage.tsx - -LoginPage.tsx + +LoginPage.tsx @@ -204,44 +204,44 @@ src/Components/Auth/LoginPage.tsx->src/Components/Input/TextInput.tsx - - + + src/Components/Typography/ErrorText.tsx - -ErrorText.tsx + +ErrorText.tsx src/Components/Auth/LoginPage.tsx->src/Components/Typography/ErrorText.tsx - - + + src/Components/Auth/SignupPage.tsx - -SignupPage.tsx + +SignupPage.tsx src/Components/Auth/SignupPage.tsx->src/Components/Input/TextInput.tsx - - + + src/Components/Auth/SignupPage.tsx->src/Components/Typography/ErrorText.tsx - - + + @@ -255,29 +255,29 @@ src/Components/Auth/index.tsx->src/Components/Auth/LoginPage.tsx - - + + src/Components/Auth/index.tsx->src/Components/Auth/SignupPage.tsx - - + + src/Components/Auth/useAuth.tsx - -useAuth.tsx + +useAuth.tsx src/Components/Auth/index.tsx->src/Components/Auth/useAuth.tsx - - + + @@ -327,628 +327,682 @@ - + +src/Components/Map/hooks/useTags.tsx + + +useTags.tsx + + + + + +src/Components/Input/TextAreaInput.tsx->src/Components/Map/hooks/useTags.tsx + + + + + src/Components/Input/index.tsx - + index.tsx - + src/Components/Input/index.tsx->src/Components/Input/TextInput.tsx - + src/Components/Input/index.tsx->src/Components/Input/TextAreaInput.tsx - + src/Components/Map/ItemForm.tsx - + ItemForm.tsx - + src/Components/Map/ItemView.tsx - + ItemView.tsx - -src/Components/Map/Layer.tsx - - -Layer.tsx - - - - -src/Utils/MarkerIconFactory.ts - - -MarkerIconFactory.ts - - - - - -src/Components/Map/Layer.tsx->src/Utils/MarkerIconFactory.ts - - - - - -src/Components/Map/hooks/useItems.tsx - - -useItems.tsx - - - - - -src/Components/Map/Layer.tsx->src/Components/Map/hooks/useItems.tsx - - - - - -src/Components/Map/hooks/useLayers.tsx - - -useLayers.tsx - - - - - -src/Components/Map/Layer.tsx->src/Components/Map/hooks/useLayers.tsx - - - - - -src/Components/Map/hooks/useTags.tsx - - -useTags.tsx +src/Components/Map/Layer.tsx + + +Layer.tsx - + src/Components/Map/Layer.tsx->src/Components/Map/hooks/useTags.tsx - - + + + + + +src/Utils/HeighlightTags.ts + + +HeighlightTags.ts + + + + + +src/Components/Map/Layer.tsx->src/Utils/HeighlightTags.ts + + + + + +src/Utils/MarkerIconFactory.ts + + +MarkerIconFactory.ts + + + + + +src/Components/Map/Layer.tsx->src/Utils/MarkerIconFactory.ts + + + + + +src/Components/Map/hooks/useFilter.tsx + + +useFilter.tsx + + + + + +src/Components/Map/Layer.tsx->src/Components/Map/hooks/useFilter.tsx + + + + + +src/Components/Map/hooks/useItems.tsx + + +useItems.tsx + + + + + +src/Components/Map/Layer.tsx->src/Components/Map/hooks/useItems.tsx + + + + + +src/Components/Map/hooks/useLayers.tsx + + +useLayers.tsx + + + + + +src/Components/Map/Layer.tsx->src/Components/Map/hooks/useLayers.tsx + + - + src/Components/Map/Subcomponents/ItemFormPopup.tsx - - -ItemFormPopup.tsx + + +ItemFormPopup.tsx - + src/Components/Map/Layer.tsx->src/Components/Map/Subcomponents/ItemFormPopup.tsx - - + + - + src/Components/Map/Subcomponents/ItemViewPopup.tsx - + ItemViewPopup.tsx - + src/Components/Map/Layer.tsx->src/Components/Map/Subcomponents/ItemViewPopup.tsx - - + + - + src/Components/Map/Subcomponents/ItemFormPopup.tsx->src/Components/Input/TextInput.tsx - - + + - + src/Components/Map/Subcomponents/ItemFormPopup.tsx->src/Components/Input/TextAreaInput.tsx - - + + + + + +src/Components/Map/Subcomponents/ItemFormPopup.tsx->src/Components/Map/hooks/useTags.tsx + + + + + +src/Components/Map/Subcomponents/ItemFormPopup.tsx->src/Utils/HeighlightTags.ts + + - + src/Components/Map/Subcomponents/ItemFormPopup.tsx->src/Components/Map/hooks/useItems.tsx - - + + - + src/types.ts - - -types.ts + + +types.ts - + src/Components/Map/Subcomponents/ItemFormPopup.tsx->src/types.ts - - + + + + + +src/Utils/RandomColor.ts + + +RandomColor.ts + + + + + +src/Components/Map/Subcomponents/ItemFormPopup.tsx->src/Utils/RandomColor.ts + + - + src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx - - -HeaderView.tsx + + +HeaderView.tsx - + src/Components/Map/Subcomponents/ItemViewPopup.tsx->src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx - - + + - + src/Components/Map/Subcomponents/ItemPopupComponents/TextView.tsx - - -TextView.tsx + + +TextView.tsx - + src/Components/Map/Subcomponents/ItemViewPopup.tsx->src/Components/Map/Subcomponents/ItemPopupComponents/TextView.tsx - - + + - + src/Components/Map/Subcomponents/AddButton.tsx - - -AddButton.tsx + + +AddButton.tsx - + src/Components/Map/Subcomponents/AddButton.tsx->src/Components/Map/hooks/useLayers.tsx - - + + - + src/Utils/DynamicHeroIcon.tsx - - -DynamicHeroIcon.tsx + + +DynamicHeroIcon.tsx - + src/Components/Map/Subcomponents/AddButton.tsx->src/Utils/DynamicHeroIcon.tsx - - + + - + src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx->src/Components/Map/hooks/useItems.tsx - - + + - + src/Components/Map/Subcomponents/ItemPopupComponents/PopupStartEndInput.tsx - - -PopupStartEndInput.tsx + + +PopupStartEndInput.tsx - + src/Components/Map/Subcomponents/ItemPopupComponents/PopupStartEndInput.tsx->src/Components/Input/index.tsx - - + + - + src/Components/Map/Subcomponents/ItemPopupComponents/PopupTextAreaInput.tsx - - -PopupTextAreaInput.tsx + + +PopupTextAreaInput.tsx - + src/Components/Map/Subcomponents/ItemPopupComponents/PopupTextAreaInput.tsx->src/Components/Input/index.tsx - - + + - + src/Components/Map/Subcomponents/ItemPopupComponents/PopupTextInput.tsx - + PopupTextInput.tsx - + src/Components/Map/Subcomponents/ItemPopupComponents/StartEndView.tsx - - -StartEndView.tsx + + +StartEndView.tsx - + src/Components/Map/Subcomponents/ItemPopupComponents/TextView.tsx->src/Components/Map/hooks/useTags.tsx - - - - - -src/Utils/HeighlightTags.ts - - -HeighlightTags.ts - - + + - + src/Components/Map/Subcomponents/ItemPopupComponents/TextView.tsx->src/Utils/HeighlightTags.ts - - + + - + src/Utils/ReplaceURLs.ts - + ReplaceURLs.ts - + src/Components/Map/Subcomponents/ItemPopupComponents/TextView.tsx->src/Utils/ReplaceURLs.ts - - + + - + src/Components/Map/Tags.tsx - + Tags.tsx - + src/Components/Map/Tags.tsx->src/Components/Map/hooks/useTags.tsx - - + + - + src/Components/Map/UtopiaMap.css - - -UtopiaMap.css + + +UtopiaMap.css - + src/Components/Map/UtopiaMap.tsx - - -UtopiaMap.tsx + + +UtopiaMap.tsx + + +src/Components/Map/UtopiaMap.tsx->src/Components/Map/hooks/useTags.tsx + + + - + src/Components/Map/UtopiaMap.tsx->src/Components/Map/hooks/useItems.tsx - - + + - + src/Components/Map/UtopiaMap.tsx->src/Components/Map/hooks/useLayers.tsx - - - - - -src/Components/Map/UtopiaMap.tsx->src/Components/Map/hooks/useTags.tsx - - + + - + src/Components/Map/UtopiaMap.tsx->src/Components/Map/Subcomponents/AddButton.tsx - - + + - + src/Components/Map/UtopiaMap.tsx->src/Components/Map/UtopiaMap.css - - + + - + src/Components/Map/index.tsx - + index.tsx - + src/Components/Map/index.tsx->src/Components/Map/ItemForm.tsx - + src/Components/Map/index.tsx->src/Components/Map/ItemView.tsx - + src/Components/Map/index.tsx->src/Components/Map/Layer.tsx - - + + - + src/Components/Map/index.tsx->src/Components/Map/Subcomponents/ItemPopupComponents/PopupStartEndInput.tsx - - + + - + src/Components/Map/index.tsx->src/Components/Map/Subcomponents/ItemPopupComponents/PopupTextAreaInput.tsx - - + + - + src/Components/Map/index.tsx->src/Components/Map/Subcomponents/ItemPopupComponents/StartEndView.tsx - - + + - + src/Components/Map/index.tsx->src/Components/Map/Subcomponents/ItemPopupComponents/TextView.tsx - - + + - + src/Components/Map/index.tsx->src/Components/Map/Tags.tsx - + src/Components/Map/index.tsx->src/Components/Map/UtopiaMap.tsx - - + + - + src/Components/Profile/Settings.tsx - + Settings.tsx - + src/Components/Profile/Settings.tsx->src/Components/Input/TextInput.tsx - + src/Components/Profile/Settings.tsx->src/Components/Input/TextAreaInput.tsx - + src/Components/Templates/TitleCard.tsx - + TitleCard.tsx - + src/Components/Profile/Settings.tsx->src/Components/Templates/TitleCard.tsx - + src/Components/Typography/Subtitle.tsx - - -Subtitle.tsx + + +Subtitle.tsx - + src/Components/Templates/TitleCard.tsx->src/Components/Typography/Subtitle.tsx - - + + - + src/Components/Profile/index.tsx - + index.tsx - + src/Components/Profile/index.tsx->src/Components/Profile/Settings.tsx - + src/Components/Templates/CardPage.tsx - + CardPage.tsx - + src/Components/Templates/CardPage.tsx->src/Components/Templates/TitleCard.tsx - + src/Components/Templates/index.tsx - + index.tsx - + src/Components/Templates/index.tsx->src/Components/Templates/TitleCard.tsx - + src/Components/Templates/index.tsx->src/Components/Templates/CardPage.tsx - + src/SampleData/data.js - - -data.js + + +data.js - + src/index.css - + index.css - + src/index.tsx - + index.tsx - + src/index.tsx->src/Components/AppShell/index.tsx - + src/index.tsx->src/Components/Auth/index.tsx - + src/index.tsx->src/Components/Gaming/index.tsx - + src/index.tsx->src/Components/Input/index.tsx - + src/index.tsx->src/Components/Map/index.tsx - + src/index.tsx->src/Components/Profile/index.tsx - + src/index.tsx->src/Components/Templates/index.tsx - + src/index.tsx->src/index.css - + diff --git a/rollup.config.js b/rollup.config.js index bb7889e1..487b11f3 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -18,5 +18,5 @@ export default { }), typescript() ], - external: ['react', 'react-dom', 'leaflet', 'react-leaflet', 'react-toastify' , 'react-toastify/dist/ReactToastify.css', 'tw-elements' ,'react-router-dom', 'react-leaflet-cluster', '@tanstack/react-query', 'leaflet/dist/leaflet.css', '@heroicons/react/20/solid'] + external: ['react', 'react-dom', 'leaflet', 'react-leaflet', 'react-toastify' , 'react-toastify/dist/ReactToastify.css', 'tw-elements' ,'react-router-dom', 'react-leaflet-cluster', '@tanstack/react-query', 'tributejs', 'prop-types', 'leaflet/dist/leaflet.css', '@heroicons/react/20/solid'] } \ No newline at end of file diff --git a/src/Components/Map/Layer.tsx b/src/Components/Map/Layer.tsx index 0f33ad0d..2ed17832 100644 --- a/src/Components/Map/Layer.tsx +++ b/src/Components/Map/Layer.tsx @@ -1,84 +1,47 @@ import * as React from 'react' import { Marker } from 'react-leaflet' -import { Item, Tag, LayerProps } from '../../types' +import { Item, LayerProps } from '../../types' import MarkerIconFactory from '../../Utils/MarkerIconFactory' import { ItemViewPopup } from './Subcomponents/ItemViewPopup' -import { useTags } from './hooks/useTags' -import { useAddItem, useItems, useResetItems } from './hooks/useItems' +import { useItems, useResetItems, useSetItemsApi, useSetItemsData } from './hooks/useItems' import { useEffect, useState } from 'react' -import { useAddLayer } from './hooks/useLayers' import { ItemFormPopupProps, ItemFormPopup } from './Subcomponents/ItemFormPopup' -import { toast } from 'react-toastify' -import { hashTagRegex } from '../../Utils/HeighlightTags' +import { useFilterTags } from './hooks/useFilter' export const Layer = (props: LayerProps) => { const [itemFormPopup, setItemFormPopup] = useState(null); - const tags = useTags(); + const filterTags = useFilterTags(); const items = useItems(); - const addItem = useAddItem() - const addLayer = useAddLayer(); + const setItemsApi = useSetItemsApi(); + const setItemsData = useSetItemsData(); + const resetItems = useResetItems(); - const getItemTags = (item: Item) : Tag[] => { - 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; - }; - - const loadItems = async () => { - props.data?.map(item => { - if (item.position) { - item.layer = props; - addItem(item); - } - }) - - if (props.api) { - addLayer(props); - } - - if(props.api) { - const result = await toast.promise( - props.api!.getItems(), - { - pending: `loading ${props.name} ...`, - success: `${props.name} loaded` , - error: `error while loading ${props.name}` - } - ); - if (result) { - result.map(item => { - if (item.position) { - addItem(({ layer: props, api: props.api, ...item })); - } - }); - } - } - } useEffect(() => { resetItems(props); - loadItems(); + props.data && setItemsData(props); + props.api && setItemsApi(props); }, [props.data, props.api]) return ( <> {items && - items.filter(item => item.layer?.name === props.name)?.map((place: Item) => { - const tags = getItemTags(place); + items.filter(item => item.layer?.name === props.name)?.filter(item => item)?.map((place: Item) => { + const tags = place.tags; + if(place.name === "docutopia") + console.log(tags); + let color1 = "#666"; let color2 = "RGBA(35, 31, 32, 0.2)"; - if (tags[0]) { + if (tags && tags[0]) { color1 = tags[0].color; } - if (tags[1]) { + if (tags && tags[1]) { color2 = tags[1].color; } return ( @@ -106,12 +69,12 @@ export const Layer = (props: LayerProps) => { (props.children && React.Children.toArray(props.children).some(child => React.isValidElement(child) && child.props.__TYPE === "ItemForm") ? React.Children.toArray(props.children).map((child) => React.isValidElement(child) && child.props.__TYPE === "ItemForm" ? - {child} + {child} : "" ) : <> - + ) } diff --git a/src/Components/Map/Subcomponents/ItemFormPopup.tsx b/src/Components/Map/Subcomponents/ItemFormPopup.tsx index 71887d2c..6ef65285 100644 --- a/src/Components/Map/Subcomponents/ItemFormPopup.tsx +++ b/src/Components/Map/Subcomponents/ItemFormPopup.tsx @@ -14,7 +14,6 @@ export interface ItemFormPopupProps { position: LatLng, layer: LayerProps, item?: Item, - api?: ItemsApi, children?: React.ReactNode, setItemFormPopup: React.Dispatch> } @@ -47,22 +46,13 @@ export function ItemFormPopup(props: ItemFormPopupProps) { addTag({id: tag.slice(1), color: randomColor()}) }); - if (props.item) { - formItem['id'] = props.item.id; - await props.api?.updateItem!(formItem); - formItem['api'] = props.api; - formItem['layer'] = props.layer; - await updateItem(formItem); + await updateItem({...props.item, ...formItem}); setSpinner(false); map.closePopup(); } else { - formItem['id'] = crypto.randomUUID(); - await props.api?.createItem!(formItem); - formItem['api'] = props.api; - formItem['layer'] = props.layer; - await addItem(formItem); + await addItem({...formItem, id: crypto.randomUUID(), layer: props.layer}); setSpinner(false); map.closePopup(); } diff --git a/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx b/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx index 06ef7287..2ce07570 100644 --- a/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx +++ b/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx @@ -19,7 +19,7 @@ export function HeaderView({ item, setItemFormPopup }: { const removeItemFromMap = (event: React.MouseEvent) => { setLoading(true); - item.api?.deleteItem!(item.id) + item.layer.api?.deleteItem!(item.id) .then(() => removeItem(item)) .then(() => map.closePopup()) .then(()=>setLoading(false)) @@ -41,7 +41,7 @@ export function HeaderView({ item, setItemFormPopup }: { {item.name}
- {item.api && + {item.layer.api &&