From 1fdcf99ded6a9eebd8ba26fd1f79ff64d4ab1eae Mon Sep 17 00:00:00 2001
From: Benjamin Bolte <ben@bolte.cc>
Date: Sat, 3 Aug 2024 08:20:06 -0400
Subject: [PATCH 1/4] finally implement image and urdf uploading

---
 .../components/listing/ListingArtifacts.tsx   | 65 +++++++++++++++----
 .../src/components/listing/ListingBody.tsx    |  2 +-
 2 files changed, 54 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/listing/ListingArtifacts.tsx b/frontend/src/components/listing/ListingArtifacts.tsx
index 062ca98a..e4f1301a 100644
--- a/frontend/src/components/listing/ListingArtifacts.tsx
+++ b/frontend/src/components/listing/ListingArtifacts.tsx
@@ -1,21 +1,30 @@
 import Carousel from "components/ui/Carousel";
+import { FileSvgDraw } from "components/ui/FileSvgDraw";
+import {
+  FileUploader,
+  FileUploaderContent,
+  FileUploaderItem,
+} from "components/ui/FileUpload";
 import { components } from "gen/api";
 import { useAlertQueue } from "hooks/useAlertQueue";
 import { useAuthentication } from "hooks/useAuth";
+import { FileInput, Paperclip } from "lucide-react";
 import { useEffect, useState } from "react";
 
 interface Props {
-  listing_id: string;
+  listingId: string;
   // TODO: If can edit, allow the user to add and delete artifacts.
   edit: boolean;
 }
 
 const ListingArtifacts = (props: Props) => {
-  const { listing_id } = props;
+  const { listingId, edit } = props;
 
   const auth = useAuthentication();
   const { addErrorAlert } = useAlertQueue();
 
+  const [files, setFiles] = useState<File[] | null>(null);
+
   const [artifacts, setArtifacts] = useState<
     components["schemas"]["ListArtifactsResponse"] | null
   >(null);
@@ -24,7 +33,7 @@ const ListingArtifacts = (props: Props) => {
     const fetchArtifacts = async () => {
       const { data, error } = await auth.client.GET("/artifacts/{listing_id}", {
         params: {
-          path: { listing_id },
+          path: { listing_id: listingId },
         },
       });
 
@@ -35,18 +44,50 @@ const ListingArtifacts = (props: Props) => {
       }
     };
     fetchArtifacts();
-  }, [listing_id]);
+  }, [listingId]);
 
   if (artifacts != null && artifacts.artifacts.length > 0) {
     return (
-      <Carousel
-        items={artifacts.artifacts.map((artifact) => {
-          return {
-            url: artifact.url,
-            caption: artifact.name,
-          };
-        })}
-      />
+      <>
+        <Carousel
+          items={artifacts.artifacts.map((artifact) => {
+            return {
+              url: artifact.url,
+              caption: artifact.name,
+            };
+          })}
+        />
+        {edit ?? (
+          <div>
+            <FileUploader
+              value={files}
+              onValueChange={setFiles}
+              dropzoneOptions={{
+                maxFiles: 5,
+                maxSize: 1024 * 1024 * 4,
+                multiple: true,
+              }}
+              className="relative bg-background rounded-lg p-2"
+            >
+              <FileInput className="outline-dashed outline-1 outline-white">
+                <div className="flex items-center justify-center flex-col pt-3 pb-4 w-full ">
+                  <FileSvgDraw />
+                </div>
+              </FileInput>
+              <FileUploaderContent>
+                {files &&
+                  files.length > 0 &&
+                  files.map((file, index: number) => (
+                    <FileUploaderItem key={index} index={index}>
+                      <Paperclip className="h-4 w-4 stroke-current" />
+                      <span>{file.name}</span>
+                    </FileUploaderItem>
+                  ))}
+              </FileUploaderContent>
+            </FileUploader>
+          </div>
+        )}
+      </>
     );
   } else {
     return <></>;
diff --git a/frontend/src/components/listing/ListingBody.tsx b/frontend/src/components/listing/ListingBody.tsx
index 9b90698b..e86f5c5a 100644
--- a/frontend/src/components/listing/ListingBody.tsx
+++ b/frontend/src/components/listing/ListingBody.tsx
@@ -23,7 +23,7 @@ const ListingBody = (props: ListingBodyProps) => {
         child_ids={listing.child_ids}
         edit={listing.owner_is_user}
       />
-      <ListingArtifacts listing_id={listing.id} edit={listing.owner_is_user} />
+      <ListingArtifacts listingId={listing.id} edit={listing.owner_is_user} />
     </div>
   );
 };

From beca0d9cf8b87ca3dc33694d27894edf78027dab Mon Sep 17 00:00:00 2001
From: Benjamin Bolte <ben@bolte.cc>
Date: Sun, 4 Aug 2024 15:11:05 -0400
Subject: [PATCH 2/4] more wip

---
 .../components/listing/EditListingModal.tsx   | 80 +++++++++----------
 .../components/{ui => listing}/FileUpload.tsx |  4 +-
 .../components/listing/ListingArtifacts.tsx   | 72 ++++++-----------
 frontend/src/components/ui/FileSvgDraw.tsx    | 28 -------
 4 files changed, 68 insertions(+), 116 deletions(-)
 rename frontend/src/components/{ui => listing}/FileUpload.tsx (98%)
 delete mode 100644 frontend/src/components/ui/FileSvgDraw.tsx

diff --git a/frontend/src/components/listing/EditListingModal.tsx b/frontend/src/components/listing/EditListingModal.tsx
index 72bbd013..1f5000b5 100644
--- a/frontend/src/components/listing/EditListingModal.tsx
+++ b/frontend/src/components/listing/EditListingModal.tsx
@@ -1,5 +1,10 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import RequireAuthentication from "components/auth/RequireAuthentication";
+import {
+  FileUploader,
+  FileUploaderContent,
+  FileUploaderItem,
+} from "components/listing/FileUpload";
 import { Button } from "components/ui/Button/Button";
 import {
   Dialog,
@@ -13,16 +18,12 @@ import { Input, TextArea } from "components/ui/Input/Input";
 import { paths } from "gen/api";
 import { useAlertQueue } from "hooks/useAlertQueue";
 import { useAuthentication } from "hooks/useAuth";
+import { FileInput, Paperclip } from "lucide-react";
 import { useEffect, useState } from "react";
 import { SubmitHandler, useForm } from "react-hook-form";
+import { FaFileUpload } from "react-icons/fa";
 import { NewListingSchema, NewListingType } from "types";
 
-// const dropZoneConfig = {
-//   maxFiles: 5,
-//   maxSize: 1024 * 1024 * 4,
-//   multiple: true,
-// };
-
 interface AddOrEditProps {
   open: boolean;
   listingId: string;
@@ -33,7 +34,7 @@ type ListingResponse =
   paths["/listings/{id}"]["get"]["responses"][200]["content"]["application/json"];
 
 const EditListingModal = ({ open, onClose, listingId }: AddOrEditProps) => {
-  // const [files, setFiles] = useState<File[] | null>(null);
+  const [files, setFiles] = useState<File[] | null>(null);
   const { addAlert, addErrorAlert } = useAlertQueue();
   const auth = useAuthentication();
   const [listing, setListing] = useState<ListingResponse | null>(null);
@@ -98,9 +99,9 @@ const EditListingModal = ({ open, onClose, listingId }: AddOrEditProps) => {
   return (
     <RequireAuthentication>
       <Dialog open={open} onOpenChange={onClose}>
-        <DialogContent className="bg-gray-950">
+        <DialogContent className="bg-white dark:bg-gray-800 dark:text-white">
           <DialogHeader>
-            <DialogTitle className="text-white text-center py-2">
+            <DialogTitle className="text-center py-2">
               Add Robo Details
             </DialogTitle>
           </DialogHeader>
@@ -114,7 +115,6 @@ const EditListingModal = ({ open, onClose, listingId }: AddOrEditProps) => {
                 placeholder="Name"
                 type="text"
                 {...register("name")}
-                className="text-white"
                 disabled={listing === null}
               />
               {errors?.name && (
@@ -127,7 +127,7 @@ const EditListingModal = ({ open, onClose, listingId }: AddOrEditProps) => {
               <TextArea
                 placeholder="Description"
                 rows={4}
-                className="block p-2.5 text-white w-full text-sm rounded-lg borde focus:ring-blue-500 focus:border-blue-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+                className="block p-2.5 w-full text-sm rounded-lg borde focus:ring-blue-500 focus:border-blue-500 dark:placeholder-gray-400 dark:focus:ring-blue-500 dark:focus:border-blue-500"
                 {...register("description")}
                 disabled={listing === null}
               />
@@ -137,36 +137,36 @@ const EditListingModal = ({ open, onClose, listingId }: AddOrEditProps) => {
             </div>
 
             {/* File Uploader */}
-            {/* <div>
-                <FileUploader
-                  value={files}
-                  onValueChange={setFiles}
-                  dropzoneOptions={dropZoneConfig}
-                  className="relative bg-background rounded-lg p-2"
-                >
-                  <FileInput className="outline-dashed outline-1 outline-white">
-                    <div className="flex items-center justify-center flex-col pt-3 pb-4 w-full ">
-                      <FileSvgDraw />
-                    </div>
-                  </FileInput>
-                  <FileUploaderContent>
-                    {files &&
-                      files.length > 0 &&
-                      files.map((file, index: number) => (
-                        <FileUploaderItem key={index} index={index}>
-                          <Paperclip className="h-4 w-4 stroke-current" />
-                          <span>{file.name}</span>
-                        </FileUploaderItem>
-                      ))}
-                  </FileUploaderContent>
-                </FileUploader>
-              </div> */}
-            <DialogFooter>
-              <Button
-                variant="primary"
-                type="submit"
-                className="text-white w-full"
+            <div>
+              <FileUploader
+                value={files}
+                onValueChange={setFiles}
+                dropzoneOptions={{
+                  maxFiles: 5,
+                  maxSize: 1024 * 1024 * 4,
+                  multiple: true,
+                }}
+                className="relative bg-background rounded-lg p-2"
               >
+                <FileInput className="outline-dashed outline-1 outline-white">
+                  <div className="flex items-center justify-center flex-col pt-3 pb-4 w-full ">
+                    <FaFileUpload />
+                  </div>
+                </FileInput>
+                <FileUploaderContent>
+                  {files &&
+                    files.length > 0 &&
+                    files.map((file, index: number) => (
+                      <FileUploaderItem key={index} index={index}>
+                        <Paperclip className="h-4 w-4 stroke-current" />
+                        <span>{file.name}</span>
+                      </FileUploaderItem>
+                    ))}
+                </FileUploaderContent>
+              </FileUploader>
+            </div>
+            <DialogFooter>
+              <Button variant="primary" type="submit" className="w-full">
                 Submit
               </Button>
             </DialogFooter>
diff --git a/frontend/src/components/ui/FileUpload.tsx b/frontend/src/components/listing/FileUpload.tsx
similarity index 98%
rename from frontend/src/components/ui/FileUpload.tsx
rename to frontend/src/components/listing/FileUpload.tsx
index 32414dc0..d9e84eb1 100644
--- a/frontend/src/components/ui/FileUpload.tsx
+++ b/frontend/src/components/listing/FileUpload.tsx
@@ -1,3 +1,5 @@
+import { buttonVariants } from "components/ui/Button/Button";
+import { Input } from "components/ui/Input/Input";
 import { Trash2 as RemoveIcon } from "lucide-react";
 import {
   createContext,
@@ -17,8 +19,6 @@ import {
   useDropzone,
 } from "react-dropzone";
 import { cn } from "utils";
-import { buttonVariants } from "./Button/Button";
-import { Input } from "./Input/Input";
 
 type DirectionOptions = "rtl" | "ltr" | undefined;
 
diff --git a/frontend/src/components/listing/ListingArtifacts.tsx b/frontend/src/components/listing/ListingArtifacts.tsx
index e4f1301a..5af8e990 100644
--- a/frontend/src/components/listing/ListingArtifacts.tsx
+++ b/frontend/src/components/listing/ListingArtifacts.tsx
@@ -1,15 +1,10 @@
+import { Button } from "components/ui/Button/Button";
 import Carousel from "components/ui/Carousel";
-import { FileSvgDraw } from "components/ui/FileSvgDraw";
-import {
-  FileUploader,
-  FileUploaderContent,
-  FileUploaderItem,
-} from "components/ui/FileUpload";
 import { components } from "gen/api";
 import { useAlertQueue } from "hooks/useAlertQueue";
 import { useAuthentication } from "hooks/useAuth";
-import { FileInput, Paperclip } from "lucide-react";
 import { useEffect, useState } from "react";
+import EditListingModal from "./EditListingModal";
 
 interface Props {
   listingId: string;
@@ -23,7 +18,7 @@ const ListingArtifacts = (props: Props) => {
   const auth = useAuthentication();
   const { addErrorAlert } = useAlertQueue();
 
-  const [files, setFiles] = useState<File[] | null>(null);
+  const [addingImages, setAddingImages] = useState(false);
 
   const [artifacts, setArtifacts] = useState<
     components["schemas"]["ListArtifactsResponse"] | null
@@ -46,9 +41,11 @@ const ListingArtifacts = (props: Props) => {
     fetchArtifacts();
   }, [listingId]);
 
-  if (artifacts != null && artifacts.artifacts.length > 0) {
-    return (
-      <>
+  return artifacts === null ? (
+    <></>
+  ) : (
+    <div className="my-4">
+      {artifacts.artifacts.length > 0 ?? (
         <Carousel
           items={artifacts.artifacts.map((artifact) => {
             return {
@@ -57,41 +54,24 @@ const ListingArtifacts = (props: Props) => {
             };
           })}
         />
-        {edit ?? (
-          <div>
-            <FileUploader
-              value={files}
-              onValueChange={setFiles}
-              dropzoneOptions={{
-                maxFiles: 5,
-                maxSize: 1024 * 1024 * 4,
-                multiple: true,
-              }}
-              className="relative bg-background rounded-lg p-2"
-            >
-              <FileInput className="outline-dashed outline-1 outline-white">
-                <div className="flex items-center justify-center flex-col pt-3 pb-4 w-full ">
-                  <FileSvgDraw />
-                </div>
-              </FileInput>
-              <FileUploaderContent>
-                {files &&
-                  files.length > 0 &&
-                  files.map((file, index: number) => (
-                    <FileUploaderItem key={index} index={index}>
-                      <Paperclip className="h-4 w-4 stroke-current" />
-                      <span>{file.name}</span>
-                    </FileUploaderItem>
-                  ))}
-              </FileUploaderContent>
-            </FileUploader>
-          </div>
-        )}
-      </>
-    );
-  } else {
-    return <></>;
-  }
+      )}
+      {edit && (
+        <>
+          <Button
+            className="btn btn-primary"
+            onClick={() => setAddingImages(true)}
+          >
+            Add Images
+          </Button>
+          <EditListingModal
+            open={addingImages}
+            listingId={listingId}
+            onClose={() => setAddingImages(false)}
+          />
+        </>
+      )}
+    </div>
+  );
 };
 
 export default ListingArtifacts;
diff --git a/frontend/src/components/ui/FileSvgDraw.tsx b/frontend/src/components/ui/FileSvgDraw.tsx
deleted file mode 100644
index 6ab1bb06..00000000
--- a/frontend/src/components/ui/FileSvgDraw.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-export const FileSvgDraw = () => {
-  return (
-    <>
-      <svg
-        className="w-8 h-8 mb-3 text-gray-500 dark:text-gray-400"
-        aria-hidden="true"
-        xmlns="http://www.w3.org/2000/svg"
-        fill="none"
-        viewBox="0 0 20 16"
-      >
-        <path
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth="2"
-          d="M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2"
-        />
-      </svg>
-      <p className="mb-1 text-sm text-gray-500 dark:text-gray-400">
-        <span className="font-semibold">Click to upload</span>
-        &nbsp; or drag and drop
-      </p>
-      <p className="text-xs text-gray-500 dark:text-gray-400">
-        SVG, PNG, JPG or GIF
-      </p>
-    </>
-  );
-};

From 4cbfbc17aa0275273d15c33dd670de1704e5f7e8 Mon Sep 17 00:00:00 2001
From: Benjamin Bolte <ben@bolte.cc>
Date: Mon, 5 Aug 2024 00:40:10 -0400
Subject: [PATCH 3/4] image uploading

---
 .../components/listing/EditListingModal.tsx   | 180 -----------------
 .../src/components/listing/FileUpload.tsx     |  24 +++
 .../components/listing/ListingArtifacts.tsx   | 188 +++++++++++++++---
 frontend/src/components/ui/Carousel.tsx       |  10 +-
 frontend/src/gen/api.ts                       |   3 +-
 store/app/routers/artifacts.py                |  13 +-
 6 files changed, 200 insertions(+), 218 deletions(-)
 delete mode 100644 frontend/src/components/listing/EditListingModal.tsx

diff --git a/frontend/src/components/listing/EditListingModal.tsx b/frontend/src/components/listing/EditListingModal.tsx
deleted file mode 100644
index 1f5000b5..00000000
--- a/frontend/src/components/listing/EditListingModal.tsx
+++ /dev/null
@@ -1,180 +0,0 @@
-import { zodResolver } from "@hookform/resolvers/zod";
-import RequireAuthentication from "components/auth/RequireAuthentication";
-import {
-  FileUploader,
-  FileUploaderContent,
-  FileUploaderItem,
-} from "components/listing/FileUpload";
-import { Button } from "components/ui/Button/Button";
-import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "components/ui/dialog";
-import ErrorMessage from "components/ui/ErrorMessage";
-import { Input, TextArea } from "components/ui/Input/Input";
-import { paths } from "gen/api";
-import { useAlertQueue } from "hooks/useAlertQueue";
-import { useAuthentication } from "hooks/useAuth";
-import { FileInput, Paperclip } from "lucide-react";
-import { useEffect, useState } from "react";
-import { SubmitHandler, useForm } from "react-hook-form";
-import { FaFileUpload } from "react-icons/fa";
-import { NewListingSchema, NewListingType } from "types";
-
-interface AddOrEditProps {
-  open: boolean;
-  listingId: string;
-  onClose: () => void;
-}
-
-type ListingResponse =
-  paths["/listings/{id}"]["get"]["responses"][200]["content"]["application/json"];
-
-const EditListingModal = ({ open, onClose, listingId }: AddOrEditProps) => {
-  const [files, setFiles] = useState<File[] | null>(null);
-  const { addAlert, addErrorAlert } = useAlertQueue();
-  const auth = useAuthentication();
-  const [listing, setListing] = useState<ListingResponse | null>(null);
-
-  const {
-    register,
-    handleSubmit,
-    setValue,
-    formState: { errors },
-  } = useForm<NewListingType>({
-    resolver: zodResolver(NewListingSchema),
-  });
-
-  useEffect(() => {
-    const fetchListing = async () => {
-      const { data, error } = await auth.client.GET("/listings/{id}", {
-        params: {
-          path: { id: listingId },
-        },
-      });
-      if (error) {
-        addErrorAlert(error);
-      } else {
-        setListing(data);
-      }
-    };
-    fetchListing();
-  }, []);
-
-  useEffect(() => {
-    if (listing) {
-      setValue("name", listing.name);
-      setValue("description", listing.description ?? "");
-    }
-  }, [listing, setValue]);
-
-  const onSubmit: SubmitHandler<NewListingType> = async ({
-    name,
-    description,
-  }: NewListingType) => {
-    const { error } = await auth.client.PUT("/listings/edit/{id}", {
-      params: {
-        path: {
-          id: listingId,
-        },
-      },
-      body: {
-        name,
-        description,
-      },
-    });
-
-    if (error) {
-      addErrorAlert(error);
-    } else {
-      addAlert("Listing added successfully", "success");
-      onClose();
-      window.location.reload();
-    }
-  };
-
-  return (
-    <RequireAuthentication>
-      <Dialog open={open} onOpenChange={onClose}>
-        <DialogContent className="bg-white dark:bg-gray-800 dark:text-white">
-          <DialogHeader>
-            <DialogTitle className="text-center py-2">
-              Add Robo Details
-            </DialogTitle>
-          </DialogHeader>
-          <form
-            onSubmit={handleSubmit(onSubmit)}
-            className="grid grid-cols-1 space-y-6"
-          >
-            {/* Name */}
-            <div>
-              <Input
-                placeholder="Name"
-                type="text"
-                {...register("name")}
-                disabled={listing === null}
-              />
-              {errors?.name && (
-                <ErrorMessage>{errors?.name?.message}</ErrorMessage>
-              )}
-            </div>
-
-            {/* Description */}
-            <div className="relative">
-              <TextArea
-                placeholder="Description"
-                rows={4}
-                className="block p-2.5 w-full text-sm rounded-lg borde focus:ring-blue-500 focus:border-blue-500 dark:placeholder-gray-400 dark:focus:ring-blue-500 dark:focus:border-blue-500"
-                {...register("description")}
-                disabled={listing === null}
-              />
-              {errors?.description && (
-                <ErrorMessage>{errors?.description?.message}</ErrorMessage>
-              )}
-            </div>
-
-            {/* File Uploader */}
-            <div>
-              <FileUploader
-                value={files}
-                onValueChange={setFiles}
-                dropzoneOptions={{
-                  maxFiles: 5,
-                  maxSize: 1024 * 1024 * 4,
-                  multiple: true,
-                }}
-                className="relative bg-background rounded-lg p-2"
-              >
-                <FileInput className="outline-dashed outline-1 outline-white">
-                  <div className="flex items-center justify-center flex-col pt-3 pb-4 w-full ">
-                    <FaFileUpload />
-                  </div>
-                </FileInput>
-                <FileUploaderContent>
-                  {files &&
-                    files.length > 0 &&
-                    files.map((file, index: number) => (
-                      <FileUploaderItem key={index} index={index}>
-                        <Paperclip className="h-4 w-4 stroke-current" />
-                        <span>{file.name}</span>
-                      </FileUploaderItem>
-                    ))}
-                </FileUploaderContent>
-              </FileUploader>
-            </div>
-            <DialogFooter>
-              <Button variant="primary" type="submit" className="w-full">
-                Submit
-              </Button>
-            </DialogFooter>
-          </form>
-        </DialogContent>
-      </Dialog>
-    </RequireAuthentication>
-  );
-};
-
-export default EditListingModal;
diff --git a/frontend/src/components/listing/FileUpload.tsx b/frontend/src/components/listing/FileUpload.tsx
index d9e84eb1..d68a83fd 100644
--- a/frontend/src/components/listing/FileUpload.tsx
+++ b/frontend/src/components/listing/FileUpload.tsx
@@ -351,3 +351,27 @@ export const FileInput = forwardRef<
 });
 
 FileInput.displayName = "FileInput";
+
+export const FileSubmitButton = forwardRef<
+  HTMLButtonElement,
+  React.ButtonHTMLAttributes<HTMLButtonElement>
+>(({ children, className, ...props }, ref) => {
+  const { isLOF } = useFileUpload();
+  return (
+    <button
+      ref={ref}
+      type="button"
+      disabled={!isLOF}
+      className={cn(
+        buttonVariants({ variant: "primary" }),
+        "w-full",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+});
+
+FileSubmitButton.displayName = "FileSubmitButton";
diff --git a/frontend/src/components/listing/ListingArtifacts.tsx b/frontend/src/components/listing/ListingArtifacts.tsx
index 5af8e990..40544ada 100644
--- a/frontend/src/components/listing/ListingArtifacts.tsx
+++ b/frontend/src/components/listing/ListingArtifacts.tsx
@@ -1,14 +1,101 @@
+import {
+  FileInput,
+  FileSubmitButton,
+  FileUploader,
+  FileUploaderContent,
+  FileUploaderItem,
+} from "components/listing/FileUpload";
 import { Button } from "components/ui/Button/Button";
-import Carousel from "components/ui/Carousel";
+import Spinner from "components/ui/Spinner";
 import { components } from "gen/api";
 import { useAlertQueue } from "hooks/useAlertQueue";
 import { useAuthentication } from "hooks/useAuth";
-import { useEffect, useState } from "react";
-import EditListingModal from "./EditListingModal";
+import { Paperclip } from "lucide-react";
+import { useCallback, useEffect, useState } from "react";
+import { FaFileUpload, FaTimes } from "react-icons/fa";
+
+interface ListingUploadProps {
+  listingId: string;
+  onUpload: (artifact: components["schemas"]["UploadArtifactResponse"]) => void;
+}
+
+const ListingUpload = (props: ListingUploadProps) => {
+  const { listingId, onUpload } = props;
+
+  const { addErrorAlert } = useAlertQueue();
+  const auth = useAuthentication();
+
+  const [files, setFiles] = useState<File[] | null>(null);
+  const [uploading, setUploading] = useState(false);
+
+  const onValueChange = useCallback(() => {
+    if (files === null) {
+      return;
+    }
+
+    setUploading(true);
+    (async () => {
+      await Promise.all(
+        files.map(async (file: File) => {
+          const { data, error } = await auth.api.upload(file, {
+            artifact_type: "image",
+            listing_id: listingId,
+          });
+
+          if (error) {
+            addErrorAlert(error);
+          } else {
+            setFiles(null);
+            onUpload(data);
+          }
+        }),
+      );
+      setUploading(false);
+    })();
+  }, [files, auth, listingId, addErrorAlert]);
+
+  return uploading ? (
+    <div className="my-4 w-full flex justify-center">
+      <Spinner />
+    </div>
+  ) : (
+    <FileUploader
+      value={files}
+      onValueChange={setFiles}
+      dropzoneOptions={{
+        accept: {
+          "image/*": [".jpg", ".jpeg", ".png", ".gif"],
+        },
+        maxSize: 4 * 1024 * 1024,
+      }}
+      className="relative bg-background rounded-lg pt-4 pb-2 px-2"
+    >
+      <FileInput className="outline-dashed outline-1 outline-white">
+        <div className="flex items-center justify-center flex-col pt-3 pb-4 w-full ">
+          <FaFileUpload />
+        </div>
+      </FileInput>
+      <FileUploaderContent>
+        {files &&
+          files.length > 0 &&
+          files.map((file, index: number) => (
+            <FileUploaderItem key={index} index={index}>
+              <Paperclip className="h-4 w-4 stroke-current" />
+              <span>{file.name}</span>
+            </FileUploaderItem>
+          ))}
+      </FileUploaderContent>
+      {files && files.length > 0 && (
+        <FileSubmitButton onClick={onValueChange}>
+          <span>Upload</span>
+        </FileSubmitButton>
+      )}
+    </FileUploader>
+  );
+};
 
 interface Props {
   listingId: string;
-  // TODO: If can edit, allow the user to add and delete artifacts.
   edit: boolean;
 }
 
@@ -18,13 +105,17 @@ const ListingArtifacts = (props: Props) => {
   const auth = useAuthentication();
   const { addErrorAlert } = useAlertQueue();
 
-  const [addingImages, setAddingImages] = useState(false);
-
   const [artifacts, setArtifacts] = useState<
     components["schemas"]["ListArtifactsResponse"] | null
   >(null);
 
+  const [deletingIds, setDeletingIds] = useState<string[]>([]);
+
   useEffect(() => {
+    if (artifacts !== null) {
+      return;
+    }
+
     const fetchArtifacts = async () => {
       const { data, error } = await auth.client.GET("/artifacts/{listing_id}", {
         params: {
@@ -39,36 +130,73 @@ const ListingArtifacts = (props: Props) => {
       }
     };
     fetchArtifacts();
-  }, [listingId]);
+  }, [listingId, artifacts]);
+
+  const onDelete = async (artifactId: string) => {
+    setDeletingIds([...deletingIds, artifactId]);
+
+    const { error } = await auth.client.DELETE(
+      "/artifacts/delete/{artifact_id}",
+      {
+        params: {
+          path: { artifact_id: artifactId },
+        },
+      },
+    );
+
+    if (error) {
+      addErrorAlert(error);
+    } else {
+      setArtifacts({
+        artifacts: artifacts!.artifacts.filter(
+          (artifact) => artifact.artifact_id !== artifactId,
+        ),
+      });
+      setDeletingIds(deletingIds.filter((id) => id !== artifactId));
+    }
+  };
 
   return artifacts === null ? (
-    <></>
+    <div className="my-4 w-full flex justify-center">
+      <Spinner />
+    </div>
   ) : (
     <div className="my-4">
-      {artifacts.artifacts.length > 0 ?? (
-        <Carousel
-          items={artifacts.artifacts.map((artifact) => {
-            return {
-              url: artifact.url,
-              caption: artifact.name,
-            };
-          })}
-        />
+      {artifacts.artifacts.length > 0 && (
+        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 gap-2 mx-auto">
+          {artifacts.artifacts.map((artifact) => (
+            <div
+              key={artifact.artifact_id}
+              className="bg-background rounded-lg p-2 relative"
+            >
+              <img
+                src={artifact.url}
+                alt={artifact.name}
+                className="rounded-lg w-full"
+              />
+              {edit && (
+                <Button
+                  onClick={() => onDelete(artifact.artifact_id)}
+                  variant="destructive"
+                  className="absolute top-5 right-5 rounded-full"
+                  disabled={deletingIds.includes(artifact.artifact_id)}
+                >
+                  <FaTimes />
+                </Button>
+              )}
+            </div>
+          ))}
+        </div>
       )}
       {edit && (
-        <>
-          <Button
-            className="btn btn-primary"
-            onClick={() => setAddingImages(true)}
-          >
-            Add Images
-          </Button>
-          <EditListingModal
-            open={addingImages}
-            listingId={listingId}
-            onClose={() => setAddingImages(false)}
-          />
-        </>
+        <ListingUpload
+          listingId={listingId}
+          onUpload={(artifact) => {
+            setArtifacts({
+              artifacts: [...artifacts.artifacts, artifact.artifact],
+            });
+          }}
+        />
       )}
     </div>
   );
diff --git a/frontend/src/components/ui/Carousel.tsx b/frontend/src/components/ui/Carousel.tsx
index efe80a0a..be47fea2 100644
--- a/frontend/src/components/ui/Carousel.tsx
+++ b/frontend/src/components/ui/Carousel.tsx
@@ -7,16 +7,18 @@ interface Props {
   }[];
 }
 
-const Carousel = (props: Props) => {
-  if (props.items.length === 0) {
+const Carousel = ({ items }: Props) => {
+  if (items.length === 0) {
     return <></>;
   }
 
+  console.log("items:", items);
+
   return (
     <div className="relative w-full">
       {/* Carousel wrapper */}
       <div className="relative h-56 overflow-hidden rounded-lg md:h-96">
-        {props.items.map(({ url, caption }, key) => (
+        {items.map(({ url, caption }, key) => (
           <div
             className="hidden duration-700 ease-in-out"
             data-carousel-item
@@ -33,7 +35,7 @@ const Carousel = (props: Props) => {
 
       {/* Slider indicators */}
       <div className="absolute z-30 flex -translate-x-1/2 bottom-5 left-1/2 space-x-3 rtl:space-x-reverse">
-        {props.items.map((_, key) => (
+        {items.map((_, key) => (
           <button
             type="button"
             className="w-3 h-3 rounded-full"
diff --git a/frontend/src/gen/api.ts b/frontend/src/gen/api.ts
index 4d3c3e7c..5b548b80 100644
--- a/frontend/src/gen/api.ts
+++ b/frontend/src/gen/api.ts
@@ -525,8 +525,7 @@ export interface components {
         };
         /** UploadArtifactResponse */
         UploadArtifactResponse: {
-            /** Artifact Id */
-            artifact_id: string;
+            artifact: components["schemas"]["ListArtifactsItem"];
         };
         /** UserInfoResponse */
         UserInfoResponse: {
diff --git a/store/app/routers/artifacts.py b/store/app/routers/artifacts.py
index 900ce465..a8c197d9 100644
--- a/store/app/routers/artifacts.py
+++ b/store/app/routers/artifacts.py
@@ -103,7 +103,7 @@ class UploadArtifactRequest(BaseModel):
 
 
 class UploadArtifactResponse(BaseModel):
-    artifact_id: str
+    artifact: ListArtifactsItem
 
 
 @artifacts_router.post("/upload", response_model=UploadArtifactResponse)
@@ -134,7 +134,16 @@ async def upload(
         artifact_type=data.artifact_type,
         description=data.description,
     )
-    return UploadArtifactResponse(artifact_id=artifact.id)
+    return UploadArtifactResponse(
+        artifact=ListArtifactsItem(
+            artifact_id=artifact.id,
+            name=artifact.name,
+            artifact_type=artifact.artifact_type,
+            description=artifact.description,
+            timestamp=artifact.timestamp,
+            url=get_artifact_url(artifact.id, artifact.artifact_type),
+        ),
+    )
 
 
 class UpdateArtifactRequest(BaseModel):

From 7b94f567a1e6461d6ca08a7182e9667e03990dc0 Mon Sep 17 00:00:00 2001
From: Benjamin Bolte <ben@bolte.cc>
Date: Mon, 5 Aug 2024 00:47:18 -0400
Subject: [PATCH 4/4] fix tests

---
 tests/test_images.py   | 5 +++--
 tests/test_listings.py | 3 ++-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/tests/test_images.py b/tests/test_images.py
index 2c77fa7c..6e7165a6 100644
--- a/tests/test_images.py
+++ b/tests/test_images.py
@@ -43,8 +43,9 @@ async def test_user_auth_functions(app_client: AsyncClient, tmpdir: Path) -> Non
         headers=auth_headers,
     )
     assert response.status_code == status.HTTP_200_OK, response.json()
-    assert response.json()["artifact_id"] is not None
-    image_id = response.json()["artifact_id"]
+    data = response.json()
+    assert data["artifact"] is not None
+    image_id = data["artifact"]["artifact_id"]
 
     # Gets the URLs for various sizes of images.
     response = await app_client.get(f"/artifacts/url/image/{image_id}", params={"size": "small"})
diff --git a/tests/test_listings.py b/tests/test_listings.py
index f2b96169..914358a2 100644
--- a/tests/test_listings.py
+++ b/tests/test_listings.py
@@ -43,7 +43,8 @@ async def test_listings(app_client: AsyncClient, tmpdir: Path) -> None:
         files={"file": ("test.png", open(image_path, "rb"), "image/png"), "metadata": (None, data_json)},
     )
     assert response.status_code == status.HTTP_200_OK, response.json()
-    assert response.json()["artifact_id"] is not None
+    data = response.json()
+    assert data["artifact"]["artifact_id"] is not None
 
     # Searches for listings.
     response = await app_client.get(