diff options
Diffstat (limited to 'src/utils/hooks')
24 files changed, 80 insertions, 90 deletions
diff --git a/src/utils/hooks/index.ts b/src/utils/hooks/index.ts new file mode 100644 index 0000000..f4357f2 --- /dev/null +++ b/src/utils/hooks/index.ts @@ -0,0 +1,24 @@ +export * from './use-add-classname'; +export * from './use-article'; +export * from './use-attributes'; +export * from './use-breadcrumb'; +export * from './use-comments'; +export * from './use-data-from-api'; +export * from './use-github-api'; +export * from './use-headings-tree'; +export * from './use-input-autofocus'; +export * from './use-is-mounted'; +export * from './use-local-storage'; +export * from './use-mutation-observer'; +export * from './use-on-click-outside'; +export * from './use-pagination'; +export * from './use-prism'; +export * from './use-query-selector-all'; +export * from './use-reading-time'; +export * from './use-redirection'; +export * from './use-route-change'; +export * from './use-scroll-position'; +export * from './use-settings'; +export * from './use-state-change'; +export * from './use-styles'; +export * from './use-update-ackee-options'; diff --git a/src/utils/hooks/use-add-classname.tsx b/src/utils/hooks/use-add-classname.tsx index 0584084..8b0f6d6 100644 --- a/src/utils/hooks/use-add-classname.tsx +++ b/src/utils/hooks/use-add-classname.tsx @@ -11,7 +11,7 @@ export type UseAddClassNameProps = { * * @param {UseAddClassNameProps} props - An object with classnames and one or more elements. */ -const useAddClassName = ({ +export const useAddClassName = ({ className, element, elements, @@ -30,5 +30,3 @@ const useAddClassName = ({ if (elements && elements.length > 0) elements.forEach(setClassName); }, [element, elements, setClassName]); }; - -export default useAddClassName; diff --git a/src/utils/hooks/use-article.tsx b/src/utils/hooks/use-article.tsx index f6512b2..86d8e38 100644 --- a/src/utils/hooks/use-article.tsx +++ b/src/utils/hooks/use-article.tsx @@ -1,23 +1,29 @@ import useSWR from 'swr'; -import { fetchAPI } from '../../services/graphql/api'; -import { getArticleFromRawData } from '../../services/graphql/articles'; -import { articleBySlugQuery } from '../../services/graphql/articles.query'; -import { Article } from '../../types/app'; -import { RawArticle } from '../../types/raw-data'; +import { + articleBySlugQuery, + fetchAPI, + getArticleFromRawData, +} from '../../services/graphql'; +import { type Article, type RawArticle } from '../../types'; export type UseArticleConfig = { + /** + * A fallback article + */ fallback?: Article; + /** + * The article slug + */ slug?: string; }; /** * Retrieve an article by slug. * - * @param {string} slug - The article slug. - * @param {Article} fallback - A fallback article. + * @param {UseArticleConfig} config - The config. * @returns {Article|undefined} The matching article if it exists. */ -const useArticle = ({ +export const useArticle = ({ slug, fallback, }: UseArticleConfig): Article | undefined => { @@ -28,5 +34,3 @@ const useArticle = ({ return data ? getArticleFromRawData(data.post) : fallback; }; - -export default useArticle; diff --git a/src/utils/hooks/use-attributes.tsx b/src/utils/hooks/use-attributes.tsx index 35161ed..20e9947 100644 --- a/src/utils/hooks/use-attributes.tsx +++ b/src/utils/hooks/use-attributes.tsx @@ -1,5 +1,5 @@ import { useCallback, useEffect } from 'react'; -import { fromKebabCaseToCamelCase } from '../helpers/strings'; +import { fromKebabCaseToCamelCase } from '../helpers'; export type useAttributesProps = { /** @@ -25,7 +25,7 @@ export type useAttributesProps = { * * @param props - An object with element, attribute name and value. */ -const useAttributes = ({ +export const useAttributes = ({ element, elements, attribute, @@ -48,5 +48,3 @@ const useAttributes = ({ if (elements && elements.length > 0) elements.forEach(setAttribute); }, [element, elements, setAttribute]); }; - -export default useAttributes; diff --git a/src/utils/hooks/use-breadcrumb.tsx b/src/utils/hooks/use-breadcrumb.tsx index dcdf87f..f4506d7 100644 --- a/src/utils/hooks/use-breadcrumb.tsx +++ b/src/utils/hooks/use-breadcrumb.tsx @@ -1,8 +1,8 @@ import { useIntl } from 'react-intl'; import { BreadcrumbList } from 'schema-dts'; -import { BreadcrumbItem } from '../../components/molecules/nav/breadcrumb'; -import { slugify } from '../helpers/strings'; -import useSettings from './use-settings'; +import { BreadcrumbItem } from '../../components'; +import { slugify } from '../helpers'; +import { useSettings } from './use-settings'; export type useBreadcrumbProps = { /** @@ -32,7 +32,7 @@ export type useBreadcrumbReturn = { * @param {useBreadcrumbProps} props - An object (the current page title & url). * @returns {useBreadcrumbReturn} The breadcrumb items and its JSON schema. */ -const useBreadcrumb = ({ +export const useBreadcrumb = ({ title, url, }: useBreadcrumbProps): useBreadcrumbReturn => { @@ -103,5 +103,3 @@ const useBreadcrumb = ({ return { items, schema }; }; - -export default useBreadcrumb; diff --git a/src/utils/hooks/use-comments.tsx b/src/utils/hooks/use-comments.tsx index 8281a86..6ac3d42 100644 --- a/src/utils/hooks/use-comments.tsx +++ b/src/utils/hooks/use-comments.tsx @@ -1,6 +1,6 @@ import useSWR from 'swr'; -import { getAllComments } from '../../services/graphql/comments'; -import { SingleComment } from '../../types/app'; +import { getAllComments } from '../../services/graphql'; +import { SingleComment } from '../../types'; export type UseCommentsConfig = { contentId?: string | number; @@ -13,13 +13,11 @@ export type UseCommentsConfig = { * @param {string | number} contentId - A page/article id. * @returns {SingleComment[]|undefined} */ -const useComments = ({ +export const useComments = ({ contentId, fallback, }: UseCommentsConfig): SingleComment[] | undefined => { const { data } = useSWR(contentId ? { contentId } : null, getAllComments); - return data || fallback; + return data ?? fallback; }; - -export default useComments; diff --git a/src/utils/hooks/use-data-from-api.tsx b/src/utils/hooks/use-data-from-api.tsx index 7082941..5abcf09 100644 --- a/src/utils/hooks/use-data-from-api.tsx +++ b/src/utils/hooks/use-data-from-api.tsx @@ -8,7 +8,7 @@ import { useEffect, useState } from 'react'; * @param fetcher - A function to fetch data from API. * @returns {T | undefined} The requested data. */ -const useDataFromAPI = <T extends unknown>( +export const useDataFromAPI = <T,>( fetcher: () => Promise<T> ): T | undefined => { const [data, setData] = useState<T>(); @@ -19,5 +19,3 @@ const useDataFromAPI = <T extends unknown>( return data; }; - -export default useDataFromAPI; diff --git a/src/utils/hooks/use-github-api.tsx b/src/utils/hooks/use-github-api.tsx index 56df01f..aa9e3f7 100644 --- a/src/utils/hooks/use-github-api.tsx +++ b/src/utils/hooks/use-github-api.tsx @@ -1,5 +1,5 @@ import useSWR, { Fetcher } from 'swr'; -import { SWRResult } from '../../types/swr'; +import { SWRResult } from '../../types'; export type RepoData = { created_at: string; @@ -16,7 +16,7 @@ const fetcher: Fetcher<RepoData, string> = (...args) => * @param repo - The Github repo (`owner/repo-name`). * @returns The repository data. */ -const useGithubApi = (repo: string): SWRResult<RepoData> => { +export const useGithubApi = (repo: string): SWRResult<RepoData> => { const apiUrl = repo ? `https://api.github.com/repos/${repo}` : null; const { data, error } = useSWR<RepoData>(apiUrl, fetcher); @@ -26,5 +26,3 @@ const useGithubApi = (repo: string): SWRResult<RepoData> => { isError: error, }; }; - -export default useGithubApi; diff --git a/src/utils/hooks/use-headings-tree.tsx b/src/utils/hooks/use-headings-tree.tsx index 0dc077e..049ab29 100644 --- a/src/utils/hooks/use-headings-tree.tsx +++ b/src/utils/hooks/use-headings-tree.tsx @@ -1,5 +1,5 @@ import { useCallback, useEffect, useMemo, useState } from 'react'; -import { slugify } from '../helpers/strings'; +import { slugify } from '../helpers'; import { useMutationObserver } from './use-mutation-observer'; export type Heading = { @@ -27,7 +27,7 @@ export type Heading = { * @param {HTMLElement} wrapper - An HTML element that contains the headings. * @returns {Heading[]} The headings tree. */ -const useHeadingsTree = (wrapper: HTMLElement): Heading[] => { +export const useHeadingsTree = (wrapper: HTMLElement): Heading[] => { const depths = useMemo(() => ['h2', 'h3', 'h4', 'h5', 'h6'], []); const [allHeadings, setAllHeadings] = useState<NodeListOf<HTMLHeadingElement>>(); @@ -160,5 +160,3 @@ const useHeadingsTree = (wrapper: HTMLElement): Heading[] => { return headingsTree; }; - -export default useHeadingsTree; diff --git a/src/utils/hooks/use-input-autofocus.tsx b/src/utils/hooks/use-input-autofocus.tsx index c7700e9..d0fcd06 100644 --- a/src/utils/hooks/use-input-autofocus.tsx +++ b/src/utils/hooks/use-input-autofocus.tsx @@ -18,7 +18,7 @@ export type UseInputAutofocusProps = { /** * Set focus on an input with an optional delay. */ -const useInputAutofocus = ({ +export const useInputAutofocus = ({ condition, delay = 0, ref, @@ -35,5 +35,3 @@ const useInputAutofocus = ({ }; }, [condition, delay, ref]); }; - -export default useInputAutofocus; diff --git a/src/utils/hooks/use-is-mounted.tsx b/src/utils/hooks/use-is-mounted.tsx index ca79afb..4d85d45 100644 --- a/src/utils/hooks/use-is-mounted.tsx +++ b/src/utils/hooks/use-is-mounted.tsx @@ -6,7 +6,7 @@ import { RefObject, useEffect, useState } from 'react'; * @param {RefObject<HTMLElement>} ref - A React reference to an HTML element. * @returns {boolean} True if the HTML element is mounted. */ -const useIsMounted = (ref: RefObject<HTMLElement>) => { +export const useIsMounted = (ref: RefObject<HTMLElement>): boolean => { const [isMounted, setIsMounted] = useState<boolean>(false); useEffect(() => { @@ -15,5 +15,3 @@ const useIsMounted = (ref: RefObject<HTMLElement>) => { return isMounted; }; - -export default useIsMounted; diff --git a/src/utils/hooks/use-local-storage.tsx b/src/utils/hooks/use-local-storage.tsx index 1809e07..0f9fbb6 100644 --- a/src/utils/hooks/use-local-storage.tsx +++ b/src/utils/hooks/use-local-storage.tsx @@ -13,14 +13,14 @@ export type UseLocalStorageReturn<T> = { * @param {T} [fallbackValue] - A fallback value if local storage is empty. * @returns {UseLocalStorageReturn<T>} An object with value and setValue. */ -const useLocalStorage = <T extends unknown>( +export const useLocalStorage = <T,>( key: string, fallbackValue: T ): UseLocalStorageReturn<T> => { const getInitialValue = () => { if (typeof window === 'undefined') return fallbackValue; const storedValue = LocalStorage.get<T>(key); - return storedValue || fallbackValue; + return storedValue ?? fallbackValue; }; const [value, setValue] = useState<T>(getInitialValue); @@ -31,5 +31,3 @@ const useLocalStorage = <T extends unknown>( return { value, setValue }; }; - -export default useLocalStorage; diff --git a/src/utils/hooks/use-on-click-outside.tsx b/src/utils/hooks/use-on-click-outside.tsx index 04827b8..b810ddc 100644 --- a/src/utils/hooks/use-on-click-outside.tsx +++ b/src/utils/hooks/use-on-click-outside.tsx @@ -9,7 +9,7 @@ export type UseOnClickOutsideCallback = (target: Node) => void; * @param {boolean} useCapture - Define event propagation method. Default: true. * @returns {RefObject} A React reference object. */ -const useOnClickOutside = <T extends HTMLElement>( +export const useOnClickOutside = <T extends HTMLElement>( callback: UseOnClickOutsideCallback, useCapture: boolean = true ): RefObject<T> => { @@ -48,5 +48,3 @@ const useOnClickOutside = <T extends HTMLElement>( return ref; }; - -export default useOnClickOutside; diff --git a/src/utils/hooks/use-pagination.tsx b/src/utils/hooks/use-pagination.tsx index f47a674..706e656 100644 --- a/src/utils/hooks/use-pagination.tsx +++ b/src/utils/hooks/use-pagination.tsx @@ -1,6 +1,9 @@ import useSWRInfinite, { SWRInfiniteKeyLoader } from 'swr/infinite'; -import { GraphQLEdgesInput } from '../../types/graphql/generics'; -import { EdgesResponse, Search } from '../../types/graphql/queries'; +import { + type EdgesResponse, + type GraphQLEdgesInput, + type Search, +} from '../../types'; export type UsePaginationProps<T> = { /** @@ -66,7 +69,7 @@ export type UsePaginationReturn<T> = { * @param {UsePaginationProps} props - The pagination configuration. * @returns {UsePaginationReturn} An object with pagination data and helpers. */ -const usePagination = <T extends object>({ +export const usePagination = <T extends object>({ fallbackData, fetcher, perPage, @@ -114,5 +117,3 @@ const usePagination = <T extends object>({ setSize, }; }; - -export default usePagination; diff --git a/src/utils/hooks/use-prism.tsx b/src/utils/hooks/use-prism.tsx index 05790a3..429808f 100644 --- a/src/utils/hooks/use-prism.tsx +++ b/src/utils/hooks/use-prism.tsx @@ -111,7 +111,10 @@ const loadPrismPlugins = async (plugins: PrismPlugin[]) => { * @param {UsePrismProps} props - An object of options. * @returns {UsePrismReturn} An object of data. */ -const usePrism = ({ language, plugins }: UsePrismProps): UsePrismReturn => { +export const usePrism = ({ + language, + plugins, +}: UsePrismProps): UsePrismReturn => { /** * The order matter. Toolbar must be loaded before some other plugins. */ @@ -178,5 +181,3 @@ const usePrism = ({ language, plugins }: UsePrismProps): UsePrismReturn => { className, }; }; - -export default usePrism; diff --git a/src/utils/hooks/use-query-selector-all.tsx b/src/utils/hooks/use-query-selector-all.tsx index 6ac8a08..a3650ea 100644 --- a/src/utils/hooks/use-query-selector-all.tsx +++ b/src/utils/hooks/use-query-selector-all.tsx @@ -7,7 +7,7 @@ import { useEffect, useState } from 'react'; * @param {string} query - A query. * @returns {NodeListOf<HTMLElementTagNameMap[T]|undefined>} - The node list. */ -const useQuerySelectorAll = <T extends keyof HTMLElementTagNameMap>( +export const useQuerySelectorAll = <T extends keyof HTMLElementTagNameMap>( query: string ): NodeListOf<HTMLElementTagNameMap[T]> | undefined => { const [elements, setElements] = @@ -20,5 +20,3 @@ const useQuerySelectorAll = <T extends keyof HTMLElementTagNameMap>( return elements; }; - -export default useQuerySelectorAll; diff --git a/src/utils/hooks/use-reading-time.tsx b/src/utils/hooks/use-reading-time.tsx index fb54135..3a812f6 100644 --- a/src/utils/hooks/use-reading-time.tsx +++ b/src/utils/hooks/use-reading-time.tsx @@ -6,7 +6,7 @@ import { useIntl } from 'react-intl'; * @param {number} wordsCount - The number of words. * @returns {string} The estimated reading time. */ -const useReadingTime = ( +export const useReadingTime = ( wordsCount: number, onlyMinutes: boolean = false ): string => { @@ -54,5 +54,3 @@ const useReadingTime = ( ); } }; - -export default useReadingTime; diff --git a/src/utils/hooks/use-redirection.tsx b/src/utils/hooks/use-redirection.tsx index 9eb26c2..5a677e2 100644 --- a/src/utils/hooks/use-redirection.tsx +++ b/src/utils/hooks/use-redirection.tsx @@ -22,12 +22,10 @@ export type UseRedirectionProps = { * * @param {UseRedirectionProps} props - The redirection parameters. */ -const useRedirection = ({ query, redirectTo }: UseRedirectionProps) => { +export const useRedirection = ({ query, redirectTo }: UseRedirectionProps) => { const router = useRouter(); useEffect(() => { if (router.query[query.param] === query.value) router.push(redirectTo); }, [query, redirectTo, router]); }; - -export default useRedirection; diff --git a/src/utils/hooks/use-route-change.tsx b/src/utils/hooks/use-route-change.tsx index 82e01a1..2eff6e9 100644 --- a/src/utils/hooks/use-route-change.tsx +++ b/src/utils/hooks/use-route-change.tsx @@ -1,12 +1,10 @@ import { useRouter } from 'next/router'; import { useEffect } from 'react'; -const useRouteChange = (callback: () => void) => { +export const useRouteChange = (callback: () => void) => { const { events } = useRouter(); useEffect(() => { events.on('routeChangeStart', callback); }, [events, callback]); }; - -export default useRouteChange; diff --git a/src/utils/hooks/use-scroll-position.tsx b/src/utils/hooks/use-scroll-position.tsx index 47cfdd0..c6ae9fd 100644 --- a/src/utils/hooks/use-scroll-position.tsx +++ b/src/utils/hooks/use-scroll-position.tsx @@ -5,11 +5,9 @@ import { useEffect } from 'react'; * * @param scrollHandler - A callback function. */ -const useScrollPosition = (scrollHandler: () => void) => { +export const useScrollPosition = (scrollHandler: () => void) => { useEffect(() => { window.addEventListener('scroll', scrollHandler); return () => window.removeEventListener('scroll', scrollHandler); }, [scrollHandler]); }; - -export default useScrollPosition; diff --git a/src/utils/hooks/use-settings.tsx b/src/utils/hooks/use-settings.tsx index edb5b5e..968930d 100644 --- a/src/utils/hooks/use-settings.tsx +++ b/src/utils/hooks/use-settings.tsx @@ -67,11 +67,11 @@ export type UseSettingsReturn = { * * @returns {UseSettingsReturn} - An object describing settings. */ -const useSettings = (): UseSettingsReturn => { +export const useSettings = (): UseSettingsReturn => { const { baseline, copyright, email, locales, name, postsPerPage, url } = settings; const router = useRouter(); - const locale = router.locale || locales.defaultLocale; + const locale = router.locale ?? locales.defaultLocale; return { blog: { @@ -93,5 +93,3 @@ const useSettings = (): UseSettingsReturn => { }, }; }; - -export default useSettings; diff --git a/src/utils/hooks/use-state-change.tsx b/src/utils/hooks/use-state-change.tsx index 063fb8e..59ae0df 100644 --- a/src/utils/hooks/use-state-change.tsx +++ b/src/utils/hooks/use-state-change.tsx @@ -6,7 +6,7 @@ import { useEffect, useState } from 'react'; * @param initial - The initial value. * @returns The state and a setter. */ -const useStateChange = <T,>(initial: T) => { +export const useStateChange = <T,>(initial: T) => { const [state, setState] = useState<T>(initial); useEffect(() => { @@ -15,5 +15,3 @@ const useStateChange = <T,>(initial: T) => { return [state, setState] as const; }; - -export default useStateChange; diff --git a/src/utils/hooks/use-styles.tsx b/src/utils/hooks/use-styles.tsx index d47e9fb..a70087b 100644 --- a/src/utils/hooks/use-styles.tsx +++ b/src/utils/hooks/use-styles.tsx @@ -20,10 +20,8 @@ export type UseStylesProps = { * * @param {UseStylesProps} props - An object with property, styles and target. */ -const useStyles = ({ property, styles, target }: UseStylesProps) => { +export const useStyles = ({ property, styles, target }: UseStylesProps) => { useEffect(() => { if (target.current) target.current.style.setProperty(property, styles); }, [property, styles, target]); }; - -export default useStyles; diff --git a/src/utils/hooks/use-update-ackee-options.tsx b/src/utils/hooks/use-update-ackee-options.tsx index 1901588..f6e5c86 100644 --- a/src/utils/hooks/use-update-ackee-options.tsx +++ b/src/utils/hooks/use-update-ackee-options.tsx @@ -1,5 +1,5 @@ import { useEffect } from 'react'; -import { useAckeeTracker } from '../providers/ackee'; +import { useAckeeTracker } from '../providers'; export type AckeeOptions = 'full' | 'partial'; @@ -8,12 +8,10 @@ export type AckeeOptions = 'full' | 'partial'; * * @param {AckeeOptions} value - Either `full` or `partial`. */ -const useUpdateAckeeOptions = (value: AckeeOptions) => { +export const useUpdateAckeeOptions = (value: AckeeOptions) => { const { setDetailed } = useAckeeTracker(); useEffect(() => { setDetailed(value === 'full'); }, [value, setDetailed]); }; - -export default useUpdateAckeeOptions; |