remove caroseul when no artifacts are present

kscalelabs · Jul 31, 2024 · 099e372 · 099e372
1 parent 6db0516
commit 099e372
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 66 deletions.
diff --git a/frontend/src/components/files/ViewImage.tsx b/frontend/src/components/files/ViewImage.tsx
@@ -2,11 +2,10 @@ import React from "react";
 
 interface ImageProps {
   url: string;
-  size: "small" | "large";
   caption?: string;
 }
 
-const ImageComponent: React.FC<ImageProps> = ({ url, size, caption }) => {
+const ImageComponent: React.FC<ImageProps> = ({ url, caption }) => {
   return (
     <div style={{ width: "100%", paddingTop: "100%", position: "relative" }}>
       <img

diff --git a/frontend/src/components/listing/ListingArtifacts.tsx b/frontend/src/components/listing/ListingArtifacts.tsx
@@ -57,71 +57,79 @@ const ListingArtifacts = (props: Props) => {
     fetchArtifacts();
   }, [listing_id]);
 
-  return (
-    <>
-      <Row className="mb-3">
-        <h2 className="display-6">URDF Downloads</h2>
-        <p>URDFs are ordered in descending order of recency. (That is, the most recent URDF is at the top, and the oldest URDF at the bottom.)</p>
-        {artifacts &&
-          artifacts.artifacts.map(
-            (artifact, index) =>
-              artifact.artifact_type === "urdf" && (
-                <Link className="link" to={artifact.url} key={index}>{artifact.name}</Link>
-              ),
-          )}
-      </Row>
-      <Row className="mb-3">
-        <Carousel
-          indicators
-          data-bs-theme="dark"
-          style={{ border: "1px solid #ccc" }}
-          interval={null}
-          controls={artifacts !== null && artifacts.artifacts.length > 1}
-        >
-          {artifacts === null || artifacts.artifacts.length === 0 ? (
-            <EmptyCarouselItem loading={true} />
-          ) : (
-            artifacts.artifacts.map((artifact, key) => (
-              <Carousel.Item key={key}>
-                <div
-                  style={{
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    overflow: "hidden",
-                  }}
-                >
-                  {artifact.artifact_type === "image" ? (
-                    <ImageComponent
-                      url={artifact.url}
-                      size={"large"}
-                      caption={artifact.description || ""}
-                    />
-                  ) : (
-                    <p>Unhandled artifact type: {artifact.artifact_type}</p>
+  if (artifacts != null && artifacts.artifacts.length > 0) {
+    return (
+      <>
+        <Row className="mb-3">
+          <h2 className="display-6">URDF Downloads</h2>
+          <p>
+            URDFs are ordered in descending order of recency. (That is, the most
+            recent URDF is at the top, and the oldest URDF at the bottom.)
+          </p>
+          {artifacts &&
+            artifacts.artifacts.map(
+              (artifact, index) =>
+                artifact.artifact_type === "urdf" && (
+                  <Link className="link" to={artifact.url} key={index}>
+                    {artifact.name}
+                  </Link>
+                ),
+            )}
+        </Row>
+        <Row className="mb-3">
+          <Carousel
+            indicators
+            data-bs-theme="dark"
+            style={{ border: "1px solid #ccc" }}
+            interval={null}
+            controls={artifacts !== null && artifacts.artifacts.length > 1}
+          >
+            {artifacts === null || artifacts.artifacts.length === 0 ? (
+              <EmptyCarouselItem loading={true} />
+            ) : (
+              artifacts.artifacts.map((artifact, key) => (
+                <Carousel.Item key={key}>
+                  <div
+                    style={{
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      overflow: "hidden",
+                    }}
+                  >
+                    {artifact.artifact_type === "image" ? (
+                      <ImageComponent
+                        url={artifact.url}
+                        caption={artifact.description || ""}
+                      />
+                    ) : (
+                      <p>Unhandled artifact type: {artifact.artifact_type}</p>
+                    )}
+                  </div>
+                  {artifact.description && (
+                    <Carousel.Caption
+                      style={{
+                        backgroundColor: "rgba(255, 255, 255, 0.5)",
+                        color: "black",
+                        padding: "0.1rem",
+                        // Put the caption at the top
+                        top: 10,
+                        bottom: "unset",
+                      }}
+                    >
+                      {artifact.description}
+                    </Carousel.Caption>
                   )}
-                </div>
-                {artifact.description &&
-                <Carousel.Caption
-                  style={{
-                    backgroundColor: "rgba(255, 255, 255, 0.5)",
-                    color: "black",
-                    padding: "0.1rem",
-                    // Put the caption at the top
-                    top: 10,
-                    bottom: "unset",
-                  }}
-                >
-                  {artifact.description}
-                </Carousel.Caption>
-                }
-              </Carousel.Item>
-            ))
-          )}
-        </Carousel>
-      </Row>
-    </>
-  );
+                </Carousel.Item>
+              ))
+            )}
+          </Carousel>
+        </Row>
+      </>
+    );
+  } else {
+    return <></>;
+  }
 };
 
 export default ListingArtifacts;