Nick/feature/event home page card/99

package.json

@@ -17,6 +17,7 @@
   },
   "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e",
   "dependencies": {
+    "dayjs": "^1.11.13",
     "@apollo/client": "^3.10.8"
   }
 }

web/__test__/components/UpcomingEventHomeCard.test.tsx

@@ -0,0 +1,33 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import UpcomingEventHomeCard from "../../src/components/UpcomingEventHomeCard";
+import React from "react";
+
+const mockEvents = {
+  Events: [
+    {
+      id: 1,
+      title: "Test event",
+      description: "Test description",
+      subtitle: "Test subtitle",
+      location: "Test location",
+      locationLink: "Test link",
+      eventDateStart: "25 December",
+      eventDateEnd: "26 December",
+      isLive: false,
+      termsAndConditions: "Test terms and conditions",
+      eventCapacityRemaining: 12,
+      image: "/uploads/john_doe.jpg",
+    },
+  ],
+};
+
+describe("UpcomingEventHomeCard", () => {
+  it("renders the event card", () => {
+    render(<UpcomingEventHomeCard events={mockEvents} />);
+    expect(screen.getByText("25 December")).toBeInTheDocument();
+    expect(screen.getByText("Test event")).toBeInTheDocument();
+    const partnerImage = screen.getByAltText("Event Image");
+    expect(partnerImage).toHaveAttribute("src", mockEvents.image);
+  });
+});

web/package.json

@@ -18,6 +18,7 @@
     "@types/react-router-dom": "^5.3.3",
     "@types/react-slick": "^0.23.13",
     "axios": "^1.6.7",
+    "dayjs": "^1.11.13",
     "graphql": "^16.8.2",
     "react": "^18.2.0",
     "react-cookies": "^0.1.1",

web/src/components/UpcomingEventHomeCard.tsx

@@ -0,0 +1,38 @@
+import { Event } from "../types/types";
+
+interface UpcomingEventCardProps {
+  upcomingEvent: Event;
+}
+
+export default function UpcomingEventHomeCard({
+  upcomingEvent,
+}: UpcomingEventCardProps) {
+  const formattedDate = new Date(
+    upcomingEvent.eventDateStart
+  ).toLocaleDateString("en-NZ", {
+    day: "numeric",
+    month: "long",
+  });
+
+  return (
+    <div className="grid h-full w-72 grid-cols-2">
+      <div className="m-3 h-80 w-64 flex-col items-center justify-center rounded-lg py-10">
+        <img
+          className="h-64 w-64 rounded-lg object-cover"
+          src={upcomingEvent.image}
+          alt="Event Image"
+        />
+        <h3 className="mx-3 py-4 text-center text-3xl font-bold text-white">
+          {upcomingEvent.title}
+        </h3>
+      </div>
+      <div className="flex justify-end py-7">
+        <div className="bg-primary-orange flex h-10 items-center justify-center whitespace-nowrap rounded-[1.5rem]">
+          <div className="px-3 py-2 text-xl font-bold text-white">
+            {formattedDate}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

web/src/components/UpcomingEventHomeSlider.tsx

@@ -0,0 +1,109 @@
+import Slider from "react-slick";
+import "slick-carousel/slick/slick.css";
+import "slick-carousel/slick/slick-theme.css";
+import {
+  IoArrowBackCircleOutline,
+  IoArrowForwardCircleOutline,
+} from "react-icons/io5";
+import { useRef } from "react";
+import LoadingSpinner from "./LoadingSpinner";
+import { useQuery, gql } from "@apollo/client";
+import UpcomingEventHomeCard from "./UpcomingEventHomeCard";
+import { GET_EVENTS } from "../graphql/queries";
+import dayjs from "dayjs";
+import { Mapper } from "../utils/Mapper";
+import type { Event } from "../types/types";
+
+export default function UpcomingEventHomeSlider() {
+  const sliderRef = useRef<Slider>(null);
+
+  const {
+    loading: eventsLoading,
+    error: eventsError,
+    data: eventsData,
+  } = useQuery<Event>(GET_EVENTS);
+
+  if (eventsLoading) {
+    return <LoadingSpinner />;
+  }
+
+  if (eventsError) {
+    return <div>CMS Offline</div>;
+  }
+
+  if (!eventsData) {
+    return <div>No data available</div>;
+  }
+
+  const events = Mapper.mapToEvents(eventsData);
+
+  const now = dayjs(); // current date and time
+  const upcomingEvents = events
+    .filter((event) => dayjs(event.eventDateStart).isAfter(now)) // only future events
+    .sort((a, b) => dayjs(a.eventDateStart).diff(dayjs(b.eventDateStart))); // sort by start date
+
+  const settings = {
+    dots: true,
+    infinite: false,
+    speed: 500,
+    slidesToShow: 3,
+    slidesToScroll: 1,
+    arrows: false,
+    responsive: [
+      {
+        breakpoint: 1080,
+        settings: {
+          slidesToShow: 2,
+        },
+      },
+      {
+        breakpoint: 800,
+        settings: {
+          slidesToShow: 1,
+        },
+      },
+    ],
+  };
+
+  const next = () => {
+    sliderRef.current?.slickNext();
+  };
+
+  const previous = () => {
+    sliderRef.current?.slickPrev();
+  };
+
+  function SliderNoArrow() {
+    return (
+      <div>
+        <Slider ref={sliderRef} {...settings}>
+          {upcomingEvents.map((event) => (
+            <div key={event.id}>
+              <UpcomingEventHomeCard upcomingEvent={event} />
+            </div>
+          ))}
+        </Slider>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex">
+      <div className="flex flex-grow items-center justify-center">
+        <IoArrowBackCircleOutline
+          onClick={previous}
+          className="mx-4 hidden h-16 w-16 sm:flex"
+        />
+      </div>
+      <div className="w-11/12 sm:w-[calc(100vw-14rem)]">
+        <SliderNoArrow />
+      </div>
+      <div className="flex flex-grow items-center justify-center">
+        <IoArrowForwardCircleOutline
+          onClick={next}
+          className="mx-4 hidden h-16 w-16 sm:flex"
+        />
+      </div>
+    </div>
+  );
+}

web/src/components/UpcomingEvents.tsx

@@ -1,4 +1,4 @@
-import SimpleSlider from "./SimpleSlider";
+import UpcomingEventHomeSlider from "./UpcomingEventHomeSlider";
 
 function UpcomingEvents() {
   return (
@@ -8,7 +8,7 @@ function UpcomingEvents() {
           Our Upcoming Events!
         </h1>
         <div className="">
-          <SimpleSlider />
+          <UpcomingEventHomeSlider />
         </div>
       </div>
     </>

yarn.lock

@@ -132,6 +132,11 @@ date-fns@^2.30.0:
   dependencies:
     "@babel/runtime" "^7.21.0"
 
+dayjs@^1.11.13:
+  version "1.11.13"
+  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.13.tgz#92430b0139055c3ebb60150aa13e860a4b5a366c"
+  integrity sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==
+
 emoji-regex@^8.0.0:
   version "8.0.0"
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"