diff --git a/src/hooks/makeQuery.ts b/src/hooks/makeQuery.ts index a16909766..1d0e3013d 100644 --- a/src/hooks/makeQuery.ts +++ b/src/hooks/makeQuery.ts @@ -16,7 +16,7 @@ export interface LoadMore { ) => Promise>; } -type UseQuery = QueryResult & +export type UseQueryResult = QueryResult & LoadMore; type UseQueryOpts = Partial<{ displayLoader: boolean; @@ -26,7 +26,7 @@ type UseQueryOpts = Partial<{ }>; type UseQueryHook = ( opts: UseQueryOpts -) => UseQuery; +) => UseQueryResult; function makeQuery( query: DocumentNode @@ -36,7 +36,7 @@ function makeQuery( require, skip, variables - }: UseQueryOpts): UseQuery { + }: UseQueryOpts): UseQueryResult { const notify = useNotifier(); const intl = useIntl(); const [, dispatchAppState] = useAppState(); diff --git a/src/hooks/makeSearch.ts b/src/hooks/makeSearch.ts new file mode 100644 index 000000000..c4b4dc42c --- /dev/null +++ b/src/hooks/makeSearch.ts @@ -0,0 +1,18 @@ +import { DocumentNode } from "graphql"; +import { useState } from "react"; + +import Debounce from "../components/Debounce"; +import { UseQueryResult } from "./makeQuery"; + +export interface SearchQueryVariables { + after?: string; + first: number; + query: string; +} + +function makeSearch( + query: DocumentNode, + loadMoreFn: (result: UseQueryResult) => void +): UseSearchHook { + const [searchQuery, setSearchQuery] = useState(""); +} diff --git a/src/hooks/useDebounce.ts b/src/hooks/useDebounce.ts new file mode 100644 index 000000000..69be1e40e --- /dev/null +++ b/src/hooks/useDebounce.ts @@ -0,0 +1,19 @@ +import { useEffect, useRef } from "react"; + +export type UseDebounceFn = (...args: T[]) => void; +function useDebounce( + debounceFn: UseDebounceFn, + time = 200 +): UseDebounceFn { + const timer = useRef(null); + useEffect(() => () => clearTimeout(timer.current)); + + return (...args: T[]) => { + if (timer.current) { + clearTimeout(timer.current); + } + timer.current = setTimeout(() => debounceFn(...args), time); + }; +} + +export default useDebounce;