Enhance EventDetailPage with user data handling

Author: hackerwins

README.md

@@ -1,4 +1,5 @@
 # SyncUp
+
 "Let's Sync Up" – SyncUp is a lightweight event coordination app that helps you plan events and sync available time slots with others.
 
 ## ✨ Features
@@ -17,6 +18,9 @@
 
 https://github.com/user-attachments/assets/29d921fc-4514-4b20-917c-f4a03be7796b
 
-
 📆 Give SyncUp a try and let us know what you think!
 🧪 Feedback is super welcome!
+
+## ⚒️ Contributing
+
+We welcome contributions! If you have suggestions or improvements, please open an issue or submit a pull request.

frontend/src/App.tsx

@@ -5,35 +5,23 @@ import { Event } from "./types/types";
 import { CreateEventPage } from "./CreateEventPage";
 import { EventDetailPage } from "./EventDetailPage";
 import { ThemeProvider } from "./components/ThemeProvider";
-import { Toaster } from "@/components/ui/sonner";
-import { Navbar } from "@/components/NavBar";
+import { Layout } from "./Layout";
 
 function App() {
   const [eventData, setEventData] = useState<Event | undefined>(undefined);
 
   return (
     <ThemeProvider defaultTheme="system" storageKey="vite-ui-theme">
       <BrowserRouter basename={import.meta.env.VITE_SYNCUP_BASENAME}>
-        <div className="min-h-screen flex flex-col">
-          <Navbar eventData={eventData} />
-          <main className="flex-1 py-8">
-            <div className="max-w-4xl mx-auto px-4">
-              <Routes>
-                <Route path="/" element={<CreateEventPage />} />
-                <Route
-                  path="/:key"
-                  element={<EventDetailPage onEventLoad={setEventData} />}
-                />
-              </Routes>
-            </div>
-          </main>
-          <footer className="border-t py-4">
-            <div className="max-w-4xl mx-auto px-4 text-center text-sm text-muted-foreground">
-              © {new Date().getFullYear()} Yorkie Team. All rights reserved.
-            </div>
-          </footer>
-          <Toaster />
-        </div>
+        <Layout eventData={eventData}>
+          <Routes>
+            <Route path="/" element={<CreateEventPage />} />
+            <Route
+              path="/:key"
+              element={<EventDetailPage onEventLoad={setEventData} />}
+            />
+          </Routes>
+        </Layout>
       </BrowserRouter>
     </ThemeProvider>
   );

frontend/src/EventDetailPage.tsx

@@ -9,24 +9,16 @@ import { LegendItems } from "./components/LegendItems";
 import { User, Event, TimeSlot } from "./types/types";
 import { useFetchUser } from "./hooks/useFetchUser";
 
-export function EventDetailPage({
+function EventDetail({
+  user,
+  initialRoot,
   onEventLoad,
 }: {
+  user?: User;
+  initialRoot?: Event;
   onEventLoad?: (event: Event) => void;
 }) {
   const { key } = useParams();
-  const formData = useLocation().state;
-  const initialRoot =
-    (formData && {
-      name: formData.name,
-      selectedDates: formData.selectedDates,
-      startTime: formData.startTime,
-      endTime: formData.endTime,
-      availables: {},
-    }) ||
-    undefined;
-
-  const { user } = useFetchUser();
 
   const { root, update, presences, loading, error } = useYorkieDoc<Event, User>(
     import.meta.env.VITE_YORKIE_API_KEY,
@@ -217,3 +209,42 @@ export function EventDetailPage({
     </div>
   );
 }
+
+export function EventDetailPage({
+  onEventLoad,
+}: {
+  onEventLoad?: (event: Event) => void;
+}) {
+  const formData = useLocation().state;
+  const initialRoot =
+    (formData && {
+      name: formData.name,
+      selectedDates: formData.selectedDates,
+      startTime: formData.startTime,
+      endTime: formData.endTime,
+      availables: {},
+    }) ||
+    undefined;
+
+  const { user, loading } = useFetchUser();
+
+  if (loading) {
+    return (
+      <div
+        className="flex flex-col items-center justify-center min-h-[300px]"
+        aria-live="polite"
+      >
+        <Loader2 className="h-8 w-8 animate-spin text-primary" />
+        <p className="mt-4 text-sm text-muted-foreground">Loading user...</p>
+      </div>
+    );
+  }
+
+  return (
+    <EventDetail
+      user={user}
+      initialRoot={initialRoot}
+      onEventLoad={onEventLoad}
+    />
+  );
+}

frontend/src/Layout.tsx

@@ -0,0 +1,26 @@
+import { ReactNode } from "react";
+import { Toaster } from "@/components/ui/sonner";
+import { Navbar } from "@/components/NavBar";
+import { Event } from "./types/types";
+
+type LayoutProps = {
+  children: ReactNode;
+  eventData?: Event;
+};
+
+export function Layout({ children, eventData }: LayoutProps) {
+  return (
+    <div className="min-h-screen flex flex-col">
+      <Navbar eventData={eventData} />
+      <main className="flex-1 py-8">
+        <div className="max-w-4xl mx-auto px-4">{children}</div>
+      </main>
+      <footer className="border-t py-4">
+        <div className="max-w-4xl mx-auto px-4 text-center text-sm text-muted-foreground">
+          © {new Date().getFullYear()} Yorkie Team. All rights reserved.
+        </div>
+      </footer>
+      <Toaster />
+    </div>
+  );
+}