From 5735dc906dcbe2d81f3eeb4162196089282805c6 Mon Sep 17 00:00:00 2001 From: Leo dev Date: Tue, 4 Mar 2025 16:51:59 +0100 Subject: [PATCH] improved calendar design --- src/app/calendar/calendar.tsx | 284 +++++++++++++------------------- src/app/calendar/page.tsx | 11 +- src/app/calendar/postDialog.tsx | 10 +- 3 files changed, 123 insertions(+), 182 deletions(-) diff --git a/src/app/calendar/calendar.tsx b/src/app/calendar/calendar.tsx index def5466..067bb0e 100644 --- a/src/app/calendar/calendar.tsx +++ b/src/app/calendar/calendar.tsx @@ -1,191 +1,131 @@ +export interface CalendarSchedule { + date: Date; + platforms: { user: string }[]; + id: string; +} import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger, } from '@/components/ui/context-menu'; -import { PlusCircle, Trash2 } from 'lucide-react'; import axios from 'axios'; +import { Pencil, PlusCircle, Trash } from 'lucide-react'; +import React from 'react'; -export interface CalendarSchedule { - date: Date; - platforms: { user: string }[]; +const hours = Array.from({ length: 24 }, (_, i) => `${i}:00`); +const days = [ + 'Sunday', + 'Monday', + 'Tuesday', + 'Wednesday', + 'Thursday', + 'Friday', + 'Saturday', +]; + +export interface Event { + time: Date; + title: string; id: string; } -// Function to get the current week's dates (Monday - Sunday) -const getCurrentWeek = (): { label: string; date: Date }[] => { - const today = new Date(); - const dayOfWeek = today.getDay(); // 0 (Sun) - 6 (Sat) - const mondayOffset = dayOfWeek === 0 ? -6 : 1 - dayOfWeek; // Adjust for Monday start +interface CalendarProps { + events: Event[]; + setDate: (date: Date) => void; + setDialog: (dialog: boolean) => void; + setEvents: (events: Event[]) => void; +} - return Array.from({ length: 7 }, (_, i) => { - const date = new Date(today); - date.setDate(today.getDate() + mondayOffset + i); - return { - label: date.toLocaleDateString('en-US', { weekday: 'short' }), // 'Mon', 'Tue', etc. - date, - }; - }); -}; - -// Time slots from 12 PM to 11 PM -const times: { label: string; hour: number }[] = Array.from( - { length: 12 }, - (_, i) => ({ - label: `${(i + 12) % 12 || 12} PM`, // '12 PM', '1 PM', ..., '11 PM' - hour: i + 12, - }) -); - -export default function Calendar({ - setDialog, +const Calendar: React.FC = ({ events, setDate, + setDialog, setEvents, -}: { - setDialog: (b: boolean) => void; - events: CalendarSchedule[]; - setDate: (d: Date) => void; - setEvents: (events: CalendarSchedule[]) => void; -}) { - const weekdays = getCurrentWeek(); - +}) => { return ( -
-
-
- {/* Time Labels */} -
-
{' '} - {/* Empty space for alignment */} -
- {times.map((time) => ( -
-

- {time.label} -

-
- ))} -
-
- - {/* Calendar Grid */} -
- {weekdays.map((weekday) => ( -
- {/* Day Header */} -
-

- {weekday.label} -

-
- - {/* Time Slots */} -
- {times.map((time) => { - const event = events.find( - (e) => - e.date.getFullYear() === - weekday.date.getFullYear() && - e.date.getMonth() === - weekday.date.getMonth() && - e.date.getDate() === - weekday.date.getDate() && - e.date.getHours() === time.hour - ); - - return ( - - -
- {event && ( -
- {/* Event indicator */} -
- )} -
- - - { - setDialog(true); - setDate( - new Date( - weekday.date.getFullYear(), - weekday.date.getMonth(), - weekday.date.getDate(), - time.hour, - 0, - 0 - ) - ); - }} - > - -

New post

- - - {event && ( - { - axios - .delete( - `/api/posts`, - { - params: { - schedule: - event.id, - }, - } - ) - .then( - () => { - setEvents( - events.filter( - ( - e - ) => - e.id !== - event.id - ) - ); - } - ); - }} - > - -

- Delete post -

- - )} - - - ); - })} -
-
- ))} -
+
+
Time
+ {days.map((day) => ( +
+ {day}
-
+ ))} + + {hours.map((hour, rowIdx) => ( + +
{hour}
+ + {days.map((_, colIdx) => { + const event = events.find( + (e: Event) => + e.time.getDay() === colIdx && + e.time.getHours() === rowIdx + ); + + if (!event) { + return ( + + +
+ + + { + setDate( + new Date(2024, 3, 4, rowIdx) + ); + setDialog(true); + }} + > + + New Post + + + + ); + } + + return ( + + +
+ {event && ( +
+ {event.title} +
+ )} +
+ + + + + Edit + + { + axios.delete( + `/api/posts?schedule=${event.id}` + ); + setEvents( + events.filter( + (e) => e.id !== event.id + ) + ); + }} + > + + Delete + + + + ); + })} + + ))}
); -} +}; + +export default Calendar; diff --git a/src/app/calendar/page.tsx b/src/app/calendar/page.tsx index 604ac39..ab00649 100644 --- a/src/app/calendar/page.tsx +++ b/src/app/calendar/page.tsx @@ -7,12 +7,12 @@ import { format, parse } from 'date-fns'; import PostDialog, { today } from './postDialog'; import axios from 'axios'; import Cookies from 'js-cookie'; -import Calendar, { CalendarSchedule } from './calendar'; +import Calendar, { CalendarSchedule, Event } from './calendar'; import { DATE_FORMAT } from '@/lib/types'; export default function CalendarApp() { const sessionId = Cookies.get('session_id') || ''; - const [events, setEvents] = useState([]); + const [events, setEvents] = useState([]); useEffect(() => { axios @@ -20,10 +20,11 @@ export default function CalendarApp() { withCredentials: true, }) .then((response) => { - const v = response.data.schedules.map((e: any) => ({ - date: parse(e.scheduled, DATE_FORMAT, new Date()), + const v: Event[] = response.data.schedules.map((e: any) => ({ + time: parse(e.scheduled, DATE_FORMAT, new Date()), platforms: e.platforms, id: e._id, + title: 'Post', })); setEvents(v); }) @@ -43,7 +44,7 @@ export default function CalendarApp() { setDate={setDate} newPostDialogOpen={postDialog} setNewPostDialogOpen={setDialog} - setEvents={(e) => { + addEvents={(e) => { setEvents([...events, e]); }} /> diff --git a/src/app/calendar/postDialog.tsx b/src/app/calendar/postDialog.tsx index 7090ab4..6fe573f 100644 --- a/src/app/calendar/postDialog.tsx +++ b/src/app/calendar/postDialog.tsx @@ -26,14 +26,14 @@ import { Label } from '@/components/ui/label'; import { useState } from 'react'; import axios from 'axios'; import { DATE_FORMAT, PostRequest, ScheduleRequest } from '@/lib/types'; -import { CalendarSchedule } from './calendar'; +import { CalendarSchedule, Event } from './calendar'; type PostDialogProps = { newPostDialogOpen: boolean; setNewPostDialogOpen: (b: boolean) => void; date: Date; setDate: (d: Date) => void; - setEvents: (e: CalendarSchedule) => void; + addEvents: (e: Event) => void; }; export const today = new Date(); @@ -44,7 +44,7 @@ export default function PostDialog({ setNewPostDialogOpen, date, setDate, - setEvents: addEvent, + addEvents: addEvent, }: PostDialogProps) { const [content, setContent] = useState(''); @@ -154,8 +154,8 @@ export default function PostDialog({ addEvent({ id: data.id, - date, - platforms: [{ user: 'andjksds' }], + time: date, + title: 'New Post', }); setNewPostDialogOpen(false);