feat: filter to show free and paid events (#4759)

components/event/EventCard.js

@@ -5,6 +5,7 @@ import {
   MdOutlineArrowRightAlt,
 } from "react-icons/md";
 import { ReactMarkdown } from "react-markdown/lib/react-markdown";
+import { TbCoin, TbCoinOff } from "react-icons/tb";
 
 import Link from "@components/Link";
 import FallbackImage from "@components/FallbackImage";
@@ -33,6 +34,8 @@ export default function EventCard({ event, username }) {
             new Date(event.date.cfpClose) > new Date() && (
               <FaMicrophoneAlt title="CFP is open" />
             )}
+          {event.price?.startingFrom > 0 && <TbCoin title="Paid event" />}
+          {event.price?.startingFrom === 0 && <TbCoinOff title="Free event" />}
         </div>
         <div className="flex-1 space-y-1 p-4">
           <div className="flex items-center justify-between">

components/event/EventKey.js

@@ -1,5 +1,6 @@
 import { IconContext } from "react-icons";
 import { FaMicrophoneAlt } from "react-icons/fa";
+import { TbCoin, TbCoinOff } from "react-icons/tb";
 import {
   MdOutlineOnlinePrediction,
   MdOutlinePeople,
@@ -46,6 +47,18 @@ export default function EventKey({ categorisedEvents, onToggleEventType }) {
       key: "past",
       icon: MdOutlineDoneAll,
     },
+    {
+      title: "Free",
+      description: "These events are free to attend",
+      key: "free",
+      icon: TbCoinOff,
+    },
+    {
+      title: "Paid",
+      description: "These events are paid to attend",
+      key: "paid",
+      icon: TbCoin,
+    },
   ];
 
   return (
@@ -63,7 +76,9 @@ export default function EventKey({ categorisedEvents, onToggleEventType }) {
           </div>
           <div className="min-w-0 flex-1">
             <span className="absolute inset-0" aria-hidden="true" />
-            <p className="text-sm font-medium text-primary-high dark:text-white">{filter.title}</p>
+            <p className="text-sm font-medium text-primary-high dark:text-white">
+              {filter.title}
+            </p>
             <p className="truncate text-sm text-primary-medium dark:text-primary-low-high">
               {filter.description}
             </p>

components/user/UserEvents.js

@@ -22,6 +22,8 @@ export default function UserEvents({ data }) {
     cfpOpen: futureEvents.filter((event) =>
       event.date.cfpClose ? new Date(event.date.cfpClose) > new Date() : false
     ),
+    free: data.events.filter((event) => event.price?.startingFrom === 0),
+    paid: data.events.filter((event) => event.price?.startingFrom > 0),
     past: data.events
       .filter((event) => new Date(event.date.end) < new Date())
       .sort((a, b) => new Date(b.date.start) - new Date(a.date.start)),

data/eddiejaoude.json

@@ -72,12 +72,6 @@
       "url": "https://linkedin.com/in/eddiejaoude",
       "icon": "FaLinkedin"
     },
-    {
-      "group": "Socials Secondary",
-      "name": "YouTube Shorts: Quick technical tips",
-      "url": "https://youtube.com/eddiejaoudetv",
-      "icon": "FaYoutube"
-    },
     {
       "group": "EddieHub Community",
       "name": "EddieHub: Inclusive Open Source Community (Discord, GitHub Org ...)",
@@ -97,25 +91,22 @@
       "icon": "FaPodcast"
     },
     {
+      "group": "Content",
       "name": "Course (free): Customising your GitHub Profile",
       "url": "http://eddiejaoude.io/course-github-profile-landing",
       "icon": "FaGithub"
     },
     {
-      "group": "Socials Secondary",
-      "name": "Mastodon: Connect with me",
-      "url": "https://fosstodon.org/@eddiejaoude",
-      "icon": "FaMastodon"
+      "group": "Content",
+      "name": "Open Source project LinkFree",
+      "url": "https://github.com/EddieHubCommunity/LinkFree",
+      "icon": "FaGithub"
     },
     {
-      "name": "Donate: GitHub Sponsors",
+      "group": "Donate",
+      "name": "GitHub Sponsors",
       "url": "https://github.com/sponsors/eddiejaoude",
       "icon": "FaRegMoneyBillAlt"
-    },
-    {
-      "name": "Open Source project LinkFree",
-      "url": "https://github.com/EddieHubCommunity/LinkFree",
-      "icon": "FaGithub"
     }
   ],
   "milestones": [

data/eddiejaoude/events/2023-05-27-eddie-con.json

@@ -0,0 +1,15 @@
+{
+  "isVirtual": true,
+  "isInPerson": false,
+  "color": "green",
+  "name": "EddieCon v0.2 Unconference",
+  "description": "On Saturday 27 May my livestream is going to be a little bit different... I am going to combine this with our EddieHub community call - with an extra twist! It is going to be a mini-unconference! So what is an unconference? Well - you can submit a talk and this will be chosen by the community! This is the perfect opportunity if you want to practice your public speaking skills or if you want to test out a topic that you want to submit for another event. The one rule that applies is.... it must be open source related! I will be there to support you. What are you waiting for? Go and submit your talk now!",
+  "date": {
+    "start": "2023-05-27T21:00:00.000+00:00",
+    "end": "2023-05-27T22:00:00.000+00:00"
+  },
+  "url": "https://www.eddiehub.org/eddiecon-02",
+  "price": {
+    "startingFrom": 0
+  }
+}

models/Profile.js

@@ -65,6 +65,9 @@ const ProfileSchema = new mongoose.Schema({
       },
       url: String,
       order: Number,
+      price: {
+        startingFrom: Number,
+      },
     },
   ],
 });

pages/api/system/reload.js

@@ -213,6 +213,7 @@ export default async function handler(req, res) {
                 },
                 url: event.url,
                 order: position,
+                price: event.price,
               })),
             }
           );

pages/docs/how-to-guides/events.mdx

@@ -36,6 +36,9 @@ _If you need help on how to edit this file, please see the <Link href="/docs/how
     "cfpClose": "2022-10-09T17:00:00.000+00:00"
   },
   "url": "https://www.youtube.com/watch?v=iqIFD02OkVE",
+  "price": {
+    "startingFrom": 0
+  },
   "location": {
     "road": "Messe Berlin South Entrance & CityCube",
     "city": "Jafféstrasse",
@@ -60,6 +63,7 @@ _If you need help on how to edit this file, please see the <Link href="/docs/how
 | location               | true/false | Address of the event venue (required only when `isInPerson` is true) |
 | userStatus             | false      | What your role is at the event                                       |
 | speakingTopic          | false      | The topic of the event                                               |
+| price                  | false      | What is the cost to attend event in USD.                             |
 
 | Location property | Required | Description                            |
 | :---------------- | :------- | :------------------------------------- |
@@ -74,4 +78,6 @@ If you want to know how to properly add start, end, and CFP Close times, feel fr
 
 export default ({ children }) => (
   <DocsLayout title="LinkFree Events Documentation">{children}</DocsLayout>
-);
+);
+
+;

pages/events.js

@@ -1,6 +1,8 @@
 import { useState } from "react";
 import { FaListUl, FaMicrophoneAlt } from "react-icons/fa";
 import { MdOutlineOnlinePrediction, MdOutlinePeople } from "react-icons/md";
+import { TbCoin, TbCoinOff } from "react-icons/tb";
+
 import { getEvents } from "./api/events";
 
 import logger from "@config/logger";
@@ -47,6 +49,8 @@ export default function Events({ events }) {
     cfpOpen: events.filter((event) =>
       event.date.cfpClose ? new Date(event.date.cfpClose) > new Date() : false
     ),
+    free: events.filter((event) => event.price?.startingFrom === 0),
+    paid: events.filter((event) => event.price?.startingFrom > 0),
   };
   const tabFilters = [
     {
@@ -77,6 +81,20 @@ export default function Events({ events }) {
       icon: MdOutlineOnlinePrediction,
       total: categorizedEvents.virtual.length,
     },
+    {
+      title: "Free",
+      description: "These events are free to attend",
+      key: "free",
+      icon: TbCoinOff,
+      total: categorizedEvents.free.length,
+    },
+    {
+      title: "Paid",
+      description: "These events are paid to attend",
+      key: "paid",
+      icon: TbCoin,
+      total: categorizedEvents.paid.length,
+    },
   ];
 
   const [eventType, setEventType] = useState("all");

pages/search.js

@@ -107,7 +107,6 @@ export default function Search({ data }) {
   };
 
   useEffect(() => {
-    console.log("======", inputValue.length);
     if (!inputValue) {
       //Setting the users as null when the input field is empty
       setFilteredUsers(getRandomUsers());