diff --git a/src/Components/Map/Subcomponents/ItemViewPopup.tsx b/src/Components/Map/Subcomponents/ItemViewPopup.tsx index de0ecea2..a40c7d66 100644 --- a/src/Components/Map/Subcomponents/ItemViewPopup.tsx +++ b/src/Components/Map/Subcomponents/ItemViewPopup.tsx @@ -31,8 +31,6 @@ export const ItemViewPopup = React.forwardRef((props: ItemViewPopupProps, ref: a const setSelectPosition = useSetSelectPosition(); - const [infoExpanded, setInfoExpanded] = useState(false); - const handleEdit = (event: React.MouseEvent) => { event.stopPropagation(); map.closePopup(); @@ -85,12 +83,8 @@ export const ItemViewPopup = React.forwardRef((props: ItemViewPopupProps, ref: a
- { - infoExpanded ? -

setInfoExpanded(false)}>{`posted ${props.item && props.item.user_created && props.item.user_created.first_name ? `by ${props.item.user_created.first_name}` : ""} ${timeAgo(props.item.date_created!)}`}

- : -

setInfoExpanded(true)}>ⓘ

- } +

{`${props.item.date_updated && props.item.date_updated != props.item.date_created ? "updated" : "posted" } ${props.item && props.item.user_created && props.item.user_created.first_name ? `by ${props.item.user_created.first_name}` : ""} ${props.item.date_updated ? timeAgo(props.item.date_updated) : timeAgo(props.item.date_created!)}`}

+
{ //** */ } diff --git a/src/Components/Templates/OverlayItemsIndexPage.tsx b/src/Components/Templates/OverlayItemsIndexPage.tsx index 2da12665..39839d58 100644 --- a/src/Components/Templates/OverlayItemsIndexPage.tsx +++ b/src/Components/Templates/OverlayItemsIndexPage.tsx @@ -14,6 +14,7 @@ import { useLayers } from '../Map/hooks/useLayers'; import { HeaderView } from '../Map/Subcomponents/ItemPopupComponents/HeaderView'; import { MapOverlayPage } from './MapOverlayPage'; import { useAddItem, useItems, useRemoveItem } from '../Map/hooks/useItems'; +import { timeAgo } from '../../Utils/TimeAgo'; type breadcrumb = { @@ -22,7 +23,7 @@ type breadcrumb = { } -export const OverlayItemsIndexPage = ({url, layerName, parameterField, breadcrumbs, itemNameField, itemTextField, itemImageField, itemSymbolField, itemSubnameField, plusButton = true, children }: { layerName: string, url: string, parameterField: string, breadcrumbs: Array, itemNameField: string, itemTextField: string, itemImageField: string, itemSymbolField: string, itemSubnameField: string, plusButton?: boolean, children?: ReactNode }) => { +export const OverlayItemsIndexPage = ({ url, layerName, parameterField, breadcrumbs, itemNameField, itemTextField, itemImageField, itemSymbolField, itemSubnameField, plusButton = true, children }: { layerName: string, url: string, parameterField: string, breadcrumbs: Array, itemNameField: string, itemTextField: string, itemImageField: string, itemSymbolField: string, itemSubnameField: string, plusButton?: boolean, children?: ReactNode }) => { console.log(itemSymbolField); @@ -52,10 +53,10 @@ export const OverlayItemsIndexPage = ({url, layerName, parameterField, breadcrum useEffect(() => { console.log(items); - + }, [items]) - + const layer = layers.find(l => l.name == layerName); @@ -76,7 +77,7 @@ export const OverlayItemsIndexPage = ({url, layerName, parameterField, breadcrum const uuid = crypto.randomUUID(); let success = false; try { - await layer?.api?.createItem!({ ...formItem, id: uuid}); + await layer?.api?.createItem!({ ...formItem, id: uuid }); success = true; } catch (error) { toast.error(error.toString()); @@ -84,7 +85,7 @@ export const OverlayItemsIndexPage = ({url, layerName, parameterField, breadcrum if (success) { toast.success("New item created"); } - addItem({...formItem, user_created: user, id: uuid, layer: layer}); + addItem({ ...formItem, user_created: user, id: uuid, layer: layer }); setLoading(false); setAddItemPopupType(""); } @@ -107,61 +108,76 @@ export const OverlayItemsIndexPage = ({url, layerName, parameterField, breadcrum return ( -<> + <> - -
- {breadcrumbs && -
-
    - {breadcrumbs.map((b, i) =>
  • {b.name}
    • )} -
-
} -
-
- { - items?.filter(i=>i.layer?.name === layerName).map((i, k) => { - return ( -
navigate(url + getValue(i, parameterField))}> - navigate("/edit-item/" + i.id)} deleteCallback={() => deleteItem(i)}> -
- + +
+ {breadcrumbs && +
+
    + {breadcrumbs.map((b, i) =>
  • {b.name}
    • )} +
+
} +
+
+ { + items?.filter(i => i.layer?.name === layerName) + .sort((a, b) => { + // Convert date_created to milliseconds, handle undefined by converting to lowest possible date (0 milliseconds) + const dateA = a.date_updated ? new Date(a.date_updated).getTime() : a.date_created ? new Date(a.date_created).getTime() : 0; + const dateB = b.date_updated ? new Date(b.date_updated).getTime() : b.date_created ? new Date(b.date_created).getTime() : 0; + return dateB - dateA; // Subtracts milliseconds which are numbers + }) + .map((i, k) => { + return ( +
navigate(url + getValue(i, parameterField))}> + navigate("/edit-item/" + i.id)} deleteCallback={() => deleteItem(i)}> +
+ +
+
+ +

{`${i.date_updated && i.date_updated != i.date_created ? "updated" : "posted" } ${i && i.user_created && i.user_created.first_name ? `by ${i.user_created.first_name}` : ""} ${i.date_updated ? timeAgo(i.date_updated) : timeAgo(i.date_created!)}`}

+ +
+ { //** */ + } +
+
+ + ) + + }) + } + {addItemPopupType == "place" ? + +
submitNewItem(e)} > + +
+ + + +
+
+
: <> + } - ) - - }) - } - {addItemPopupType == "place" ? - -
submitNewItem(e)} > - -
- - - -
- -
-
-
: <> - } - -
- {children} +
+ {children} - + - {plusButton && { setAddItemPopupType("place"); scroll(); }} color={'#777'} collection='items' />} + {plusButton && { setAddItemPopupType("place"); scroll(); }} color={'#777'} collection='items' />} - + )