Function useLogosById

frontend/src/hooks/useSmartLogos.jsx:88–130

(logoIds = [])

 * Hook for components that need specific logos by IDs
 */
export const useLogosById = (logoIds = []) => {
  const [isLoading, setIsLoading] = useState(false);
  const [loadedIds, setLoadedIds] = useState(new Set());

  const logos = useLogosStore((s) => s.logos);
  const fetchLogosByIds = useLogosStore((s) => s.fetchLogosByIds);

  // Memoize missing IDs calculation to prevent infinite loops
  const missingIds = useMemo(() => {
    return logoIds.filter((id) => id && !logos[id] && !loadedIds.has(id));
  }, [logoIds, logos, loadedIds]);

  // Stringify logoIds to prevent array reference issues
  const logoIdsString = logoIds.join(',');

  useEffect(() => {
    if (missingIds.length > 0 && !isLoading) {
      setIsLoading(true);

      // Track that we're loading these IDs to prevent re-requests
      setLoadedIds((prev) => new Set([...prev, ...missingIds]));

      fetchLogosByIds(missingIds)
        .then(() => setIsLoading(false))
        .catch((error) => {
          console.error('Failed to load logos by IDs:', error);
          // Remove failed IDs from loaded set so they can be retried
          setLoadedIds((prev) => {
            const newSet = new Set(prev);
            missingIds.forEach((id) => newSet.delete(id));
            return newSet;
          });
          setIsLoading(false);
        });
    }
  }, [logoIdsString, missingIds, isLoading, fetchLogosByIds]);

  return {
    logos,
    isLoading,
    missingLogos: missingIds.length,
  };
};