Nick/feature/event home page card/99

database/docker-compose.yml

@@ -9,7 +9,7 @@ services:
       POSTGRES_PASSWORD: GuryIsGoat
       POSTGRES_DB: AUIS
     ports:
-      - 5432:5432
+      - 5435:5432
     expose:
       - 5432
 

package.json

@@ -17,6 +17,7 @@
   },
   "packageManager": "[email protected]+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e",
   "dependencies": {
+    "dayjs": "^1.11.13"
     "@apollo/client": "^3.10.8"
   }
 }

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,190 @@
+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";
+
+interface EventAttributes {
+  Title: string;
+  Description: string;
+  Subtitle: string;
+  Location: string;
+  Location_Link: string;
+  Event_Date_Start: string;
+  Event_Date_End: string;
+  Is_Live: boolean;
+  Terms_And_Conditions: string;
+  Event_Capacity_Remaining: number;
+  Image: {
+    data: {
+      attributes: {
+        url: string;
+      };
+    };
+  };
+}
+
+interface RawEventData {
+  id: number;
+  attributes: EventAttributes;
+}
+
+interface Event {
+  id: number;
+  title: string;
+  description: string;
+  subtitle: string;
+  location: string;
+  locationLink: string;
+  eventDateStart: string;
+  eventDateEnd: string;
+  isLive: boolean;
+  termsAndConditions: string;
+  eventCapacityRemaining: number;
+  image: string;
+}
+
+interface EventResponseData {
+  events: {
+    data: RawEventData[];
+  };
+}
+
+class Mapper {
+  static mapToEvents(rawData: RawEventData[]): Event[] {
+    if (!Array.isArray(rawData)) {
+      return [];
+    }
+
+    return rawData
+      .map((item) => {
+        const { id, attributes } = item;
+
+        if (!attributes) {
+          return null;
+        }
+
+        return {
+          id,
+          title: attributes.Title,
+          description: attributes.Description,
+          subtitle: attributes.Subtitle,
+          location: attributes.Location,
+          locationLink: attributes.Location_Link,
+          eventDateStart: attributes.Event_Date_Start,
+          eventDateEnd: attributes.Event_Date_End,
+          isLive: attributes.Is_Live,
+          termsAndConditions: attributes.Terms_And_Conditions,
+          eventCapacityRemaining: attributes.Event_Capacity_Remaining,
+          image: attributes.Image.data.attributes.url,
+        } as Event;
+      })
+      .filter((event): event is Event => event !== null);
+  }
+}
+
+export default function UpcomingEventHomeSlider() {
+  const sliderRef = useRef<Slider>(null);
+
+  const {
+    loading: eventsLoading,
+    error: eventsError,
+    data: eventsData,
+  } = useQuery<EventResponseData>(GET_EVENTS);
+
+  if (eventsLoading) {
+    return <LoadingSpinner />;
+  }
+
+  if (eventsError) {
+    return <div>CMS Offline</div>;
+  }
+
+  if (
+    !eventsData ||
+    !eventsData.events ||
+    eventsData.events.data.length === 0
+  ) {
+    return <div>No data available</div>;
+  }
+
+  const events = Mapper.mapToEvents(eventsData.events.data);
+
+  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"