Update coaching sessions

src/app/dashboard/dashboard-content.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import { useState } from "react";
+import type * as React from "react";
+import { cn } from "@/components/lib/utils";
+import SelectCoachingRelationship from "@/components/ui/dashboard/select-coaching-relationship";
+import CoachingSessionList from "@/components/ui/dashboard/coaching-session-list";
+import AddEntities from "@/components/ui/dashboard/add-entities";
+import { CoachingSessionDialog } from "@/components/ui/dashboard/coaching-session-dialog";
+import type { CoachingSession } from "@/types/coaching-session";
+
+function DashboardContainer({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn(
+        // Base styles
+        "p-4",
+        // Mobile: stack vertically
+        "flex flex-col gap-6",
+        // Tablet and up (640px+): side by side
+        "sm:grid sm:grid-cols-2",
+        // Never grow wider than the site-header
+        "max-w-screen-2xl",
+        // Ensure full width for children
+        "[&>*]:w-full",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export function DashboardContent() {
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [sessionToEdit, setSessionToEdit] = useState<CoachingSession | undefined>();
+
+  const handleOpenDialog = (session?: CoachingSession) => {
+    setSessionToEdit(session);
+    setDialogOpen(true);
+  };
+
+  const handleCloseDialog = () => {
+    setDialogOpen(false);
+    setSessionToEdit(undefined);
+  };
+
+  return (
+    <>
+      <div className="p-4 max-w-screen-2xl">
+        <div className="mb-8 w-full">
+          <AddEntities onCreateSession={() => handleOpenDialog()} />
+        </div>
+      </div>
+      <DashboardContainer>
+        <SelectCoachingRelationship />
+        <CoachingSessionList onUpdateSession={handleOpenDialog} />
+      </DashboardContainer>
+
+      <CoachingSessionDialog
+        open={dialogOpen}
+        onOpenChange={handleCloseDialog}
+        coachingSessionToEdit={sessionToEdit}
+      />
+    </>
+  );
+}

src/app/dashboard/page.tsx

@@ -1,51 +1,11 @@
 import type { Metadata } from "next";
-import type * as React from "react";
-import { cn } from "@/components/lib/utils";
-import SelectCoachingRelationship from "@/components/ui/dashboard/select-coaching-relationship";
-import CoachingSessionList from "@/components/ui/dashboard/coaching-session-list";
-import AddEntities from "@/components/ui/dashboard/add-entities";
+import { DashboardContent } from "./dashboard-content";
 
 export const metadata: Metadata = {
   title: "Dashboard",
   description: "Coaching dashboard",
 };
 
-function DashboardContainer({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) {
-  return (
-    <div
-      className={cn(
-        // Base styles
-        "p-4",
-        // Mobile: stack vertically
-        "flex flex-col gap-6",
-        // Tablet and up (640px+): side by side
-        "sm:grid sm:grid-cols-2",
-        // Never grow wider than the site-header
-        "max-w-screen-2xl",
-        // Ensure full width for children
-        "[&>*]:w-full",
-        className
-      )}
-      {...props}
-    />
-  );
-}
-
 export default function DashboardPage() {
-  return (
-    <>
-      <div className="p-4 max-w-screen-2xl">
-        <div className="mb-8 w-full">
-          <AddEntities />
-        </div>
-      </div>
-      <DashboardContainer>
-        <SelectCoachingRelationship />
-        <CoachingSessionList />
-      </DashboardContainer>
-    </>
-  );
+  return <DashboardContent />;
 }

src/components/ui/coaching-session.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useState } from "react";
+import React from "react";
 import { format } from "date-fns";
 import { Card, CardHeader } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
@@ -15,56 +15,49 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { MoreHorizontal } from "lucide-react";
-import { CoachingSessionDialog } from "@/components/ui/dashboard/coaching-session-dialog";
-import { DateTime } from "ts-luxon";
+import { CoachingSession as CoachingSessionType } from "@/types/coaching-session";
 
 interface CoachingSessionProps {
-  coachingSession: {
-    id: Id;
-    date: string;
-    coaching_relationship_id: Id;
-    created_at: DateTime;
-    updated_at: DateTime;
-  };
+  coachingSession: CoachingSessionType;
+  onUpdate: () => void;
 }
 
 const CoachingSession: React.FC<CoachingSessionProps> = ({
   coachingSession,
+  onUpdate,
 }) => {
   const { setCurrentCoachingSessionId } = useCoachingSessionStateStore(
     (state) => state
   );
-  const [updateDialogOpen, setUpdateDialogOpen] = useState(false);
 
   return (
-    <>
-      <Card>
-        <CardHeader className="p-4">
-          <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-2">
-            <div className="space-y-1">
-              <OverarchingGoal coachingSessionId={coachingSession.id} />
-              <div className="text-sm text-muted-foreground">
-                {format(new Date(coachingSession.date), "MMMM d, yyyy h:mm a")}
-              </div>
+    <Card>
+      <CardHeader className="p-4">
+        <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-2">
+          <div className="space-y-1">
+            <OverarchingGoal coachingSessionId={coachingSession.id} />
+            <div className="text-sm text-muted-foreground">
+              {format(new Date(coachingSession.date), "MMMM d, yyyy h:mm a")}
             </div>
+          </div>
+          <div className="flex items-center gap-2">
+            <Link href={`/coaching-sessions/${coachingSession.id}`} passHref>
+              <Button
+                size="sm"
+                className="w-full sm:w-auto mt-2 sm:mt-0 text-sm px-3 py-1"
+                onClick={() => setCurrentCoachingSessionId(coachingSession.id)}
+              >
+                Join Session
+              </Button>
+            </Link>
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
                 <Button variant="ghost" size="icon">
                   <MoreHorizontal className="h-4 w-4" />
                 </Button>
               </DropdownMenuTrigger>
               <DropdownMenuContent align="end">
-                <DropdownMenuItem asChild>
-                  <Link
-                    href={`/coaching-sessions/${coachingSession.id}`}
-                    onClick={() =>
-                      setCurrentCoachingSessionId(coachingSession.id)
-                    }
-                  >
-                    Join Session
-                  </Link>
-                </DropdownMenuItem>
-                <DropdownMenuItem onClick={() => setUpdateDialogOpen(true)}>
+                <DropdownMenuItem onClick={onUpdate}>
                   Update Session
                 </DropdownMenuItem>
                 <DropdownMenuItem className="text-destructive">
@@ -73,19 +66,9 @@ const CoachingSession: React.FC<CoachingSessionProps> = ({
               </DropdownMenuContent>
             </DropdownMenu>
           </div>
-        </CardHeader>
-      </Card>
-      <CoachingSessionDialog
-        open={updateDialogOpen}
-        onOpenChange={setUpdateDialogOpen}
-        onCoachingSessionUpdated={() => {
-          // Refresh the list of coaching sessions
-          window.location.reload();
-        }}
-        existingSession={coachingSession}
-        mode="update"
-      />
-    </>
+        </div>
+      </CardHeader>
+    </Card>
   );
 };
 

src/components/ui/dashboard/add-entities.tsx

@@ -1,23 +1,20 @@
 "use client";
 
-import { useState } from "react";
-import { CoachingSessionDialog } from "./coaching-session-dialog";
 import { AddCoachingSessionButton } from "./add-coaching-session-button";
 import { AddMemberButton } from "./add-member-button";
 import { useRouter } from "next/navigation";
 import { useOrganizationStateStore } from "@/lib/providers/organization-state-store-provider";
 import { useAuthStore } from "@/lib/providers/auth-store-provider";
 
-export default function AddEntities() {
+interface AddEntitiesProps {
+  onCreateSession: () => void;
+}
+
+export default function AddEntities({ onCreateSession }: AddEntitiesProps) {
   const router = useRouter();
-  const [open, setOpen] = useState(false);
   const { currentOrganizationId } = useOrganizationStateStore((state) => state);
   const { isCoach } = useAuthStore((state) => state);
 
-  const onCoachingSessionAdded = () => {
-    setOpen(false);
-  };
-
   const onMemberButtonClicked = () => {
     router.push(`/organizations/${currentOrganizationId}/members`);
   };
@@ -28,27 +25,16 @@ export default function AddEntities() {
         Add New
       </h3>
       <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
-        <CoachingSessionDialog
-          mode="create"
-          open={open}
-          onOpenChange={setOpen}
-          onCoachingSessionUpdated={onCoachingSessionAdded}
-          dialogTrigger={
-            <AddCoachingSessionButton
-              disabled={!isCoach || !currentOrganizationId}
-            />
-          }
+        <AddCoachingSessionButton
+          disabled={!isCoach || !currentOrganizationId}
+          onClick={onCreateSession}
         />
 
-        {/* TODO: Refactor the AddMemberButton and AddMemberDialog to work just like
-            AddCoachingSessionDialog does above, where the dialog is the parent container
-            and it accepts a AddMemberButton as the dialogTrigger parameter.
-        */}
         <AddMemberButton
           disabled={!isCoach || !currentOrganizationId}
           onClick={onMemberButtonClicked}
         />
       </div>
     </div>
   );
-}
+}