From 3e21dca51be0798da4c84508d7eba3cde9eb928a Mon Sep 17 00:00:00 2001
From: Benjamin Bolte <ben@bolte.cc>
Date: Tue, 6 Aug 2024 21:48:18 -0700
Subject: [PATCH] misc checkpoint

---
 .../src/components/listing/ListingImages.tsx  | 58 ++++++-------
 .../src/components/listing/ListingSTLs.tsx    | 82 +++++++++----------
 2 files changed, 71 insertions(+), 69 deletions(-)

diff --git a/frontend/src/components/listing/ListingImages.tsx b/frontend/src/components/listing/ListingImages.tsx
index 9eadbc10..6ae724f3 100644
--- a/frontend/src/components/listing/ListingImages.tsx
+++ b/frontend/src/components/listing/ListingImages.tsx
@@ -44,23 +44,23 @@ const ListingImages = (props: Props) => {
     }
   };
 
-  return (
+  return images.length > 0 || edit ? (
     <div className="flex flex-col items-center justify-center my-4 p-4 relative">
-      <Button
-        onClick={() => setCollapsed(!collapsed)}
-        variant="outline"
-        className="mt-2 mb-4 text-3xl p-6"
-      >
-        Images
-        {collapsed ? (
-          <FaCaretSquareUp className="ml-4 text-gray-700" />
-        ) : (
-          <FaCaretSquareDown className="ml-4 text-gray-700" />
-        )}
-      </Button>
-      {!collapsed && (
-        <div>
-          {images.length > 0 && (
+      {images.length > 0 && (
+        <>
+          <Button
+            onClick={() => setCollapsed(!collapsed)}
+            variant="outline"
+            className="mt-2 mb-4 text-md p-4"
+          >
+            Images
+            {collapsed ? (
+              <FaCaretSquareUp className="ml-4 text-gray-700" />
+            ) : (
+              <FaCaretSquareDown className="ml-4 text-gray-700" />
+            )}
+          </Button>
+          {!collapsed && (
             <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 gap-2 mx-auto">
               {images.map((image) => (
                 <div
@@ -86,20 +86,22 @@ const ListingImages = (props: Props) => {
               ))}
             </div>
           )}
-          {edit && (
-            <ListingFileUpload
-              artifactType="image"
-              fileExtensions={[".jpg", ".jpeg", ".png"]}
-              maxSize={4 * 1024 * 1024}
-              listingId={listingId}
-              onUpload={(artifact) => {
-                setImages([...images, artifact.artifact]);
-              }}
-            />
-          )}
-        </div>
+        </>
+      )}
+      {edit && (
+        <ListingFileUpload
+          artifactType="image"
+          fileExtensions={[".jpg", ".jpeg", ".png"]}
+          maxSize={4 * 1024 * 1024}
+          listingId={listingId}
+          onUpload={(artifact) => {
+            setImages([...images, artifact.artifact]);
+          }}
+        />
       )}
     </div>
+  ) : (
+    <></>
   );
 };
 
diff --git a/frontend/src/components/listing/ListingSTLs.tsx b/frontend/src/components/listing/ListingSTLs.tsx
index 7be51c96..08e0e139 100644
--- a/frontend/src/components/listing/ListingSTLs.tsx
+++ b/frontend/src/components/listing/ListingSTLs.tsx
@@ -1,4 +1,4 @@
-import { Canvas, useLoader } from "@react-three/fiber";
+import { useLoader } from "@react-three/fiber";
 import ListingFileUpload from "components/listing/ListingFileUpload";
 import { Button } from "components/ui/Button/Button";
 import { components } from "gen/api";
@@ -7,6 +7,7 @@ import { useAuthentication } from "hooks/useAuth";
 import { useState } from "react";
 import { FaCaretSquareDown, FaCaretSquareUp, FaTimes } from "react-icons/fa";
 import { STLLoader } from "three/examples/jsm/loaders/STLLoader";
+import { OBJLoader } from 'three/addons/loaders/OBJLoader';
 
 const Model = ({ url }: { url: string }) => {
   const stl = useLoader(STLLoader, url);
@@ -20,13 +21,15 @@ interface SingleStlViewerProps {
 const SingleStlViewer = (props: SingleStlViewerProps) => {
   const { url } = props;
 
-  return (
-    <Canvas onError={(error) => console.log(error)}>
-      <ambientLight />
-      <pointLight position={[10, 10, 10]} />
-      <Model url={url} />
-    </Canvas>
-  );
+  // return (
+  //   <Canvas onError={(error) => console.log(error)}>
+  //     <ambientLight />
+  //     <pointLight position={[10, 10, 10]} />
+  //     <Model url={url} />
+  //   </Canvas>
+  // );
+
+  return <div>{url}</div>;
 };
 
 interface Props {
@@ -67,34 +70,29 @@ const ListingSTLs = (props: Props) => {
     }
   };
 
-  return (
+  return stls.length > 0 || edit ? (
     <div className="flex flex-col items-center justify-center my-4 p-4 relative">
-      <Button
-        onClick={() => setCollapsed(!collapsed)}
-        variant="outline"
-        className="mt-2 mb-4 text-3xl p-6"
-      >
-        STLs
-        {collapsed ? (
-          <FaCaretSquareUp className="ml-4 text-gray-700" />
-        ) : (
-          <FaCaretSquareDown className="ml-4 text-gray-700" />
-        )}
-      </Button>
-      {!collapsed && (
-        <div>
-          {stls.length > 0 && (
+      {stls.length > 0 && (
+        <>
+          <Button
+            onClick={() => setCollapsed(!collapsed)}
+            variant="outline"
+            className="mt-2 mb-4 text-md p-4"
+          >
+            STLs
+            {collapsed ? (
+              <FaCaretSquareUp className="ml-4 text-gray-700" />
+            ) : (
+              <FaCaretSquareDown className="ml-4 text-gray-700" />
+            )}
+          </Button>
+          {!collapsed && (
             <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 gap-2 mx-auto">
               {stls.map((stl) => (
                 <div
                   key={stl.artifact_id}
                   className="bg-background rounded-lg p-2 relative"
                 >
-                  {/* <img
-                    src={stl.url}
-                    alt={stl.name}
-                    className="rounded-lg w-full aspect-square"
-                  /> */}
                   <SingleStlViewer url={stl.url} />
                   {edit && (
                     <Button
@@ -110,20 +108,22 @@ const ListingSTLs = (props: Props) => {
               ))}
             </div>
           )}
-          {edit && (
-            <ListingFileUpload
-              artifactType="stl"
-              fileExtensions={[".stl"]}
-              maxSize={4 * 1024 * 1024}
-              listingId={listingId}
-              onUpload={(artifact) => {
-                setStls([...stls, artifact.artifact]);
-              }}
-            />
-          )}
-        </div>
+        </>
+      )}
+      {edit && (
+        <ListingFileUpload
+          artifactType="stl"
+          fileExtensions={[".stl"]}
+          maxSize={4 * 1024 * 1024}
+          listingId={listingId}
+          onUpload={(artifact) => {
+            setStls([...stls, artifact.artifact]);
+          }}
+        />
       )}
     </div>
+  ) : (
+    <></>
   );
 };