Function VODLogosTable

frontend/src/components/tables/VODLogosTable.jsx:56–680

()

};

export default function VODLogosTable() {
  const theme = useMantineTheme();

  const {
    logos,
    totalCount,
    isLoading,
    fetchVODLogos,
    deleteVODLogo,
    deleteVODLogos,
    cleanupUnusedVODLogos,
    getUnusedLogosCount,
  } = useVODLogosStore();

  const [currentPage, setCurrentPage] = useState(1);
  const [pageSize, setPageSize] = useState(25);
  const [nameFilter, setNameFilter] = useState('');
  const [usageFilter, setUsageFilter] = useState('all');
  const [selectedRows, setSelectedRows] = useState(new Set());
  const [confirmDeleteOpen, setConfirmDeleteOpen] = useState(false);
  const [deleteTarget, setDeleteTarget] = useState(null);
  const [confirmCleanupOpen, setConfirmCleanupOpen] = useState(false);
  const [deleting, setDeleting] = useState(false);
  const [paginationString, setPaginationString] = useState('');
  const [isCleaningUp, setIsCleaningUp] = useState(false);
  const [unusedLogosCount, setUnusedLogosCount] = useState(0);
  const [loadingUnusedCount, setLoadingUnusedCount] = useState(false);
  const tableRef = React.useRef(null);
  useEffect(() => {
    fetchVODLogos({
      page: currentPage,
      page_size: pageSize,
      name: nameFilter,
      usage: usageFilter === 'all' ? undefined : usageFilter,
    });
  }, [currentPage, pageSize, nameFilter, usageFilter, fetchVODLogos]);

  // Fetch the total count of unused logos
  useEffect(() => {
    const fetchUnusedCount = async () => {
      setLoadingUnusedCount(true);
      try {
        const count = await getUnusedLogosCount();
        setUnusedLogosCount(count);
      } catch (error) {
        console.error('Failed to fetch unused logos count:', error);
      } finally {
        setLoadingUnusedCount(false);
      }
    };

    fetchUnusedCount();
  }, [getUnusedLogosCount]);

  const handleSelectAll = useCallback(
    (checked) => {
      if (checked) {
        setSelectedRows(new Set(logos.map((logo) => logo.id)));