feat: community events to map (#7522)

components/event/EventCard.js

@@ -52,7 +52,9 @@ export default function EventCard({ manage, event, usernames }) {
           {event.isVirtual && (
             <MdOutlineOnlinePrediction title="Virtual event" />
           )}
-          {event.isInPerson && <MdOutlinePeople title="In person event" />}
+          {event.location?.country && (
+            <MdOutlinePeople title="In person event" />
+          )}
           {event.date.cfpOpen && <FaMicrophoneAlt title="CFP is open" />}
           {event.price?.startingFrom > 0 && <TbCoin title="Paid event" />}
           {event.price?.startingFrom === 0 && <TbCoinOff title="Free event" />}
@@ -97,17 +99,11 @@ export default function EventCard({ manage, event, usernames }) {
                 {event.description}
               </ReactMarkdown>
               <p className="text-sm text-primary-high dark:text-primary-low-medium py-1 flex gap-2 flex-wrap">
-                {(event.isVirtual || (event.isInPerson && event.location)) && (
-                  <FaMapPin />
-                )}
+                {(event.isVirtual || event.location?.country) && <FaMapPin />}
                 <span>
                   {event.isVirtual && "Remote"}
-                  {event.isVirtual &&
-                    event.isInPerson &&
-                    event.location &&
-                    " AND in "}
-                  {event.isInPerson &&
-                    event.location &&
+                  {event.isVirtual && event.location?.country && " AND in "}
+                  {event.location?.country &&
                     Object.values(event.location).join(", ")}
                 </span>
               </p>

components/map/Clusters.js

@@ -4,8 +4,9 @@ import { Marker, useMap } from "react-leaflet";
 import useSupercluster from "use-supercluster";
 import UserMarker from "./UserMarker";
 import styles from "./Clusters.module.css";
+import EventMarker from "./EventMarker";
 
-export default function Clusters({users}) {
+export default function Clusters({points}) {
   const map = useMap();
   const mapB = map.getBounds();
   const [bounds, setBounds] = useState([
@@ -32,15 +33,14 @@ export default function Clusters({users}) {
   })
 
   const { clusters, supercluster } = useSupercluster({
-    points: users,
+    points: points,
     bounds,
     zoom,
     options: {
       radius: zoom < 17 ? 75 : 50,
       maxZoom: 18
     }
   });
-
   const icons = {};
   const fetchIcon = (count) => {
     const size =
@@ -65,7 +65,8 @@ export default function Clusters({users}) {
           const {
             cluster: isCluster,
             point_count: pointCount,
-            username
+            username,
+            name
           } = cluster.properties;
 
           // we have a cluster to render
@@ -91,7 +92,9 @@ export default function Clusters({users}) {
           }
 
           // we have a single point to render
-          return (
+          return cluster.properties.isEvent ? (
+            <EventMarker event={cluster} key={name} />
+          ) : (
             <UserMarker user={cluster} key={username} />
           );
         })}

components/map/EventMarker.js

@@ -0,0 +1,58 @@
+import L from "leaflet";
+import { Marker, Popup } from "react-leaflet";
+import { ReactMarkdown } from "react-markdown/lib/react-markdown";
+import Link from "@components/Link";
+
+export default function EventMarker({event}) {
+  // Custom component for rendering links within ReactMarkdown
+  const LinkRenderer = ({ href, children }) => (
+    <Link href={href}>
+      {children}
+    </Link>
+  );
+
+  return (
+    <Marker
+      icon={L.divIcon({
+        className: "rounded-full",
+        html: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" />
+        <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z" />
+      </svg>
+      `,
+        popupAnchor: [0, -10],
+        iconSize: [40, 40],
+        iconAnchor: [20, 20],
+      })}
+      position={[event.geometry.coordinates[1], event.geometry.coordinates[0]]}
+    >
+      <Popup>
+        <div className="flex flex-col gap-[5px]">
+          <h1 className="font-[600]">
+            <Link href={event.properties.url}>
+              {event.properties.name}
+            </Link>
+          </h1>
+          <span>
+            {[
+              event.properties.location.city,
+              event.properties.location.state,
+              event.properties.location.country,
+            ]
+              .filter((x) => x)
+              .join(", ")}
+          </span>
+          <span>
+            <ReactMarkdown components={{ a: LinkRenderer }}>
+              {event.properties.description}
+            </ReactMarkdown>
+          </span>
+          <span>
+            {`${new Date(event.properties.date.start).toLocaleDateString()} - 
+              ${new Date(event.properties.date.end).toLocaleDateString()}`}
+          </span>
+        </div>
+      </Popup>
+    </Marker>
+  )
+}

components/map/Map.js

@@ -2,7 +2,7 @@ import { MapContainer, TileLayer } from "react-leaflet";
 import Clusters from "./Clusters";
 import "leaflet/dist/leaflet.css";
 
-export default function Map({ users }) {
+export default function Map({ points }) {
   const boundsMap = [
     [-90, -180], // Southwest coordinates
     [90, 180], // Northeast coordinates
@@ -23,7 +23,7 @@ export default function Map({ users }) {
         attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
         url="https://b.tile.openstreetmap.org/{z}/{x}/{y}.png"
       />
-      <Clusters users={users} />
+      <Clusters points={points} />
     </MapContainer>
   );
 }

components/user/UserEvents.js

@@ -3,8 +3,12 @@ import EventCard from "@components/event/EventCard";
 import Alert from "@components/Alert";
 import DropdownMenu from "@components/form/DropDown";
 
-export default function UserEvents({ manage = false, events }) {
-  const [eventType, setEventType] = useState("future");
+export default function UserEvents({
+  manage = false,
+  events,
+  filter = "future",
+}) {
+  const [eventType, setEventType] = useState(filter);
 
   const eventOptions = [
     { value: "all", name: "All Events" },
@@ -31,7 +35,7 @@ export default function UserEvents({ manage = false, events }) {
       case "virtual":
         return event.date.future && event.isVirtual;
       case "inPerson":
-        return event.date.future && event.isInPerson;
+        return event.date.future && event.location?.country;
       case "cfpOpen":
         return event.date.cfpOpen;
       case "free":

models/Profile/Event.js

@@ -34,6 +34,30 @@ const EventSchema = new Schema({
   price: {
     startingFrom: Number,
   },
+  location: {
+    road: {
+      type: String,
+      min: 2,
+      max: 128,
+    },
+    city: {
+      type: String,
+      min: 2,
+      max: 128,
+    },
+    state: {
+      type: String,
+      min: 2,
+      max: 128,
+    },
+    country: {
+      type: String,
+      min: 2,
+      max: 128,
+    },
+    lat: Number,
+    lon: Number,
+  },
   color: {
     type: String,
     min: 2,

pages/account/manage/event/[[...data]].js

@@ -70,7 +70,11 @@ export default function ManageEvent({ BASE_URL, event }) {
     event.date?.end && formatDate(event.date?.end)
   );
   const [price, setPrice] = useState(event.price?.startingFrom || 0);
-  const [color, setColor] = useState(event.color || "" );
+  const [color, setColor] = useState(event.color || "");
+  const [road, setRoad] = useState(event.location.road || "");
+  const [city, setCity] = useState(event.location.city || "");
+  const [state, setState] = useState(event.location.state || "");
+  const [country, setCountry] = useState(event.location.country || "");
 
   const handleSubmit = async (e) => {
     e.preventDefault();
@@ -83,6 +87,7 @@ export default function ManageEvent({ BASE_URL, event }) {
       isVirtual,
       price: { startingFrom: price },
       color,
+      location: { road, city, state, country },
     };
     let apiUrl = `${BASE_URL}/api/account/manage/event/`;
     if (event._id) {
@@ -156,11 +161,11 @@ export default function ManageEvent({ BASE_URL, event }) {
           additionalMessage={showNotification.additionalMessage}
         />
 
-        <div className="relative mx-auto grid max-w-7xl grid-cols-1 gap-x-16 lg:grid-cols-2 lg:px-8 xl:gap-x-48">
-          <form
-            className="space-y-8 divide-y divide-primary-low-medium/30"
-            onSubmit={handleSubmit}
-          >
+        <form
+          className="space-y-8 divide-y divide-primary-low-medium/30"
+          onSubmit={handleSubmit}
+        >
+          <div className="relative mx-auto grid max-w-7xl grid-cols-1 gap-x-16 lg:grid-cols-2 lg:px-8 xl:gap-x-48">
             <div className="space-y-8 divide-y divide-primary-low-medium/30 sm:space-y-5">
               <div className="space-y-6 sm:space-y-5">
                 <div>
@@ -278,21 +283,67 @@ export default function ManageEvent({ BASE_URL, event }) {
                 </div>
               </div>
             </div>
-          </form>
-          <div>
-            <EventCard
-              event={{
-                name,
-                description,
-                url,
-                date: { start: startDate, end: endDate },
-                isVirtual,
-                price,
-                color,
-              }}
-            />
+
+            <div>
+              <EventCard
+                event={{
+                  name,
+                  description,
+                  url,
+                  date: { start: startDate, end: endDate },
+                  isVirtual,
+                  price,
+                  color,
+                }}
+              />
+              <div>
+                <h3 className="text-lg font-medium leading-6 text-primary-high">
+                  Does the event have a location?
+                </h3>
+              </div>
+              <div className="mt-1 sm:col-span-2 sm:mt-0">
+                <Input
+                  name="road"
+                  label="Road"
+                  onChange={(e) => setRoad(e.target.value)}
+                  value={road}
+                  minLength="2"
+                  maxLength="64"
+                />
+              </div>
+              <div className="mt-1 sm:col-span-2 sm:mt-0">
+                <Input
+                  name="city"
+                  label="City"
+                  onChange={(e) => setCity(e.target.value)}
+                  value={city}
+                  minLength="2"
+                  maxLength="64"
+                />
+              </div>
+              <div className="mt-1 sm:col-span-2 sm:mt-0">
+                <Input
+                  name="state"
+                  label="State"
+                  onChange={(e) => setState(e.target.value)}
+                  value={state}
+                  minLength="2"
+                  maxLength="64"
+                />
+              </div>
+              <div className="mt-1 sm:col-span-2 sm:mt-0">
+                <Input
+                  name="country"
+                  label="Country"
+                  onChange={(e) => setCountry(e.target.value)}
+                  value={country}
+                  minLength="2"
+                  maxLength="64"
+                />
+              </div>
+            </div>
           </div>
-        </div>
+        </form>
       </Page>
       <ConfirmDialog
         open={open}

pages/account/manage/events.js

@@ -63,7 +63,7 @@ export default function ManageEvents({ events }) {
           Add Event
         </Button>
 
-        <UserEvents events={events} manage={true} />
+        <UserEvents events={events} manage={true} filter="all" />
       </Page>
     </>
   );