fix: Customize Page Form Submission Authentication and User Tracking issue: #153

client/src/pages/Customize/customize.jsx

@@ -1,12 +1,32 @@
-import React from "react";
+import React, { useEffect } from "react";
 import axios from "axios";
 import toast from "react-hot-toast";
 
 const Customize = () => {
     const [formData, setFormData] = React.useState({
         desc: "",
         link: "",
+        shoeModel: "Crocs", 
+        shoeSize: "7",  
     });
+    const [user, setUser] = React.useState(null);
+
+
+    useEffect(() => {
+        const fetchUser = async () => {
+            try {
+                const { data } = await axios.get("http://localhost:3000/api/users/me", {
+                    withCredentials: true,
+                });
+                setUser(data.user);
+            } catch (error) {
+                toast.error("Please log in to customize products");
+                window.location.href = "/login"; 
+            }
+        };
+
+        fetchUser();
+    }, []);
 
     function handleChange(event) {
         const { name, value, type, checked } = event.target;
@@ -17,6 +37,7 @@ const Customize = () => {
             };
         });
     }
+
     async function handleSubmit(event) {
         event.preventDefault();
         if (!formData.desc && !formData.link)
@@ -29,6 +50,9 @@ const Customize = () => {
                 {
                     description: formData.desc,
                     image: formData.link,
+                    shoeModel: formData.shoeModel, 
+                    shoeSize: formData.shoeSize,    
+                    userId: user.email, 
                 },
                 {
                     headers: {
@@ -41,9 +65,10 @@ const Customize = () => {
             window.location.href = "/";
         } catch (error) {
             toast.error(error.response.data.message);
-            // console.error(error);
+
         }
     }
+
     return (
         <div>
             <div className="min-h-screen p-6 bg-gray-100 flex items-center justify-center">
@@ -67,9 +92,11 @@ const Customize = () => {
                                                 Shoe Model
                                             </label>
                                             <select
-                                                name="shoe_model"
+                                                name="shoeModel" 
                                                 id="shoe_model"
                                                 className="h-10 border mt-1 rounded px-4 w-full bg-gray-50"
+                                                onChange={handleChange}
+                                                value={formData.shoeModel} 
                                             >
                                                 <option>Crocs</option>
                                                 <option>Air Force 1</option>
@@ -81,9 +108,11 @@ const Customize = () => {
                                                 Shoe Size
                                             </label>
                                             <select
-                                                name="shoe_size"
+                                                name="shoeSize" 
                                                 id="shoe_size"
                                                 className="h-10 border mt-1 rounded px-4 w-full bg-gray-50"
+                                                onChange={handleChange}
+                                                value={formData.shoeSize} 
                                             >
                                                 <option>7</option>
                                                 <option>8</option>

server/controllers/products.js

@@ -120,13 +120,16 @@ const getcategories = async (req, res) => {
 };
 
 const createcustomproduct = async (req, res) => {
-    const { description, image } = req.body;
+    const { description, image, shoeModel, shoeSize, userId } = req.body;
 
     try {
         await prisma.design.create({
             data: {
                 description,
                 image,
+                shoeModel, 
+                shoeSize:parseInt(shoeSize),  
+                userId,    
             },
         });
 

server/prisma/migrations/20240803162757_add_design_user_relation/migration.sql

@@ -0,0 +1,11 @@
+/*
+  Warnings:
+
+  - Added the required column `userId` to the `Design` table without a default value. This is not possible if the table is not empty.
+
+*/
+-- AlterTable
+ALTER TABLE `design` ADD COLUMN `userId` VARCHAR(191) NOT NULL;
+
+-- AddForeignKey
+ALTER TABLE `Design` ADD CONSTRAINT `Design_userId_fkey` FOREIGN KEY (`userId`) REFERENCES `Mainuser`(`email`) ON DELETE RESTRICT ON UPDATE CASCADE;

server/prisma/migrations/20240803164531_add_design_user_relation/migration.sql

@@ -0,0 +1,10 @@
+/*
+  Warnings:
+
+  - Added the required column `shoeModel` to the `Design` table without a default value. This is not possible if the table is not empty.
+  - Added the required column `shoeSize` to the `Design` table without a default value. This is not possible if the table is not empty.
+
+*/
+-- AlterTable
+ALTER TABLE `design` ADD COLUMN `shoeModel` VARCHAR(191) NOT NULL,
+    ADD COLUMN `shoeSize` INTEGER NOT NULL;

server/prisma/schema.prisma

@@ -31,6 +31,10 @@ model Design {
   designId    Int    @id @default(autoincrement())
   description String
   image       String?
+  userId      String 
+  shoeModel   String
+  shoeSize    Int
+  mainuser    Mainuser @relation(fields: [userId], references: [email]) 
   product     Product[]
 }
 
@@ -55,6 +59,7 @@ model Mainuser {
   orders     Orders[]
   retailer   Retailer?
   wishlist   Wishlist[]
+  designs    Design[] 
   passwordResetTokens PasswordResetToken[]
 }
 

server/prisma/seed.js

@@ -17,18 +17,6 @@ async function main() {
     await prisma.supplier.deleteMany({});
 
 
-  // Insert data for the Design table
-  await prisma.design.createMany({
-    data: [
-      { designId: 1, description: 'My one of the best artworks!!', image: 'https://shopzapatopia.com/cdn/shop/products/image_d080f6fe-2b6e-4cfa-9598-45d5f775c945.jpg?v=1675780288&width=823' },
-      { designId: 2, description: 'My one of the best artworks!!', image: 'https://i.etsystatic.com/7731983/r/il/f6f907/5513082597/il_794xN.5513082597_m5yv.jpg' },
-      { designId: 3, description: 'My one of the best artworks!!', image: 'https://images.tshirtslowprice.com/wp-content/uploads/2022/07/14091149/Personalised-One-Piece-Art-Custom-Crocs-Crocband-Shoes-600x600.jpg' },
-      { designId: 4, description: 'My one of the best artworks!!', image: 'https://i.etsystatic.com/32325243/r/il/76e732/3471760499/il_794xN.3471760499_o0mj.jpg' },
-      { designId: 5, description: 'My one of the best artworks!!', image: 'https://i.etsystatic.com/38858364/r/il/e4edf3/4701581789/il_794xN.4701581789_o0j5.jpg' },
-      { designId: 6, description: 'My one of the best artworks!!', image: 'https://i.etsystatic.com/38858364/r/il/6f647c/4657056636/il_794xN.4657056636_fuef.jpg' },
-      { designId: 7, description: 'My one of the best artworks!!', image: 'https://www.highsnobiety.com/static-assets/dato/1663198452-comme-des-garcons-play-converse-chuck-70-heart-print-release-date-price-01.jpg' },
-    ],
-  });
 
   // Insert data for the Mainuser table
   await prisma.mainuser.create({
@@ -44,6 +32,19 @@ async function main() {
     },
   });
 
+  // Insert data for the Design table
+  await prisma.design.createMany({
+    data: [
+      { designId: 1,userId:'admin@drawn2shoe.com', shoeModel:"Crocs",shoeSize: 8, description: 'My one of the best artworks!!', image: 'https://shopzapatopia.com/cdn/shop/products/image_d080f6fe-2b6e-4cfa-9598-45d5f775c945.jpg?v=1675780288&width=823' },
+      { designId: 2,userId:'admin@drawn2shoe.com', shoeModel:"Crocs",shoeSize: 10, description: 'My one of the best artworks!!', image: 'https://i.etsystatic.com/7731983/r/il/f6f907/5513082597/il_794xN.5513082597_m5yv.jpg' },
+      { designId: 3,userId:'admin@drawn2shoe.com', shoeModel:"Converse cdg",shoeSize: 7, description: 'My one of the best artworks!!', image: 'https://images.tshirtslowprice.com/wp-content/uploads/2022/07/14091149/Personalised-One-Piece-Art-Custom-Crocs-Crocband-Shoes-600x600.jpg' },
+      { designId: 4,userId:'admin@drawn2shoe.com', shoeModel:"Crocs",shoeSize: 8, description: 'My one of the best artworks!!', image: 'https://i.etsystatic.com/32325243/r/il/76e732/3471760499/il_794xN.3471760499_o0mj.jpg' },
+      { designId: 5,userId:'admin@drawn2shoe.com', shoeModel:"Converse cdg",shoeSize: 9, description: 'My one of the best artworks!!', image: 'https://i.etsystatic.com/38858364/r/il/e4edf3/4701581789/il_794xN.4701581789_o0j5.jpg' },
+      { designId: 6,userId:'admin@drawn2shoe.com', shoeModel:"Airforce",shoeSize: 8, description: 'My one of the best artworks!!', image: 'https://i.etsystatic.com/38858364/r/il/6f647c/4657056636/il_794xN.4657056636_fuef.jpg' },
+      { designId: 7,userId:'admin@drawn2shoe.com', shoeModel:"Converse cdg",shoeSize: 9, description: 'My one of the best artworks!!', image: 'https://www.highsnobiety.com/static-assets/dato/1663198452-comme-des-garcons-play-converse-chuck-70-heart-print-release-date-price-01.jpg' },
+    ],
+  });
+
   // Insert data for the Supplier table
   await prisma.supplier.createMany({
     data: [

server/routes/products.js

@@ -1,5 +1,7 @@
 import express from "express";
 import { getproducts, getcategories, getproductbyid, createcustomproduct } from "../controllers/products.js";
+import { isAuthenticated } from "../middlewares/auth.js";
+
 
 const router = express.Router();
 
@@ -10,6 +12,6 @@ router.get('/categories', getcategories);
 
 router.get('/product', getproductbyid);
 
-router.post('/custom', createcustomproduct);
+router.post('/custom', isAuthenticated, createcustomproduct); 
 
 export default router;