diff --git a/src/Components/Map/ItemForm.tsx b/src/Components/Map/ItemForm.tsx index 823bf535..30c67de3 100644 --- a/src/Components/Map/ItemForm.tsx +++ b/src/Components/Map/ItemForm.tsx @@ -1,11 +1,17 @@ import * as React from 'react' import { Item } from '../../types' import * as PropTypes from 'prop-types' +import { useEffect } from 'react' -export const ItemForm = ({ children, item }: { children?: React.ReactNode, item?: Item }) => { +export const ItemForm = ({ children, item, title, setPopupTitle }: { children?: React.ReactNode, item?: Item, title?: string, setPopupTitle?: React.Dispatch> }) => { + useEffect(() => { + setPopupTitle&& title && setPopupTitle(title); + + }, [title]) + return ( -
{ +
{ children ? React.Children.toArray(children).map((child) => React.isValidElement<{ item: Item, test: string }>(child) ? diff --git a/src/Components/Map/Layer.tsx b/src/Components/Map/Layer.tsx index 95682484..a3d816ca 100644 --- a/src/Components/Map/Layer.tsx +++ b/src/Components/Map/Layer.tsx @@ -33,6 +33,7 @@ export const Layer = ({ itemOwnerField, itemLatitudeField = 'position.coordinates.1', itemLongitudeField = 'position.coordinates.0', + onlyOnePerOwner = false, setItemFormPopup, itemFormPopup, clusterRef @@ -63,8 +64,8 @@ export const Layer = ({ useEffect(() => { - data && setItemsData({ data, children, name, menuIcon, menuText, menuColor, markerIcon, markerShape, markerDefaultColor, api, itemNameField, itemTextField, itemAvatarField, itemColorField, itemOwnerField, setItemFormPopup, itemFormPopup, clusterRef }); - api && setItemsApi({ data, children, name, menuIcon, menuText, menuColor, markerIcon, markerShape, markerDefaultColor, api, itemNameField, itemTextField, itemAvatarField, itemColorField, itemOwnerField, setItemFormPopup, itemFormPopup, clusterRef }); + data && setItemsData({ data, children, name, menuIcon, menuText, menuColor, markerIcon, markerShape, markerDefaultColor, api, itemNameField, itemTextField, itemAvatarField, itemColorField, itemOwnerField, onlyOnePerOwner, setItemFormPopup, itemFormPopup, clusterRef }); + api && setItemsApi({ data, children, name, menuIcon, menuText, menuColor, markerIcon, markerShape, markerDefaultColor, api, itemNameField, itemTextField, itemAvatarField, itemColorField, itemOwnerField, onlyOnePerOwner, setItemFormPopup, itemFormPopup, clusterRef }); }, [data, api]) useMapEvents({ @@ -138,8 +139,9 @@ export const Layer = ({ filter(item => item.layer && isLayerVisible(item.layer)). map((item: Item) => { if (getValue(item, itemLongitudeField) && getValue(item, itemLatitudeField)) { + item[itemTextField] = getValue(item, itemTextField); if (item?.tags) { - item[itemTextField] = getValue(item, itemTextField) + '\n\n'; + item[itemTextField] = item[itemTextField] + '\n\n'; item.tags.map(tag => { if(!item[itemTextField].includes(`#${tag}`)) return (item[itemTextField] = item[itemTextField] + `#${tag} `) diff --git a/src/Components/Map/Subcomponents/ItemFormPopup.tsx b/src/Components/Map/Subcomponents/ItemFormPopup.tsx index e78f874f..53b617ba 100644 --- a/src/Components/Map/Subcomponents/ItemFormPopup.tsx +++ b/src/Components/Map/Subcomponents/ItemFormPopup.tsx @@ -2,7 +2,7 @@ import * as React from 'react' import { LatLng } from 'leaflet' import { Popup as LeafletPopup, useMap } from 'react-leaflet' import { useEffect, useRef, useState } from 'react' -import { useAddItem, useUpdateItem } from '../hooks/useItems' +import { useAddItem, useItems, useRemoveItem, useUpdateItem } from '../hooks/useItems' import { Geometry, LayerProps, Item, ItemsApi } from '../../../types' import { TextAreaInput } from '../../Input/TextAreaInput' import { TextInput } from '../../Input/TextInput' @@ -25,12 +25,17 @@ export function ItemFormPopup(props: ItemFormPopupProps) { const [spinner, setSpinner] = useState(false); + const [popupTitle, setPopupTitle] = useState(""); + const formRef = useRef(null); const map = useMap(); const addItem = useAddItem(); const updateItem = useUpdateItem(); + const items = useItems(); + const removeItem = useRemoveItem(); + const tags = useTags(); const addTag = useAddTag(); @@ -51,7 +56,7 @@ export function ItemFormPopup(props: ItemFormPopupProps) { evt.preventDefault(); setSpinner(true); - formItem.text.toLocaleLowerCase().match(hashTagRegex)?.map(tag=> { + formItem.text && formItem.text.toLocaleLowerCase().match(hashTagRegex)?.map(tag=> { if (!tags.find((t) => t.id.toLocaleLowerCase() === tag.slice(1).toLocaleLowerCase())) { addTag({id: tag.slice(1).toLocaleLowerCase(), color: randomColor()}) } @@ -85,6 +90,16 @@ export function ItemFormPopup(props: ItemFormPopupProps) { toast.error(error.toString()); } if(success) { + console.log(props.layer); + + if(props.layer.onlyOnePerOwner){ + console.log(items); + + const item = items.find(item => item.layer == props.layer && item.user_created?.id == user?.id); + console.log(item); + + item && removeItem(item); + } addItem({...formItem, id: uuid, layer: props.layer, user_created: user}); toast.success("New item created"); resetFilterTags(); @@ -119,14 +134,14 @@ export function ItemFormPopup(props: ItemFormPopupProps) {
handleSubmit(e)}> {props.item ?
: -
New {props.layer.name}
+
{ popupTitle? popupTitle : `New ${props.layer.name}`}
} {props.children ? React.Children.toArray(props.children).map((child) => - React.isValidElement<{ item: Item, test: string }>(child) ? - React.cloneElement(child, { item: props.item, key: props.position.toString() }) : "" + React.isValidElement<{ item: Item, test: string, setPopupTitle: React.Dispatch> }>(child) ? + React.cloneElement(child, { item: props.item, key: props.position.toString(), setPopupTitle: setPopupTitle }) : "" ) : diff --git a/src/Components/Map/Subcomponents/ItemPopupComponents/TextView.tsx b/src/Components/Map/Subcomponents/ItemPopupComponents/TextView.tsx index ab2d5a81..308aebb3 100644 --- a/src/Components/Map/Subcomponents/ItemPopupComponents/TextView.tsx +++ b/src/Components/Map/Subcomponents/ItemPopupComponents/TextView.tsx @@ -8,17 +8,19 @@ import Markdown from 'react-markdown' import rehypeVideo from 'rehype-video'; import { getValue } from '../../../../Utils/GetValue'; -export const TextView = ({ item }: { item?: Item }) => { +export const TextView = ({ item, truncate = false}: { item?: Item, truncate?: boolean }) => { const tags = useTags(); const addFilterTag = useAddFilterTag(); - const text = item?.layer?.itemTextField && item ? getValue(item, item.layer?.itemTextField) : undefined; + let text = item?.layer?.itemTextField && item ? getValue(item, item.layer?.itemTextField) : ""; + + if(item && text && truncate) text = truncateString(text, 100, true); let replacedText; - if (item && text) replacedText = fixUrls(text); + item && text ? replacedText = fixUrls(text) : ""; - replacedText = replacedText.replace(/(? { + replacedText ? replacedText = replacedText.replace(/(? { let shortUrl = url; if (url.match('^https:\/\/')) { shortUrl = url.split('https://')[1]; @@ -27,15 +29,15 @@ export const TextView = ({ item }: { item?: Item }) => { shortUrl = url.split('http://')[1]; } return `[${shortUrl}](${url})` - }) + }) : "" ; - replacedText = replacedText.replace(mailRegex, (url) => { + replacedText ? replacedText = replacedText.replace(mailRegex, (url) => { return `[${url}](mailto:${url})` - }) + }) : ""; - replacedText = replacedText.replace(hashTagRegex, (match) => { + replacedText ? replacedText = replacedText.replace(hashTagRegex, (match) => { return `[${match}](${match})` - }) + }) : ""; @@ -146,4 +148,12 @@ export const TextView = ({ item }: { item?: Item }) => { -} \ No newline at end of file +} + +function truncateString( str, n, useWordBoundary ){ + if (str.length <= n) { return str; } + const subString = str.slice(0, n-1); // the original check + return (useWordBoundary + ? subString.slice(0, subString.lastIndexOf(" ")) + : subString) + "…"; +}; \ No newline at end of file diff --git a/src/types.ts b/src/types.ts index 32c88ff9..770e8ede 100644 --- a/src/types.ts +++ b/src/types.ts @@ -29,6 +29,7 @@ export interface LayerProps { itemTagField?: string, itemLatitudeField?: any, itemLongitudeField?: any, + onlyOnePerOwner?: boolean, setItemFormPopup?: React.Dispatch>, itemFormPopup?: ItemFormPopupProps | null, clusterRef?: React.MutableRefObject