cleand up types

README.md

@@ -61,15 +61,9 @@ const places = [{
   "text": "Stadtgemüse Fulda ist eine Gemüsegärtnerei in Maberzell, die es sich zur Aufgabe gemacht hat, die Stadt und seine Bewohner:innen mit regionalem, frischem und natürlich angebautem Gemüse mittels Gemüsekisten zu versorgen. Es gibt also jede Woche, von Frühjahr bis Herbst, angepasst an die Saison eine Kiste mit schmackhaftem und frischem Gemüse für euch, welche ihr direkt vor Ort abholen könnt. \r\n\r\nhttps://stadtgemuese-fulda.de",
   "position": {
     "type": "Point",
-    "coordinates": [
+    "coordinates": [9.632435, 50.560342]
-      9.632435,
-      50.560342
-    ]
   },
-  "tags": [
+  "tags": [9,13],
-    9,
-    13
-  ],
 },
 {
   "id": 166,
@@ -77,47 +71,23 @@ const places = [{
   "text": "free camping",
   "position": {
     "type": "Point",
-    "coordinates": [
+    "coordinates": [9.438793, 50.560112]
-      9.438793,
-      50.560112
-    ]
   },
-  "tags": [
+  "tags": [10,11]
-    10,
-    11
-  ]
 }];
 
 const events = [
   {
     "id": "65bbc003-b6de-4904-b85c-8ab6c92fe0db",
-    "date_created": "2022-03-14T10:20:11.534Z",
-    "date_updated": "2022-04-05T08:58:38.790Z",
     "name": "Hackathon",
     "text": "still in progress",
     "position": {
       "type": "Point",
-      "coordinates": [
+      "coordinates": [9.5, 50.62]
-        9.5,
-        50.62
-      ]
     },
     "start": "2022-03-25T12:00:00",
     "end": "2022-05-12T12:00:00",
-    "tags": [
+    "tags": [10]
-      {
-        "Tags_id": {
-          "color": "#75507B",
-          "id": "Docutopia"
-        }
-      },
-      {
-        "Tags_id": {
-          "color": "#3465A4",
-          "id": "Coding"
-        }
-      }
-    ]
   }
 ]
 

package-lock.json

@@ -1,24 +1,23 @@
 {
   "name": "utopia-ui",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "utopia-ui",
-      "version": "1.0.5",
+      "version": "1.0.6",
       "license": "ISC",
       "dependencies": {
         "leaflet": "^1.8.0",
         "react-leaflet": "^4.0.0",
-        "react-leaflet-markercluster": "^3.0.0-rc1"
+        "react-leaflet-cluster": "^2.0.0"
       },
       "devDependencies": {
         "@types/leaflet": "^1.7.11",
         "@types/react": "^18.0.14",
         "@types/react-dom": "^18.0.5",
         "@types/react-leaflet": "^2.8.2",
-        "@types/react-leaflet-markercluster": "^3.0.0",
         "babel-core": "^6.26.3",
         "babel-runtime": "^6.26.0",
         "react": "^17.0.2",
@@ -71,15 +70,6 @@
         "@types/geojson": "*"
       }
     },
-    "node_modules/@types/leaflet.markercluster": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/@types/leaflet.markercluster/-/leaflet.markercluster-1.5.0.tgz",
-      "integrity": "sha512-2Qje1CGibdaCZaeCtEycQ/TpX4fsiK81NTmkdHotn0dL/4M1QvmeXiiLAHLnv1GrZBn7DY6mzedBsHmq5REKHA==",
-      "dev": true,
-      "dependencies": {
-        "@types/leaflet": "*"
-      }
-    },
     "node_modules/@types/prop-types": {
       "version": "15.7.5",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
@@ -116,17 +106,6 @@
         "@types/react": "*"
       }
     },
-    "node_modules/@types/react-leaflet-markercluster": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/@types/react-leaflet-markercluster/-/react-leaflet-markercluster-3.0.0.tgz",
-      "integrity": "sha512-yJpaoo7sOexrnniD6McdOOJF8FXEzA5G6s+bBk8Ed7XzhqcLVb84MXCbY/3ed81xY2DYQG4PHTOaXhIEHOxXqg==",
-      "dev": true,
-      "dependencies": {
-        "@types/leaflet": "*",
-        "@types/leaflet.markercluster": "*",
-        "@types/react": "*"
-      }
-    },
     "node_modules/@types/scheduler": {
       "version": "0.16.2",
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
@@ -994,43 +973,18 @@
         "react-dom": "^18.0.0"
       }
     },
-    "node_modules/react-leaflet-markercluster": {
+    "node_modules/react-leaflet-cluster": {
-      "version": "3.0.0-rc1",
+      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/react-leaflet-markercluster/-/react-leaflet-markercluster-3.0.0-rc1.tgz",
+      "resolved": "https://registry.npmjs.org/react-leaflet-cluster/-/react-leaflet-cluster-2.0.0.tgz",
-      "integrity": "sha512-wr8ERtx73sY0uVoQAM1v1vsA5Vsbdgyqc88h+Eo2kYRwNdkVTEOoUTnAh3CgGuOyP0Y9QLd2dKGupGkufpwryQ==",
+      "integrity": "sha512-tREjHM3mlNwj7sJdV+i0QSYbrOeju3RtPThfe7ik0T2oH56OffgMCC+mAjLOR+OrQXLIPktJpFYHpNNZOEtyUA==",
       "dependencies": {
-        "@react-leaflet/core": "^1.0.2",
+        "leaflet.markercluster": "^1.5.3"
-        "leaflet": "^1.6.0",
-        "leaflet.markercluster": "^1.4.1",
-        "react-leaflet": "^3.0.0"
       },
       "peerDependencies": {
-        "leaflet": "^1.6.0",
+        "leaflet": "^1.8.0",
-        "leaflet.markercluster": "^1.4.1",
+        "react": "^18.0.0",
-        "react-leaflet": "^3.0.0"
+        "react-dom": "^18.0.0",
-      }
+        "react-leaflet": "^4.0.0"
-    },
-    "node_modules/react-leaflet-markercluster/node_modules/@react-leaflet/core": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-1.1.1.tgz",
-      "integrity": "sha512-7PGLWa9MZ5x/cWy8EH2VzI4T8q5WpuHbixzCDXqixP/WyqwIrg5NDUPgYuFnB4IEIZF+6nA265mYzswFo/h1Pw==",
-      "peerDependencies": {
-        "leaflet": "^1.7.1",
-        "react": "^17.0.1",
-        "react-dom": "^17.0.1"
-      }
-    },
-    "node_modules/react-leaflet-markercluster/node_modules/react-leaflet": {
-      "version": "3.2.5",
-      "resolved": "https://registry.npmjs.org/react-leaflet/-/react-leaflet-3.2.5.tgz",
-      "integrity": "sha512-Z3KZ+4SijsRbbrt2I1a3ZDY6+V6Pm91eYTdxTN18G6IOkFRsJo1BuSPLFnyFrlF3WDjQFPEcTPkEgD1VEeAoBg==",
-      "dependencies": {
-        "@react-leaflet/core": "^1.1.1"
-      },
-      "peerDependencies": {
-        "leaflet": "^1.7.1",
-        "react": "^17.0.1",
-        "react-dom": "^17.0.1"
       }
     },
     "node_modules/react-leaflet/node_modules/@react-leaflet/core": {
@@ -1357,15 +1311,6 @@
         "@types/geojson": "*"
       }
     },
-    "@types/leaflet.markercluster": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/@types/leaflet.markercluster/-/leaflet.markercluster-1.5.0.tgz",
-      "integrity": "sha512-2Qje1CGibdaCZaeCtEycQ/TpX4fsiK81NTmkdHotn0dL/4M1QvmeXiiLAHLnv1GrZBn7DY6mzedBsHmq5REKHA==",
-      "dev": true,
-      "requires": {
-        "@types/leaflet": "*"
-      }
-    },
     "@types/prop-types": {
       "version": "15.7.5",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
@@ -1402,17 +1347,6 @@
         "@types/react": "*"
       }
     },
-    "@types/react-leaflet-markercluster": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/@types/react-leaflet-markercluster/-/react-leaflet-markercluster-3.0.0.tgz",
-      "integrity": "sha512-yJpaoo7sOexrnniD6McdOOJF8FXEzA5G6s+bBk8Ed7XzhqcLVb84MXCbY/3ed81xY2DYQG4PHTOaXhIEHOxXqg==",
-      "dev": true,
-      "requires": {
-        "@types/leaflet": "*",
-        "@types/leaflet.markercluster": "*",
-        "@types/react": "*"
-      }
-    },
     "@types/scheduler": {
       "version": "0.16.2",
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
@@ -2108,31 +2042,12 @@
         }
       }
     },
-    "react-leaflet-markercluster": {
+    "react-leaflet-cluster": {
-      "version": "3.0.0-rc1",
+      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/react-leaflet-markercluster/-/react-leaflet-markercluster-3.0.0-rc1.tgz",
+      "resolved": "https://registry.npmjs.org/react-leaflet-cluster/-/react-leaflet-cluster-2.0.0.tgz",
-      "integrity": "sha512-wr8ERtx73sY0uVoQAM1v1vsA5Vsbdgyqc88h+Eo2kYRwNdkVTEOoUTnAh3CgGuOyP0Y9QLd2dKGupGkufpwryQ==",
+      "integrity": "sha512-tREjHM3mlNwj7sJdV+i0QSYbrOeju3RtPThfe7ik0T2oH56OffgMCC+mAjLOR+OrQXLIPktJpFYHpNNZOEtyUA==",
       "requires": {
-        "@react-leaflet/core": "^1.0.2",
+        "leaflet.markercluster": "^1.5.3"
-        "leaflet": "^1.6.0",
-        "leaflet.markercluster": "^1.4.1",
-        "react-leaflet": "^3.0.0"
-      },
-      "dependencies": {
-        "@react-leaflet/core": {
-          "version": "1.1.1",
-          "resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-1.1.1.tgz",
-          "integrity": "sha512-7PGLWa9MZ5x/cWy8EH2VzI4T8q5WpuHbixzCDXqixP/WyqwIrg5NDUPgYuFnB4IEIZF+6nA265mYzswFo/h1Pw==",
-          "requires": {}
-        },
-        "react-leaflet": {
-          "version": "3.2.5",
-          "resolved": "https://registry.npmjs.org/react-leaflet/-/react-leaflet-3.2.5.tgz",
-          "integrity": "sha512-Z3KZ+4SijsRbbrt2I1a3ZDY6+V6Pm91eYTdxTN18G6IOkFRsJo1BuSPLFnyFrlF3WDjQFPEcTPkEgD1VEeAoBg==",
-          "requires": {
-            "@react-leaflet/core": "^1.1.1"
-          }
-        }
       }
     },
     "readdirp": {

package.json

@@ -20,7 +20,6 @@
     "@types/react": "^18.0.14",
     "@types/react-dom": "^18.0.5",
     "@types/react-leaflet": "^2.8.2",
-    "@types/react-leaflet-markercluster": "^3.0.0",
     "babel-core": "^6.26.3",
     "babel-runtime": "^6.26.0",
     "react": "^17.0.2",
@@ -37,6 +36,6 @@
   "dependencies": {
     "leaflet": "^1.8.0",
     "react-leaflet": "^4.0.0",
-    "react-leaflet-markercluster": "^3.0.0-rc1"
+    "react-leaflet-cluster": "^2.0.0"
   }
 }

src/Components/Map/MarkerPopup.tsx

@@ -1,39 +1,16 @@
 import * as React from 'react'
 import { Popup } from 'react-leaflet'
+import { Item, Tag } from '../../types'
 
-export interface IMarkerPopupProps {
+export interface MarkerPopupProps {
-  item: IMapItem,
+  item: Item,
-  tags: ITag[]
+  tags: Tag[]
 }
 
-export interface IMapItem {
+const MarkerPopup = (props:MarkerPopupProps) => {
-  id?: string,
+  const item:Item = props.item;
-  date_created?: string,
+  const tags:Tag[] = props.tags;
-  date_updated?: string | null,
-  name: string,
-  text: string,
-  position: IGeometry,
-  start?: string,
-  end?: string,
-  tags?: string[],
-  [key: string]:any
-}
 
-export interface IGeometry {
-  type: string;
-  coordinates: number[];
-}
-
-export interface ITag {
-
-    color: string;
-    id: string;
-    name: string;
-  
-}
-
-const MarkerPopup = (props:IMarkerPopupProps) => {
-  const item:IMapItem = props.item;
 
 
   return (
@@ -44,8 +21,8 @@ const MarkerPopup = (props:IMarkerPopupProps) => {
 
       <p>{item.text}</p>
         {item.tags&&
-        props.tags.map((tag:ITag) => (
+        tags.map((tag:Tag) => (
-          <span className="badge" style={{backgroundColor: tag.color,marginLeft: '.2rem', fontSize: "100%"}} key={tag.id}>#{tag.name}</span>
+          <span className="badge" style={{backgroundColor: tag.color,margin: '.1rem', fontSize: "100%"}} key={tag.id}>#{tag.name}</span>
         ))}
     </Popup>
   )

src/Utils/StringFormater.ts

@@ -1,19 +0,0 @@
-export const StringFormater = (message:string) => {
-    if(!message) return "";
-
-    var urlRegex = /(^| )(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)?[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,10}(:[0-9]{1,10})?(\/.*)?$/gm;
-    message = message.replace(urlRegex, function (url) {
-      var hyperlink = url.replace(' ','');
-      if (!hyperlink.match('^https?:\/\/')) {
-        hyperlink = 'http://' + hyperlink;
-      }
-      return '<a href="' + hyperlink + '" target="_blank" rel="noopener noreferrer">' + url + '</a>'
-    });
-
-    var mailRegex = /([a-zA-Z0-9._-]+@[a-zA-Z0-9._-]+\.[a-zA-Z0-9_-]+)/gi;
-    message = message.replace(mailRegex, function (mail) {
-      return '<a href="mailto:' + mail + '">' + mail + '</a>'
-    });
-
-    return message;
-  }

src/index.tsx

@@ -2,25 +2,26 @@ import { TileLayer, MapContainer, Marker } from "react-leaflet";
 import "leaflet/dist/leaflet.css";
 import * as React from "react";
 import MarkerIconFactory from './Utils/MarkerIconFactory';
-import MarkerClusterGroup from 'react-leaflet-markercluster';
+import MarkerPopup from "./Components/Map/MarkerPopup";
-import MarkerPopup, { IMapItem, ITag } from "./Components/Map/MarkerPopup";
+import { Item, Tag } from "./types"
 import "./styles.scss"
 
-export interface IMapProps {
+export interface MapProps {
     height: string,
     width: string,
     center: number[],
     zoom: number,
-    places?: IMapItem[],
+    places?: Item[],
-    events?: IMapItem[],
+    events?: Item[],
-    tags?: ITag[],
+    tags?: Tag[],
 }
 
-const UtopiaMap = (props: IMapProps) => {
+
+const UtopiaMap = (props: MapProps) => {
     let tagMap = new Map(props.tags?.map(key => [key.id, key]));
 
-    const getTags = (item: IMapItem) => {
+    const getTags = (item: Item) => {
-        let tags: ITag[] = [];
+        let tags: Tag[] = [];
         item.tags && item.tags.forEach(element => {
             if (tagMap.has(element)) { tags.push(tagMap.get(element)!) };
         });
@@ -33,11 +34,10 @@ const UtopiaMap = (props: IMapProps) => {
             <TileLayer
                 attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                 url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
-
                 {props.places &&
-                    props.places.map((place: IMapItem) => {
+                    props.places.map((place: Item) => {
                         let tags = getTags(place);
-                        let color1 = "#555";
+                        let color1 = "#666";
                         let color2 = "RGBA(35, 31, 32, 0.2)";
                         if (tags[0]) {
                             color1 = tags[0].color;
@@ -45,30 +45,36 @@ const UtopiaMap = (props: IMapProps) => {
                         if (tags[1]) {
                             color2 = tags[1].color;
                         }
-
-
                         return (
                             <Marker icon={MarkerIconFactory('circle', color1, color2, 'circle-solid')} key={place.id} position={[place.position.coordinates[1], place.position.coordinates[0]]}>
                                 <MarkerPopup item={place} tags={tags} />
                             </Marker>
                         )
-
+                    })
-                    }
-
-                    )
                 }
 
                 {props.events &&
-                    (props.events).map((event: IMapItem) => (
+                    props.events.map((event: Item) => {
-                        <Marker icon={MarkerIconFactory('square', '#6d398b', 'RGBA(35, 31, 32, 0.2)', 'calendar-days-solid')} key={event.id} position={[event.position.coordinates[1], event.position.coordinates[0]]}>
+                        let tags = getTags(event);
-                            <MarkerPopup item={event} tags={getTags(event)} />
+                        let color1 = "#666";
-                        </Marker>
+                        let color2 = "RGBA(35, 31, 32, 0.2)";
-                    ))
+                        if (tags[0]) {
+                            color1 = tags[0].color;
+                        }
+                        if (tags[1]) {
+                            color2 = tags[1].color;
+                        }
+                        return (
+                            <Marker icon={MarkerIconFactory('square', color1, color2, 'calendar-days-solid')} key={event.id} position={[event.position.coordinates[1], event.position.coordinates[0]]}>
+                                <MarkerPopup item={event} tags={tags} />
+                            </Marker>
+                        )
+                    })
                 }
         </MapContainer>
 
     );
 }
 
-export default UtopiaMap;
+export { UtopiaMap, Item, Tag };
 

src/types.ts

@@ -0,0 +1,28 @@
+import { Component } from 'react' // Switch to 'react' if you use it
+import { MarkerClusterGroupOptions } from 'leaflet'
+  
+  export interface Item {
+    id: number,
+    date_created?: string,
+    date_updated?: string | null,
+    name: string,
+    text: string,
+    position: Geometry,
+    start?: string,
+    end?: string,
+    tags?: number[],
+    [key: string]:any
+  }
+  
+  export interface Geometry {
+    type: string;
+    coordinates: number[];
+  }
+  
+  export interface Tag {
+  
+      color: string;
+      id: number;
+      name: string;
+    
+  }