Event filters

components/event/EventCard.js

@@ -1,4 +1,5 @@
 import Link from "next/link";
+import { FaMicrophoneAlt } from "react-icons/fa";
 import {
   MdOutlineOnlinePrediction,
   MdOutlinePeople,
@@ -28,6 +29,10 @@ export default function EventCard({ event, username }) {
             <MdOutlineOnlinePrediction title="Virtual event" />
           )}
           {event.isInPerson && <MdOutlinePeople title="In person event" />}
+          {event.date.cfpClose &&
+            new Date(event.date.cfpClose) > new Date() && (
+              <FaMicrophoneAlt title="CFP is open" />
+            )}
         </div>
         <div className="flex-1 space-y-1">
           <div className="flex items-center justify-between">

components/event/EventKey.js

@@ -1,41 +1,60 @@
 import { IconContext } from "react-icons";
+import { FaListUl, FaMicrophoneAlt } from "react-icons/fa";
 import { MdOutlineOnlinePrediction, MdOutlinePeople } from "react-icons/md";
 
-export default function EventKey({ events }) {
-  const inPersonEvents = events.filter(event => event.isInPerson).length;
-  const virtualEvents = events.filter(event => event.isVirtual).length;
+export default function EventKey({ categorisedEvents, onToggleEventType }) {
+  const filters = [
+    {
+      title: "Show all",
+      description: "List all events with no filters",
+      key: "all",
+      icon: FaListUl,
+    },
+    {
+      title: "CFP open",
+      description: "You can submit a talk to this conference",
+      key: "cfpOpen",
+      icon: FaMicrophoneAlt,
+    },
+    {
+      title: "In person",
+      description: "These are in person events",
+      key: "inPerson",
+      icon: MdOutlinePeople,
+    },
+    {
+      title: "Virtual",
+      description: "Held virtually online event",
+      key: "virtual",
+      icon: MdOutlineOnlinePrediction,
+    },
+  ];
+
   return (
     <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 mb-6">
-      <div className="relative flex items-center space-x-3 rounded-lg border border-gray-300 bg-white px-6 py-5 shadow-sm focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2">
-        <div className="flex-shrink-0">
-          <IconContext.Provider value={{ size: "3em" }}>
-            <MdOutlinePeople />
-          </IconContext.Provider>
-        </div>
-        <div className="min-w-0 flex-1">
-          <span className="absolute inset-0" aria-hidden="true" />
-          <p className="text-sm font-medium text-gray-900">In person</p>
-          <p className="truncate text-sm text-gray-500">
-            These are in person events
-          </p>
-        </div>
-        <div className="text-2xl font-semibold">{inPersonEvents}</div>
-      </div>
-      <div className="relative flex items-center space-x-3 rounded-lg border border-gray-300 bg-white px-6 py-5 shadow-sm focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2">
-        <div className="flex-shrink-0">
-          <IconContext.Provider value={{ size: "3em" }}>
-            <MdOutlineOnlinePrediction />
-          </IconContext.Provider>
-        </div>
-        <div className="min-w-0 flex-1">
-          <span className="absolute inset-0" aria-hidden="true" />
-          <p className="text-sm font-medium text-gray-900">Virtual</p>
-          <p className="truncate text-sm text-gray-500">
-            These are virtual events held online
-          </p>
+      {filters.map((filter) => (
+        <div
+          onClick={() => onToggleEventType(filter.key)}
+          className="hover:scale-105 cursor-pointer transition-all 3s relative flex items-center space-x-3 rounded-lg border border-gray-300 bg-white px-6 py-5 shadow-sm focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2"
+          key={filter.key}
+        >
+          <div className="flex-shrink-0">
+            <IconContext.Provider value={{ size: "3em" }}>
+              <filter.icon />
+            </IconContext.Provider>
+          </div>
+          <div className="min-w-0 flex-1">
+            <span className="absolute inset-0" aria-hidden="true" />
+            <p className="text-sm font-medium text-gray-900">{filter.title}</p>
+            <p className="truncate text-sm text-gray-500">
+              {filter.description}
+            </p>
+          </div>
+          <div className="text-2xl font-semibold">
+            {categorisedEvents[filter.key].length}
+          </div>
         </div>
-        <div className="text-2xl font-semibold">{virtualEvents}</div>
-      </div>
+      ))}
     </div>
   );
 }

components/user/UserEvents.js

@@ -1,15 +1,31 @@
+import { useState } from "react";
+
 import EventCard from "../event/EventCard";
 import Alert from "../Alert";
 import EventKey from "../event/EventKey";
 
 export default function UserEvents({ data }) {
+  const [eventType, seteventType] = useState("all");
+  let categorisedEvents = {
+    all: data.events,
+    virtual: data.events.filter((event) => event.isVirtual === true),
+    inPerson: data.events.filter((event) => event.isInPerson === true),
+    cfpOpen: data.events.filter((event) =>
+      event.date.cfpClose ? new Date(event.date.cfpClose) > new Date() : false
+    ),
+  };
+
   return (
     <div className="mt-6">
-      <EventKey events={data.events} />
+      <EventKey
+        categorisedEvents={categorisedEvents}
+        onToggleEventType={(newValue) => seteventType(newValue)}
+      />
+
       {!data.events && <Alert type="info" message="No events found" />}
       <ul role="list" className="divide-y divide-gray-200">
         {data.events &&
-          data.events.map((event, index) => (
+          categorisedEvents[eventType].map((event, index) => (
             <EventCard event={event} key={index} />
           ))}
       </ul>

data/eddiejaoude/events/2023-09-18-talk-infobip.json

@@ -6,7 +6,8 @@
   "description": "This is not another developer event. This is an experience that brings together the global tech community for two days of learning, networking, and creating new memories. This is a gathering of professionals, founders, leaders, disruptors, and dreamers. This is Infobip Shift. And we want to Shift Your World.",
   "date": {
     "start": "2023-09-18T10:00:00.000+00:00",
-    "end": "2023-09-19T18:00:00.000+00:00"
+    "end": "2023-09-19T18:00:00.000+00:00",
+    "cfpClose": "2023-05-15T18:00:00.000+00:00"
   },
   "url": "https://shift.infobip.com"
 }

data/juliafmorgado/events/2023-02-07-civo-navigate.json

@@ -1,11 +1,11 @@
 {
-    "isInPerson": true,
-    "color": "red",
-    "name": "CIVO Navigate",
-    "description": "A two-day conference in **Tampa, FL**, revolving around topics such as **Kubernetes**, **Edge Computing**, **Machine Learning**, **Dev/GitOps**, **Observability**, **Security**, and **Cloud Native Transformation**, where I will be delivering a workshop on Open Source developer tool **Acorn**.",
-    "date": {
-        "start": "2023-02-07T08:30:00.000-05:00",
-        "end": "2023-02-08T17:40:00.000-05:00"
-    },
-    "url": "https://civo.com/navigate" 
+  "isInPerson": true,
+  "color": "red",
+  "name": "CIVO Navigate",
+  "description": "A two-day conference in **Tampa, FL**, revolving around topics such as **Kubernetes**, **Edge Computing**, **Machine Learning**, **Dev/GitOps**, **Observability**, **Security**, and **Cloud Native Transformation**, where I will be delivering a workshop on Open Source developer tool **Acorn**.",
+  "date": {
+    "start": "2023-02-07T08:30:00.000-05:00",
+    "end": "2023-02-08T17:40:00.000-05:00"
+  },
+  "url": "https://civo.com/navigate"
 }

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

@@ -1,5 +1,5 @@
 import DocsLayout from "../../../components/layouts/DocsLayout.js";
-import ClipboardCopy from "../../../components/ClipboardCopy"
+import ClipboardCopy from "../../../components/ClipboardCopy";
 
 ## Events
 
@@ -31,7 +31,8 @@ _If you need help on how to edit this file, please see the [Editing guide](/docs
   "description": "In this livestream I will be going reviewing your **Open Source projects** and profiles! I will be joined by **Amanda**, a Developer Advocate.",
   "date": {
     "start": "2022-12-09T16:00:00.000+00:00",
-    "end": "2022-12-09T17:00:00.000+00:00"
+    "end": "2022-12-09T17:00:00.000+00:00",
+    "cfpClose": "2022-10-09T17:00:00.000+00:00"
   },
   "url": "https://www.youtube.com/watch?v=iqIFD02OkVE"
 }
@@ -45,6 +46,7 @@ _If you need help on how to edit this file, please see the [Editing guide](/docs
 | name                   | Name of the event                                           |
 | description            | More details about the event, this can include markdown     |
 | date                   | Start and end date plus time of the event                   |
+| cfpClose               | [optional] The date of when the CFP to submit a talk closes |
 | url                    | Where can people learn more about the event                 |
 
 4. Now you can commit your file and create a Pull Request. For more details please see [Editing guide](/docs/how-to-guides/editing)

pages/events.js

@@ -1,4 +1,5 @@
 import Head from "next/head";
+import { useState } from "react";
 
 import EventCard from "../components/event/EventCard";
 import Alert from "../components/Alert";
@@ -20,6 +21,16 @@ export async function getServerSideProps(context) {
 }
 
 export default function Events({ events }) {
+  const [eventType, seteventType] = useState("all");
+  let categorisedEvents = {
+    all: events,
+    virtual: events.filter((event) => event.isVirtual === true),
+    inPerson: events.filter((event) => event.isInPerson === true),
+    cfpOpen: data.events.filter((event) =>
+      event.date.cfpClose ? new Date(event.date.cfpClose) > new Date() : false
+    ),
+  };
+
   return (
     <>
       <Head>
@@ -30,11 +41,14 @@ export default function Events({ events }) {
       <Page>
         <h1 className="text-4xl mb-4 font-bold">Community events</h1>
 
-        <EventKey events={events} />
+        <EventKey
+          categorisedEvents={categorisedEvents}
+          onToggleEventType={(newValue) => seteventType(newValue)}
+        />
 
         {!events.length && <Alert type="info" message="No events found" />}
         <ul role="list" className="divide-y divide-gray-200">
-          {events.map((event, index) => (
+          {categorisedEvents[eventType].map((event, index) => (
             <EventCard event={event} username={event.username} key={index} />
           ))}
         </ul>