add the ability to update a coaching session

Author: calebbourg

src/components/ui/coaching-session.tsx

@@ -1,18 +1,30 @@
 "use client";
 
-import React from "react";
+import React, { useState } from "react";
 import { format } from "date-fns";
 import { Card, CardHeader } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import Link from "next/link";
 import { useCoachingSessionStateStore } from "@/lib/providers/coaching-session-state-store-provider";
 import { useOverarchingGoalBySession } from "@/lib/api/overarching-goals";
 import { Id } from "@/types/general";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  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";
 
 interface CoachingSessionProps {
   coachingSession: {
     id: Id;
     date: string;
+    coaching_relationship_id: Id;
+    created_at: DateTime;
+    updated_at: DateTime;
   };
 }
 
@@ -22,29 +34,58 @@ const CoachingSession: React.FC<CoachingSessionProps> = ({
   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")}
+    <>
+      <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>
+            <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)}>
+                  Update Session
+                </DropdownMenuItem>
+                <DropdownMenuItem className="text-destructive">
+                  Delete Session
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
           </div>
-          <Link href={`/coaching-sessions/${coachingSession.id}`} passHref>
-            <Button
-              size="sm"
-              className="w-full sm:w-auto mt-2 sm:mt-0"
-              onClick={() => setCurrentCoachingSessionId(coachingSession.id)}
-            >
-              Join Session
-            </Button>
-          </Link>
-        </div>
-      </CardHeader>
-    </Card>
+        </CardHeader>
+      </Card>
+      <CoachingSessionDialog
+        open={updateDialogOpen}
+        onOpenChange={setUpdateDialogOpen}
+        onCoachingSessionUpdated={() => {
+          // Refresh the list of coaching sessions
+          window.location.reload();
+        }}
+        existingSession={coachingSession}
+        mode="update"
+      />
+    </>
   );
 };
 

src/components/ui/dashboard/add-coaching-session-dialog.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useState } from "react";
-import { AddCoachingSessionDialog } from "./add-coaching-session-dialog";
+import { CoachingSessionDialog } from "./coaching-session-dialog";
 import { AddCoachingSessionButton } from "./add-coaching-session-button";
 import { AddMemberButton } from "./add-member-button";
 import { useRouter } from "next/navigation";
@@ -28,10 +28,11 @@ export default function AddEntities() {
         Add New
       </h3>
       <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
-        <AddCoachingSessionDialog
+        <CoachingSessionDialog
+          mode="create"
           open={open}
           onOpenChange={setOpen}
-          onCoachingSessionAdded={onCoachingSessionAdded}
+          onCoachingSessionUpdated={onCoachingSessionAdded}
           dialogTrigger={
             <AddCoachingSessionButton
               disabled={!isCoach || !currentOrganizationId}