packages/hooks/useLoading.ts

   1 import { useCallback, useEffect, useRef, useState } from 'react';
   2
   3 import type { SimpleMap } from '@proton/shared/lib/interfaces';
   4 import isFunction from '@proton/utils/isFunction';
   5
   6 export type WithLoading = <T>(promise: undefined | Promise<T | void> | (() => Promise<T | void>)) => Promise<T | void>;
   7 export type WithLoadingByKey = <T>(
   8     key: string,
   9     promise: undefined | Promise<T | void> | (() => Promise<T | void>)
  10 ) => Promise<T | void>;
  11
  12 function unwrapPromise<T>(maybeWrappedPromise: Promise<T | void> | (() => Promise<T | void>)): Promise<T | void> {
  13     if (isFunction(maybeWrappedPromise)) {
  14         return maybeWrappedPromise();
  15     }
  16
  17     return maybeWrappedPromise;
  18 }
  19
  20 export type LoadingByKey = SimpleMap<boolean>;
  21
  22 export const useLoadingByKey = (
  23     initialState: LoadingByKey = {}
  24 ): [LoadingByKey, WithLoadingByKey, (key: string, loading: boolean) => void] => {
  25     const [loading, setLoading] = useState<LoadingByKey>(initialState);
  26     const unmountedRef = useRef(false);
  27     const counterRefByKey = useRef<SimpleMap<number>>({});
  28
  29     const getCurrentCounterRef = (key: string) => {
  30         return counterRefByKey.current[key] ?? 0;
  31     };
  32
  33     const withLoading = useCallback<WithLoadingByKey>((key: string, maybeWrappedPromise) => {
  34         if (!maybeWrappedPromise) {
  35             setLoading((prev) => ({ ...prev, [key]: false }));
  36             return Promise.resolve();
  37         }
  38
  39         const promise = unwrapPromise(maybeWrappedPromise);
  40
  41         const counterNext = getCurrentCounterRef(key) + 1;
  42         counterRefByKey.current = { ...counterRefByKey.current, [key]: counterNext };
  43
  44         setLoading((prev) => ({ ...prev, [key]: true }));
  45
  46         return promise
  47             .then((result) => {
  48                 // Ensure that the latest promise is setting the new state
  49                 if (getCurrentCounterRef(key) !== counterNext) {
  50                     return;
  51                 }
  52
  53                 if (!unmountedRef.current) {
  54                     setLoading((prev) => ({ ...prev, [key]: false }));
  55                 }
  56
  57                 return result;
  58             })
  59             .catch((e) => {
  60                 if (getCurrentCounterRef(key) !== counterNext) {
  61                     return;
  62                 }
  63
  64                 if (!unmountedRef.current) {
  65                     setLoading((prev) => ({ ...prev, [key]: false }));
  66                 }
  67
  68                 throw e;
  69             });
  70     }, []);
  71
  72     const setManualLoading = (key: string, value: boolean) => {
  73         setLoading((prev) => ({ ...prev, [key]: value }));
  74     };
  75
  76     useEffect(() => {
  77         unmountedRef.current = false;
  78         return () => {
  79             unmountedRef.current = true;
  80         };
  81     }, []);
  82
  83     return [loading, withLoading, setManualLoading];
  84 };
  85
  86 const SINGLE_LOADING_KEY = 'main';
  87
  88 const useLoading = (initialState = false): [boolean, WithLoading, (loading: boolean) => void] => {
  89     const [loadingByKey, withLoadingByKey, setLoadingByKey] = useLoadingByKey({ [SINGLE_LOADING_KEY]: initialState });
  90
  91     const withLoading: WithLoading = useCallback(
  92         (args) => {
  93             return withLoadingByKey(SINGLE_LOADING_KEY, args);
  94         },
  95         [withLoadingByKey]
  96     );
  97
  98     const setLoading = useCallback(
  99         (loading: boolean) => {
 100             return setLoadingByKey(SINGLE_LOADING_KEY, loading);
 101         },
 102         [setLoadingByKey]
 103     );
 104
 105     return [loadingByKey[SINGLE_LOADING_KEY] as boolean, withLoading, setLoading];
 106 };
 107
 108 export default useLoading;