Merge pull request #51 from GSG-G11/50-Handle-Delete

Handle Delete Product & Update category#50

client/src/App.css

@@ -5,6 +5,7 @@
 }
 body {
   font-family: Arial, Helvetica, sans-serif;
+
 }
 
 html {

client/src/components/Modal/Modal.jsx

@@ -11,18 +11,10 @@ export default class Modal extends Component {
     price: "",
     description: "",
     image: "",
+    category: "",
     errorMsg: "",
-    // UpdateOrAdd : "",
   };
 
-  // updateOrAddForModal = () => {
-  //   if(this.props.modalOpened === "Add product"){ // change between add and update handlers when you press the button in the modal
-  //     this.setState({UpdateOrAdd : () => { return this.addProduct} })
-
-  //   }else {
-  //     this.setState({UpdateOrAdd : this.updteProduct()})
-  //   }
-  // }
 
   handleChange = (event) => {
     const { name, value } = event.target;
@@ -33,27 +25,27 @@ export default class Modal extends Component {
     this.setState({ isOpen: false });
   };
 
-  // displayOldData = ({id})
 
   addProduct = (e) => {
     const { addProductToState } = this.props;
-    const { name, price, description, image } = this.state;
+    const { name, price, description, image, category} = this.state;
     if (!name || !price || !description || !image) {
       this.setState({ errorMsg: "Please fill all fields" });
     } else {
-      const data = { name, price, description, image };
+      const data = { name, price, description, image, category };
       axios
         .post("/api/v1/addProduct", data)
         .then((res) => {
           const { product } = res.data;
-          console.log(res.data, 5555);
+          console.log(res.data);
           addProductToState(product);
           this.setState({
             productId: "",
             name: "",
             price: "",
             description: "",
             image: "",
+            category: "",
             isOpen: false,
           });
         })
@@ -62,12 +54,15 @@ export default class Modal extends Component {
   };
 
   updateProduct = (id) => {
-    const { name, price, description, image } = this.state;
-      const data = { name, price, description, image };
+    const { updateProductState } = this.props;
+
+    const { name, price, description, image, category } = this.state;
+      const data = { name, price, description, image, category };
       console.log(this.state);
       axios
         .post(`/api/v1/updateProduct/${id}`, data)
         .then((res) => {
+          updateProductState(id);
           this.setState({
             name: "",
             price: "",
@@ -80,7 +75,8 @@ export default class Modal extends Component {
   };
 
   render() {
-    const { errorMsg, name, description, price, image } = this.state;
+    const { errorMsg, name, description, price, image,category } = this.state;
+    const categories = ['Select Category','Men', 'Women', 'Kids'];
     const {
       idUpdate,
       modalOpened,
@@ -104,20 +100,22 @@ export default class Modal extends Component {
               Close
             </a>
             <h3>{modalOpened}</h3>
-
+<form>
             <input
               placeholder="Product Name"
               type="text"
               name="name"
               value={name || nameUpdate}
               onChange={this.handleChange}
+              required
             />
             <input
               placeholder="Product Price (in USD)"
               type="number"
               name="price"
               value={price || priceUpdate}
               onChange={this.handleChange}
+              required
             />
             <textarea
               placeholder="Product Description"
@@ -127,24 +125,38 @@ export default class Modal extends Component {
               name="description"
               value={description || descriptionUpdate}
               onChange={this.handleChange}
+              required
             ></textarea>
+              <select
+                name="category"
+                value={category}
+                onChange={this.handleChange}
+                children={categories && categories.map((category) => {
+                  return <option value={category}>{category}</option>
+                })}
+              />
             <input
               placeholder="Product Image"
-              type="text"
+              type="url"
               name="image"
               value={image || imageUpdate}
               onChange={this.handleChange}
               required
             />
+
             {errorMsg ? <p className="error-message">{errorMsg}</p> : null}
             <button
               onClick={() => {
-                this.addProduct();
-                // this.updateProduct(idUpdate);
+                if( idUpdate ) {
+                  this.updateProduct(idUpdate);
+                } else {
+                  this.addProduct();
+                }
               }}
             >
               {modalOpened}
             </button>
+            </form>
           </div>
         </div>
       </>

client/src/components/Modal/style.scss

@@ -73,7 +73,7 @@ font-family: poppins;
   }
 
   .modal-content  {
-    input, textarea {
+    input, textarea,select {
       width: 100%;
       padding: 0.5em;
       border: 1px solid #ccc;

client/src/components/Product/ProductCard.jsx

@@ -37,10 +37,14 @@ export default class ProductCard extends Component {
   }
   render() {
 
-    const { name, price, imgLink, buttons, handleDelete, handleGetDataForUpdate,id } = this.props;
+
+    const { name, price, imgLink,category, buttons, handleDelete, handleGetDataForUpdate,id } = this.props;
+
     const { addedToCart } = this.state;
+    console.log(this.props);
 
     return (
+
       <div className="p-card ">
         <img className="product-img" src={imgLink} alt="product" />
         <div className="product-btn">
@@ -51,8 +55,15 @@ export default class ProductCard extends Component {
 
         </div>
         <div className="container">
-          <h3 className="product-name" onClick={(e) => { e.preventDefault();
+
+         <div className="product-dd">
+         <h3 className="product-name" onClick={(e) => { e.preventDefault();
           window.location.href=`/product/${id}`;}}>{name}</h3>
+                    <p className="product-category">{category}</p>
+         </div>
+
+
+
 
           <p className="product-price">${(+price).toFixed(0)}</p>
 

client/src/components/Product/style.css

@@ -3,6 +3,8 @@
 .p-card {
   position: relative;
   width: 270px;
+  margin: 20px 0;
+
 }
 
 .product-img {
@@ -21,10 +23,26 @@
   text-align: center;
   letter-spacing: -0.31px;
 }
+.product-dd{
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+}
+.product-category {
+  background: #ff4f048a;
+  padding: 3px;
+  color: white;
+  border-radius: 17px;
+  text-align: center;
+  letter-spacing: -0.31px;
+}
 .product-name {
   font-family: "Poppins", sans-serif;
   text-align: left;
   font-size: 1rem;
+  margin-right: 10px;
+
 }
 
 .container {

client/src/components/header/index.jsx

@@ -8,8 +8,11 @@ import NavigationMenu from "./downHeader/NavigationMenu";
 import "./upperHeader/upperHeader.css";
 
  const Header = ({handleSearch, itemsOfCart}) => {
+
   return (
+    <>
     <div className="Header">
+
     <div className="upper__header">
       <Logo />
       <SearchBar handleSearch = {handleSearch}/>
@@ -21,6 +24,10 @@ import "./upperHeader/upperHeader.css";
       <NavigationMenu />
     </div>
   </div> 
+  <div className='headermargin'></div>
+
+  </>
+
    )
 }
 export default Header;

client/src/components/header/upperHeader/upperHeader.css

@@ -11,13 +11,22 @@
   padding: 0.5rem 2rem;
   display: flex;
   flex-direction: column;
+  width: 100%;
+  background: white;
+  z-index: 999;
+  position: fixed;
+}
+.headermargin{
+  margin-top: 136px;
 }
-
 .upper__header {
   width: 100%;
+
   display: flex;
   justify-content: space-between;
   align-items: center;
+
+
 }
 
 .logo {