calendar update 0
This commit is contained in:
+14
-145
@@ -9,20 +9,13 @@ import { createDragAndDropPlugin } from '@schedule-x/drag-and-drop';
|
||||
import '@/calendar-theme.css';
|
||||
import { MouseEventHandler, useEffect, useState } from 'react';
|
||||
import App from '@/components/app';
|
||||
import {
|
||||
ContextMenu,
|
||||
ContextMenuContent,
|
||||
ContextMenuItem,
|
||||
ContextMenuTrigger,
|
||||
} from '@/components/ui/context-menu';
|
||||
|
||||
import { PlusCircle, Trash } from 'lucide-react';
|
||||
|
||||
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;
|
||||
@@ -43,7 +36,7 @@ function closestChild(children: any, clientX: number, clientY: number) {
|
||||
return closestElement;
|
||||
}
|
||||
|
||||
function CalendarApp() {
|
||||
export default function CalendarApp() {
|
||||
const eventsService = useState(() => createEventsServicePlugin())[0];
|
||||
const dragAndDrop = useState(() => createDragAndDropPlugin())[0];
|
||||
const [eventCount, setEventCount] = useState(0);
|
||||
@@ -56,96 +49,17 @@ function CalendarApp() {
|
||||
isDark: true,
|
||||
});
|
||||
|
||||
const [events, setEvents] = useState<CalendarSchedule[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
axios.get(`/api/posts/?id=${sessionId}`).then((response) => {
|
||||
for (const [id, sched] of (
|
||||
response.data.schedules as ScheduleRequest[]
|
||||
).entries()) {
|
||||
const date = parse(
|
||||
sched.scheduled,
|
||||
'y-MM-dd hh:mm',
|
||||
new Date()
|
||||
);
|
||||
const end = new Date(date);
|
||||
end.setHours(date.getHours() + 1);
|
||||
|
||||
calendar.events.add({
|
||||
title: 'Post',
|
||||
id,
|
||||
start: format(date, 'y-MM-dd hh:mm'),
|
||||
end: format(end, 'y-MM-dd hh:mm'),
|
||||
});
|
||||
setEventCount(eventCount + 1);
|
||||
}
|
||||
setEvents(response.data.schedules as CalendarSchedule[]);
|
||||
setEventCount(response.data.schedules.length);
|
||||
});
|
||||
}, []);
|
||||
|
||||
const [newPostDialogOpen, setNewPostDialogOpen] = useState(false);
|
||||
const [postDialog, setDialog] = useState(false);
|
||||
const [date, setDate] = useState<Date>(today);
|
||||
const [selected, setSelected] = useState<string | null | undefined>(null);
|
||||
const [scrollY, setScrollY] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
const interval = setInterval(() => {
|
||||
window.scrollTo(0, scrollY);
|
||||
}, 10);
|
||||
|
||||
setTimeout(() => {
|
||||
clearInterval(interval);
|
||||
}, 300);
|
||||
}, [scrollY]);
|
||||
|
||||
const handleDialog: MouseEventHandler<HTMLSpanElement> = (event) => {
|
||||
setScrollY(window.scrollY);
|
||||
|
||||
const target = event.target as HTMLElement;
|
||||
|
||||
if (target.className === 'sx__time-grid-event-time') {
|
||||
const id =
|
||||
target.parentElement?.parentElement?.getAttribute(
|
||||
'data-event-id'
|
||||
);
|
||||
setSelected(id);
|
||||
|
||||
setDate(
|
||||
parse(
|
||||
calendar.events.get(parseInt(id || ''))?.start || '',
|
||||
'y-MM-dd hh:mm',
|
||||
new Date()
|
||||
)
|
||||
);
|
||||
} else {
|
||||
setSelected(null);
|
||||
|
||||
try {
|
||||
const dayElement = target.closest('.sx__time-grid-day');
|
||||
|
||||
const dayText = dayElement
|
||||
? dayElement.getAttribute('aria-label')
|
||||
: null;
|
||||
|
||||
const hourElement = closestChild(
|
||||
target.parentElement?.children[0].children || [],
|
||||
event.clientX,
|
||||
event.clientY
|
||||
);
|
||||
|
||||
if (!dayText || !hourElement) {
|
||||
event.preventDefault();
|
||||
} else {
|
||||
const toDate = parse(
|
||||
(dayText || '') +
|
||||
' ' +
|
||||
(hourElement?.textContent || ''),
|
||||
'MMMM dd, yyyy h a',
|
||||
new Date()
|
||||
);
|
||||
if (toDate instanceof Date && !isNaN(toDate.getTime()))
|
||||
setDate(toDate);
|
||||
}
|
||||
} catch {}
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<App>
|
||||
@@ -153,8 +67,8 @@ function CalendarApp() {
|
||||
<PostDialog
|
||||
date={date}
|
||||
setDate={setDate}
|
||||
newPostDialogOpen={newPostDialogOpen}
|
||||
setNewPostDialogOpen={setNewPostDialogOpen}
|
||||
newPostDialogOpen={postDialog}
|
||||
setNewPostDialogOpen={setDialog}
|
||||
setEvents={(e) => {
|
||||
calendar.events.add(e);
|
||||
setEventCount(eventCount + 1);
|
||||
@@ -162,58 +76,13 @@ function CalendarApp() {
|
||||
eventId={eventCount}
|
||||
sessionId={sessionId}
|
||||
/>
|
||||
<ContextMenu>
|
||||
<ContextMenuTrigger onContextMenu={handleDialog}>
|
||||
<ScheduleXCalendar
|
||||
calendarApp={calendar}
|
||||
customComponents={{}}
|
||||
|
||||
<Calendar
|
||||
setDialog={setDialog}
|
||||
sessionId={sessionId}
|
||||
events={events}
|
||||
/>
|
||||
</ContextMenuTrigger>
|
||||
<ContextMenuContent>
|
||||
<ContextMenuItem
|
||||
onClick={() => {
|
||||
setNewPostDialogOpen(true);
|
||||
}}
|
||||
>
|
||||
<PlusCircle className="w-4 mt-0.5" />{' '}
|
||||
<p className="ml-1">New post</p>
|
||||
</ContextMenuItem>
|
||||
|
||||
{selected ? (
|
||||
<ContextMenuItem
|
||||
onClick={() => {
|
||||
if (selected) {
|
||||
calendar.events.remove(
|
||||
parseInt(selected)
|
||||
);
|
||||
|
||||
axios.delete(
|
||||
`/api/posts`,
|
||||
{
|
||||
params: {
|
||||
id: sessionId,
|
||||
date: format(
|
||||
date,
|
||||
'y-MM-dd hh:mm'
|
||||
),
|
||||
} satisfies ScheduleRemoveRequest,
|
||||
}
|
||||
);
|
||||
}
|
||||
}}
|
||||
className=""
|
||||
>
|
||||
<Trash className="w-4 mt-0.5 text-red-500" />{' '}
|
||||
<p className="ml-1 text-red-500">Delete</p>
|
||||
</ContextMenuItem>
|
||||
) : (
|
||||
''
|
||||
)}
|
||||
</ContextMenuContent>
|
||||
</ContextMenu>
|
||||
</div>
|
||||
</App>
|
||||
);
|
||||
}
|
||||
|
||||
export default CalendarApp;
|
||||
|
||||
@@ -15,7 +15,6 @@ export default function SignUp() {
|
||||
const router = useRouter();
|
||||
|
||||
return (
|
||||
// <div className="bg-white dark:bg-black w-[46%] h-screen ml-auto">
|
||||
<div className="bg-white dark:bg-black w-full h-screen flex justify-center items-center">
|
||||
<div className="text-center">
|
||||
<h1 className="text-xl pb-2">Create an account</h1>
|
||||
@@ -73,8 +72,8 @@ export default function SignUp() {
|
||||
By clicking continue, you agree to our{' '}
|
||||
<Link href="/terms" className="underline">
|
||||
Terms of Service
|
||||
</Link>{' '}
|
||||
{'and '}
|
||||
</Link>
|
||||
{' and '}
|
||||
<Link href="/privacy" className="underline">
|
||||
Privacy Policy
|
||||
</Link>
|
||||
@@ -83,6 +82,5 @@ export default function SignUp() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
// </div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user