chore: add abort controller

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>

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}>

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,
   };
 };