Function SourceDetailView

frontend/src/components/views/SourceDetailView.tsx:9–259

()

import { DB_LOGOS } from '../../lib/db-logos';

export default function SourceDetailView() {
  const { sourceId } = useParams<{ sourceId: string }>();
  const [source, setSource] = useState<DataSource | null>(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState<ApiError | null>(null);

  useEffect(() => {
    if (!sourceId) return;

    setIsLoading(true);
    setError(null);

    fetchSource(sourceId)
      .then((data) => {
        setSource(data);
        setIsLoading(false);
      })
      .catch((err: ApiError) => {
        setError(err);
        setIsLoading(false);
      });
  }, [sourceId]);

  if (!sourceId) {
    return <Navigate to="/" replace />;
  }

  if (isLoading) {
    return (
      <div className="container mx-auto px-8 py-12">
        <div className="text-muted-foreground">Loading source details...</div>
      </div>
    );
  }

  if (error) {
    // If source not found, redirect to 404 page
    if (error.status === 404) {
      return <Navigate to="/404" replace />;
    }

    // For other errors, show error message
    return (
      <div className="container mx-auto px-8 py-12">
        <div className="bg-destructive/10 border border-destructive/20 rounded-lg p-6">
          <h2 className="text-lg font-semibold text-destructive mb-2">Error</h2>
          <p className="text-destructive/90">{error.message}</p>
        </div>
      </div>
    );
  }

  if (!source) {
    return (
      <div className="container mx-auto px-8 py-12">
        <div className="text-muted-foreground">Source not found</div>
      </div>
    );