image preview okay, still need to figure out displaying seller's name…

… and duplicate id 'error'
Six5pAdes · Oct 11, 2024 · 7d84429 · 7d84429
1 parent c3b70af
commit 7d84429
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 18 deletions.
diff --git a/react-vite/src/components/ProductPages/ProductForm.css b/react-vite/src/components/ProductPages/ProductForm.css
@@ -19,27 +19,48 @@
     margin-bottom: 20px;
   }
 
-  .product-inputs {
+.product-inputs {
     width: 100%;
     margin: 10px;
     margin-bottom: 20px;
     padding: 10px;
     border: 1px #ccc solid;
-  }
+}
 
-  input[type="file"],
-  textarea {
+input[type="file"],
+textarea {
     width: 100%;
     padding: 10px;
     border: 1px solid #ccc;
     border-radius: 5px;
     margin: 10px;
-  }
+}
 
-  .product-image::-webkit-file-upload-button {
+.image-input-contain {
+  display: flex;
+  align-items: center;
+}
+
+.product-image {
+  /* height: 100px;
+  color: transparent;
+  text-indent: 10px;
+  background-color: rgba(255, 255, 255, 0.8); */
+  flex: 1;
+  margin-right: 10px;
+}
+
+.product-image::-webkit-file-upload-button {
     cursor: pointer;
 }
 
+.image-preview {
+  width: fit-content;
+  height: 100px;
+  object-fit: cover;
+  border-radius: 50px;
+}
+
 #button-contain {
   display: flex;
   justify-content: space-evenly;

diff --git a/react-vite/src/components/ProductPages/ProductForm.jsx b/react-vite/src/components/ProductPages/ProductForm.jsx
@@ -17,6 +17,8 @@ const CreateProduct = () => {
     const [submit, setSubmit] = useState(false)
     const user = useSelector(state => state.session.user)
 
+    const [imagePreview, setImagePreview] = useState("")
+
     const handleSubmit = async e => {
         e.preventDefault()
         setSubmit(true)
@@ -78,6 +80,14 @@ const CreateProduct = () => {
         navigate(-1)
     }
 
+    const handleImageChange = (e) => {
+        const file = e.target.files[0]
+        setImage(file)
+        if (file) {
+            setImagePreview(URL.createObjectURL(file))
+        }
+    }
+
     return (
         <div id="product-new">
             <h1>Create a New Product</h1>
@@ -99,12 +109,16 @@ const CreateProduct = () => {
                     {submit && errors.name && <p className="err-msg">{errors.name}</p>}
                     <label className="product-label">
                         Image
-                        <input
-                            type="file"
-                            className="product-inputs product-image"
-                            accept="image/*"
-                            onChange={(e) => setImage(e.target.files[0])}
-                        />
+                        <div className="image-input-contain">
+                            <input
+                                type="file"
+                                className="product-inputs product-image"
+                                accept="image/*"
+                                onChange={handleImageChange}
+                            // style={{ backgroundImage: imagePreview ? `url(${imagePreview})` : 'none', backgroundSize: 'contain', backgroundRepeat: 'no-repeat' }}
+                            />
+                            {imagePreview && <img src={imagePreview} className="image-preview" />}
+                        </div>
                     </label>
                     {submit && errors.image && <p className="err-msg">{errors.image}</p>}
                     <label className="product-label">
@@ -138,7 +152,7 @@ const CreateProduct = () => {
                         Description
                         <textarea
                             className="product-inputs"
-                            placeholder="Please describe what the item is"
+                            placeholder="Please describe what the item is..."
                             value={description}
                             onChange={(e) => setDescription(e.target.value)}
                         />

diff --git a/react-vite/src/components/ProductPages/SingleProduct.jsx b/react-vite/src/components/ProductPages/SingleProduct.jsx
@@ -64,8 +64,8 @@ const ProductDetails = () => {
         }
     }, [wishlists, product])
 
-    const allSellers = session.users
-    const seller = allSellers?.find(user => user.id === product?.user_id)
+    // const allSellers = session.users
+    // const seller = allSellers?.find(user => user.id === product?.user_id)
 
     const handleAddToCart = (prodId) => {
         const orderIds = allCarts.map(ele => ele.product_id)
@@ -131,9 +131,9 @@ const ProductDetails = () => {
                     <p className="price">
                         Price: ${parseFloat(product?.price).toFixed(2)}
                     </p>
-                    <p className="seller">
-                        Seller: {seller?.first_name} {seller?.last_name}
-                    </p>
+                    {/* <p className="seller">
+                        Seller: {seller ? `${seller.first_name} ${seller.last_name}` : "Unknown Seller"}
+                    </p> */}
                     <div className="actions">
                         {session.user && product.user_id !== session.user.id && (
                             <>