diff --git a/src/app/api/posts/route.ts b/src/app/api/posts/route.ts index 9434ebc..3275a6a 100644 --- a/src/app/api/posts/route.ts +++ b/src/app/api/posts/route.ts @@ -72,16 +72,17 @@ export async function PUT(req: NextRequest) { { status: HttpStatusCode.NotFound } ); - database.schedules.insertOne({ - account: session.user, - scheduled, - content, - platforms, - }); - return NextResponse.json( { message: 'ok', + id: ( + await database.schedules.insertOne({ + account: session.user, + scheduled, + content, + platforms, + }) + ).insertedId, }, { status: HttpStatusCode.Ok } ); @@ -128,12 +129,13 @@ export async function GET(req: NextRequest) { export async function DELETE(req: NextRequest) { const url = new URL(req.url); const sessionId = url.searchParams.get('id'); - const date = url.searchParams.get('date'); + const schedule = url.searchParams.get('schedule'); - if (typeof sessionId !== 'string' || typeof date !== 'string') + if (typeof sessionId !== 'string' || typeof schedule !== 'string') return NextResponse.json( { - message: 'Invalid structure, required param `id=` and `date=`', + message: + 'Invalid structure, required param `id=` and `schedule=`', }, { status: HttpStatusCode.BadRequest } ); @@ -151,8 +153,8 @@ export async function DELETE(req: NextRequest) { ); const result = await database.schedules.deleteMany({ + _id: new ObjectId(schedule), account: session.user, - scheduled: date, }); if (result.deletedCount === 0) diff --git a/src/app/calendar/calendar.tsx b/src/app/calendar/calendar.tsx index 44a28a1..340e2d6 100644 --- a/src/app/calendar/calendar.tsx +++ b/src/app/calendar/calendar.tsx @@ -8,112 +8,178 @@ import { ScheduleRemoveRequest } from '@/utils'; import axios from 'axios'; import { format } from 'date-fns'; -import { PlusCircle, Trash } from 'lucide-react'; -import { useState } from 'react'; +import { PlusCircle, Trash2 } from 'lucide-react'; export interface CalendarSchedule { date: Date; platforms: { user: string }[]; + id: string; } -const weekdays = [ - 'Mon', - 'Tue', - 'Wed', - 'Thu', - 'Fri', - 'Sat', - 'Sun', +const weekdays: [string, number, number, number][] = [ + ['Mon', 2025, 2, 24], + ['Tue', 2025, 2, 25], + ['Wed', 2025, 2, 26], + ['Thu', 2025, 2, 27], + ['Fri', 2025, 2, 28], + ['Sat', 2025, 2, 29], + ['Sun', 2025, 3, 1], ]; -const times = ['12 PM', '1 PM', '2 PM', '3 PM', '4 PM', '5 PM', '6 PM', '7 PM', '8 PM', '9 PM', '10 PM', '11 PM']; +const times: [string, number][] = [ + ['12 PM', 12], + ['1 PM', 13], + ['2 PM', 14], + ['3 PM', 15], + ['4 PM', 16], + ['5 PM', 17], + ['6 PM', 18], + ['7 PM', 19], + ['8 PM', 20], + ['9 PM', 21], + ['10 PM', 22], + ['11 PM', 23], +]; export default function Calendar({ setDialog, sessionId, events, + setDate, + date, + setEvents, }: { setDialog: (b: boolean) => void; sessionId: string; events: CalendarSchedule[]; + date: Date; + setDate: (d: Date) => void; + setEvents: (events: CalendarSchedule[]) => void; }) { - const [selected, setSelected] = useState(0); - return (
-
- {weekdays.map((w, i) => ( -
-

{w}

-
- ))} -
-
-
- {times.map((w, i) => ( -
-

-

{w}

-

-
- {weekdays.map((w, i) => ( -
+
+ {/* Times column */} +
+
{' '} + {/* Empty space for alignment */} +
+ {times.map((t, j) => ( +
+

{t[0]}

+
))}
- ))} + + {/* Calendar grid */} +
+ {weekdays.map((w, i) => ( +
+
+

{w[0]}

+
+
+ {times.map((t, j) => { + const event = events.find((e) => { + console.log( + e.date.getHours(), + t[1] + ); + return ( + e.date.getFullYear() === w[1] && + e.date.getMonth() === w[2] && + e.date.getDate() === w[3] && + e.date.getHours() === t[1] + ); + }); + + return ( + + +
+ {event && ( +
+ {/* */} +
+ )} +
+ + + { + setDialog(true); + setDate( + new Date( + w[1], + w[2], + w[3], + t[1], + 0, + 0 + ) + ); + }} + > + +

New post

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

+ Delete post +

+ + )} + + + ); + })} +
+
+ ))} +
+
); - - //
- //
- // {weekdays.map((w, i) => ( - //
- //

{w}

- //
- // ))} - //
- //
- - // return ( - // - // - // - // { - // setDialog(true); - // }} - // > - // {' '} - //

New post

- // - - // {selected ? ( - // { - // if (selected) { - // axios.delete(`/api/posts`, { - // params: { - // id: sessionId, - // date: format( - // events[selected].date, - // 'y-MM-dd hh:mm' - // ), - // } satisfies ScheduleRemoveRequest, - // }); - // } - // }} - // className="" - // > - // {' '} - //

Delete

- // - // ) : ( - // '' - // )} - // - // - // ); } diff --git a/src/app/calendar/page.tsx b/src/app/calendar/page.tsx index fae38fd..0d23597 100644 --- a/src/app/calendar/page.tsx +++ b/src/app/calendar/page.tsx @@ -1,59 +1,27 @@ 'use client'; -import { useCalendarApp, ScheduleXCalendar } from '@schedule-x/react'; -import { createViewWeek } from '@schedule-x/calendar'; - -import { createEventsServicePlugin } from '@schedule-x/events-service'; -import { createDragAndDropPlugin } from '@schedule-x/drag-and-drop'; - -import '@/calendar-theme.css'; -import { MouseEventHandler, useEffect, useState } from 'react'; +import { useEffect, useState } from 'react'; import App from '@/components/app'; import { format, parse } from 'date-fns'; import PostDialog, { today } from './postDialog'; import axios from 'axios'; import Cookies from 'js-cookie'; -import { Schedule, ScheduleRemoveRequest, ScheduleRequest } from '@/utils'; import Calendar, { CalendarSchedule } from './calendar'; -function closestChild(children: any, clientX: number, clientY: number) { - let closestElement = null; - let closestDistance = Infinity; - - for (let child of children) { - const childRect = child.getBoundingClientRect(); - const dx = Math.abs(clientX - (childRect.left + childRect.width / 2)); - const dy = Math.abs(clientY - (childRect.top + childRect.height / 2)); - const distance = Math.sqrt(dx * dx + dy * dy); - - if (distance < closestDistance) { - closestDistance = distance; - closestElement = child; - } - } - - return closestElement; -} - export default function CalendarApp() { - const eventsService = useState(() => createEventsServicePlugin())[0]; - const dragAndDrop = useState(() => createDragAndDropPlugin())[0]; const [eventCount, setEventCount] = useState(0); const sessionId = Cookies.get('session_id') || ''; - - const calendar = useCalendarApp({ - views: [createViewWeek()], - events: [], - plugins: [eventsService, dragAndDrop], - isDark: true, - }); - const [events, setEvents] = useState([]); useEffect(() => { axios.get(`/api/posts/?id=${sessionId}`).then((response) => { - setEvents(response.data.schedules as CalendarSchedule[]); + const v = response.data.schedules.map((e: any) => ({ + date: parse(e.scheduled, 'yyyy-MM-dd HH:mm', new Date()), + platforms: e.platforms, + id: e._id, + })); + setEvents(v); setEventCount(response.data.schedules.length); }); }, []); @@ -63,14 +31,14 @@ export default function CalendarApp() { return ( -
+
{ - calendar.events.add(e); + setEvents([...events, e]); setEventCount(eventCount + 1); }} eventId={eventCount} @@ -81,6 +49,9 @@ export default function CalendarApp() { setDialog={setDialog} sessionId={sessionId} events={events} + date={date} + setDate={setDate} + setEvents={setEvents} />
diff --git a/src/app/calendar/postDialog.tsx b/src/app/calendar/postDialog.tsx index 5984749..9928bf0 100644 --- a/src/app/calendar/postDialog.tsx +++ b/src/app/calendar/postDialog.tsx @@ -26,6 +26,7 @@ import { Label } from '@/components/ui/label'; import { useState } from 'react'; import axios from 'axios'; import { PostRequest, ScheduleRequest } from '@/utils'; +import { CalendarSchedule } from './calendar'; type PostDialogProps = { newPostDialogOpen: boolean; @@ -33,7 +34,7 @@ type PostDialogProps = { date: Date; setDate: (d: Date) => void; eventId: number; - setEvents: (e: CalendarEventExternal) => void; + setEvents: (e: CalendarSchedule) => void; sessionId: string; }; @@ -137,24 +138,20 @@ export default function PostDialog({ Post now