diff --git a/package-lock.json b/package-lock.json index 6b2111b1..41903e05 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1919,6 +1919,20 @@ "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==", "dev": true }, + "node_modules/fsevents": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", + "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", + "dev": true, + "hasInstallScript": true, + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": "^8.16.0 || ^10.6.0 || >=11.0.0" + } + }, "node_modules/function-bind": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz", @@ -3912,9 +3926,9 @@ } }, "node_modules/rollup": { - "version": "2.75.7", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.75.7.tgz", - "integrity": "sha512-VSE1iy0eaAYNCxEXaleThdFXqZJ42qDBatAwrfnPlENEZ8erQ+0LYX4JXOLPceWfZpV1VtZwZ3dFCuOZiSyFtQ==", + "version": "2.79.1", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.1.tgz", + "integrity": "sha512-uKxbd0IhMZOhjAiD5oAFp7BqvkA4Dv47qpOCtaNvng4HBwdbWtdOh8f5nZNuk2rp51PMGk3bzfWu5oayNEuYnw==", "dev": true, "bin": { "rollup": "dist/bin/rollup" diff --git a/package.json b/package.json index f755f7fd..59f32757 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "description": "Reuseable React Components to build mapping apps for all kinds of communities ", "repository": "https://github.com/utopia-os/utopia-ui", "homepage:": "https://utopia.os/", - "main": "dist/index.js", + "module": "dist/index.js", "scripts": { "build": "rollup -c", "start": "rollup -c -w" diff --git a/src/Components/Map/Layer.tsx b/src/Components/Map/Layer.tsx index ed51fb8c..ea71f249 100644 --- a/src/Components/Map/Layer.tsx +++ b/src/Components/Map/Layer.tsx @@ -4,7 +4,7 @@ import { Item, Tag, Layer as LayerProps } from '../../types' import MarkerIconFactory from '../../Utils/MarkerIconFactory' import { Popup } from './Subcomponents/Popup' import { useTags } from './hooks/useTags' -import { useAddItem, useItems } from './hooks/useItems' +import { useAddItem, useItems, useResetItems } from './hooks/useItems' import { useEffect } from 'react' import { useAddLayer } from './hooks/useLayers' @@ -27,20 +27,27 @@ export const Layer = (props: LayerProps) => { const items = useItems(); const addItem = useAddItem() const addLayer = useAddLayer(); + const resetItems = useResetItems(); useEffect(() => { + console.log("props.data changed"); + + resetItems(props); props.data.map(item => { item.layer = props; addItem(item); }) addLayer(props); + console.table(items) + }, [props.data]) - }, [addItem, addLayer, props]) return ( <> {items.filter(item => item.layer?.name === props.name)?.map((place: Item) => { + console.log(`layer ${props.name} rendering ....`); + const tags = getTags(place); let color1 = "#666"; let color2 = "RGBA(35, 31, 32, 0.2)"; diff --git a/src/Components/Map/UtopiaMap.stories.tsx b/src/Components/Map/UtopiaMap.stories.tsx deleted file mode 100644 index bdf1ebac..00000000 --- a/src/Components/Map/UtopiaMap.stories.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import * as React from "react"; -import { ComponentStory, ComponentMeta } from "@storybook/react"; - -import { UtopiaMap } from "./UtopiaMap"; -import { Layer } from "./Layer"; -import { tags, places, events } from './data' - - -export default { - title: "Utopia Map", - component: UtopiaMap, -} as ComponentMeta; - - -const Template: ComponentStory = (args) => ( - - - - -); - - -export const Custom = Template.bind({}); -Custom.args = { - -}; - -export const BadSalzschlirf = Template.bind({}); -BadSalzschlirf.args = { - center : [50.6238,9.5061], - zoom: 15, - height: "500px" -}; \ No newline at end of file diff --git a/src/Components/Map/hooks/useItems.tsx b/src/Components/Map/hooks/useItems.tsx index 4b69682f..910bd260 100644 --- a/src/Components/Map/hooks/useItems.tsx +++ b/src/Components/Map/hooks/useItems.tsx @@ -1,11 +1,12 @@ import { useCallback, useReducer, createContext, useContext } from "react"; import * as React from "react"; -import { Item } from "../../../types"; +import { Item, Layer } from "../../../types"; type ActionType = | { type: "ADD"; item: Item } | { type: "UPDATE"; item: Item } -| { type: "REMOVE"; item: Item }; +| { type: "REMOVE"; item: Item } +| { type: "RESET"; layer: Layer }; type UseItemManagerResult = ReturnType; @@ -13,7 +14,8 @@ const ItemContext = createContext({ items: [], addItem: () => {}, updateItem: () => {}, - removeItem: () => {} + removeItem: () => {}, + resetItems: () => {} }); function useItemsManager (initialItems: Item[]): { @@ -21,6 +23,7 @@ function useItemsManager (initialItems: Item[]): { addItem: (item: Item) => void; updateItem: (item: Item) => void; removeItem: (item: Item) => void; + resetItems: (layer: Layer) => void; } { const [items, dispatch] = useReducer((state: Item[], action: ActionType) => { switch (action.type) { @@ -42,6 +45,8 @@ 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); default: throw new Error(); } @@ -67,7 +72,15 @@ function useItemsManager (initialItems: Item[]): { item, }); }, []); - return { items, updateItem, addItem, removeItem }; + + const resetItems = useCallback((layer: Layer) => { + dispatch({ + type: "RESET", + layer + }); + }, []); + + return { items, updateItem, addItem, removeItem, resetItems }; } export const ItemsProvider: React.FunctionComponent<{ @@ -96,4 +109,9 @@ export const useUpdateItem = (): UseItemManagerResult["updateItem"] => { export const useRemoveItem = (): UseItemManagerResult["removeItem"] => { const { removeItem } = useContext(ItemContext); return removeItem; +}; + +export const useResetItems = (): UseItemManagerResult["resetItems"] => { + const { resetItems } = useContext(ItemContext); + return resetItems; }; \ No newline at end of file diff --git a/tsconfig.json b/tsconfig.json index 863626f6..ba8a8ec0 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -14,12 +14,12 @@ "noImplicitReturns": true, "noImplicitThis": true, "strictNullChecks": true, - "noUnusedLocals": true, + "noUnusedLocals": false, "noUnusedParameters": true, }, "include": ["src"], - "exclude": ["node_modules", "dist", "example", "rollup.config.js"], + "exclude": ["node_modules", "dist", "example", "rollup.config.mjss"], "typeRoots": [ "./types", "./node_modules/@types/"