Merge pull request #64 from daichitakahashi/sharedModal

Shared modal

web-console/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @cf-eventhub/web-console
 
+## 0.0.9
+
+### Patch Changes
+
+- 261c207: Use shared modal for dispatch details
+
 ## 0.0.8
 
 ### Patch Changes

web-console/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cf-eventhub/web-console",
   "type": "module",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "scripts": {
     "dev": "wrangler dev",
     "deploy": "wrangler deploy --minify",

web-console/src/app/index.tsx

@@ -8,7 +8,7 @@ import { Button } from "../components/Button";
 import { CreateEvent } from "../components/CreateEvent";
 import { Event } from "../components/Event";
 import { SunMedium } from "../components/Icon";
-import { Modal } from "../components/Modal";
+import { Modal, useSharedModal } from "../components/Modal";
 import { Pagination } from "../components/Pagination";
 import { type DateTime, factory } from "../factory";
 
@@ -112,6 +112,10 @@ export const createHandler = ({
             })()
           : undefined;
 
+        const [SharedModal, sharedModalData] = useSharedModal({
+          modalId: "dispatch-detail-modal",
+        });
+
         return c.render(
           <div>
             <div class="h-2 bg-blue-300" />
@@ -134,14 +138,15 @@ export const createHandler = ({
                   {(_) => <CreateEvent closeModal={_} />}
                 </Modal>
               </div>
-
+              <SharedModal />
               <div class="flex flex-col justify-center gap-12 overflow-hidden pt-1 pb-6">
                 {events.length > 0 ? (
                   events.map((e) => (
                     <Event
                       key={e.id}
                       event={e}
                       formatDate={c.var.dateFormatter}
+                      sharedModal={sharedModalData}
                     />
                   ))
                 ) : (

web-console/src/components/Event.tsx

@@ -4,7 +4,7 @@ import type { DateTime } from "../factory";
 import { Button } from "./Button";
 import { Description, DescriptionList } from "./DescriptionList";
 import { ScanSearch, Sunrise } from "./Icon";
-import { Modal } from "./Modal";
+import { SharedModalContent, type SharedModalData } from "./Modal";
 import { StatusIndicator } from "./StatusIndicator";
 import {
   Table,
@@ -20,7 +20,8 @@ import type { EventWithDispatches } from "./types";
 export const Event: FC<{
   event: EventWithDispatches;
   formatDate: (d: DateTime) => string;
-}> = ({ event, formatDate }) => {
+  sharedModal: SharedModalData;
+}> = ({ event, formatDate, sharedModal }) => {
   let eventStatus: "ongoing" | "complete" | "ignored" | "failed" = "ongoing";
   const statuses = event.dispatches
     .map((d) => d.status)
@@ -71,6 +72,7 @@ export const Event: FC<{
                 key={dispatch.id}
                 dispatch={dispatch}
                 formatDate={formatDate}
+                sharedModal={sharedModal}
               />
             ))
           ) : (
@@ -89,7 +91,8 @@ export const Event: FC<{
 export const Dispatch: FC<{
   dispatch: EventWithDispatches["dispatches"][number];
   formatDate: (d: DateTime) => string;
-}> = ({ dispatch, formatDate }) => (
+  sharedModal: SharedModalData;
+}> = ({ dispatch, formatDate, sharedModal }) => (
   <TableRow>
     <TableCell>
       <code>{dispatch.destination}</code>
@@ -111,21 +114,27 @@ export const Dispatch: FC<{
       )}
     </TableCell>
     <TableCell>
-      <Modal
-        target={(_: string) => (
-          <div class="w-fit cursor-pointer hover:text-gray-500" _={_}>
+      <SharedModalContent
+        sharedModal={sharedModal}
+        contentFrameId={`dispatch-${dispatch.id}`}
+        trigger={(openModal) => (
+          <div
+            class="w-fit cursor-pointer hover:text-gray-500"
+            hx-swap-oob={`.dispatch-${dispatch.id}`}
+            _={openModal}
+          >
             <ScanSearch title="Show detail" />
           </div>
         )}
       >
-        {(_) => (
+        {(closeModal) => (
           <DispatchDetails
             dispatch={dispatch}
-            closeModal={_}
+            closeModal={closeModal}
             formatDate={formatDate}
           />
         )}
-      </Modal>
+      </SharedModalContent>
     </TableCell>
   </TableRow>
 );
@@ -135,7 +144,7 @@ const DispatchDetails: FC<{
   closeModal: string;
   formatDate: (d: DateTime) => string;
 }> = ({ dispatch, closeModal, formatDate }) => (
-  <div>
+  <div class={`dispatch-${dispatch.id}`}>
     <h2 class="text-2xl font-semibold">
       <span class="flex gap-2 items-center">
         <Sunrise title="" /> Dispatch details
@@ -145,6 +154,7 @@ const DispatchDetails: FC<{
       <DescriptionList>
         <Description title="Destination">
           <code>{dispatch.destination}</code>
+          {new Date().toISOString()}
         </Description>
         <Description title="Max retries">{dispatch.maxRetries}</Description>
         <Description title="Delay seconds">

web-console/src/components/Modal.tsx

@@ -24,3 +24,68 @@ export const Modal: FC<{
     </dialog>
   </div>
 );
+
+export type SharedModalData = {
+  getOpenModalScript: (contentFrameId: string) => string;
+  closeModalScript: string;
+};
+
+export const useSharedModal = ({ modalId }: { modalId: string }) => {
+  const modalFrameId = `modal-frame-${modalId}`;
+
+  const getOpenModalScript = (contentFrameId: string) => `
+    on click
+    set dialog to #${modalId}
+    set frame to #${modalFrameId}
+    if dialog does not match @open
+      put innerHTML of #${contentFrameId} into frame
+      call htmx.process(frame)
+      call dialog.showModal()
+    end`;
+  const closeModalScript = `
+    on click
+    set dialog to #${modalId}
+    if dialog match @open
+      call dialog.close()
+    end`;
+
+  const SharedModal: FC = () => (
+    <dialog
+      id={modalId}
+      class="outline-none rounded-xl backdrop:bg-gray-100/30 backdrop:backdrop-blur-[2px]"
+    >
+      <div
+        id={modalFrameId}
+        class="m-[1px] p-4 rounded-xl outline outline-1 outline-gray-900/20"
+      />
+    </dialog>
+  );
+
+  return [
+    SharedModal,
+    {
+      getOpenModalScript,
+      closeModalScript,
+    } satisfies SharedModalData as SharedModalData,
+  ] as const;
+};
+
+export const SharedModalContent: FC<{
+  sharedModal: SharedModalData;
+  contentFrameId: string;
+  trigger: (openModalScript: string) => Child;
+  children: (closeModalScript: string) => Child;
+}> = ({
+  sharedModal: { getOpenModalScript, closeModalScript },
+  contentFrameId,
+  trigger,
+  children,
+}) => {
+  const openModalScript = getOpenModalScript(contentFrameId);
+  return (
+    <div>
+      {trigger(openModalScript)}
+      <template id={contentFrameId}>{children(closeModalScript)}</template>
+    </div>
+  );
+};