From 663bb672e471da26d0dff6e1322c03a36bc20f97 Mon Sep 17 00:00:00 2001
From: despiegk <kristof@incubaid.com>
Date: Thu, 31 Oct 2024 09:25:48 +0100
Subject: [PATCH] ...

---
 .../src/components/calendar/calendar.tsx      | 67 +----------------
 .../components/calendar/event-detail-view.tsx | 74 +++++++++++++++++++
 2 files changed, 76 insertions(+), 65 deletions(-)
 create mode 100644 react-shadcn-starter/src/components/calendar/event-detail-view.tsx

diff --git a/react-shadcn-starter/src/components/calendar/calendar.tsx b/react-shadcn-starter/src/components/calendar/calendar.tsx
index 44ada91..8cd83c5 100644
--- a/react-shadcn-starter/src/components/calendar/calendar.tsx
+++ b/react-shadcn-starter/src/components/calendar/calendar.tsx
@@ -2,17 +2,11 @@ import * as React from 'react'
 import { addDays, format, startOfWeek, endOfWeek, startOfMonth, endOfMonth, eachDayOfInterval, isSameMonth, isSameDay, parseISO } from 'date-fns'
 import { ChevronLeft, ChevronRight, Plus, Moon, Sun, Clock, X } from 'lucide-react'
 import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd'
-import ReactMarkdown from 'react-markdown'
-
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
 import {
   Dialog,
   DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog"
 import { Input } from "@/components/ui/input"
@@ -29,6 +23,7 @@ import {
 } from '@/lib/calendar-data'
 import { CircleDataManager, Member } from '@/lib/circle-data'
 import { EventForm } from './eventform'
+import { EventDetailView } from './event-detail-view'
 
 const dataManager = CalendarDataManager.getInstance();
 const circleManager = CircleDataManager.getInstance();
@@ -155,7 +150,6 @@ export function OurCalendar({ webdavConfig, calendarFile, circleFile }: Calendar
   const handlePrevMonth = () => setCurrentDate(addDays(startDate, -7))
   const handleNextMonth = () => setCurrentDate(addDays(startDate, 7))
 
-  //us double, we should re-use the const fetchedEvents = await dataManager.fetchEvents();
   const fetchCalendarData = async () => {
     setIsLoading(true)
     setError(null)
@@ -397,7 +391,7 @@ export function OurCalendar({ webdavConfig, calendarFile, circleFile }: Calendar
             </div>
           </DragDropContext>
           {selectedEvent && (
-            <EventDetailsDialog
+            <EventDetailView
               event={selectedEvent}
               onClose={() => setSelectedEvent(null)}
               onEdit={handleEditEvent}
@@ -410,60 +404,3 @@ export function OurCalendar({ webdavConfig, calendarFile, circleFile }: Calendar
     </div>
   )
 }
-
-//TODO: how does this relate to eventform.tsx isn't this double?
-function EventDetailsDialog({ event, onClose, onEdit, onDelete, isDarkMode }: {
-  event: Event
-  onClose: () => void
-  onEdit: (event: Event) => void
-  onDelete: (id: string) => void
-  isDarkMode: boolean
-}) {
-  const [isEditing, setIsEditing] = React.useState(false)
-
-  return (
-    <Dialog open={true} onOpenChange={onClose}>
-      <DialogContent className="dark:bg-gray-800 dark:text-white">
-        <DialogHeader>
-          <DialogTitle>{isEditing ? 'Edit Event' : event.title}</DialogTitle>
-        </DialogHeader>
-        {isEditing ? (
-          <EventForm onSubmit={(updatedEvent) => {
-            onEdit(updatedEvent)
-            setIsEditing(false)
-          }} initialData={event} isDarkMode={isDarkMode} />
-        ) : (
-          <>
-            <div className="space-y-2">
-              <p><strong>Date:</strong> {format(parseISO(event.date), 'PPP')}</p>
-              {!event.isFullDay && (
-                <>
-                  <p><strong>Time:</strong> {event.time}</p>
-                  <p><strong>Duration:</strong> {dataManager.formatDuration(event.duration)}</p>
-                </>
-              )}
-              <p><strong>Category:</strong> <span className={`px-2 py-1 rounded ${event.color} text-white`}>{event.category}</span></p>
-              {event.attendees.length > 0 && (
-                <div>
-                  <strong>Attendees:</strong>
-                  <ul className="list-disc list-inside">
-                    {event.attendees.map((email, index) => (
-                      <li key={index}>{email}</li>
-                    ))}
-                  </ul>
-                </div>
-              )}
-              <div className="prose max-w-none dark:prose-invert">
-                <ReactMarkdown>{event.content}</ReactMarkdown>
-              </div>
-            </div>
-            <DialogFooter>
-              <Button variant="outline" onClick={() => setIsEditing(true)} className="dark:bg-gray-700 dark:text-white">Edit</Button>
-              <Button variant="destructive" onClick={() => onDelete(event.id)} className="dark:bg-red-600 dark:text-white">Delete</Button>
-            </DialogFooter>
-          </>
-        )}
-      </DialogContent>
-    </Dialog>
-  )
-}
diff --git a/react-shadcn-starter/src/components/calendar/event-detail-view.tsx b/react-shadcn-starter/src/components/calendar/event-detail-view.tsx
new file mode 100644
index 0000000..f7e1ac4
--- /dev/null
+++ b/react-shadcn-starter/src/components/calendar/event-detail-view.tsx
@@ -0,0 +1,74 @@
+import * as React from 'react'
+import { format, parseISO } from 'date-fns'
+import { Button } from "@/components/ui/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+import ReactMarkdown from 'react-markdown'
+import { Event } from '@/lib/calendar-data'
+import { EventForm } from './eventform'
+import { CalendarDataManager } from '@/lib/calendar-data'
+
+const dataManager = CalendarDataManager.getInstance();
+
+interface EventDetailViewProps {
+  event: Event
+  onClose: () => void
+  onEdit: (event: Event) => void
+  onDelete: (id: string) => void
+  isDarkMode: boolean
+}
+
+export function EventDetailView({ event, onClose, onEdit, onDelete, isDarkMode }: EventDetailViewProps) {
+  const [isEditing, setIsEditing] = React.useState(false)
+
+  return (
+    <Dialog open={true} onOpenChange={onClose}>
+      <DialogContent className="dark:bg-gray-800 dark:text-white">
+        <DialogHeader>
+          <DialogTitle>{isEditing ? 'Edit Event' : event.title}</DialogTitle>
+        </DialogHeader>
+        {isEditing ? (
+          <EventForm onSubmit={(updatedEvent) => {
+            onEdit(updatedEvent)
+            setIsEditing(false)
+          }} initialData={event} isDarkMode={isDarkMode} />
+        ) : (
+          <>
+            <div className="space-y-2">
+              <p><strong>Date:</strong> {format(parseISO(event.date), 'PPP')}</p>
+              {!event.isFullDay && (
+                <>
+                  <p><strong>Time:</strong> {event.time}</p>
+                  <p><strong>Duration:</strong> {dataManager.formatDuration(event.duration)}</p>
+                </>
+              )}
+              <p><strong>Category:</strong> <span className={`px-2 py-1 rounded ${event.color} text-white`}>{event.category}</span></p>
+              {event.attendees.length > 0 && (
+                <div>
+                  <strong>Attendees:</strong>
+                  <ul className="list-disc list-inside">
+                    {event.attendees.map((email, index) => (
+                      <li key={index}>{email}</li>
+                    ))}
+                  </ul>
+                </div>
+              )}
+              <div className="prose max-w-none dark:prose-invert">
+                <ReactMarkdown>{event.content}</ReactMarkdown>
+              </div>
+            </div>
+            <DialogFooter>
+              <Button variant="outline" onClick={() => setIsEditing(true)} className="dark:bg-gray-700 dark:text-white">Edit</Button>
+              <Button variant="destructive" onClick={() => onDelete(event.id)} className="dark:bg-red-600 dark:text-white">Delete</Button>
+            </DialogFooter>
+          </>
+        )}
+      </DialogContent>
+    </Dialog>
+  )
+}