refactor: modal interface

src/contents/App.tsx

@@ -23,7 +23,6 @@ export const getStyle = () => {
 const App = () => {
   const {
     initialize,
-    modalRef,
     users,
     loading,
     stopRetrieveLoop,
@@ -32,6 +31,12 @@ const App = () => {
     errorMessage,
   } = useRetrieveBskyUsers();
 
+  const [isModalOpen, setIsModalOpen] = React.useState(false);
+  const closeModal = () => {
+    setIsModalOpen(false);
+    stopRetrieveLoop();
+  };
+
   React.useEffect(() => {
     const messageHandler = (
       message: {
@@ -43,6 +48,7 @@ const App = () => {
       if (Object.values(MESSAGE_NAMES).includes(message.name)) {
         initialize()
           .then(() => {
+            setIsModalOpen(true);
             sendResponse({ hasError: false });
           })
           .catch((e) => {
@@ -72,7 +78,7 @@ const App = () => {
 
   return (
     <>
-      <Modal anchorRef={modalRef} onClose={stopRetrieveLoop}>
+      <Modal open={isModalOpen} onClose={closeModal}>
         <div className="flex flex-col gap-2 items-center">
           {loading && (
             <p className="text-lg font-bold">

src/lib/components/Modal.stories.tsx

@@ -1,8 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
-
+import { useState } from "react";
-import { useRef } from "react";
 import Modal from "./Modal";
-import type { Props as UserCardProps } from "./UserCard";
 
 const meta: Meta<typeof Modal> = {
   title: "Components/Modal",
@@ -10,22 +8,22 @@ const meta: Meta<typeof Modal> = {
 };
 export default meta;
 
-type Story = StoryObj<{ items: UserCardProps["user"][] }>;
+type Story = StoryObj<typeof Modal>;
 
 const DefaultTemplate: Story = {
   render: () => {
-    const modalRef = useRef<HTMLDialogElement>(null);
+    const [isModalOpen, setIsModalOpen] = useState(false);
 
     return (
       <>
         <button
           type="button"
           className="btn btn-primary"
-          onClick={() => modalRef.current?.showModal()}
+          onClick={() => setIsModalOpen(true)}
         >
           open
         </button>
-        <Modal anchorRef={modalRef}>
+        <Modal open={isModalOpen} onClose={() => setIsModalOpen(false)}>
           <p>Modal content</p>
         </Modal>
       </>

src/lib/components/Modal.tsx

@@ -1,14 +1,15 @@
 import type React from "react";
-import { useEffect } from "react";
+import { useEffect, useRef } from "react";
 
 export type Props = {
   children: React.ReactNode;
-  anchorRef: React.RefObject<HTMLDialogElement>;
+  open: boolean;
-  open?: boolean;
   onClose?: () => void;
 };
 
-const Modal = ({ children, anchorRef, open = false, onClose }: Props) => {
+const Modal = ({ children, open = false, onClose }: Props) => {
+  const anchorRef = useRef<HTMLDialogElement>(null);
+
   useEffect(() => {
     if (anchorRef.current) {
       anchorRef.current.addEventListener("close", onClose);
@@ -19,7 +20,7 @@ const Modal = ({ children, anchorRef, open = false, onClose }: Props) => {
         anchorRef.current.removeEventListener("close", onClose);
       }
     };
-  }, [anchorRef, onClose]);
+  }, [onClose]);
 
   return (
     <>

src/lib/hooks/useRetrieveBskyUsers.ts

@@ -45,11 +45,6 @@ export const useRetrieveBskyUsers = () => {
     messageName: (typeof MESSAGE_NAMES)[keyof typeof MESSAGE_NAMES];
   }>(null);
 
-  const modalRef = React.useRef<HTMLDialogElement>(null);
-  const showModal = () => {
-    modalRef.current?.showModal();
-  };
-
   const retrieveBskyUsers = React.useCallback(
     async (usersData: CrawledUserInfo[]) => {
       for (const userData of usersData) {
@@ -151,7 +146,6 @@ export const useRetrieveBskyUsers = () => {
     });
     setLoading(true);
     await setUsers([]);
-    showModal();
   }, []);
 
   const restart = React.useCallback(() => {
@@ -173,8 +167,6 @@ export const useRetrieveBskyUsers = () => {
   );
 
   return {
-    modalRef,
-    showModal,
     initialize,
     users,
     loading,