Merge pull request #47 from HybridPlanner/feature/update-modal

feat: add update modal and fix clickable zone on meeting cards
HybridPlanner · Dec 15, 2023 · 4b10984 · 4b10984
2 parents 346f3ee + 797b61c
commit 4b10984
Show file tree

Hide file tree

Showing 8 changed files with 325 additions and 38 deletions.
diff --git a/src/api/meetings.ts b/src/api/meetings.ts
@@ -45,7 +45,7 @@ export async function getMeeting(id: number): Promise<Meeting> {
 }
 
 export async function updateMeeting(
-  id: string,
+  id: number,
   data: Partial<CreateMeetingInput>
 ): Promise<Meeting> {
   const response = await apiClient.patch<Meeting>(`/meetings/${id}`, data);

diff --git a/src/components/meeting/MeetingCard.tsx b/src/components/meeting/MeetingCard.tsx
@@ -1,7 +1,7 @@
 import { Meeting } from "@/types/Meeting";
 import classNames from "classnames";
 import { format } from "date-fns";
-import { LinkIcon, Trash2 } from "lucide-react";
+import { LinkIcon, Pen, Trash2 } from "lucide-react";
 import { HTMLAttributes } from "react";
 import { MeetingDateBadge } from "./MeetingDateBadge";
 import { Link } from "react-router-dom";
@@ -11,6 +11,7 @@ type MeetingCardProps = {
   isPrevious?: boolean;
   onOpenMeeting?: (meeting: Meeting) => void;
   onDeleteMeeting?: (meeting: Meeting) => void;
+  onEditMeeting?: (meeting: Meeting) => void;
 } & HTMLAttributes<HTMLDivElement>;
 
 export function MeetingCard({
@@ -19,12 +20,13 @@ export function MeetingCard({
   isPrevious = false,
   onOpenMeeting,
   onDeleteMeeting,
+  onEditMeeting,
   ...props
 }: MeetingCardProps): JSX.Element {
   return (
     <div
       className={classNames(
-        "grid grid-cols-[auto_1fr] gap-x-4 gap-y-2 grid-row-2 p-4 rounded-xl group",
+        "grid grid-cols-[auto_1fr] gap-x-4 gap-y-2 grid-row-2 p-4 rounded-xl group relative",
         className
       )}
       {...props}
@@ -42,7 +44,10 @@ export function MeetingCard({
 
       <button
         type="button"
-        className="col-span-full col-start-2 text-lg font-semibold leading-6 tracking-wide text-left"
+        className={classNames(
+          "col-span-full col-start-2 text-lg font-semibold leading-6 tracking-wide text-left",
+          "after:absolute after:content-[''] after:top-0 after:right-0 after:left-0 after:bottom-0"
+        )}
         onClick={() => onOpenMeeting?.(meeting)}
       >
         {meeting.title}
@@ -53,25 +58,36 @@ export function MeetingCard({
 
       {!isPrevious && (
         <div className="row-start-1 row-span-2 col-start-3 invisible group-hover:visible group-focus-within:visible text-gray-600 flex flex-col gap-2">
-          <button
-            type="button"
-            className="btn hover:text-red-500 p-2 transition rounded-full hover:bg-gray-400 hover:bg-opacity-20"
-            aria-label="Delete button"
-            onClick={() => onDeleteMeeting?.(meeting)}
-          >
-            <Trash2 className="w-5 h-5" />
-          </button>
-
+          <div className="flex flex-row z-[2]">
           {meeting.publicUrl && (
-            <Link
+              <Link
+                type="button"
+                className="btn hover:text-blue-500 p-2 rounded-full hover:bg-gray-400 hover:bg-opacity-20"
+                aria-label="Open waiting page"
+                to={`/meeting/${meeting.id}`}
+              >
+                <LinkIcon className="w-5 h-5" />
+              </Link>
+            )}
+
+            <button
+              type="button"
+              className="btn hover:text-blue-500 p-2 transition rounded-full hover:bg-gray-400 hover:bg-opacity-20"
+              aria-label="Update meeting"
+              onClick={() => onEditMeeting?.(meeting)}
+            >
+              <Pen className="w-5 h-5" />  
+            </button>
+
+            <button
               type="button"
-              className="btn hover:text-blue-500 p-2 rounded-full hover:bg-gray-400 hover:bg-opacity-20"
-              aria-label="Open waiting page"
-              to={`/meeting/${meeting.id}`}
+              className="btn hover:text-red-500 p-2 transition rounded-full hover:bg-gray-400 hover:bg-opacity-20"
+              aria-label="Delete meeting"
+              onClick={() => onDeleteMeeting?.(meeting)}
             >
-              <LinkIcon className="w-5 h-5" />
-            </Link>
-          )}
+              <Trash2 className="w-5 h-5" />
+            </button>
+          </div>
         </div>
       )}
     </div>

diff --git a/src/components/meeting/MeetingDeleteModal.tsx b/src/components/meeting/MeetingDeleteModal.tsx
@@ -4,22 +4,20 @@ import {
   forwardRef,
   HTMLAttributes,
   useCallback,
-  type ReactElement,
   useRef,
   useImperativeHandle,
 } from "react";
 import { Button } from "../base/button/button";
 import { X } from "lucide-react";
-import { MeetingDateBadge } from "./MeetingDateBadge";
 
-type MeetingInfoModalProps = {
-  meeting: Meeting | undefined;
+type MeetingDeleteModalProps = {
+  meeting: Meeting ;
   onDelete: (meeting: Meeting) => void;
 } & HTMLAttributes<HTMLDialogElement>;
 
 export const MeetingDeleteModal = forwardRef<
   HTMLDialogElement,
-  MeetingInfoModalProps
+  MeetingDeleteModalProps
 >(({ meeting, className, onDelete, ...props }, ref) => {
   const modalRef = useRef<HTMLDialogElement>(null);
 
@@ -47,7 +45,6 @@ export const MeetingDeleteModal = forwardRef<
         "bg-white rounded-xl shadow-lg overflow-hidden"
       )}
     >
-      {meeting && (
         <form method="dialog">
           <button
             id="close"
@@ -87,7 +84,6 @@ export const MeetingDeleteModal = forwardRef<
             </Button>
           </menu>
         </form>
-      )}
     </dialog>
   );
 });
diff --git a/src/components/meeting/MeetingInfoModal.tsx b/src/components/meeting/MeetingInfoModal.tsx
@@ -29,16 +29,6 @@ export const MeetingInfoModal = forwardRef<
     >
       {meeting && (
         <form method="dialog">
-          {isBefore(new Date(), new Date(meeting.start_date)) && (
-            <button
-              id="edit"
-              aria-label="Edit meeting"
-              formNoValidate
-              className="absolute top-8 right-20 btn p-2 rounded-full hover:bg-gray-400 hover:bg-opacity-20"
-            >
-              <Pencil />
-            </button>
-          )}
           <button
             id="close"
             aria-label="close"