From 4a52531fb728264881f8b6fb538be112605b4cf3 Mon Sep 17 00:00:00 2001
From: feb-dain <feb.dain@gmail.com>
Date: Tue, 14 Nov 2023 12:16:39 +0900
Subject: [PATCH 1/5] =?UTF-8?q?refactor:=20=EA=B2=80=EC=83=89=20=EA=B8=B0?=
 =?UTF-8?q?=EB=8A=A5=20=EC=B5=9C=EC=A0=81=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[#927]
---
 .../StationSearchWindow/StationSearchBar.tsx  | 15 +----
 .../hooks/useStationSearchWindow.tsx          | 63 +++++++++++++------
 2 files changed, 46 insertions(+), 32 deletions(-)

diff --git a/frontend/src/components/ui/StationSearchWindow/StationSearchBar.tsx b/frontend/src/components/ui/StationSearchWindow/StationSearchBar.tsx
index 9d0983e10..2c52dfcd3 100644
--- a/frontend/src/components/ui/StationSearchWindow/StationSearchBar.tsx
+++ b/frontend/src/components/ui/StationSearchWindow/StationSearchBar.tsx
@@ -1,9 +1,6 @@
 import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
 
-import { useState } from 'react';
-
 import { useSearchStations } from '@hooks/tanstack-query/useSearchStations';
-import { useDebounce } from '@hooks/useDebounce';
 
 import FlexBox from '@common/FlexBox';
 import Loader from '@common/Loader';
@@ -20,17 +17,8 @@ const StationSearchBar = () => {
     handleCloseResult,
     showStationDetails,
     isFocused,
-    searchWord,
+    debouncedSearchWord,
   } = useStationSearchWindow();
-  const [debouncedSearchWord, setDebouncedSearchWord] = useState(searchWord);
-
-  useDebounce(
-    () => {
-      setDebouncedSearchWord(searchWord);
-    },
-    [searchWord],
-    400
-  );
 
   const {
     data: searchResult,
@@ -45,6 +33,7 @@ const StationSearchBar = () => {
         <label htmlFor="station-search-bar" aria-hidden>
           <StyledSearch
             id="station-search-bar"
+            name="station-search"
             type="search"
             role="searchbox"
             placeholder="충전소명 또는 지역명을 입력해 주세요"
diff --git a/frontend/src/components/ui/StationSearchWindow/hooks/useStationSearchWindow.tsx b/frontend/src/components/ui/StationSearchWindow/hooks/useStationSearchWindow.tsx
index a10871607..ed0baaeee 100644
--- a/frontend/src/components/ui/StationSearchWindow/hooks/useStationSearchWindow.tsx
+++ b/frontend/src/components/ui/StationSearchWindow/hooks/useStationSearchWindow.tsx
@@ -12,6 +12,7 @@ import { markerInstanceStore } from '@stores/google-maps/markerInstanceStore';
 
 import { useStationInfoWindow } from '@hooks/google-maps/useStationInfoWindow';
 import { fetchSearchedStations } from '@hooks/tanstack-query/useSearchStations';
+import { useDebounce } from '@hooks/useDebounce';
 import useMediaQueries from '@hooks/useMediaQueries';
 
 import { useNavigationBar } from '@ui/Navigator/NavigationBar/hooks/useNavigationBar';
@@ -24,20 +25,17 @@ import type { StationDetails, StationPosition } from '@type';
 import StationDetailsWindow from '../../StationDetailsWindow/index';
 
 export const useStationSearchWindow = () => {
-  const queryClient = useQueryClient();
+  const screen = useMediaQueries();
 
   const [isFocused, setIsFocused] = useState(false);
-  const [searchWord, setSearchWord] = useState('');
 
-  const { renderDefaultMarker } = useMarker();
-
-  const { openLastPanel } = useNavigationBar();
-  const { openStationInfoWindow } = useStationInfoWindow();
-
-  const screen = useMediaQueries();
+  const handleOpenResult = (
+    event?: MouseEvent<HTMLInputElement> | FocusEvent<HTMLInputElement>
+  ) => {
+    if (event !== undefined) {
+      event.stopPropagation();
+    }
 
-  const handleOpenResult = (event: MouseEvent<HTMLInputElement> | FocusEvent<HTMLInputElement>) => {
-    event.stopPropagation();
     setIsFocused(true);
   };
 
@@ -45,13 +43,37 @@ export const useStationSearchWindow = () => {
     setIsFocused(false);
   };
 
+  const queryClient = useQueryClient();
+
+  const [searchWord, setSearchWord] = useState('');
+  const [debouncedSearchWord, setDebouncedSearchWord] = useState(searchWord);
+
+  useDebounce(
+    () => {
+      setDebouncedSearchWord(searchWord);
+    },
+    [searchWord],
+    400
+  );
+
   const handleSubmitSearchWord = async (event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
+
+    const searchWordFromForm = new FormData(event.currentTarget).get('station-search');
+
+    if (encodeURIComponent(String(searchWordFromForm)) === searchWord) {
+      handleOpenResult();
+
+      return;
+    }
+
     handleCloseResult();
 
     const searchedStations = await fetchSearchedStations(searchWord);
+    const isSearchedStationExisting =
+      searchedStations !== undefined && searchedStations.stations.length > 0;
 
-    if (searchedStations !== undefined && searchedStations.stations.length > 0) {
+    if (isSearchedStationExisting) {
       const [{ stationId, latitude, longitude }] = searchedStations.stations;
       showStationDetails({ stationId, latitude, longitude });
     }
@@ -59,6 +81,10 @@ export const useStationSearchWindow = () => {
     queryClient.invalidateQueries({ queryKey: [QUERY_KEY_SEARCHED_STATION] });
   };
 
+  const { openLastPanel } = useNavigationBar();
+  const { openStationInfoWindow } = useStationInfoWindow();
+  const { renderDefaultMarker } = useMarker();
+
   const showStationDetails = async ({ stationId, latitude, longitude }: StationPosition) => {
     googleMapActions.moveTo({ lat: latitude, lng: longitude });
 
@@ -66,12 +92,11 @@ export const useStationSearchWindow = () => {
       openLastPanel(<StationDetailsWindow stationId={stationId} />);
     }
 
-    // 지금 보여지는 화면에 검색한 충전소가 존재할 경우의 처리
-    if (
-      markerInstanceStore
-        .getState()
-        .some(({ id: cachedStationId }) => cachedStationId === stationId)
-    ) {
+    const isStationInDisplayPosition = markerInstanceStore
+      .getState()
+      .some(({ id: cachedStationId }) => cachedStationId === stationId);
+
+    if (isStationInDisplayPosition) {
       openStationInfoWindow(stationId);
     } else {
       const stationDetails = await fetch(
@@ -100,7 +125,7 @@ export const useStationSearchWindow = () => {
   const handleChangeSearchWord = ({ target: { value } }: ChangeEvent<HTMLInputElement>) => {
     const searchWord = encodeURIComponent(value);
 
-    setIsFocused(true);
+    handleOpenResult();
     setSearchWord(searchWord);
   };
 
@@ -111,6 +136,6 @@ export const useStationSearchWindow = () => {
     handleCloseResult,
     showStationDetails,
     isFocused,
-    searchWord,
+    debouncedSearchWord,
   };
 };

From 4c2c861fe896d2235537ebdaa1a641ccab28ac74 Mon Sep 17 00:00:00 2001
From: feb-dain <feb.dain@gmail.com>
Date: Tue, 14 Nov 2023 12:19:56 +0900
Subject: [PATCH 2/5] =?UTF-8?q?refactor:=20=EC=BD=94=EB=93=9C=20=EC=9C=84?=
 =?UTF-8?q?=EC=B9=98=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 다른 코드들 처럼 hook끼리 모아두기로 결정

[#927]
---
 .../hooks/useStationSearchWindow.tsx          | 34 +++++++++----------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/frontend/src/components/ui/StationSearchWindow/hooks/useStationSearchWindow.tsx b/frontend/src/components/ui/StationSearchWindow/hooks/useStationSearchWindow.tsx
index ed0baaeee..19a889663 100644
--- a/frontend/src/components/ui/StationSearchWindow/hooks/useStationSearchWindow.tsx
+++ b/frontend/src/components/ui/StationSearchWindow/hooks/useStationSearchWindow.tsx
@@ -29,6 +29,23 @@ export const useStationSearchWindow = () => {
 
   const [isFocused, setIsFocused] = useState(false);
 
+  const queryClient = useQueryClient();
+
+  const [searchWord, setSearchWord] = useState('');
+  const [debouncedSearchWord, setDebouncedSearchWord] = useState(searchWord);
+
+  const { openLastPanel } = useNavigationBar();
+  const { openStationInfoWindow } = useStationInfoWindow();
+  const { renderDefaultMarker } = useMarker();
+
+  useDebounce(
+    () => {
+      setDebouncedSearchWord(searchWord);
+    },
+    [searchWord],
+    400
+  );
+
   const handleOpenResult = (
     event?: MouseEvent<HTMLInputElement> | FocusEvent<HTMLInputElement>
   ) => {
@@ -43,19 +60,6 @@ export const useStationSearchWindow = () => {
     setIsFocused(false);
   };
 
-  const queryClient = useQueryClient();
-
-  const [searchWord, setSearchWord] = useState('');
-  const [debouncedSearchWord, setDebouncedSearchWord] = useState(searchWord);
-
-  useDebounce(
-    () => {
-      setDebouncedSearchWord(searchWord);
-    },
-    [searchWord],
-    400
-  );
-
   const handleSubmitSearchWord = async (event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
 
@@ -81,10 +85,6 @@ export const useStationSearchWindow = () => {
     queryClient.invalidateQueries({ queryKey: [QUERY_KEY_SEARCHED_STATION] });
   };
 
-  const { openLastPanel } = useNavigationBar();
-  const { openStationInfoWindow } = useStationInfoWindow();
-  const { renderDefaultMarker } = useMarker();
-
   const showStationDetails = async ({ stationId, latitude, longitude }: StationPosition) => {
     googleMapActions.moveTo({ lat: latitude, lng: longitude });
 

From 2bbeb676f2f6315fdbcfa8e7627ebec353eea922 Mon Sep 17 00:00:00 2001
From: feb-dain <feb.dain@gmail.com>
Date: Thu, 16 Nov 2023 14:35:24 +0900
Subject: [PATCH 3/5] =?UTF-8?q?refactor:=20=EB=B6=88=ED=95=84=EC=9A=94?=
 =?UTF-8?q?=ED=95=9C=20=EC=9A=94=EC=B2=AD=20=EB=B3=B4=EB=82=B4=EC=A7=80=20?=
 =?UTF-8?q?=EC=95=8A=EB=8F=84=EB=A1=9D=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[#927]
---
 .../StationSearchWindow/StationSearchBar.tsx  | 10 +--
 .../hooks/useStationSearchWindow.tsx          | 82 +++++++++++++------
 .../hooks/tanstack-query/useSearchStations.ts |  2 +-
 frontend/src/hooks/useDebounce.ts             | 13 ++-
 4 files changed, 69 insertions(+), 38 deletions(-)

diff --git a/frontend/src/components/ui/StationSearchWindow/StationSearchBar.tsx b/frontend/src/components/ui/StationSearchWindow/StationSearchBar.tsx
index 2c52dfcd3..168e56a02 100644
--- a/frontend/src/components/ui/StationSearchWindow/StationSearchBar.tsx
+++ b/frontend/src/components/ui/StationSearchWindow/StationSearchBar.tsx
@@ -1,7 +1,5 @@
 import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
 
-import { useSearchStations } from '@hooks/tanstack-query/useSearchStations';
-
 import FlexBox from '@common/FlexBox';
 import Loader from '@common/Loader';
 
@@ -17,15 +15,11 @@ const StationSearchBar = () => {
     handleCloseResult,
     showStationDetails,
     isFocused,
-    debouncedSearchWord,
-  } = useStationSearchWindow();
-
-  const {
-    data: searchResult,
+    searchResult,
     isLoading,
     isError,
     isFetching,
-  } = useSearchStations(debouncedSearchWord);
+  } = useStationSearchWindow();
 
   return (
     <StyledContainer>
diff --git a/frontend/src/components/ui/StationSearchWindow/hooks/useStationSearchWindow.tsx b/frontend/src/components/ui/StationSearchWindow/hooks/useStationSearchWindow.tsx
index 19a889663..79409ad97 100644
--- a/frontend/src/components/ui/StationSearchWindow/hooks/useStationSearchWindow.tsx
+++ b/frontend/src/components/ui/StationSearchWindow/hooks/useStationSearchWindow.tsx
@@ -11,7 +11,8 @@ import { googleMapActions } from '@stores/google-maps/googleMapStore';
 import { markerInstanceStore } from '@stores/google-maps/markerInstanceStore';
 
 import { useStationInfoWindow } from '@hooks/google-maps/useStationInfoWindow';
-import { fetchSearchedStations } from '@hooks/tanstack-query/useSearchStations';
+import type { SearchedStationResponse } from '@hooks/tanstack-query/useSearchStations';
+import { fetchSearchedStations, useSearchStations } from '@hooks/tanstack-query/useSearchStations';
 import { useDebounce } from '@hooks/useDebounce';
 import useMediaQueries from '@hooks/useMediaQueries';
 
@@ -33,6 +34,8 @@ export const useStationSearchWindow = () => {
 
   const [searchWord, setSearchWord] = useState('');
   const [debouncedSearchWord, setDebouncedSearchWord] = useState(searchWord);
+  const [userSearchWord, setUserSearchWord] = useState('');
+  const [isSubmitted, setIsSubmitted] = useState(false);
 
   const { openLastPanel } = useNavigationBar();
   const { openStationInfoWindow } = useStationInfoWindow();
@@ -43,9 +46,17 @@ export const useStationSearchWindow = () => {
       setDebouncedSearchWord(searchWord);
     },
     [searchWord],
-    400
+    400,
+    isSubmitted
   );
 
+  const {
+    data: searchResult,
+    isLoading,
+    isError,
+    isFetching,
+  } = useSearchStations(debouncedSearchWord);
+
   const handleOpenResult = (
     event?: MouseEvent<HTMLInputElement> | FocusEvent<HTMLInputElement>
   ) => {
@@ -60,31 +71,6 @@ export const useStationSearchWindow = () => {
     setIsFocused(false);
   };
 
-  const handleSubmitSearchWord = async (event: FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-
-    const searchWordFromForm = new FormData(event.currentTarget).get('station-search');
-
-    if (encodeURIComponent(String(searchWordFromForm)) === searchWord) {
-      handleOpenResult();
-
-      return;
-    }
-
-    handleCloseResult();
-
-    const searchedStations = await fetchSearchedStations(searchWord);
-    const isSearchedStationExisting =
-      searchedStations !== undefined && searchedStations.stations.length > 0;
-
-    if (isSearchedStationExisting) {
-      const [{ stationId, latitude, longitude }] = searchedStations.stations;
-      showStationDetails({ stationId, latitude, longitude });
-    }
-
-    queryClient.invalidateQueries({ queryKey: [QUERY_KEY_SEARCHED_STATION] });
-  };
-
   const showStationDetails = async ({ stationId, latitude, longitude }: StationPosition) => {
     googleMapActions.moveTo({ lat: latitude, lng: longitude });
 
@@ -122,9 +108,47 @@ export const useStationSearchWindow = () => {
     }
   };
 
+  const showStationDetailsIfFound = (searchedStations: SearchedStationResponse) => {
+    const isSearchedStationExisting = searchedStations?.stations.length > 0;
+
+    if (isSearchedStationExisting) {
+      const [{ stationId, latitude, longitude }] = searchedStations.stations;
+      showStationDetails({ stationId, latitude, longitude });
+      handleCloseResult();
+
+      queryClient.invalidateQueries({ queryKey: [QUERY_KEY_SEARCHED_STATION] });
+    }
+  };
+
+  const handleSubmitSearchWord = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    handleCloseResult();
+    setIsSubmitted(true);
+
+    const searchWordFromForm = new FormData(event.currentTarget).get('station-search');
+    const encodedSearchWord = encodeURIComponent(String(searchWordFromForm));
+    const isSameAsPreviousSearchWord = encodedSearchWord === userSearchWord;
+
+    if (isSameAsPreviousSearchWord) {
+      return;
+    }
+
+    setUserSearchWord(encodedSearchWord);
+
+    if (searchWord === debouncedSearchWord) {
+      showStationDetailsIfFound(searchResult);
+
+      return;
+    }
+
+    const searchedStations = await fetchSearchedStations(encodedSearchWord);
+    showStationDetailsIfFound(searchedStations);
+  };
+
   const handleChangeSearchWord = ({ target: { value } }: ChangeEvent<HTMLInputElement>) => {
     const searchWord = encodeURIComponent(value);
 
+    setIsSubmitted(false);
     handleOpenResult();
     setSearchWord(searchWord);
   };
@@ -137,5 +161,9 @@ export const useStationSearchWindow = () => {
     showStationDetails,
     isFocused,
     debouncedSearchWord,
+    searchResult,
+    isLoading,
+    isError,
+    isFetching,
   };
 };
diff --git a/frontend/src/hooks/tanstack-query/useSearchStations.ts b/frontend/src/hooks/tanstack-query/useSearchStations.ts
index 51ec9129f..371c1ab79 100644
--- a/frontend/src/hooks/tanstack-query/useSearchStations.ts
+++ b/frontend/src/hooks/tanstack-query/useSearchStations.ts
@@ -7,7 +7,7 @@ import { SEARCH_SCOPE } from '@constants/stationSearch';
 
 import type { SearchedCity, SearchedStation } from '@type/stations';
 
-interface SearchedStationResponse {
+export interface SearchedStationResponse {
   stations: SearchedStation[];
   cities: SearchedCity[];
 }
diff --git a/frontend/src/hooks/useDebounce.ts b/frontend/src/hooks/useDebounce.ts
index 990de3738..44cdaa57d 100644
--- a/frontend/src/hooks/useDebounce.ts
+++ b/frontend/src/hooks/useDebounce.ts
@@ -1,11 +1,20 @@
 import { useEffect, useCallback } from 'react';
 
-export const useDebounce = <T>(func: (param: T) => void, dependencies: string[], delay: number) => {
+export const useDebounce = <T>(
+  func: (param: T) => void,
+  dependencies: string[],
+  delay: number,
+  shouldClear?: boolean
+) => {
   const callback = useCallback(func, dependencies);
 
   useEffect(() => {
     const timeout = setTimeout(callback, delay);
 
+    if (shouldClear) {
+      clearTimeout(timeout);
+    }
+
     return () => clearTimeout(timeout);
-  }, [callback, delay]);
+  }, [callback, delay, shouldClear]);
 };

From 14c93e4769614275ba6e946dba5744429a018a42 Mon Sep 17 00:00:00 2001
From: feb-dain <feb.dain@gmail.com>
Date: Thu, 16 Nov 2023 15:41:52 +0900
Subject: [PATCH 4/5] =?UTF-8?q?fix:=20=EA=B2=80=EC=83=89=20=EA=B2=B0?=
 =?UTF-8?q?=EA=B3=BC=EC=99=80=20=EA=B2=80=EC=83=89=EC=96=B4=EA=B0=80=20?=
 =?UTF-8?q?=EB=8F=99=EA=B8=B0=ED=99=94=20=EC=95=88=20=EB=90=98=EB=8A=94=20?=
 =?UTF-8?q?=EB=AC=B8=EC=A0=9C=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[#927]
---
 .../hooks/useStationSearchWindow.tsx                |  6 +-----
 frontend/src/hooks/useDebounce.ts                   | 13 ++-----------
 2 files changed, 3 insertions(+), 16 deletions(-)

diff --git a/frontend/src/components/ui/StationSearchWindow/hooks/useStationSearchWindow.tsx b/frontend/src/components/ui/StationSearchWindow/hooks/useStationSearchWindow.tsx
index 79409ad97..fcebc74fa 100644
--- a/frontend/src/components/ui/StationSearchWindow/hooks/useStationSearchWindow.tsx
+++ b/frontend/src/components/ui/StationSearchWindow/hooks/useStationSearchWindow.tsx
@@ -35,7 +35,6 @@ export const useStationSearchWindow = () => {
   const [searchWord, setSearchWord] = useState('');
   const [debouncedSearchWord, setDebouncedSearchWord] = useState(searchWord);
   const [userSearchWord, setUserSearchWord] = useState('');
-  const [isSubmitted, setIsSubmitted] = useState(false);
 
   const { openLastPanel } = useNavigationBar();
   const { openStationInfoWindow } = useStationInfoWindow();
@@ -46,8 +45,7 @@ export const useStationSearchWindow = () => {
       setDebouncedSearchWord(searchWord);
     },
     [searchWord],
-    400,
-    isSubmitted
+    400
   );
 
   const {
@@ -123,7 +121,6 @@ export const useStationSearchWindow = () => {
   const handleSubmitSearchWord = async (event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     handleCloseResult();
-    setIsSubmitted(true);
 
     const searchWordFromForm = new FormData(event.currentTarget).get('station-search');
     const encodedSearchWord = encodeURIComponent(String(searchWordFromForm));
@@ -148,7 +145,6 @@ export const useStationSearchWindow = () => {
   const handleChangeSearchWord = ({ target: { value } }: ChangeEvent<HTMLInputElement>) => {
     const searchWord = encodeURIComponent(value);
 
-    setIsSubmitted(false);
     handleOpenResult();
     setSearchWord(searchWord);
   };
diff --git a/frontend/src/hooks/useDebounce.ts b/frontend/src/hooks/useDebounce.ts
index 44cdaa57d..990de3738 100644
--- a/frontend/src/hooks/useDebounce.ts
+++ b/frontend/src/hooks/useDebounce.ts
@@ -1,20 +1,11 @@
 import { useEffect, useCallback } from 'react';
 
-export const useDebounce = <T>(
-  func: (param: T) => void,
-  dependencies: string[],
-  delay: number,
-  shouldClear?: boolean
-) => {
+export const useDebounce = <T>(func: (param: T) => void, dependencies: string[], delay: number) => {
   const callback = useCallback(func, dependencies);
 
   useEffect(() => {
     const timeout = setTimeout(callback, delay);
 
-    if (shouldClear) {
-      clearTimeout(timeout);
-    }
-
     return () => clearTimeout(timeout);
-  }, [callback, delay, shouldClear]);
+  }, [callback, delay]);
 };

From bca16388b8ee3309269b64f1f1fca02da490de49 Mon Sep 17 00:00:00 2001
From: feb-dain <feb.dain@gmail.com>
Date: Thu, 16 Nov 2023 15:55:14 +0900
Subject: [PATCH 5/5] =?UTF-8?q?refactor:=20useDebounce=20=EA=B0=9C?=
 =?UTF-8?q?=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[#927]
---
 frontend/src/hooks/useDebounce.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/hooks/useDebounce.ts b/frontend/src/hooks/useDebounce.ts
index 990de3738..dcf2a2af1 100644
--- a/frontend/src/hooks/useDebounce.ts
+++ b/frontend/src/hooks/useDebounce.ts
@@ -1,11 +1,11 @@
 import { useEffect, useCallback } from 'react';
 
 export const useDebounce = <T>(func: (param: T) => void, dependencies: string[], delay: number) => {
-  const callback = useCallback(func, dependencies);
+  const callback = useCallback(func, [delay]);
 
   useEffect(() => {
     const timeout = setTimeout(callback, delay);
 
     return () => clearTimeout(timeout);
-  }, [callback, delay]);
+  }, [callback, dependencies]);
 };