Upload images for parts too (#137)

kscalelabs · Jun 17, 2024 · 685919f · 685919f
1 parent 1177f4f
commit 685919f
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 23 deletions.
diff --git a/frontend/src/components/PartForm.tsx b/frontend/src/components/PartForm.tsx
@@ -1,6 +1,7 @@
 import { Image } from "hooks/api";
 import { ChangeEvent, Dispatch, FormEvent, SetStateAction } from "react";
 import { Button, Col, Form, Row } from "react-bootstrap";
+import ImageUploadComponent from "./files/UploadImage";
 
 interface PartFormProps {
   title: string;
@@ -44,6 +45,12 @@ const PartForm: React.FC<PartFormProps> = ({
     setImages(newImages);
   };
 
+  const handleImageUploadSuccess = (url: string, index: number) => {
+    const newImages = [...part_images];
+    newImages[index].url = url;
+    setImages(newImages);
+  };
+
   return (
     <>
       <h1>{title}</h1>
@@ -75,15 +82,8 @@ const PartForm: React.FC<PartFormProps> = ({
         {part_images.map((image, index) => (
           <Row key={index} className="mb-3">
             <Col md={12}>
-              <label htmlFor={"url-" + index}>URL</label>
-              <Form.Control
-                id={"url-" + index}
-                className="mb-1"
-                type="text"
-                name="url"
-                value={image.url}
-                onChange={(e) => handleImageChange(index, e)}
-                required
+              <ImageUploadComponent
+                onUploadSuccess={(url) => handleImageUploadSuccess(url, index)}
               />
               <label htmlFor={"caption-" + index}>Caption</label>
               <Form.Control
@@ -98,7 +98,7 @@ const PartForm: React.FC<PartFormProps> = ({
             </Col>
             <Col md={12}>
               <Button
-                className="mt-2 mb-2"
+                className="mb-2 mt-2"
                 variant="danger"
                 onClick={() => handleRemoveImage(index)}
               >
@@ -107,7 +107,7 @@ const PartForm: React.FC<PartFormProps> = ({
             </Col>
           </Row>
         ))}
-        <Col md={12}>
+        <Col>
           <Button className="mb-3" variant="secondary" onClick={handleAddImage}>
             Add Image
           </Button>

diff --git a/frontend/src/pages/Parts.tsx b/frontend/src/pages/Parts.tsx
@@ -1,3 +1,4 @@
+import ImageComponent from "components/files/ViewImage";
 import { useAlertQueue } from "hooks/alerts";
 import { api, Part } from "hooks/api";
 import { useAuthentication } from "hooks/auth";
@@ -92,12 +93,18 @@ const Parts = () => {
         {partsData.map((part) => (
           <Col key={part.part_id} md={3} sm={6} xs={12}>
             <Card onClick={() => navigate(`/part/${part.part_id}`)}>
-              {part.images[0].url && (
-                <Card.Img
-                  style={{ aspectRatio: "1/1" }}
-                  variant="top"
-                  src={part.images[0].url}
-                />
+              {part.images[0] && (
+                <div
+                  style={{
+                    aspectRatio: "1/1",
+                    width: "100%",
+                    overflow: "hidden",
+                    borderTopLeftRadius: ".25rem",
+                    borderTopRightRadius: ".25rem",
+                  }}
+                >
+                  <ImageComponent imageId={"mini" + part.images[0].url} />
+                </div>
               )}
               <Card.Body>
                 <Card.Title>{part.part_name}</Card.Title>

diff --git a/frontend/src/pages/YourParts.tsx b/frontend/src/pages/YourParts.tsx
@@ -1,3 +1,4 @@
+import ImageComponent from "components/files/ViewImage";
 import { api, Part } from "hooks/api";
 import { useAuthentication } from "hooks/auth";
 import { useEffect, useState } from "react";
@@ -67,12 +68,18 @@ const YourParts = () => {
         {partsData.map((part) => (
           <Col key={part.part_id} md={3} sm={6} xs={12}>
             <Card onClick={() => navigate(`/part/${part.part_id}`)}>
-              {part.images[0].url && (
-                <Card.Img
-                  style={{ aspectRatio: "1/1" }}
-                  variant="top"
-                  src={part.images[0].url}
-                />
+              {part.images[0] && (
+                <div
+                  style={{
+                    aspectRatio: "1/1",
+                    width: "100%",
+                    overflow: "hidden",
+                    borderTopLeftRadius: ".25rem",
+                    borderTopRightRadius: ".25rem",
+                  }}
+                >
+                  <ImageComponent imageId={"mini" + part.images[0].url} />
+                </div>
               )}
               <Card.Body>
                 <Card.Title>{part.part_name}</Card.Title>