Function Containers

projects/frontend/src/components/Containers/Containers.jsx:470–819

()

// Main Containers component
const Containers = () => {
  const [searchParams, setSearchParams] = useSearchParams();
  const [containers, setContainers] = useState([]);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);
  const [lastUpdated, setLastUpdated] = useState(null);
  const [hasMore, setHasMore] = useState(true);
  const [page, setPage] = useState(0);
  const scrollContainerRef = useRef(null);

  // Filter and sort state initialized from URL parameters
  const [filters, setFilters] = useState(() => ({
    original_filename: searchParams.get('filename') || '',
    agent_id: searchParams.get('agent_id') || '',
    source: searchParams.get('source') || '',
    status: searchParams.get('status') || '',
    container_id: searchParams.get('container_id') || ''
  }));
  const [sortBy, setSortBy] = useState(() => searchParams.get('sort_by') || 'submitted_at');
  const [sortOrder, setSortOrder] = useState(() => searchParams.get('sort_order') || 'desc');

  const POLL_INTERVAL = 5000; // Poll every 5 seconds
  const PAGE_SIZE = 20;


  const fetchContainers = useCallback(async (pageNum = 0, reset = false) => {
    try {
      // Build filter variables instead of inline conditions
      const variables = {
        limit: PAGE_SIZE,
        offset: pageNum * PAGE_SIZE
      };

      // Build where conditions as GraphQL variables
      const whereConditions = [];

      if (filters.original_filename) {
        whereConditions.push({ original_filename: { _ilike: `%${filters.original_filename}%` } });
      }
      if (filters.agent_id) {
        whereConditions.push({ agent_id: { _ilike: `%${filters.agent_id}%` } });
      }
      if (filters.source) {
        whereConditions.push({ source: { _ilike: `%${filters.source}%` } });
      }
      if (filters.status) {
        whereConditions.push({ status: { _eq: filters.status } });
      }
      if (filters.container_id) {
        // Only filter when we have a complete UUID to avoid casting errors
        // Check if it's a valid UUID format (8-4-4-4-12 hex characters)
        const uuidRegex = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
        if (uuidRegex.test(filters.container_id)) {
          whereConditions.push({ container_id: { _eq: filters.container_id } });
        }
        // If we want to support partial matching, we'd need a computed field or custom function in Hasura
      }