product page reflecting information from strapi api

backend/main.py

@@ -121,11 +121,16 @@ def mail():
 
 
 # Handle Serving Public Images
-@app.route('/serve-image/<filename>', methods=['GET'])
+@app.route('/uploads/<filename>', methods=['GET'])
 def serve_image(filename):
     
   return send_from_directory(app.config['UPLOAD_DIRECTORY'], filename)
 
+# Get all files
+@app.route("/images", methods=["GET"])
+def get_files():
+    files = os.listdir(app.config['UPLOAD_DIRECTORY'])
+    return jsonify({"files": files})
 
 # New Orders
 @app.route("/new-order", methods=["POST"])

backend/models.py

@@ -37,7 +37,29 @@ class Orders(db.Model):
             "order":self.order,
         }  
     
+class Products(db.Model):
+    __tablename__ = "products"
+    id = db.Column(db.String(32), primary_key=True, unique=True, default=get_uuid)
+    name = db.Column(db.String(345), default='New Shirt')
+    image = db.Column(db.String(34), nullable=False)
+    description = db.Column(db.String(345), default='Basic T-Shirt')
+    price = db.Column(db.Integer, default=25)
+    category = db.Column(db.String(345), default='New Shirt')
+    sale = db.Column(db.Boolean, default=False)
+    sale_price = db.Column(db.Integer, default=18)
     
+    def to_json(self):
+        return {
+            "id": self.id,
+            "name": self.name,
+            "image": self.image,
+            "description": self.description,
+            "price": self.price,
+            "category": self.category,
+            "sale": self.sale,
+            "sale_price": self.sale_price,
+        }
+
 # class Category(db.Model):
 #     __tablename__ = "categories"
 #     id = db.Column(db.String(32), primary_key=True, unique=True, default=get_uuid)

frontend/next.config.mjs

@@ -27,6 +27,12 @@ const nextConfig = {
 				port: "1337",
 				pathname: "/**",
 			},
+			{
+				protocol: "http",
+				hostname: "localhost",
+				port: "5080",
+				pathname: "/**",
+			},
 			{
 				protocol: "https",
 				hostname: "api.kevosattire.com",

frontend/src/app/products/page.tsx

@@ -20,7 +20,18 @@ const Products = () => {
           Authorization: "Bearer " + process.env.NEXT_PUBLIC_API_TOKEN
         }
       });
+      // const response = await fetch(process.env.NEXT_PUBLIC_Flask_URL +"/images", {
+      //   method: "GET",
+      // });
       const data = await response.json();
+
+      // console.log(data);
+
+      // Flask
+      // console.log(data.files);
+      // setData(data.files);
+
+      // Strapi
       console.log(data.data);
       // console.log(data.data[0].image.url);
       setData(data.data);

frontend/src/components/ProductPage/ProductPage.css

@@ -26,7 +26,7 @@
             .main-image{
                 width: 100%;
                 max-height: 800px;
-                cursor: pointer;
+                /* cursor: pointer; */
                 position: relative;
             }
         }

frontend/src/components/ProductPage/ProductPage.tsx

@@ -14,13 +14,20 @@ const ProductPage = ({ productId }: any) => {
   // console.log(productId);
   const [selectedImage, setSelectedImage] = useState(0);
   const [quantity, setQuantity] = useState(1);
+  const [isSelected, setIsSelected] = useState(false);
+  const [imageClass, setImageClass] = useState('cursor-zoom-in');
 
-  const images = [
-    "https://ih1.redbubble.net/image.2997405810.0746/ssrco,slim_fit_t_shirt,womens,101010:01c5ca27c6,front,square_product,600x600.jpg",
-    "https://ih1.redbubble.net/image.2997405810.0746/ssrco,slim_fit_t_shirt,flatlay,101010:01c5ca27c6,front,wide_portrait,750x1000-bg,f8f8f8.jpg",
-  ];
+
+  // Set product variables
   const [data, setData] = useState([]);
   const [product, setProduct] = useState('');
+  const [name, setName] = useState('');
+  const [desc, setDesc] = useState('');
+  const [price, setPrice] = useState(0); 
+  const [sale, setSale] = useState(false);
+  const [salePrice, setSalePrice] = useState(0);
+  const [category, setCategory] = useState('');
+
 
   useEffect(() => {
     const fetchData = async () => {
@@ -33,16 +40,30 @@ const ProductPage = ({ productId }: any) => {
       const res = await request.json();
       // console.log(res.data);
       console.log(res.data[1].image.url);
+
       setData(res.data);
+      // Set product variables
       setProduct(res.data[parseInt(productId)]?.image?.url);
+      setName(res.data[parseInt(productId)]?.title);
+      setDesc(res.data[parseInt(productId)]?.desc);
+      setPrice(res.data[parseInt(productId)]?.price);
+      setSale(res.data[parseInt(productId)]?.sale);
+      setSalePrice(res.data[parseInt(productId)]?.sale_price);
+      setCategory(res.data[parseInt(productId)]?.category);
     };
     fetchData();
   }, [productId]);
 
+  const handleSelectedImage = () => {
+    setIsSelected(!isSelected);
+    setImageClass(isSelected ? 'cursor-zoom-out scale-125' : 'cursor-zoom-in');
+  };
+
+
   return (
     <div className="product">
       <div className="left">
-        <div className="images">
+        {/* <div className="images">
           <div className="product-image">
             <Image
               src={`${process.env.NEXT_PUBLIC_UPLOAD_URL+product}`}
@@ -52,46 +73,30 @@ const ProductPage = ({ productId }: any) => {
               style={{ objectFit: "cover" }}
               onClick={(e) => setSelectedImage(0)}
               />
-            {/* <Image
-              src={images[0]}
-              fill
-              className=""
-              alt="Shirt Mockup"
-              style={{ objectFit: "cover" }}
-              onClick={(e) => setSelectedImage(0)}
-            /> */}
+          
           </div>
           <div className="product-image">
-            {/* <Image
-              src={images[1]}
-              fill
-              className=""
-              alt="Shirt Mockup"
-              style={{ objectFit: "cover" }}
-              onClick={(e) => setSelectedImage(1)}
-            /> */}
+
           </div>
-        </div>
+        </div> */}
         <div className="mainImage">
-          <div className="main-image">
+          <div className={`main-image ${imageClass}`}>
             <Image
-              src={data[selectedImage]}
+              src={`${process.env.NEXT_PUBLIC_UPLOAD_URL+product}`}
               fill
               className=""
-              style={{ objectFit: "cover" }}
+              style={{ objectFit: "contain" }}
               alt="Profile picture"
+              onClick={handleSelectedImage}
             />
           </div>
         </div>
       </div>
       <div className="right">
-        <h1 className="font-bold text-3xl">Title</h1>
-        <span className="price text-[#F45B1E]">$199</span>
+        <h1 className="font-bold text-3xl">{name}</h1>
+        <span className="price text-[#F45B1E]">${price}</span>
         <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi, culpa
-          temporibus. Blanditiis, perferendis tempore praesentium voluptatibus
-          et, consectetur similique natus facilis reiciendis eum pariatur rem
-          vitae est aliquid, debitis corporis.
+         {desc}
         </p>
         <div className="quantity">
           {/* If quantity is at 1 then it stays at 1, otherwise it will subtract by 1 */}

frontend/src/components/ui/MenuCard/MenuCard.tsx

@@ -34,6 +34,18 @@ const MenuCard = ({ Menu }: any) => {
           >
             <div className="w-full h-[75%]">
               <div className="h-full relative w-full">
+                {/* Flask */}
+                {/* <Image
+                  src={`${process.env.NEXT_PUBLIC_Flask_URL}/uploads/${menu_item}`}
+                  alt="product photo"
+                  fill
+                  style={{ objectFit: "cover", objectPosition: "center" }}
+                  quality={75}
+                  sizes="(max-width: 325px) 100vw, (max-width: 1200px) 50vw, 33vw"
+                  className="flex"
+                  onClick={() => router.push(`/products/${menu_item.id}`)}
+                /> */}
+                {/* Strapi */}
                 <Image
                   src={`${process.env.NEXT_PUBLIC_UPLOAD_URL+menu_item?.image?.url}`}
                   alt="product photo"