applications/drive/src/app/store/_links/useLinksQueue.ts

   1 import type { MutableRefObject } from 'react';
   2 import { useEffect, useRef } from 'react';
   3
   4 import { useLinksListing } from './useLinksListing';
   5 import useLinksState from './useLinksState';
   6
   7 type Props = {
   8     /**
   9      * Whether or not to load thumbnails with the links.
  10      */
  11     loadThumbnails?: boolean;
  12 };
  13
  14 export const useLinksQueue = ({ loadThumbnails }: Props = {}) => {
  15     const { loadLinksMeta } = useLinksListing();
  16     const linksState = useLinksState();
  17
  18     const queue = useRef(new Set<string>());
  19     const domRefMap = useRef(new Map<string, MutableRefObject<unknown>>());
  20     const controller = useRef<AbortController | null>(null);
  21     const promise = useRef<Promise<unknown> | null>(null);
  22
  23     useEffect(() => {
  24         return () => {
  25             controller.current?.abort();
  26         };
  27     }, []);
  28
  29     const processQueue = (shareId: string) =>
  30         new Promise(async (resolve) => {
  31             controller.current = new AbortController();
  32
  33             while (queue.current.size > 0 && !controller.current.signal.aborted) {
  34                 // Remove items from the queue which are no longer visible
  35                 queue.current.forEach((item) => {
  36                     let ref = domRefMap.current.get(item);
  37
  38                     if (ref && !ref.current) {
  39                         queue.current.delete(item);
  40                         domRefMap.current.delete(item);
  41                     }
  42                 });
  43
  44                 if (queue.current.size === 0) {
  45                     break;
  46                 }
  47
  48                 const linkIds = Array.from(queue.current);
  49
  50                 try {
  51                     await loadLinksMeta(controller.current.signal, `links-${shareId}`, shareId, linkIds, {
  52                         loadThumbnails,
  53                     });
  54                 } catch (e) {
  55                     console.error(e);
  56                 }
  57
  58                 linkIds.forEach((linkId) => {
  59                     queue.current.delete(linkId);
  60                     domRefMap.current.delete(linkId);
  61                 });
  62             }
  63
  64             controller.current = null;
  65             resolve(null);
  66         });
  67
  68     const addToQueue = (shareId: string, linkId: string, domRef?: React.MutableRefObject<unknown>) => {
  69         if (linksState.getLink(shareId, linkId) || queue.current.has(linkId)) {
  70             return;
  71         }
  72
  73         queue.current.add(linkId);
  74         if (domRef) {
  75             domRefMap.current.set(linkId, domRef);
  76         }
  77
  78         // We'll debounce starting the queue for a bit, to collect items to batch
  79         setTimeout(() => {
  80             if (!promise.current) {
  81                 promise.current = processQueue(shareId).then(() => {
  82                     promise.current = null;
  83                 });
  84             }
  85         }, 10);
  86     };
  87
  88     return {
  89         addToQueue,
  90     };
  91 };