add menu to event modal

xvvvyz · Aug 16, 2024 · e161f07 · e161f07
1 parent e8028ee
commit e161f07
Show file tree

Hide file tree

Showing 9 changed files with 62 additions and 44 deletions.
diff --git a/app/(pages)/@modal/(layout)/subjects/[subjectId]/event-types/[eventTypeId]/page.tsx b/app/(pages)/@modal/(layout)/subjects/[subjectId]/event-types/[eventTypeId]/page.tsx
@@ -33,7 +33,7 @@ const Page = async ({ params: { eventTypeId, subjectId } }: PageProps) => {
           isTeamMember && (
             <EventTypeMenu
               eventTypeId={eventType.id}
-              isView
+              isModal
               subjectId={subjectId}
             />
           )

diff --git a/app/_components/event-menu.tsx b/app/_components/event-menu.tsx
@@ -2,30 +2,46 @@
 
 import * as DropdownMenu from '@/_components/dropdown-menu';
 import DropdownMenuDeleteItem from '@/_components/dropdown-menu-delete-item';
+import IconButton from '@/_components/icon-button';
 import deleteEvent from '@/_mutations/delete-event';
 import EllipsisVerticalIcon from '@heroicons/react/24/outline/EllipsisVerticalIcon';
+import { useRouter } from 'next/navigation';
 
 interface EventMenuProps {
   eventId: string;
+  isModal?: boolean;
 }
 
-const EventMenu = ({ eventId }: EventMenuProps) => (
-  <DropdownMenu.Root
-    trigger={
-      <div className="group absolute right-0 top-0 flex items-center justify-center px-2 py-2.5 text-fg-3 hover:text-fg-2 active:text-fg-2">
-        <div className="rounded-full p-2 group-hover:bg-alpha-1 group-active:bg-alpha-1">
-          <EllipsisVerticalIcon className="w-5" />
-        </div>
-      </div>
-    }
-  >
-    <DropdownMenu.Content className="-mt-[3.35rem] mr-1.5">
-      <DropdownMenuDeleteItem
-        confirmText="Delete event"
-        onConfirm={() => deleteEvent(eventId)}
-      />
-    </DropdownMenu.Content>
-  </DropdownMenu.Root>
-);
+const EventMenu = ({ eventId, isModal }: EventMenuProps) => {
+  const router = useRouter();
+
+  return (
+    <DropdownMenu.Root
+      trigger={
+        isModal ? (
+          <IconButton icon={<EllipsisVerticalIcon className="w-7" />} />
+        ) : (
+          <div className="group absolute right-0 top-0 flex items-center justify-center px-2 py-2.5 text-fg-3 hover:text-fg-2 active:text-fg-2">
+            <div className="rounded-full p-2 group-hover:bg-alpha-1 group-active:bg-alpha-1">
+              <EllipsisVerticalIcon className="w-5" />
+            </div>
+          </div>
+        )
+      }
+    >
+      <DropdownMenu.Content
+        className={isModal ? '-mr-[3.7rem] -mt-14' : '-mt-[3.35rem] mr-1.5'}
+      >
+        <DropdownMenuDeleteItem
+          confirmText="Delete event"
+          onConfirm={async () => {
+            await deleteEvent(eventId);
+            if (isModal) router.back();
+          }}
+        />
+      </DropdownMenu.Content>
+    </DropdownMenu.Root>
+  );
+};
 
 export default EventMenu;
diff --git a/app/_components/event-page.tsx b/app/_components/event-page.tsx
@@ -1,6 +1,7 @@
 import Avatar from '@/_components/avatar';
 import Button from '@/_components/button';
 import EventCard from '@/_components/event-card';
+import EventMenu from '@/_components/event-menu';
 import * as Modal from '@/_components/modal';
 import PageModalBackButton from '@/_components/page-modal-back-button';
 import PageModalHeader from '@/_components/page-modal-header';
@@ -30,6 +31,7 @@ const EventPage = async ({ eventId, isPublic, subjectId }: EventPageProps) => {
   return (
     <Modal.Content>
       <PageModalHeader
+        menu={<EventMenu eventId={eventId} isModal />}
         subtitle={
           <>
             {event && (

diff --git a/app/_components/event-type-menu.tsx b/app/_components/event-type-menu.tsx
@@ -29,7 +29,7 @@ interface EventTypeMenuProps<T extends FieldValues> {
   availableTemplates?: NonNullable<ListTemplatesWithDataData>;
   eventTypeId?: string;
   form?: UseFormReturn<T>;
-  isView?: boolean;
+  isModal?: boolean;
   subjectId: string;
   subjects?: NonNullable<ListSubjectsByTeamIdData>;
 }
@@ -39,7 +39,7 @@ const EventTypeMenu = <T extends FieldValues>({
   availableTemplates,
   eventTypeId,
   form,
-  isView,
+  isModal,
   subjectId,
   subjects,
 }: EventTypeMenuProps<T>) => {
@@ -52,7 +52,7 @@ const EventTypeMenu = <T extends FieldValues>({
   return (
     <DropdownMenu.Root
       trigger={
-        form || isView ? (
+        form || isModal ? (
           <IconButton icon={<EllipsisVerticalIcon className="w-7" />} />
         ) : (
           <div className="group flex items-center justify-center px-2 text-fg-3 hover:text-fg-2 active:text-fg-2">
@@ -64,7 +64,7 @@ const EventTypeMenu = <T extends FieldValues>({
       }
     >
       <DropdownMenu.Content
-        className={form || isView ? '-mr-[3.7rem] -mt-14' : '-mt-12 mr-1.5'}
+        className={form || isModal ? '-mr-[3.7rem] -mt-14' : '-mt-12 mr-1.5'}
       >
         {form && availableInputs && subjects && (
           <>
@@ -206,9 +206,9 @@ const EventTypeMenu = <T extends FieldValues>({
             )}
             <DropdownMenuDeleteItem
               confirmText="Delete event type"
-              onConfirm={() => {
-                void deleteEventType(eventTypeId);
-                if (form || isView) router.replace(`/subjects/${subjectId}`);
+              onConfirm={async () => {
+                await deleteEventType(eventTypeId);
+                if (form || isModal) router.back();
               }}
             />
           </>

diff --git a/app/_components/session-menu.tsx b/app/_components/session-menu.tsx
@@ -22,7 +22,7 @@ interface SessionMenuProps<T extends FieldValues> {
   highestPublishedOrder: number;
   isDraft?: boolean;
   isList?: boolean;
-  isView?: boolean;
+  isModal?: boolean;
   missionId: string;
   nextSessionOrder: number;
   session:
@@ -36,7 +36,7 @@ const SessionMenu = <T extends FieldValues>({
   highestPublishedOrder,
   isDraft,
   isList,
-  isView,
+  isModal,
   missionId,
   nextSessionOrder,
   session,
@@ -49,7 +49,7 @@ const SessionMenu = <T extends FieldValues>({
   return (
     <DropdownMenu.Root
       trigger={
-        form || isView ? (
+        form || isModal ? (
           <IconButton icon={<EllipsisVerticalIcon className="w-7" />} />
         ) : (
           <div className="group mr-1.5 flex items-center justify-center px-2 text-fg-3 hover:text-fg-2 active:text-fg-2 sm:mr-6">
@@ -61,7 +61,7 @@ const SessionMenu = <T extends FieldValues>({
       }
     >
       <DropdownMenu.Content
-        className={form || isView ? '-mr-[3.7rem] -mt-14' : '-mt-20 mr-2'}
+        className={form || isModal ? '-mr-[3.7rem] -mt-14' : '-mt-20 mr-2'}
       >
         {form ? (
           !isDraft && (
@@ -135,14 +135,14 @@ const SessionMenu = <T extends FieldValues>({
         <DropdownMenu.Separator />
         <DropdownMenuDeleteItem
           confirmText="Delete session"
-          onConfirm={() => {
-            void deleteSession({
+          onConfirm={async () => {
+            await deleteSession({
               currentOrder: session.order,
               missionId: missionId,
               sessionId: session.id,
             });
 
-            if (form || isView) {
+            if (form || isModal) {
               router.replace(
                 `/subjects/${subjectId}/training-plans/${missionId}/sessions`,
               );

diff --git a/app/_components/session-page.tsx b/app/_components/session-page.tsx
@@ -64,7 +64,7 @@ const SessionPage = async ({
           isTeamMember && (
             <SessionMenu
               highestPublishedOrder={highestPublishedOrder}
-              isView
+              isModal
               missionId={missionId}
               nextSessionOrder={highestOrder + 1}
               session={session}

diff --git a/app/_components/sessions-page.tsx b/app/_components/sessions-page.tsx
@@ -55,7 +55,7 @@ const SessionsPage = async ({
         menu={
           isTeamMember && (
             <TrainingPlanMenu
-              isView
+              isModal
               missionId={mission.id}
               subjectId={subjectId}
             />

diff --git a/app/_components/subject-menu.tsx b/app/_components/subject-menu.tsx
@@ -256,8 +256,8 @@ const SubjectMenu = ({
           </DropdownMenu.Button>
           <DropdownMenuDeleteItem
             confirmText="Delete subject"
-            onConfirm={() => {
-              void updateSubject({ deleted: true, id: subject.id });
+            onConfirm={async () => {
+              await updateSubject({ deleted: true, id: subject.id });
               if (!isList) router.replace('/subjects');
             }}
           />

diff --git a/app/_components/training-plan-menu.tsx b/app/_components/training-plan-menu.tsx
@@ -9,13 +9,13 @@ import PencilIcon from '@heroicons/react/24/outline/PencilIcon';
 import { useRouter } from 'next/navigation';
 
 interface TrainingPlanMenuProps {
-  isView?: boolean;
+  isModal?: boolean;
   missionId: string;
   subjectId: string;
 }
 
 const TrainingPlanMenu = ({
-  isView,
+  isModal,
   missionId,
   subjectId,
 }: TrainingPlanMenuProps) => {
@@ -25,7 +25,7 @@ const TrainingPlanMenu = ({
     <>
       <DropdownMenu.Root
         trigger={
-          isView ? (
+          isModal ? (
             <IconButton icon={<EllipsisVerticalIcon className="w-7" />} />
           ) : (
             <div className="group flex items-center justify-center px-2 text-fg-3 hover:text-fg-2 active:text-fg-2">
@@ -37,7 +37,7 @@ const TrainingPlanMenu = ({
         }
       >
         <DropdownMenu.Content
-          className={isView ? '-mr-[3.7rem] -mt-14' : '-mt-12 mr-1.5'}
+          className={isModal ? '-mr-[3.7rem] -mt-14' : '-mt-12 mr-1.5'}
         >
           <DropdownMenu.Button
             href={`/subjects/${subjectId}/training-plans/${missionId}/edit`}
@@ -48,9 +48,9 @@ const TrainingPlanMenu = ({
           </DropdownMenu.Button>
           <DropdownMenuDeleteItem
             confirmText="Delete training plan"
-            onConfirm={() => {
-              void deleteTrainingPlan(missionId);
-              if (isView) router.replace(`/subjects/${subjectId}`);
+            onConfirm={async () => {
+              await deleteTrainingPlan(missionId);
+              if (isModal) router.back();
             }}
           />
         </DropdownMenu.Content>