diff --git a/src/admin/components/forms/RenderFields/index.tsx b/src/admin/components/forms/RenderFields/index.tsx index ca0c2ba01f..b817b4e04e 100644 --- a/src/admin/components/forms/RenderFields/index.tsx +++ b/src/admin/components/forms/RenderFields/index.tsx @@ -13,7 +13,7 @@ const RenderedFieldContext = createContext({}); export const useRenderedFields = () => useContext(RenderedFieldContext); -const RenderFields = (props) => { +const RenderFields: React.FC = (props) => { const { fieldSchema, fieldTypes, diff --git a/src/admin/hooks/useDebounce.tsx b/src/admin/hooks/useDebounce.tsx index 51a1d0306d..d4ffae61f0 100644 --- a/src/admin/hooks/useDebounce.tsx +++ b/src/admin/hooks/useDebounce.tsx @@ -1,7 +1,7 @@ import { useState, useEffect } from 'react'; // Our hook -export default function useDebounce(value, delay) { +export default function useDebounce(value: unknown, delay: number): unknown { // State and setters for debounced value const [debouncedValue, setDebouncedValue] = useState(value); diff --git a/src/admin/hooks/useIntersect.tsx b/src/admin/hooks/useIntersect.tsx index b3ae43460c..c38cbe210d 100644 --- a/src/admin/hooks/useIntersect.tsx +++ b/src/admin/hooks/useIntersect.tsx @@ -1,8 +1,17 @@ /* eslint-disable no-shadow */ import { useEffect, useRef, useState } from 'react'; -export default ({ root = null, rootMargin, threshold = 0 } = {}) => { - const [entry, updateEntry] = useState({}); +type Intersect = [ + setNode: React.Dispatch, + entry: IntersectionObserverEntry +] + +const useIntersect = ({ + root = null, + rootMargin = '0px', + threshold = 0, +} = {}): Intersect => { + const [entry, updateEntry] = useState(); const [node, setNode] = useState(null); const observer = useRef( @@ -27,3 +36,5 @@ export default ({ root = null, rootMargin, threshold = 0 } = {}) => { return [setNode, entry]; }; + +export default useIntersect; diff --git a/src/admin/hooks/useMountEffect.tsx b/src/admin/hooks/useMountEffect.tsx index 655f74b59f..f6ac8434ae 100644 --- a/src/admin/hooks/useMountEffect.tsx +++ b/src/admin/hooks/useMountEffect.tsx @@ -1,5 +1,5 @@ import { useEffect } from 'react'; -const useMountEffect = func => useEffect(func, []); +const useMountEffect = (func: () => void): void => useEffect(func, []); export default useMountEffect; diff --git a/src/admin/hooks/usePayloadAPI.tsx b/src/admin/hooks/usePayloadAPI.tsx index 60f6204bdb..6343028681 100644 --- a/src/admin/hooks/usePayloadAPI.tsx +++ b/src/admin/hooks/usePayloadAPI.tsx @@ -3,11 +3,28 @@ import queryString from 'qs'; import { useLocale } from '../components/utilities/Locale'; import { requests } from '../api'; -const usePayloadAPI = (url, options = {}) => { +type Result = [ + { + isLoading: boolean + isError: boolean + data: unknown + }, + { + setParams: React.Dispatch + } +] + +type Options = { + initialParams?: unknown + initialData?: unknown +} + +type UsePayloadAPI = (url: string, options?: Options) => Result; + +const usePayloadAPI: UsePayloadAPI = (url, options = {}) => { const { initialParams = {}, initialData = {}, - onLoad, } = options; const [data, setData] = useState(initialData); @@ -18,8 +35,8 @@ const usePayloadAPI = (url, options = {}) => { const search = queryString.stringify({ locale, - ...params, - }, { depth: 10 }); + ...(typeof params === 'object' ? params : {}), + }); useEffect(() => { const fetchData = async () => { @@ -48,7 +65,7 @@ const usePayloadAPI = (url, options = {}) => { setIsError(false); setIsLoading(false); } - }, [url, locale, search, onLoad]); + }, [url, locale, search]); return [{ data, isLoading, isError }, { setParams }]; }; diff --git a/src/admin/hooks/useThrottledEffect.tsx b/src/admin/hooks/useThrottledEffect.tsx index 440988eac4..79d1125b7e 100644 --- a/src/admin/hooks/useThrottledEffect.tsx +++ b/src/admin/hooks/useThrottledEffect.tsx @@ -1,7 +1,9 @@ /* eslint-disable react-hooks/exhaustive-deps */ import { useEffect, useRef } from 'react'; -const useThrottledEffect = (callback, delay, deps = []) => { +type useThrottledEffect = (callback: React.EffectCallback, delay: number, deps: React.DependencyList) => void; + +const useThrottledEffect: useThrottledEffect = (callback, delay, deps = []) => { const lastRan = useRef(Date.now()); useEffect( diff --git a/src/admin/hooks/useTitle.tsx b/src/admin/hooks/useTitle.tsx index 6d29cc327e..4863e9460c 100644 --- a/src/admin/hooks/useTitle.tsx +++ b/src/admin/hooks/useTitle.tsx @@ -1,6 +1,6 @@ import { useFormFields } from '../components/forms/Form/context'; -const useTitle = (useAsTitle) => { +const useTitle = (useAsTitle: string): string => { const { getField } = useFormFields(); const titleField = getField(useAsTitle); return titleField?.value; diff --git a/src/admin/hooks/useUnmountEffect.tsx b/src/admin/hooks/useUnmountEffect.tsx index 5ae99d6902..597bbd49f4 100644 --- a/src/admin/hooks/useUnmountEffect.tsx +++ b/src/admin/hooks/useUnmountEffect.tsx @@ -1,6 +1,6 @@ import { useEffect } from 'react'; // eslint-disable-next-line react-hooks/exhaustive-deps -const useUnmountEffect = (callback) => useEffect(() => callback, []); +const useUnmountEffect = (callback: React.EffectCallback): void => useEffect(() => callback, []); export default useUnmountEffect;