start lesson 90

src/components/ProductItem/ProductItem.tsx

-import React, { FunctionComponent, ReactElement } from "react";
+import React, { FunctionComponent, MutableRefObject, ReactElement, useRef } from "react";
 import IProductItemProps from "./IProductItemProps";
 import styles from './ProductItem.module.css'
 import defaultImage from '../../assets/images/default.jpg'
@@ -8,9 +8,36 @@ import { deleteProductById } from "../../store/products/products.slice";
 
 const ProductItem: FunctionComponent<IProductItemProps> = (props): ReactElement => {
     const dispatch: AppDispatch = useDispatch()
+    const anchorRef: MutableRefObject<HTMLAnchorElement | null> = useRef(null)
     const deleteHandler = (): void => {
         dispatch(deleteProductById(props.product._id))
     }
+
+    const download = (url: string, name: string) => {
+        // const [fetching, setFetching] = useState(false);
+        // const [error, setError] = useState(false);
+        
+        if (!url) {
+            throw new Error("Resource URL not provided! You need to provide one");
+        }
+        //setFetching(true);
+        fetch(url)
+            .then(response => response.blob())
+            .then(blob => {
+                //setFetching(false);
+                const blobURL = URL.createObjectURL(blob);
+                const a = document.createElement("a");
+                a.href = blobURL;
+                // a.style = "display: none";
+                if (name && name.length) a.download = name;
+                document.body.appendChild(a);
+                a.click();
+            })
+            // .catch(() => setError(true));
+            .catch((e) => console.log(e))
+    };
+
+
     return (
         <div className={styles.ProductItem}>
             <div className={styles.ProductItem__imageFrame}>
@@ -23,6 +50,9 @@ const ProductItem: FunctionComponent<IProductItemProps> = (props): ReactElement
                     }} 
                 />
             </div>
+            <div>
+                <a onClick={() => download(`${import.meta.env.VITE_BASE_URL}uploads/${props.product.image}`, props.product.image)} ref={anchorRef} download>Download image</a>
+            </div>
             <h3>{props.product.product}</h3>
             <p>{props.product.description}</p>
             <p>{props.product.price}</p>

vite.config.ts

@@ -5,6 +5,6 @@ import react from '@vitejs/plugin-react'
 export default defineConfig({
   plugins: [react()],
   server: {
-    port: 3000
+    port: 3003
   }
 })