From e1042b53a00c6ed5ccaa60b674934a13e08e9172 Mon Sep 17 00:00:00 2001 From: JihunKimCode Date: Fri, 19 Apr 2024 09:47:49 -0400 Subject: [PATCH 1/5] initial push --- src/app/events/page.tsx | 62 ++++++++++++++++++++++++++++++++++------- 1 file changed, 52 insertions(+), 10 deletions(-) diff --git a/src/app/events/page.tsx b/src/app/events/page.tsx index bb04e791..07165a55 100644 --- a/src/app/events/page.tsx +++ b/src/app/events/page.tsx @@ -1,8 +1,18 @@ +'use client'; +import React, {useState} from 'react'; +// import * as React from 'react'; +import { Tab, Tabs } from '@mui/material'; import { getEventsBetweenDates } from '@/server/actions/Event'; import { EventResponse } from '@/types/dataModel/event'; import EventsView from '@/views/EventsView'; import dayjs from 'dayjs'; +const sortEventsByDateAsc = (events: EventResponse[]) => { + return events.sort((a, b) => { + return dayjs(a.date).valueOf() - dayjs(b.date).valueOf(); + }); +}; + const sortEventsByDateDesc = (events: EventResponse[]) => { return events.sort((a, b) => { return dayjs(b.date).valueOf() - dayjs(a.date).valueOf(); @@ -10,15 +20,47 @@ const sortEventsByDateDesc = (events: EventResponse[]) => { }; export default async function EventsPage() { - const startOfMonth = dayjs().startOf('month').toDate(); - const endOfMonth = dayjs().endOf('month').toDate(); - const events = await getEventsBetweenDates(startOfMonth, endOfMonth); - let sortedEvents: EventResponse[]; - if (!events) { - return
Failed to load events
; - } else { - sortedEvents = sortEventsByDateDesc(events); - } + const today = dayjs().startOf('day').toDate(); + const startOfYear = dayjs().startOf('year').toDate(); + const endOfYear = dayjs().endOf('year').toDate(); - return ; + try { + const events = await getEventsBetweenDates(startOfYear, endOfYear); + + if (!events || events.length === 0) { + return
No events available
; + } + + let upcomingEvents: EventResponse[]; + let pastEvents: EventResponse[]; + + 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)); + + upcomingEvents = sortEventsByDateAsc(eventsTodayAndAfter); + pastEvents = sortEventsByDateDesc(eventsBeforeToday); + + const [tabIndex, setTabIndex] = React.useState(0); + const handleTabChange = (event: React.SyntheticEvent, newValue: number) => { + setTabIndex(newValue); + }; + + return ( + <> + + + + + {tabIndex === 0 && ( + + )} + {tabIndex === 1 && ( + + )} + + ); + } catch (error) { + console.error('Error fetching events:', error); + return
Error fetching events: {error.message}. Please try again later.
; + } } From 7d25f35baf5f65408cc5824f24bf78b2fe248911 Mon Sep 17 00:00:00 2001 From: JihunKimCode Date: Wed, 24 Apr 2024 19:15:46 -0400 Subject: [PATCH 2/5] tabs done --- src/app/events/page.tsx | 64 ++++++------------------------ src/views/EventsView/index.tsx | 71 ++++++++++++++++++++++++++-------- 2 files changed, 66 insertions(+), 69 deletions(-) diff --git a/src/app/events/page.tsx b/src/app/events/page.tsx index 07165a55..3e135b86 100644 --- a/src/app/events/page.tsx +++ b/src/app/events/page.tsx @@ -1,18 +1,8 @@ -'use client'; -import React, {useState} from 'react'; -// import * as React from 'react'; -import { Tab, Tabs } from '@mui/material'; import { getEventsBetweenDates } from '@/server/actions/Event'; import { EventResponse } from '@/types/dataModel/event'; import EventsView from '@/views/EventsView'; import dayjs from 'dayjs'; -const sortEventsByDateAsc = (events: EventResponse[]) => { - return events.sort((a, b) => { - return dayjs(a.date).valueOf() - dayjs(b.date).valueOf(); - }); -}; - const sortEventsByDateDesc = (events: EventResponse[]) => { return events.sort((a, b) => { return dayjs(b.date).valueOf() - dayjs(a.date).valueOf(); @@ -20,47 +10,15 @@ const sortEventsByDateDesc = (events: EventResponse[]) => { }; export default async function EventsPage() { - const today = dayjs().startOf('day').toDate(); - const startOfYear = dayjs().startOf('year').toDate(); - const endOfYear = dayjs().endOf('year').toDate(); - - try { - const events = await getEventsBetweenDates(startOfYear, endOfYear); - - if (!events || events.length === 0) { - return
No events available
; - } - - let upcomingEvents: EventResponse[]; - let pastEvents: EventResponse[]; - - 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)); - - upcomingEvents = sortEventsByDateAsc(eventsTodayAndAfter); - pastEvents = sortEventsByDateDesc(eventsBeforeToday); - - const [tabIndex, setTabIndex] = React.useState(0); - const handleTabChange = (event: React.SyntheticEvent, newValue: number) => { - setTabIndex(newValue); - }; - - return ( - <> - - - - - {tabIndex === 0 && ( - - )} - {tabIndex === 1 && ( - - )} - - ); - } catch (error) { - console.error('Error fetching events:', error); - return
Error fetching events: {error.message}. Please try again later.
; + const startOfMonth = dayjs().startOf('year').toDate(); + const endOfMonth = dayjs().endOf('year').toDate(); + const events = await getEventsBetweenDates(startOfMonth, endOfMonth); + let sortedEvents: EventResponse[]; + if (!events) { + return
Failed to load events
; + } else { + sortedEvents = sortEventsByDateDesc(events); } -} + + return ; +} \ No newline at end of file diff --git a/src/views/EventsView/index.tsx b/src/views/EventsView/index.tsx index 980555bc..bdae94f0 100644 --- a/src/views/EventsView/index.tsx +++ b/src/views/EventsView/index.tsx @@ -1,26 +1,55 @@ 'use client'; -import EventList from '@/components/EventList'; +import React, {useState} 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(); +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()) - ); - } +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(); + + if (search.length > 0) { + events = events.filter((event) => + `${event.name}`.toLowerCase().includes(search.toLowerCase()) + ); + } - return ( - + let upcomingEvents: EventResponse[]; + let pastEvents: EventResponse[]; + + 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)); + + upcomingEvents = sortEventsByDateAsc(eventsTodayAndAfter); + pastEvents = sortEventsByDateDesc(eventsBeforeToday); + + const [tabIndex, setTabIndex] = React.useState(0); + const handleTabChange = (event: React.SyntheticEvent, newValue: number) => { + setTabIndex(newValue); + }; + + return ( + <> + Events @@ -30,7 +59,17 @@ export default function EventsView({ events }: EventsViewProps) { New event - + + + + + {tabIndex === 0 && ( + + )} + {tabIndex === 1 && ( + + )} - ); -} + + ); + } From 49a8ec93d69e3646aa6f0b830cac0c0178f6124a Mon Sep 17 00:00:00 2001 From: JihunKimCode Date: Wed, 24 Apr 2024 19:36:44 -0400 Subject: [PATCH 3/5] comments --- src/views/EventsView/index.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/views/EventsView/index.tsx b/src/views/EventsView/index.tsx index bdae94f0..d05ec29b 100644 --- a/src/views/EventsView/index.tsx +++ b/src/views/EventsView/index.tsx @@ -11,12 +11,14 @@ interface EventsViewProps { events: EventResponse[] } +//Sort Events Ascending Order const sortEventsByDateAsc = (events: EventResponse[]) => { return events.sort((a, b) => { return dayjs(a.date).valueOf() - dayjs(b.date).valueOf(); }); }; +//Sort Events Descending Order const sortEventsByDateDesc = (events: EventResponse[]) => { return events.sort((a, b) => { return dayjs(b.date).valueOf() - dayjs(a.date).valueOf(); @@ -26,12 +28,14 @@ const sortEventsByDateDesc = (events: EventResponse[]) => { 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()) ); } + //Set Showing Events by Tabs let upcomingEvents: EventResponse[]; let pastEvents: EventResponse[]; @@ -42,6 +46,7 @@ export default function EventsPage({events}: EventsViewProps) { upcomingEvents = sortEventsByDateAsc(eventsTodayAndAfter); pastEvents = sortEventsByDateDesc(eventsBeforeToday); + //Change Tabs const [tabIndex, setTabIndex] = React.useState(0); const handleTabChange = (event: React.SyntheticEvent, newValue: number) => { setTabIndex(newValue); From 86592cd96ebdc034c6e05bf205ebc04b6d05fe3f Mon Sep 17 00:00:00 2001 From: JihunKimCode Date: Wed, 24 Apr 2024 19:47:30 -0400 Subject: [PATCH 4/5] remove unused usestate --- src/views/EventsView/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/views/EventsView/index.tsx b/src/views/EventsView/index.tsx index d05ec29b..dc6f5eaa 100644 --- a/src/views/EventsView/index.tsx +++ b/src/views/EventsView/index.tsx @@ -1,5 +1,5 @@ 'use client'; -import React, {useState} from 'react'; +import React from 'react'; import { Box, Button, Link, Tab, Tabs, Typography } from '@mui/material'; import { EventResponse } from '@/types/dataModel/event'; import dayjs from 'dayjs'; From 12dc527a49bb6860d6f5e92184d42bf27fd90ccf Mon Sep 17 00:00:00 2001 From: JihunKimCode Date: Mon, 29 Apr 2024 12:28:56 -0400 Subject: [PATCH 5/5] vairable update --- src/views/EventsView/index.tsx | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/src/views/EventsView/index.tsx b/src/views/EventsView/index.tsx index dc6f5eaa..e12c6b99 100644 --- a/src/views/EventsView/index.tsx +++ b/src/views/EventsView/index.tsx @@ -35,16 +35,14 @@ export default function EventsPage({events}: EventsViewProps) { ); } - //Set Showing Events by Tabs - let upcomingEvents: EventResponse[]; - let pastEvents: EventResponse[]; - + //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)); - - upcomingEvents = sortEventsByDateAsc(eventsTodayAndAfter); - pastEvents = sortEventsByDateDesc(eventsBeforeToday); + + //Set Showing Events by Tabs + const upcomingEvents = sortEventsByDateAsc(eventsTodayAndAfter); + const pastEvents = sortEventsByDateDesc(eventsBeforeToday); //Change Tabs const [tabIndex, setTabIndex] = React.useState(0);