Added in automatic slide feature as well as fixed the dates

Author: Ming Xuan Yong

frontend/src/components/Event/carousel.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { eventInfo } from '../../../public/data/data';
 
 interface CarouselProps {
@@ -7,23 +7,39 @@ interface CarouselProps {
 
 const Carousel: React.FC<CarouselProps> = ({ events }) => {
   const [currentIndex, setCurrentIndex] = useState(0);
+  const [isFading, setIsFading] = useState(false);
+
+  useEffect(() => {
+    const intervalId = setInterval(() => {
+      fadeToNextSlide();
+    }, 3000);
+
+    return () => clearInterval(intervalId);
+  }, [events.length]);
+
+  const fadeToNextSlide = () => {
+    setIsFading(true);
+
+    setTimeout(() => {
+      setCurrentIndex((prevIndex) => (prevIndex === events.length - 1 ? 0 : prevIndex + 1));
+      setIsFading(false);
+    }, 300);
+  };
 
   const prevSlide = () => {
-    setCurrentIndex((prevIndex) =>
-      prevIndex === 0 ? events.length - 1 : prevIndex - 1
-    );
+    setCurrentIndex((prevIndex) => (prevIndex === 0 ? events.length - 1 : prevIndex - 1));
   };
 
   const nextSlide = () => {
-    setCurrentIndex((prevIndex) =>
-      prevIndex === events.length - 1 ? 0 : prevIndex + 1
-    );
+    fadeToNextSlide();
   };
 
   return (
     <div className="relative max-w-4xl mx-auto">
       <div className="w-full text-center">
-      <a href={events[currentIndex].link} target="_blank" rel="noopener noreferrer" className="relative block w-full h-64 group">
+      <a href={events[currentIndex].link} target="_blank" rel="noopener noreferrer" className={`relative block w-full h-64 group transition-opacity duration-3000 ${
+            isFading ? 'opacity-0' : 'opacity-100'
+          }`}>
         <img
           src={events[currentIndex].image}
           alt={events[currentIndex].title}
@@ -34,34 +50,13 @@ const Carousel: React.FC<CarouselProps> = ({ events }) => {
             <h2 className="font-extrabold text-xl mb-2">{events[currentIndex].title}</h2>
             <h3 className="font-bold text-lg">{events[currentIndex].location}</h3>
             <p className="mt-2">
-              {new Date(events[currentIndex].startTime).toLocaleDateString()} -{" "}
-              {new Date(events[currentIndex].endTime).toLocaleDateString()}
+              {formatEventDate(events[currentIndex].startTime, events[currentIndex].endTime)}
             </p>
           </div>
         </div>
       </a>
-        {/* <div className="p-5">
-          <h2 className="text-3xl font-bold">{events[currentIndex].title}</h2>
-          <p className="text-lg">{events[currentIndex].description}</p>
-          <p className="text-sm">Location: {events[currentIndex].location}</p>
-          <p className="text-sm">
-            Start Time: {new Date(events[currentIndex].startTime).toLocaleString()}
-          </p>
-          <p className="text-sm">
-            End Time: {new Date(events[currentIndex].endTime).toLocaleString()}
-          </p>
-          <a
-            href={events[currentIndex].link}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="text-blue-500 underline mt-2 block"
-          >
-            Event Link
-          </a>
-        </div> */}
       </div>
 
-      {/* Left and right buttons */}
       <button
         onClick={prevSlide}
         className="absolute left-0 top-1/2 transform -translate-y-1/2 bg-black bg-opacity-50 text-white p-2 rounded-full hover:bg-opacity-75"
@@ -75,7 +70,6 @@ const Carousel: React.FC<CarouselProps> = ({ events }) => {
         &#10095;
       </button>
 
-      {/* Dots indicator */}
       <div className="flex justify-center mt-4">
         {events.map((_, index) => (
           <span
@@ -91,4 +85,18 @@ const Carousel: React.FC<CarouselProps> = ({ events }) => {
   );
 };
 
+const formatEventDate = (startTime: string, endTime: string): string => {
+  const startDate = new Date(startTime);
+  const endDate = new Date(endTime);
+
+  const sameDay = startDate.toDateString() === endDate.toDateString();
+
+  if (sameDay) {
+    return startDate.toLocaleDateString();
+  } else {
+    return `${startDate.toLocaleDateString()} - ${endDate.toLocaleDateString()}`;
+  }
+};
+
+
 export default Carousel;