242 create intentional sorting on the events page

src/app/events/page.tsx

@@ -10,8 +10,8 @@ const sortEventsByDateDesc = (events: EventResponse[]) => {
 };
 
 export default async function EventsPage() {
-  const startOfMonth = dayjs().startOf('month').toDate();
-  const endOfMonth = dayjs().endOf('month').toDate();
+  const startOfMonth = dayjs().startOf('year').toDate();
+  const endOfMonth = dayjs().endOf('year').toDate();
   const events = await getEventsBetweenDates(startOfMonth, endOfMonth);
   let sortedEvents: EventResponse[];
   if (!events) {
@@ -21,4 +21,4 @@ export default async function EventsPage() {
   }
 
   return <EventsView events={sortedEvents} />;
-}
+}

src/views/EventsView/index.tsx

@@ -1,26 +1,58 @@
 'use client';
-import EventList from '@/components/EventList';
+import React from 'react';
+import { Box, Button, Link, Tab, Tabs, Typography } from '@mui/material';
 import { EventResponse } from '@/types/dataModel/event';
-import { Box, Button, Typography } from '@mui/material';
-import Link from 'next/link';
+import dayjs from 'dayjs';
+import EventList from '@/components/EventList';
 import SearchField from '@/components/SearchField';
 import useSearch from '@/hooks/useSearch';
 
 interface EventsViewProps {
-  events: EventResponse[];
+  events: EventResponse[]
 }
 
-export default function EventsView({ events }: EventsViewProps) {
-  const search = useSearch();
+//Sort Events Ascending Order
+const sortEventsByDateAsc = (events: EventResponse[]) => {
+  return events.sort((a, b) => {
+    return dayjs(a.date).valueOf() - dayjs(b.date).valueOf();
+  });
+};
 
-  if (search.length > 0) {
-    events = events.filter((event) =>
-      `${event.name}`.toLowerCase().includes(search.toLowerCase())
-    );
-  }
+//Sort Events Descending Order
+const sortEventsByDateDesc = (events: EventResponse[]) => {
+  return events.sort((a, b) => {
+    return dayjs(b.date).valueOf() - dayjs(a.date).valueOf();
+  });
+};
+
+export default function EventsPage({events}: EventsViewProps) {
+    const search = useSearch();
+
+    //Search Filter
+    if (search.length > 0) {
+      events = events.filter((event) =>
+        `${event.name}`.toLowerCase().includes(search.toLowerCase())
+      );
+    }
 
-  return (
-    <Box>
+    //Check Days
+    const today = dayjs().startOf('day').toDate();
+    const eventsBeforeToday = events.filter(event => dayjs(event.date).isBefore(today));
+    const eventsTodayAndAfter = events.filter(event => dayjs(event.date).isSame(today, 'day') || dayjs(event.date).isAfter(today));
+
+    //Set Showing Events by Tabs
+    const upcomingEvents = sortEventsByDateAsc(eventsTodayAndAfter);
+    const pastEvents = sortEventsByDateDesc(eventsBeforeToday);
+
+    //Change Tabs
+    const [tabIndex, setTabIndex] = React.useState(0);
+    const handleTabChange = (event: React.SyntheticEvent, newValue: number) => {
+      setTabIndex(newValue);
+    };
+
+    return (
+      <>
+      <Box>
       <SearchField />
       <Typography variant="h3" sx={{ my: 2 }}>
         Events
@@ -30,7 +62,17 @@ export default function EventsView({ events }: EventsViewProps) {
           New event
         </Button>
       </Link>
-      <EventList events={events} />
+        <Tabs value={tabIndex} onChange={handleTabChange} centered>
+          <Tab label="Upcoming Events" />
+          <Tab label="Past Events" />
+        </Tabs>
+        {tabIndex === 0 && (
+          <EventList events={upcomingEvents} />
+        )}
+        {tabIndex === 1 && (
+          <EventList events={pastEvents} />
+        )}
     </Box>
-  );
-}
+      </>
+    );
+  }