From 90d991b76e49b17db2262195d20ebffe8410cddf Mon Sep 17 00:00:00 2001
From: kawamataryo <ba068082@gmail.com>
Date: Sat, 19 Oct 2024 23:09:24 +0900
Subject: [PATCH] chore: add abort controller

---
 src/contents/App.tsx                  |  3 ++-
 src/lib/components/Modal.tsx          | 16 +++++++++++++++-
 src/lib/hooks/useRetrieveBskyUsers.ts | 15 +++++++++++++++
 3 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/src/contents/App.tsx b/src/contents/App.tsx
index 98d1c8b..2d85b53 100644
--- a/src/contents/App.tsx
+++ b/src/contents/App.tsx
@@ -37,6 +37,7 @@ const App = () => {
     matchTypeFilter,
     changeMatchTypeFilter,
     filteredUsers,
+    stopRetrieveLoop,
   } = useRetrieveBskyUsers();
 
   React.useEffect(() => {
@@ -81,7 +82,7 @@ const App = () => {
 
   return (
     <>
-      <Modal anchorRef={modalRef}>
+      <Modal anchorRef={modalRef} onClose={stopRetrieveLoop}>
         <div className="flex flex-col gap-6">
           <div className="flex justify-between">
             <h1 className="text-2xl font-bold">Find Bluesky Users</h1>
diff --git a/src/lib/components/Modal.tsx b/src/lib/components/Modal.tsx
index 62291bb..9bcbd27 100644
--- a/src/lib/components/Modal.tsx
+++ b/src/lib/components/Modal.tsx
@@ -1,12 +1,26 @@
 import type React from "react";
+import { useEffect } from "react";
 
 export type Props = {
   children: React.ReactNode;
   anchorRef: React.RefObject<HTMLDialogElement>;
   open?: boolean;
+  onClose?: () => void;
 };
 
-const Modal = ({ children, anchorRef, open = false }: Props) => {
+const Modal = ({ children, anchorRef, open = false, onClose }: Props) => {
+  useEffect(() => {
+    if (anchorRef.current) {
+      anchorRef.current.addEventListener("close", onClose);
+    }
+
+    return () => {
+      if (anchorRef.current) {
+        anchorRef.current.removeEventListener("close", onClose);
+      }
+    };
+  }, [anchorRef, onClose]);
+
   return (
     <>
       <dialog className="modal" ref={anchorRef} open={open}>
diff --git a/src/lib/hooks/useRetrieveBskyUsers.ts b/src/lib/hooks/useRetrieveBskyUsers.ts
index b2b7543..126c299 100644
--- a/src/lib/hooks/useRetrieveBskyUsers.ts
+++ b/src/lib/hooks/useRetrieveBskyUsers.ts
@@ -151,12 +151,20 @@ export const useRetrieveBskyUsers = () => {
     [],
   );
 
+  const abortControllerRef = React.useRef<AbortController | null>(null);
   const startRetrieveLoop = React.useCallback(
     async (queryParam: string) => {
+      abortControllerRef.current = new AbortController();
+      const signal = abortControllerRef.current.signal;
+
       let isBottomReached = false;
       let index = 0;
 
       while (!isBottomReached) {
+        if (signal.aborted) {
+          break;
+        }
+
         const data = detectXUsers(queryParam).filter((u) => {
           return !detectedXUsers.some(
             (t) => t.twAccountName === u.twAccountName,
@@ -191,6 +199,12 @@ export const useRetrieveBskyUsers = () => {
     [retrieveBskyUsers, detectedXUsers],
   );
 
+  const stopRetrieveLoop = () => {
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+    }
+  };
+
   const initialize = React.useCallback(
     async ({
       identifier,
@@ -283,5 +297,6 @@ export const useRetrieveBskyUsers = () => {
     matchTypeFilter,
     changeMatchTypeFilter,
     filteredUsers,
+    stopRetrieveLoop,
   };
 };