-
+
+
+
+ Hello{' '}
+ {isLoading ? 'Loading...' : data?.data.user?.name || 'Unknown User'}
+
+
+
+
+
);
}
diff --git a/src/app/api/user/[user]/calendar/route.ts b/src/app/api/user/[user]/calendar/route.ts
index 62142e9..f6b6098 100644
--- a/src/app/api/user/[user]/calendar/route.ts
+++ b/src/app/api/user/[user]/calendar/route.ts
@@ -136,15 +136,15 @@ export const GET = auth(async function GET(req, { params }) {
start_time: 'asc',
},
select: {
- id: true,
- reason: true,
+ id: requestUserId === requestedUserId ? true : false,
+ reason: requestUserId === requestedUserId ? true : false,
start_time: true,
end_time: true,
- is_recurring: true,
- recurrence_end_date: true,
- rrule: true,
- created_at: true,
- updated_at: true,
+ is_recurring: requestUserId === requestedUserId ? true : false,
+ recurrence_end_date: requestUserId === requestedUserId ? true : false,
+ rrule: requestUserId === requestedUserId ? true : false,
+ created_at: requestUserId === requestedUserId ? true : false,
+ updated_at: requestUserId === requestedUserId ? true : false,
},
},
},
@@ -167,7 +167,6 @@ export const GET = auth(async function GET(req, { params }) {
calendar.push({ ...event.meeting, type: 'event' });
} else {
calendar.push({
- id: event.meeting.id,
start_time: event.meeting.start_time,
end_time: event.meeting.end_time,
type: 'blocked_private',
@@ -183,7 +182,6 @@ export const GET = auth(async function GET(req, { params }) {
calendar.push({ ...event, type: 'event' });
} else {
calendar.push({
- id: event.id,
start_time: event.start_time,
end_time: event.end_time,
type: 'blocked_private',
@@ -192,35 +190,23 @@ export const GET = auth(async function GET(req, { params }) {
}
for (const slot of requestedUser.blockedSlots) {
- if (requestUserId === requestedUserId) {
- calendar.push({
- start_time: slot.start_time,
- end_time: slot.end_time,
- id: slot.id,
- reason: slot.reason,
- is_recurring: slot.is_recurring,
- recurrence_end_date: slot.recurrence_end_date,
- rrule: slot.rrule,
- created_at: slot.created_at,
- updated_at: slot.updated_at,
- type: 'blocked_owned',
- });
- } else {
- calendar.push({
- start_time: slot.start_time,
- end_time: slot.end_time,
- id: slot.id,
- type: 'blocked_private',
- });
- }
+ calendar.push({
+ start_time: slot.start_time,
+ end_time: slot.end_time,
+ id: slot.id,
+ reason: slot.reason,
+ is_recurring: slot.is_recurring,
+ recurrence_end_date: slot.recurrence_end_date,
+ rrule: slot.rrule,
+ created_at: slot.created_at,
+ updated_at: slot.updated_at,
+ type:
+ requestUserId === requestedUserId ? 'blocked_owned' : 'blocked_private',
+ });
}
return returnZodTypeCheckedResponse(UserCalendarResponseSchema, {
success: true,
- calendar: calendar.filter(
- (event, index, self) =>
- self.findIndex((e) => e.id === event.id && e.type === event.type) ===
- index,
- ),
+ calendar,
});
});
diff --git a/src/app/api/user/[user]/calendar/validation.ts b/src/app/api/user/[user]/calendar/validation.ts
index 1572793..a0d179f 100644
--- a/src/app/api/user/[user]/calendar/validation.ts
+++ b/src/app/api/user/[user]/calendar/validation.ts
@@ -13,28 +13,23 @@ export const BlockedSlotSchema = zod
start_time: eventStartTimeSchema,
end_time: eventEndTimeSchema,
type: zod.literal('blocked_private'),
- id: zod.string(),
})
.openapi('BlockedSlotSchema', {
description: 'Blocked time slot in the user calendar',
});
-export const OwnedBlockedSlotSchema = zod
- .object({
- start_time: eventStartTimeSchema,
- end_time: eventEndTimeSchema,
- id: zod.string(),
- reason: zod.string().nullish(),
- is_recurring: zod.boolean().default(false),
- recurrence_end_date: zod.date().nullish(),
- rrule: zod.string().nullish(),
- created_at: zod.date().nullish(),
- updated_at: zod.date().nullish(),
- type: zod.literal('blocked_owned'),
- })
- .openapi('OwnedBlockedSlotSchema', {
- description: 'Blocked slot owned by the user',
- });
+export const OwnedBlockedSlotSchema = BlockedSlotSchema.extend({
+ id: zod.string(),
+ reason: zod.string().nullish(),
+ is_recurring: zod.boolean().default(false),
+ recurrence_end_date: zod.date().nullish(),
+ rrule: zod.string().nullish(),
+ created_at: zod.date().nullish(),
+ updated_at: zod.date().nullish(),
+ type: zod.literal('blocked_owned'),
+}).openapi('OwnedBlockedSlotSchema', {
+ description: 'Blocked slot owned by the user',
+});
export const VisibleSlotSchema = EventSchema.omit({
organizer: true,
diff --git a/src/components/calendar.tsx b/src/components/calendar.tsx
deleted file mode 100644
index a8d6005..0000000
--- a/src/components/calendar.tsx
+++ /dev/null
@@ -1,256 +0,0 @@
-'use client';
-
-import { Calendar as RBCalendar, momentLocalizer } from 'react-big-calendar';
-import withDragAndDrop from 'react-big-calendar/lib/addons/dragAndDrop';
-import moment from 'moment';
-import '@/components/react-big-calendar.css';
-import 'react-big-calendar/lib/addons/dragAndDrop/styles.css';
-import CustomToolbar from '@/components/custom-toolbar';
-import React from 'react';
-import { useGetApiUserUserCalendar } from '@/generated/api/user/user';
-import { useRouter } from 'next/navigation';
-import { usePatchApiEventEventID } from '@/generated/api/event/event';
-import { useSession } from 'next-auth/react';
-import { UserCalendarSchemaItem } from '@/generated/api/meetup.schemas';
-import { QueryErrorResetBoundary } from '@tanstack/react-query';
-import { ErrorBoundary } from 'react-error-boundary';
-import { Button } from '@/components/ui/button';
-import { fromZodIssue } from 'zod-validation-error/v4';
-import type { $ZodIssue } from 'zod/v4/core';
-
-moment.updateLocale('en', {
- week: {
- dow: 1,
- doy: 4,
- },
-});
-
-const DaDRBCalendar = withDragAndDrop<
- {
- id: string;
- start: Date;
- end: Date;
- type: UserCalendarSchemaItem['type'];
- },
- {
- id: string;
- title: string;
- type: UserCalendarSchemaItem['type'];
- }
->(RBCalendar);
-
-const localizer = momentLocalizer(moment);
-
-export default function Calendar({
- userId,
- height,
-}: {
- userId?: string;
- height: string;
-}) {
- return (
-
- {({ reset }) => (
- (
-
- There was an error!
-
- {typeof error === 'string'
- ? error
- : error.errors
- .map((e: $ZodIssue) => fromZodIssue(e).toString())
- .join(', ')}
-
-
-
- );
-}
-
-function CalendarWithUserEvents({
- userId,
- height,
-}: {
- userId: string;
- height: string;
-}) {
- const sesstion = useSession();
- const [currentView, setCurrentView] = React.useState<
- 'month' | 'week' | 'day' | 'agenda' | 'work_week'
- >('week');
- const [currentDate, setCurrentDate] = React.useState
(new Date());
- const router = useRouter();
-
- const { data, refetch, error, isError } = useGetApiUserUserCalendar(
- userId,
- {
- start: moment(currentDate)
- .startOf(
- currentView === 'agenda'
- ? 'month'
- : currentView === 'work_week'
- ? 'week'
- : currentView,
- )
- .toISOString(),
- end: moment(currentDate)
- .endOf(
- currentView === 'agenda'
- ? 'month'
- : currentView === 'work_week'
- ? 'week'
- : currentView,
- )
- .toISOString(),
- },
- {
- query: {
- refetchOnWindowFocus: true,
- refetchOnReconnect: true,
- refetchOnMount: true,
- },
- },
- );
-
- if (isError) {
- throw error.response?.data || 'Failed to fetch calendar data';
- }
-
- const { mutate: patchEvent } = usePatchApiEventEventID({
- mutation: {
- throwOnError(error) {
- throw error.response?.data || 'Failed to update event';
- },
- },
- });
-
- return (
- {
- setCurrentDate(date);
- }}
- events={
- data?.data.calendar.map((event) => ({
- id: event.id,
- title: event.type === 'event' ? event.title : 'Blocker',
- start: new Date(event.start_time),
- end: new Date(event.end_time),
- type: event.type,
- })) ?? []
- }
- onSelectEvent={(event) => {
- router.push(`/events/${event.id}`);
- }}
- onSelectSlot={(slotInfo) => {
- router.push(
- `/events/new?start=${slotInfo.start.toISOString()}&end=${slotInfo.end.toISOString()}`,
- );
- }}
- resourceIdAccessor={(event) => event.id}
- resourceTitleAccessor={(event) => event.title}
- startAccessor={(event) => event.start}
- endAccessor={(event) => event.end}
- selectable={sesstion.data?.user?.id === userId}
- onEventDrop={(event) => {
- const { start, end, event: droppedEvent } = event;
- if (droppedEvent.type === 'blocked_private') return;
- const startISO = new Date(start).toISOString();
- const endISO = new Date(end).toISOString();
- patchEvent(
- {
- eventID: droppedEvent.id,
- data: {
- start_time: startISO,
- end_time: endISO,
- },
- },
- {
- onSuccess: () => {
- refetch();
- },
- onError: (error) => {
- console.error('Error updating event:', error);
- },
- },
- );
- }}
- onEventResize={(event) => {
- const { start, end, event: resizedEvent } = event;
- if (resizedEvent.type === 'blocked_private') return;
- const startISO = new Date(start).toISOString();
- const endISO = new Date(end).toISOString();
- if (startISO === endISO) {
- console.warn('Start and end times are the same, skipping resize.');
- return;
- }
- patchEvent(
- {
- eventID: resizedEvent.id,
- data: {
- start_time: startISO,
- end_time: endISO,
- },
- },
- {
- onSuccess: () => {
- refetch();
- },
- onError: (error) => {
- console.error('Error resizing event:', error);
- },
- },
- );
- }}
- />
- );
-}
-
-function CalendarWithoutUserEvents({ height }: { height: string }) {
- const [currentView, setCurrentView] = React.useState<
- 'month' | 'week' | 'day' | 'agenda' | 'work_week'
- >('week');
- const [currentDate, setCurrentDate] = React.useState(new Date());
-
- return (
- {
- setCurrentDate(date);
- }}
- />
- );
-}
diff --git a/src/components/custom-toolbar.css b/src/components/custom-toolbar.css
deleted file mode 100644
index 3fba69f..0000000
--- a/src/components/custom-toolbar.css
+++ /dev/null
@@ -1,114 +0,0 @@
-/* Container der Toolbar */
-.custom-toolbar {
- display: flex;
- flex-direction: column;
- gap: 12px;
- padding: calc(var(--spacing) * 2);
- padding-left: calc(50px + var(--spacing));
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
- font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-}
-
-/* Anzeige des aktuellen Datums (Monat und Jahr) */
-.custom-toolbar .current-date {
- font-weight: bold;
- font-size: 12px;
- text-align: center;
- color: #ffffff;
- background-color: #717171;
- height: 37px;
- border-radius: 11px;
-}
-
-/* Navigationsbereich (Today, Prev, Next) */
-.custom-toolbar .navigation-controls {
- display: flex;
- gap: 8px;
- justify-content: center;
-}
-
-.custom-toolbar .navigation-controls button {
- padding: 8px 12px;
- color: #ffffff;
- border: none;
- border-radius: 11px;
- font-size: 12px;
- cursor: pointer;
- transition: background-color 0.2s;
-}
-
-.custom-toolbar .navigation-controls button:hover {
- background-color: #1976d2;
-}
-
-.custom-toolbar .navigation-controls button:active {
- background-color: #1565c0;
-}
-
-/* Dropdown-Bereich für Woche und Jahr */
-.custom-toolbar .dropdowns {
- display: flex;
- gap: 8px;
- justify-content: center;
- height: 30px;
- font-size: 10px;
- margin-top: 3.5px;
- border-radius: 11px;
-}
-
-.custom-toolbar .dropdowns select {
- padding: 8px 12px;
- border-radius: 11px;
- font-size: 10px;
- background-color: #555555;
- color: #ffffff;
- cursor: pointer;
- transition: border-color 0.2s;
-}
-
-.custom-toolbar .dropdowns select:hover {
- border-color: #999;
-}
-
-.right-section,
-.view-switcher {
- background-color: #717171;
- height: 48px;
- border-radius: 11px;
- justify-items: center;
- align-items: center;
-}
-
-.custom-toolbar .navigation-controls .handleWeek button {
- background-color: #717171;
- height: 30px;
- width: 30px;
- margin-bottom: 3.5px;
-}
-
-.view-change,
-.right-section {
- background-color: #717171;
- height: 48px;
- padding: 0 8px;
- border-radius: 11px;
- justify-items: center;
-}
-
-.right-section .datepicker-box {
- color: #000000;
- background-color: #c6c6c6;
- height: 36px;
- border-radius: 11px;
- font-size: 12px;
- align-self: center;
-}
-
-.datepicker {
- text-align: center;
- height: 30px;
-}
-
-.datepicker-box {
- z-index: 5;
-}
diff --git a/src/components/custom-toolbar.tsx b/src/components/custom-toolbar.tsx
deleted file mode 100644
index 36c8fff..0000000
--- a/src/components/custom-toolbar.tsx
+++ /dev/null
@@ -1,260 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import './custom-toolbar.css';
-import { Button } from '@/components/ui/button';
-import DatePicker from 'react-datepicker';
-import 'react-datepicker/dist/react-datepicker.css';
-import { NavigateAction } from 'react-big-calendar';
-
-interface CustomToolbarProps {
- //Aktuell angezeigtes Datum
- date: Date;
- //Aktuelle Ansicht
- view: 'month' | 'week' | 'day' | 'agenda' | 'work_week';
-
- onNavigate: (action: NavigateAction, newDate?: Date) => void;
- //Ansichtwechsel
- onView: (newView: 'month' | 'week' | 'day' | 'agenda' | 'work_week') => void;
-}
-
-const CustomToolbar: React.FC = ({
- date,
- view,
- onNavigate,
- onView,
-}) => {
- //ISO-Wochennummer eines Datums ermitteln
- const getISOWeek = (date: Date): number => {
- const tmp = new Date(date.getTime());
- //Datum so verschieben, dass der nächste Donnerstag erreicht wird (ISO: Woche beginnt am Montag)
- tmp.setDate(tmp.getDate() + 4 - (tmp.getDay() || 7));
- const yearStart = new Date(tmp.getFullYear(), 0, 1);
- const weekNo = Math.ceil(
- ((tmp.getTime() - yearStart.getTime()) / 86400000 + 1) / 7,
- );
- return weekNo;
- };
-
- //ISO-Wochenjahr eines Datums ermitteln
- const getISOWeekYear = (date: Date): number => {
- const tmp = new Date(date.getTime());
- tmp.setDate(tmp.getDate() + 4 - (tmp.getDay() || 7));
- return tmp.getFullYear();
- };
-
- //Ermittlung der Anzahl der Wochen im Jahr
- const getISOWeeksInYear = (year: number): number => {
- const d = new Date(year, 11, 31);
- const week = getISOWeek(d);
- return week === 1 ? getISOWeek(new Date(year, 11, 24)) : week;
- };
-
- const getDateOfISOWeek = (week: number, year: number): Date => {
- const jan1 = new Date(year, 0, 1);
- const dayOfWeek = jan1.getDay();
- const isoDayOfWeek = dayOfWeek === 0 ? 7 : dayOfWeek;
- let firstMonday: Date;
- if (isoDayOfWeek <= 4) {
- //1. Januar gehört zur ersten ISO-Woche (Montag dieser Woche bestimmen)
- firstMonday = new Date(year, 0, 1 - isoDayOfWeek + 1);
- } else {
- //Ansonsten liegt der erste Montag in der darauffolgenden Woche
- firstMonday = new Date(year, 0, 1 + (8 - isoDayOfWeek));
- }
- firstMonday.setDate(firstMonday.getDate() + (week - 1) * 7);
- return firstMonday;
- };
-
- //Lokaler State für Woche und ISO-Wochenjahr (statt des reinen Kalenderjahrs)
- const [selectedWeek, setSelectedWeek] = useState(getISOWeek(date));
- const [selectedYear, setSelectedYear] = useState(
- getISOWeekYear(date),
- );
-
- //Auswahl aktualisieren, wenn sich die Prop "date" ändert
- useEffect(() => {
- setSelectedWeek(getISOWeek(date));
- setSelectedYear(getISOWeekYear(date));
- }, [date]);
-
- //Start (Montag) und Ende (Sonntag) der aktuell angezeigten Woche berechnen
- const weekStartDate = getDateOfISOWeek(selectedWeek, selectedYear);
- const weekEndDate = new Date(weekStartDate);
- weekEndDate.setDate(weekStartDate.getDate() + 6);
-
- //Ansichtwechsel
- const handleViewChange = (newView: 'month' | 'week' | 'day' | 'agenda') => {
- onView(newView);
- };
-
- //Today-Button aktualisiert das Datum im DatePicker auf das heutige
- const handleToday = () => {
- const today = new Date();
- setSelectedDate(today);
- setSelectedWeek(getISOWeek(today));
- setSelectedYear(getISOWeekYear(today));
- onNavigate('TODAY', today);
- };
-
- //Pfeiltaste nach Vorne
- const handleNext = () => {
- let newDate: Date;
- if (view === 'day' || view === 'agenda') {
- newDate = new Date(date);
- newDate.setDate(newDate.getDate() + 1);
- } else if (view === 'week') {
- let newWeek = selectedWeek + 1;
- let newYear = selectedYear;
- if (newWeek > getISOWeeksInYear(selectedYear)) {
- newYear = selectedYear + 1;
- newWeek = 1;
- }
- setSelectedWeek(newWeek);
- setSelectedYear(newYear);
- newDate = getDateOfISOWeek(newWeek, newYear);
- } else if (view === 'month') {
- newDate = new Date(date.getFullYear(), date.getMonth() + 1, 1);
- } else {
- newDate = new Date(date);
- }
- //Datum im DatePicker aktualisieren
- setSelectedDate(newDate);
- onNavigate('DATE', newDate);
- };
-
- //Pfeiltaste nach Hinten
- const handlePrev = () => {
- let newDate: Date;
- if (view === 'day' || view === 'agenda') {
- newDate = new Date(date);
- newDate.setDate(newDate.getDate() - 1);
- } else if (view === 'week') {
- let newWeek = selectedWeek - 1;
- let newYear = selectedYear;
- if (newWeek < 1) {
- newYear = selectedYear - 1;
- newWeek = getISOWeeksInYear(newYear);
- }
- setSelectedWeek(newWeek);
- setSelectedYear(newYear);
- newDate = getDateOfISOWeek(newWeek, newYear);
- } else if (view === 'month') {
- newDate = new Date(date.getFullYear(), date.getMonth() - 1, 1);
- } else {
- newDate = new Date(date);
- }
- //Datum im DatePicker aktualisieren
- setSelectedDate(newDate);
- onNavigate('DATE', newDate);
- };
-
- const [selectedDate, setSelectedDate] = useState(new Date());
-
- const handleDateChange = (date: Date | null) => {
- setSelectedDate(date);
- if (date) {
- if (view === 'week') {
- const newWeek = getISOWeek(date);
- const newYear = getISOWeekYear(date);
- setSelectedWeek(newWeek);
- setSelectedYear(newYear);
- const newDate = getDateOfISOWeek(newWeek, newYear);
- onNavigate('DATE', newDate);
- } else if (view === 'day') {
- onNavigate('DATE', date);
- } else if (view === 'month') {
- const newDate = new Date(date.getFullYear(), date.getMonth(), 1);
- onNavigate('DATE', newDate);
- } else if (view === 'agenda') {
- onNavigate('DATE', date);
- }
- }
- };
-
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-