added timestap and author to popup

src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx

@@ -6,6 +6,7 @@ import { LatLng } from "leaflet";
 import { Item } from "../../../../types";
 import { toast } from "react-toastify";
 import { useHasUserPermission } from "../../hooks/usePermissions";
+import { timeAgo } from "../../../../Utils/TimeAgo";
 
 
 
@@ -60,11 +61,12 @@ export function HeaderView({ item, title, avatar, setItemFormPopup }: {
             :
             ""
         }
-          <b className={`tw-text-xl tw-font-bold ${avatar? "tw-ml-2 tw-mt-1" : ""}`}>{title ? title : item.name}</b>
+            <b className={`tw-text-xl tw-font-bold ${avatar ? "tw-ml-2 tw-mt-1" : ""}`}>{title ? title : item.name}</b>
+
         </div>
       </div>
       <div className='tw-col-span-1'>
-        {(item.layer?.api?.deleteItem || item.layer?.api?.updateItem) && (hasUserPermission(item.layer.api?.collectionName!, "delete") || hasUserPermission(item.layer.api?.collectionName!, "update") ) &&
+        {(item.layer?.api?.deleteItem || item.layer?.api?.updateItem) && (hasUserPermission(item.layer.api?.collectionName!, "delete") || hasUserPermission(item.layer.api?.collectionName!, "update")) &&
           <div className="tw-dropdown tw-dropdown-bottom">
             <label tabIndex={0} className="tw-bg-base-100 tw-btn tw-m-1 tw-leading-3 tw-border-none tw-min-h-0 tw-h-6">
               <svg xmlns="http://www.w3.org/2000/svg" className="tw-h-5 tw-w-5" viewBox="0 0 20 20" fill="currentColor">

src/Components/Map/Subcomponents/ItemPopupComponents/TextView.tsx

@@ -53,7 +53,7 @@ export const TextView = ({ item }: { item?: Item }) => {
   })
 
   return (
-    <p style={{ whiteSpace: "pre-wrap" }} className="!tw-m-0 !tw-mb-2">
+    <p style={{ whiteSpace: "pre-wrap" }} className="!tw-m-0 !tw-mb-2 !tw-mt-2">
       {replacedText}
     </p>
   )

src/Components/Map/Subcomponents/ItemViewPopup.tsx

@@ -1,10 +1,11 @@
 import * as React from 'react'
-import { Popup as LeafletPopup} from 'react-leaflet'
+import { Popup as LeafletPopup } from 'react-leaflet'
 import { Item } from '../../../types'
 import { ItemFormPopupProps } from './ItemFormPopup'
 import { HeaderView } from './ItemPopupComponents/HeaderView'
 import { TextView } from './ItemPopupComponents/TextView'
 import { useAssetApi } from '../../AppShell/hooks/useAssets'
+import { timeAgo } from '../../../Utils/TimeAgo'
 
 
 export interface ItemViewPopupProps {
@@ -19,7 +20,7 @@ export interface ItemViewPopupProps {
 export const ItemViewPopup = React.forwardRef((props: ItemViewPopupProps, ref: any) => {
 
 
-  
+
   return (
     <LeafletPopup ref={ref} maxHeight={377} minWidth={275} maxWidth={275} autoPanPadding={[20, 80]}>
       <div className='tw-bg-base-100 tw-text-base-content'>
@@ -37,6 +38,8 @@ export const ItemViewPopup = React.forwardRef((props: ItemViewPopupProps, ref: a
             <TextView item={props.item} />
 
           }
+          <p className={`tw-italic !tw-my-0 tw-text-gray-500 tw-float-right`}>{`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!)}`}</p>
+
         </div>
       </div>
     </LeafletPopup>

src/Utils/TimeAgo.ts

@@ -0,0 +1,36 @@
+// in miliseconds
+const units = [
+  { label: 'year', seconds: 31536000 },
+  { label: 'month', seconds: 2592000 },
+  { label: 'week', seconds: 604800 },
+  { label: 'day', seconds: 86400 },
+  { label: 'hour', seconds: 3600 },
+  { label: 'minute', seconds: 60 },
+  { label: 'second', seconds: 1 }
+];
+
+  
+export const timeAgo = (date: string | number | Date) => {
+  const time = Math.floor(
+    (new Date().valueOf() - new Date(date).valueOf()) / 1000
+  );
+  const { interval, unit } = calculateTimeDifference(time);
+  const suffix = interval === 1 ? '' : 's';
+  return `${interval} ${unit}${suffix} ago`;
+};
+
+const calculateTimeDifference = (time: number) => {
+  for (let { label, seconds } of units) {
+    const interval = Math.floor(time / seconds);
+    if (interval >= 1) {
+      return {
+        interval: interval,
+        unit: label
+      };
+    }
+  }
+  return {
+    interval: 0,
+    unit: ''
+  };
+};

tsconfig.json

@@ -3,7 +3,7 @@
       "outDir": "dist",
       "module": "esnext",
       "target": "es5",
-      "lib": ["es6", "dom", "es2016", "es2017"],
+      "lib": ["es6", "dom", "es2016", "es2017", "es2020"],
       "sourceMap": true,
       "allowJs": false,
       "jsx": "react",