fetch & display similar events

src/APP/pages/community/sections/eventsSection/SingleEvents/SingleEvent2.jsx

@@ -29,7 +29,7 @@ function SingleEvent2() {
         </div>
       )}
       {isSuccess && typeof oneEvent !== "undefined" && (
-        <section className="px-2 md:px-0 py-4 md:py-10">
+        <section className="px-2 md:px-0 py-4 md:py-10 bg-gray-100">
           <div className="max-w-1216 mx-auto flex flex-col gap-3 md:gap-6 w-full md:p-3">
             <GoBackBtn />
             <Hero event={oneEvent} />
@@ -38,7 +38,7 @@ function SingleEvent2() {
             <EventDescription eventDesc={oneEvent?.about} />
           </LandingWrapper>
           <LandingWrapper title="similar events">
-            <SimilarEvents />
+            <SimilarEvents eventCategory={oneEvent?.category.name} />
           </LandingWrapper>
         </section>
       )}

src/APP/pages/community/sections/eventsSection/SingleEvents/sections/EventCard.jsx

@@ -1,7 +1,187 @@
 import React from "react";
 
-function EventCard() {
-  return <div className="bg-green-300 w-full flex flex-col">EventCard</div>;
+import LocationTag from "./LocationTag";
+import { eventCardPhysical, eventCardVirtual } from "@/assets/images/community";
+
+function EventCard({ event }) {
+  const isVirtual = event?.mode === "Virtual";
+  return (
+    <article
+      className="w-full h-[530px] flex flex-col rounded-xl bg-cover bg-no-repeat overflow-hidden"
+      style={{
+        backgroundImage: `url(${
+          isVirtual ? eventCardVirtual : eventCardPhysical
+        })`,
+      }}
+    >
+      <div className="h-2/3 p-6 flex flex-col justify-end gap-2">
+        <LocationTag isVirtual={isVirtual} />
+
+        <h3
+          className={`text-2xl font-medium line-clamp-2 ${
+            isVirtual ? "text-white" : "text-green-header"
+          }`}
+        >
+          {event?.name}
+        </h3>
+      </div>
+
+      <div className="h-1/3 bg-white p-6 flex-between flex-col gap-2">
+        <div className="w-full grid grid-cols-2 gap-x-4 gap-y-2 lg:gap-x-16 lg:gap-y-6">
+          <div className="flex items-center gap-2">
+            <svg
+              width="25"
+              height="25"
+              viewBox="0 0 25 25"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <g clipPath="url(#clip0_7643_20644)">
+                <path
+                  fill-rule="evenodd"
+                  clipRule="evenodd"
+                  d="M6.92102 0.740234C6.10916 0.740234 5.45102 1.39838 5.45102 2.21023V3.68023H3.98102C2.3573 3.68023 1.04102 4.99652 1.04102 6.62023V21.3202C1.04102 22.944 2.3573 24.2602 3.98102 24.2602H21.621C23.2447 24.2602 24.561 22.944 24.561 21.3202V6.62023C24.561 4.99652 23.2447 3.68023 21.621 3.68023H20.151V2.21023C20.151 1.39838 19.4929 0.740234 18.681 0.740234C17.8692 0.740234 17.211 1.39838 17.211 2.21023V3.68023H8.39102V2.21023C8.39102 1.39838 7.73287 0.740234 6.92102 0.740234ZM6.92102 8.09023C6.10916 8.09023 5.45102 8.74837 5.45102 9.56023C5.45102 10.3721 6.10916 11.0302 6.92102 11.0302H18.681C19.4929 11.0302 20.151 10.3721 20.151 9.56023C20.151 8.74837 19.4929 8.09023 18.681 8.09023H6.92102Z"
+                  fill="#656767"
+                />
+              </g>
+              <defs>
+                <clipPath id="clip0_7643_20644">
+                  <rect
+                    width="24"
+                    height="24"
+                    fill="white"
+                    transform="translate(0.800781 0.5)"
+                  />
+                </clipPath>
+              </defs>
+            </svg>
+
+            <span className="text-base text-grey-neutral font-normal">
+              {event?.start_date}
+            </span>
+          </div>
+
+          <div className="flex items-center gap-2 lg:place-self-end">
+            <svg
+              width="25"
+              height="25"
+              viewBox="0 0 25 25"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <g clipPath="url(#clip0_7645_21542)">
+                <path
+                  fill-rule="evenodd"
+                  clipRule="evenodd"
+                  d="M12.8016 23.7008C18.9872 23.7008 24.0016 18.6864 24.0016 12.5008C24.0016 6.31519 18.9872 1.30078 12.8016 1.30078C6.61597 1.30078 1.60156 6.31519 1.60156 12.5008C1.60156 18.6864 6.61597 23.7008 12.8016 23.7008ZM13.8018 6.90039C13.8018 6.34811 13.354 5.90039 12.8018 5.90039C12.2495 5.90039 11.8018 6.34811 11.8018 6.90039V12.5004C11.8018 12.7656 11.9071 13.02 12.0947 13.2075L16.0545 17.1673C16.445 17.5578 17.0781 17.5578 17.4687 17.1673C17.8592 16.7768 17.8592 16.1436 17.4687 15.7531L13.8018 12.0862V6.90039Z"
+                  fill="#656767"
+                />
+              </g>
+              <defs>
+                <clipPath id="clip0_7645_21542">
+                  <rect
+                    width="24"
+                    height="24"
+                    fill="white"
+                    transform="translate(0.800781 0.5)"
+                  />
+                </clipPath>
+              </defs>
+            </svg>
+
+            <span className="text-base text-grey-neutral font-normal">
+              {event?.start_time}
+            </span>
+          </div>
+
+          <div className="flex items-center gap-2">
+            <svg
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <g clipPath="url(#clip0_7762_21563)">
+                <circle
+                  cx="12.0009"
+                  cy="12.0009"
+                  r="10.9091"
+                  fill="#656767"
+                  stroke="#656767"
+                  strokeWidth="1.5"
+                />
+                <ellipse
+                  cx="12.0004"
+                  cy="12.0009"
+                  rx="4.36364"
+                  ry="10.9091"
+                  stroke="#FCFDFC"
+                  strokeWidth="1.5"
+                />
+                <path
+                  d="M1.0918 12H22.91"
+                  stroke="#FCFDFC"
+                  strokeWidth="1.5"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                />
+              </g>
+              <defs>
+                <clipPath id="clip0_7762_21563">
+                  <rect width="24" height="24" fill="white" />
+                </clipPath>
+              </defs>
+            </svg>
+
+            <span className="text-base text-grey-neutral line-clamp-1 font-normal">
+              {event?.mode === "Physical" ? event?.location : event?.mode}
+            </span>
+          </div>
+
+          <div className="flex items-center gap-2 lg:place-self-end">
+            <svg
+              width="21"
+              height="21"
+              viewBox="0 0 21 21"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M2.61199 9.78596C1.77603 10.7196 1.75805 12.1282 2.52527 13.1191C4.04772 15.0854 5.71408 16.7518 7.6804 18.2742C8.6713 19.0414 10.0799 19.0234 11.0135 18.1875C13.5484 15.9178 15.8697 13.5459 18.11 10.9393C18.3315 10.6816 18.4701 10.3658 18.5012 10.0274C18.6387 8.531 18.9211 4.21991 17.7503 3.04913C16.5796 1.87836 12.2685 2.16082 10.7721 2.29832C10.4337 2.32941 10.1179 2.46796 9.86017 2.68944C7.25357 4.92973 4.88163 7.25111 2.61199 9.78596Z"
+                fill="#656767"
+              />
+              <path
+                d="M6.13281 12.166L8.63281 14.666"
+                stroke="#FCFDFC"
+                strokeWidth="1.5"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+              <circle
+                cx="1.25"
+                cy="1.25"
+                r="1.25"
+                transform="matrix(1 0 0 -1 13.6328 7.16602)"
+                fill="white"
+              />
+            </svg>
+
+            <span className="text-base text-grey-neutral text-nowrap font-normal">
+              {event?.category.name}
+            </span>
+          </div>
+        </div>
+
+        <button
+          type="button"
+          className="w-full border border-primary py-2 rounded-lg text-primary hover:bg-primary hover:text-white transition-all ease-in duration-500 text-base font-bold"
+        >
+          Join
+        </button>
+      </div>
+    </article>
+  );
 }
 
 export default EventCard;

src/APP/pages/community/sections/eventsSection/SingleEvents/sections/LocationTag.jsx

@@ -0,0 +1,45 @@
+import React from "react";
+
+function LocationTag({ isVirtual }) {
+  return (
+    <div className="border cursor-pointer rounded-full bg-white p-1 w-fit">
+      <div className="flex-center bg-green-light rounded-full px-3 py-1.5 gap-2">
+        <svg
+          width="16"
+          height="19"
+          viewBox="0 0 16 19"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <g clipPath="url(#clip0_8175_11232)">
+            <path
+              d="M8 0.611328C12.3294 0.611328 16 4.1962 16 8.54534C16 12.9637 12.2696 16.0644 8.824 18.1728C8.57289 18.3146 8.28893 18.3891 8 18.3891C7.71107 18.3891 7.42711 18.3146 7.176 18.1728C3.7368 16.0438 0 12.979 0 8.54534C0 4.1962 3.67061 0.611328 8 0.611328Z"
+              fill="#1F7964"
+            />
+            <path
+              d="M11.1109 8.61111C11.1109 10.3293 9.718 11.7222 7.99978 11.7222C6.28156 11.7222 4.88867 10.3293 4.88867 8.61111C4.88867 6.89289 6.28156 5.5 7.99978 5.5C9.718 5.5 11.1109 6.89289 11.1109 8.61111Z"
+              fill="white"
+              stroke="white"
+            />
+          </g>
+          <defs>
+            <clipPath id="clip0_8175_11232">
+              <rect
+                width="16"
+                height="17.7778"
+                fill="white"
+                transform="translate(0 0.611328)"
+              />
+            </clipPath>
+          </defs>
+        </svg>
+
+        <span className="capitalize text-green-header text-sm font-semibold">
+          {isVirtual ? "Virtual" : "On-Site"}
+        </span>
+      </div>
+    </div>
+  );
+}
+
+export default LocationTag;

src/APP/pages/community/sections/eventsSection/SingleEvents/sections/SimilarEvents.jsx

@@ -1,13 +1,42 @@
 import React from "react";
+import { useParams } from "react-router-dom";
+
+import { useEventsData } from "../../../../../../../hooks/Queries/eventsSection/useEvents";
+import { Loader } from "../../../../../../components";
 import EventCard from "./EventCard";
 
-function SimilarEvents() {
+function SimilarEvents({ eventCategory }) {
+  const { id } = useParams();
+  const {
+    data: eventsData,
+    isError,
+    isPending,
+    isSuccess,
+  } = useEventsData(eventCategory);
+
+  const similarEvents = eventsData?.results.filter(
+    (event) => Number(event.id) !== Number(id)
+  );
+
   return (
-    <div className="border border-red-500 mx-auto max-w-1216 w-full flex items-center flex-col md:flex-row gap-4 md:gap-8 justify-between md:px-4 xl:px-0">
-      {Array.from({ length: 3 }).map((_, i) => (
-        <EventCard key={i} />
-      ))}
-    </div>
+    <>
+      {isError && <p>Error fetching similar events!</p>}
+      {isPending && (
+        <div className="flex flex-col items-center justify-center gap-4 py-10">
+          <Loader />
+          <p className="text-lg font-medium text-primary">Loading event...</p>
+        </div>
+      )}
+      {isSuccess && eventsData.results.length > 0 ? (
+        <div className="mx-auto my-6 max-w-1216 w-full grid grid-cols-1 sm:grid-cols-2 place-content-center lg:grid-cols-3 gap-8 justify-between px-2 md:px-4 xl:px-0">
+          {similarEvents.map((event) => (
+            <EventCard key={event.id} event={event} />
+          ))}
+        </div>
+      ) : (
+        <p>No Similar Events</p>
+      )}
+    </>
   );
 }
 

src/APP/pages/community/sections/eventsSection/SingleEvents/sections/index.js

@@ -2,4 +2,5 @@ export { default as EventCard } from "./EventCard";
 export { default as EventDescription } from "./EventDescription";
 export { default as Hero } from "./Hero";
 export { default as GoBackBtn } from "./GoBackBtn";
+export { default as LocationTag } from "./LocationTag";
 export { default as SimilarEvents } from "./SimilarEvents";

src/assets/images/community/index.js

@@ -3,6 +3,8 @@ import akinyiux from "./akinyiux.png";
 import community from "./community.png";
 import eakinyi from "./eakinyi.png";
 import Emmy from "./Emmy.png";
+import eventCardVirtual from "./event-card-bg-virtual.png";
+import eventCardPhysical from "./event-card-bg-physical.png";
 import eventsVirtualBg from "./events-bg-physical.png";
 import eventsPhysicalBg from "./events-bg-virtual.png";
 import galleryimage1 from "./galleryimage1.png";
@@ -66,6 +68,8 @@ export {
   Akinyi,
   akinyiux,
   eakinyi,
+  eventCardVirtual,
+  eventCardPhysical,
   eventsPhysicalBg,
   eventsVirtualBg,
   Emmy,

src/hooks/Queries/eventsSection/useEvents.jsx

@@ -0,0 +1,23 @@
+import { useQuery } from "@tanstack/react-query";
+import axios from "axios";
+
+const fetchEvents = async (catName) => {
+  try {
+    const url = `${process.env.REACT_APP_API_BASE_URL}/events/?category=${catName}`;
+    const response = await axios.get(url);
+
+    return response.data;
+  } catch (error) {
+    console.error("Error fetching similar Events: ", error);
+    throw new Error(error);
+  }
+};
+
+export const useEventsData = (catName) => {
+  return useQuery({
+    queryKey: ["eventsData"],
+    queryFn: () => fetchEvents(catName),
+    refetchOnWindowFocus: false,
+    staleTime: 5 * 60 * 60,
+  });
+};