Merge pull request #94 from refactor-group/86-feature-add-an-entity-create-component

Author: jhodapp

src/app/dashboard/page.tsx

@@ -3,6 +3,7 @@ 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";
 
 export const metadata: Metadata = {
   title: "Dashboard",
@@ -35,9 +36,16 @@ function DashboardContainer({
 
 export default function DashboardPage() {
   return (
-    <DashboardContainer>
-      <SelectCoachingRelationship />
-      <CoachingSessionList />
-    </DashboardContainer>
+    <>
+      <div className="p-4 max-w-screen-2xl">
+        <div className="mb-8 w-full">
+          <AddEntities />
+        </div>
+      </div>
+      <DashboardContainer>
+        <SelectCoachingRelationship />
+        <CoachingSessionList />
+      </DashboardContainer>
+    </>
   );
 }

src/app/organizations/[id]/members/page.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import { use, useEffect } from "react";
+import { use, useEffect, useState } from "react";
+import { useSearchParams } from "next/navigation";
 import { Card, CardContent } from "@/components/ui/card";
 import { useAuthStore } from "@/lib/providers/auth-store-provider";
 import { useCoachingRelationshipList } from "@/lib/api/coaching-relationships";
@@ -14,6 +15,11 @@ export default function MembersPage({
 }: {
   params: Promise<{ id: Id }>;
 }) {
+  const searchParams = useSearchParams();
+  const [openAddMemberDialog] = useState(
+    searchParams.get("addMember") === "true"
+  );
+
   const organizationId = use(params).id;
   const setCurrentOrganizationId = useOrganizationStateStore(
     (state) => state.setCurrentOrganizationId
@@ -67,6 +73,7 @@ export default function MembersPage({
         userSession={userSession}
         onRefresh={handleRefresh}
         isLoading={isRelationshipsLoading || isUsersLoading}
+        openAddMemberDialog={openAddMemberDialog}
       />
     </div>
   );

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

@@ -0,0 +1,52 @@
+import { useState, forwardRef } from "react";
+import { Calendar, Plus } from "lucide-react";
+import { cn } from "@/components/lib/utils";
+
+interface AddCoachingSessionButtonProps
+  extends React.ComponentPropsWithoutRef<"button"> {
+  disabled?: boolean;
+  onClick?: () => void;
+}
+
+export const AddCoachingSessionButton = forwardRef<
+  HTMLButtonElement,
+  AddCoachingSessionButtonProps
+>(({ className, disabled, onClick, ...props }, ref) => {
+  const [hoveredItem, setHoveredItem] = useState<string | null>(null);
+
+  const handleMouseEnter = (item: string) => {
+    setHoveredItem(item);
+  };
+
+  const handleMouseLeave = () => {
+    setHoveredItem(null);
+  };
+
+  return (
+    <button
+      ref={ref}
+      disabled={disabled}
+      className={cn(
+        "flex items-center rounded-lg border border-border bg-card p-4 text-left",
+        disabled
+          ? "text-gray-300 cursor-not-allowed dark:bg-gray-700 dark:text-gray-400"
+          : "bg-card text-black hover:shadow-md transition-all dark:bg-gray-800 dark:text-white",
+        className
+      )}
+      onMouseEnter={() => handleMouseEnter("coaching")}
+      onMouseLeave={handleMouseLeave}
+      onClick={onClick}
+      {...props} // Spread remaining props
+    >
+      <div className="flex h-16 w-16 items-center justify-center rounded-md bg-primary/10">
+        <Calendar className="h-8 w-8 text-primary" />
+      </div>
+      <span className="ml-4 text-lg font-medium">Coaching Session</span>
+      {!disabled && hoveredItem === "coaching" && (
+        <Plus className="ml-auto h-6 w-6 text-primary" />
+      )}
+    </button>
+  );
+});
+
+AddCoachingSessionButton.displayName = "AddCoachingSessionButton";

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

@@ -0,0 +1,130 @@
+"use client";
+
+import React from "react";
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Label } from "@/components/ui/label";
+import { Calendar } from "@/components/ui/calendar";
+import { useCoachingRelationshipStateStore } from "@/lib/providers/coaching-relationship-state-store-provider";
+import { getDateTimeFromString } from "@/types/general";
+import {
+  CoachingSession,
+  defaultCoachingSession,
+} from "@/types/coaching-session";
+import {
+  useCoachingSessionList,
+  useCoachingSessionMutation,
+} from "@/lib/api/coaching-sessions";
+import { DateTime } from "ts-luxon";
+import { useAuthStore } from "@/lib/providers/auth-store-provider";
+import { cn } from "@/components/lib/utils";
+
+interface AddCoachingSessionDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onCoachingSessionAdded: () => void;
+  dialogTrigger: React.ReactElement<React.HTMLAttributes<HTMLButtonElement>>;
+}
+
+export function AddCoachingSessionDialog({
+  open,
+  onOpenChange,
+  onCoachingSessionAdded,
+  dialogTrigger,
+}: AddCoachingSessionDialogProps) {
+  const { currentCoachingRelationshipId } = useCoachingRelationshipStateStore(
+    (state) => state
+  );
+  const fromDate = DateTime.now().minus({ month: 1 });
+  const toDate = DateTime.now().plus({ month: 1 });
+  const { refresh } = useCoachingSessionList(
+    currentCoachingRelationshipId,
+    fromDate,
+    toDate
+  );
+  const { create: createCoachingSession } = useCoachingSessionMutation();
+  const [newSessionDate, setNewSessionDate] = useState<Date | undefined>(
+    undefined
+  );
+  const [newSessionTime, setNewSessionTime] = useState<string>("");
+  const { isCoach } = useAuthStore((state) => state);
+
+  const handleCreateSession = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!newSessionDate || !newSessionTime) return;
+
+    const [hours, minutes] = newSessionTime.split(":").map(Number);
+    const dateTime = getDateTimeFromString(newSessionDate.toISOString())
+      .set({ hour: hours, minute: minutes })
+      .toFormat("yyyy-MM-dd'T'HH:mm:ss");
+
+    const newCoachingSession: CoachingSession = {
+      ...defaultCoachingSession(),
+      coaching_relationship_id: currentCoachingRelationshipId,
+      date: dateTime,
+    };
+
+    createCoachingSession(newCoachingSession)
+      .then(() => {
+        refresh();
+        onCoachingSessionAdded();
+        setNewSessionDate(undefined);
+        setNewSessionTime("");
+      })
+      .catch((err: Error) => {
+        console.error("Failed to create new Coaching Session: " + err);
+        throw err;
+      });
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogTrigger asChild>
+        {React.cloneElement(dialogTrigger, {
+          ...(dialogTrigger.props as React.HTMLAttributes<HTMLButtonElement>),
+          className: cn(
+            (dialogTrigger.props as React.HTMLAttributes<HTMLButtonElement>)
+              .className
+          ),
+        })}
+      </DialogTrigger>
+
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Create New Coaching Session</DialogTitle>
+        </DialogHeader>
+        <form onSubmit={handleCreateSession} className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="session-date">Session Date</Label>
+            <Calendar
+              mode="single"
+              selected={newSessionDate}
+              onSelect={(date) => setNewSessionDate(date)}
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="session-time">Session Time</Label>
+            <input
+              type="time"
+              id="session-time"
+              value={newSessionTime}
+              onChange={(e) => setNewSessionTime(e.target.value)}
+              className="w-full border rounded p-2"
+              required
+            />
+          </div>
+          <Button type="submit" disabled={!newSessionDate || !newSessionTime}>
+            Create Session
+          </Button>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}

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

@@ -0,0 +1,53 @@
+"use client";
+
+import { useState } from "react";
+import { AddCoachingSessionDialog } from "./add-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() {
+  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`);
+  };
+
+  return (
+    <div className="space-y-4">
+      <h3 className="text-xl sm:text-2xl font-semibold tracking-tight">
+        Add New
+      </h3>
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+        <AddCoachingSessionDialog
+          open={open}
+          onOpenChange={setOpen}
+          onCoachingSessionAdded={onCoachingSessionAdded}
+          dialogTrigger={
+            <AddCoachingSessionButton
+              disabled={!isCoach || !currentOrganizationId}
+            />
+          }
+        />
+
+        {/* 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>
+  );
+}

src/components/ui/dashboard/add-member-button.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import { useState } from "react";
+import { Plus, Users } from "lucide-react";
+import { useOrganizationStateStore } from "@/lib/providers/organization-state-store-provider";
+import { useRouter } from "next/navigation";
+
+import { cn } from "@/components/lib/utils";
+
+interface AddMemberButtonProps {
+  disabled?: boolean;
+  onClick?: () => void;
+}
+
+export function AddMemberButton({ disabled, onClick }: AddMemberButtonProps) {
+  const router = useRouter();
+  const { currentOrganizationId } = useOrganizationStateStore((state) => state);
+  const [hoveredItem, setHoveredItem] = useState<string | null>(null);
+
+  const handleMouseEnter = (item: string) => {
+    setHoveredItem(item);
+  };
+
+  const handleMouseLeave = () => {
+    setHoveredItem(null);
+  };
+
+  return (
+    <>
+      <button
+        className={cn(
+          "flex items-center rounded-lg border border-border bg-card p-4 text-left",
+          disabled
+            ? "text-gray-300 cursor-not-allowed dark:bg-gray-700 dark:text-gray-400"
+            : "bg-card text-black hover:shadow-md transition-all dark:bg-gray-800 dark:text-white"
+        )}
+        onMouseEnter={() => handleMouseEnter("member")}
+        onMouseLeave={handleMouseLeave}
+        onClick={() => {
+          if (!disabled) {
+            // Navigate to the Members page and display the AddMemberDialog
+            router.push(
+              `/organizations/${currentOrganizationId}/members?addMember=true`
+            );
+            onClick;
+          }
+        }}
+      >
+        <div className="flex h-16 w-16 items-center justify-center rounded-md bg-primary/10">
+          <Users className="h-8 w-8 text-primary" />
+        </div>
+        <span className="ml-4 text-lg font-medium">Organization Member</span>
+        {!disabled && hoveredItem === "member" && (
+          <Plus className="ml-auto h-6 w-6 text-primary" />
+        )}
+      </button>
+    </>
+  );
+}