la-flowerita 0.1.0

package/src/components/Product.js

@@ -0,0 +1,158 @@
+import { React, Component } from "react";
+import sampleImage from "../logo.svg";
+import "../css/catalog.css";
+// import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { FaHeart, FaRegHeart, FaShoppingCart, FaEye } from "react-icons/fa";
+import DetailsProductModal from "./DetailsProductModal.js";
+import swal from "sweetalert";
+import LoadingIndicator from "./Spinner";
+import { usePromiseTracker, trackPromise } from "react-promise-tracker"; 
+class Product extends Component {
+  constructor(props) {
+    super(props);
+    console.log(props);
+    this.state = {
+      isInWishList: props.isInWishList,
+      id: props.id,
+      name: props.name,
+      image: props.image,
+      color: props.color,
+      price: props.price,
+      description: props.description,
+      type: props.type,
+      maxAmount: props.maxAmount,
+      onUpdateCart: props.onUpdateCart,
+      onUpdateWishlist: props.onUpdateWishlist,
+      showModal:false
+    };
+  }
+  
+  async intoCart(props) {
+    console.log(this.state);
+      var options = {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ productId: this.state.id }),
+      };
+        await fetch("/addNewProductToCart", options).then(res => res.json()).then(
+        (result) => {
+          if (result.status == 200) {
+            this.state.onUpdateCart(result.cart.products.length);
+            swal("Success!", "Product Added To Cart!", "success");
+          }
+        },
+        (error) => {
+          console.log(error);
+        }
+      );
+  }
+  async intoWishList() {
+    console.log(this.state);
+      var options = {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ productId: this.state.id }),
+      };
+        await fetch("/addNewProductToWishlist", options).then(res => res.json()).then(
+        (result) => {
+          if (result.status == 200) {
+            this.state.onUpdateWishlist(result.wishlist.products.length);
+            this.setState({ isInWishList: true });
+            swal("Success!", "Product Added To Wish List!", "success");
+          }
+        },
+        (error) => {
+          console.log(error);
+        }
+      );
+  }
+  async outOfWishList() {
+    console.log(this.state);
+      var options = {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ productId: this.state.id }),
+      };
+        await fetch("/deleteProductFromWishlist", options).then(res => res.json()).then(
+        (result) => {
+          if (result.status == 200) {
+            this.state.onUpdateWishlist(result.wishlist.products.length);
+            this.setState({ isInWishList: false });
+            swal("Success!", "Product Removed From Wish List!", "success");
+          }
+        },
+        (error) => {
+          console.log(error);
+        }
+      );  }
+  arrayBufferToBase64(buffer) {
+    var binary = "";
+    var bytes = [].slice.call(new Uint8Array(buffer.data));
+    bytes.forEach((b) => (binary += String.fromCharCode(b)));
+    return window.btoa(binary);
+  }
+  render() {
+    var path =
+      "data:/" +
+      this.props.image.contentType +
+      ";base64," +
+      this.arrayBufferToBase64(this.props.image.data);
+    return (<div class="column">
+    <div class="product-img">
+      <img src={path} onError={(e) => {
+              e.target.src =
+                "https://www.freeiconspng.com/uploads/no-image-icon-11.PNG";
+              e.target.onerror = null; // prevents looping
+            }}/>
+    </div>
+    <div class="product-info">
+      <div class="product-text">
+        <h1>{this.props.name}</h1>
+        <h2>Seller {this.props.sellerName}</h2>
+        <p>{this.props.description}</p>
+      </div>
+      <div class="product-price-btn">
+        <p><span className=".product-span">{this.props.price}</span>$</p>
+          {this.state.isInWishList ? (
+            <button type="button"  onClick={() => this.outOfWishList()}>
+            <FaHeart
+              id="inWishList"
+              style={{ cursor: "pointer" }}
+            />
+                </button>
+          ) : (
+            <button type="button" onClick={() => this.intoWishList()} >
+            <FaRegHeart
+              id="outWishList"
+              style={{ cursor: "pointer" }}
+            />
+                </button>
+          )}
+    <button type="button" onClick={() => this.intoCart(this.props)}>
+      <FaShoppingCart
+          style={{ cursor: "pointer" }}
+        />
+    </button>
+    <button  type="button" onClick={() => this.setState({showModal:true})}>
+        <FaEye/>
+        {this.state.showModal? <DetailsProductModal id={this.props.id}
+            image={this.props.image}
+            path={path}
+            name={this.props.name}
+            color={this.props.color}
+            price={this.props.price}
+            description={this.props.description}
+            type={this.props.type}
+            maxAmount={this.state.maxAmount}
+            sellerName={this.state.sellerName}
+            showModal={true}
+          />: ""}
+      </button>
+      </div>
+    </div>
+  </div>);
+
+  }
+}
+
+export default Product;

package/src/components/ResetPassword.js

@@ -0,0 +1,211 @@
+import React, { Component } from "react";
+import Button from "react-bootstrap/Button";
+import { Route, NavLink, HashRouter, Routes } from "react-router-dom";
+import "../css/resetPassword.css"
+import LoadingIndicator from "./Spinner";
+import { usePromiseTracker, trackPromise } from "react-promise-tracker"; 
+import swal from 'sweetalert';
+
+class ResetPassword extends Component {
+  constructor() {
+    super();
+    this.state = {
+      emailSent: false,
+      emailReceived: false,
+      tokenChecked: false,
+      id: null,
+      ERROR: ""
+    };
+  }
+
+  resetPassword = async () => {
+    // this.setState({ [e.target.name]: e.target.value });
+    let email = document.getElementById("email").value;
+    var options = {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({email:email}),
+    };
+    trackPromise(
+      fetch("/emailForResetPassword", options)
+    .then(
+      (res) => {
+        console.log(res);
+        if (res.status == 200) {
+          console.log("email was sent successfully!");
+          this.setState({ emailSent: true });
+        }
+        else if (res.status == 404){
+          console.log("email was not sent!");
+          this.setState({ ERROR: "This email is not one of our users" });
+        }
+      },
+      // Note: it's important to handle errors here
+      // instead of a catch() block so that we don't swallow
+      // exceptions from actual bugs in components.
+      (error) => {
+        this.setState({
+          ERROR: error
+        });
+      }
+    ))
+     };
+
+  checkToken = async () => {
+    let token = document.getElementById("token").value;
+    var options = {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({token:token}),
+    };
+    trackPromise(
+      fetch("/checkToken", options).then(res => res.json())
+    .then(
+      (res ) => {
+        console.log(res);
+        if (res.status == 200) {
+          console.log("token is good!");
+          this.setState({id:res.id, tokenChecked: true });
+          }
+        else if (res.status == 404){
+          console.log("token not good!");
+          this.setState({ ERROR: "This is not correct. Please try again" });
+        }
+      },
+      // Note: it's important to handle errors here
+      // instead of a catch() block so that we don't swallow
+      // exceptions from actual bugs in components.
+      (error) => {
+        this.setState({
+          ERROR: error
+        });
+      }
+    ))
+  };
+
+  updatePassword = async () => {
+    // this.setState({ [e.target.name]: e.target.value });
+    let password = document.getElementById("password").value;
+    let repass = document.getElementById("repass").value;
+    if(password != repass){
+        this.setState({ ERROR: "This passwords are not the same" });
+        return;
+    }
+    var options = {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({password:password, id: this.state.id}),
+    };
+    trackPromise(
+      fetch("/updatePassword", options)
+    .then(
+      (res) => {
+        console.log(res);
+        if (res.status == 200) {
+          console.log("update password was successful!");
+          swal("Successful!","update password was successful! Please login.", "success")
+          document.location.href = "/";
+        }
+      },
+      // Note: it's important to handle errors here
+      // instead of a catch() block so that we don't swallow
+      // exceptions from actual bugs in components.
+      (error) => {
+        this.setState({
+          ERROR: error
+        });
+      }
+    ))
+     };
+  render() {
+    if(!this.state.emailSent){
+    return (<GetEmailForReset resetPasswordFunction={this.resetPassword} ERROR={this.state.ERROR}></GetEmailForReset>
+    );
+  }
+      else if (!this.state.emailReceived && !this.state.tokenChecked){
+        return (<GetToken checkTokenFunction={this.checkToken} ERROR={this.state.ERROR}></GetToken>);   
+    
+  }
+  else if(this.state.tokenChecked){
+    return (<UpdatePassword updatePasswordfunction={this.updatePassword} ERROR={this.state.ERROR}></UpdatePassword>);   
+
+  }
+}
+}
+
+class GetEmailForReset extends Component{
+  
+  render(){
+    return (
+      <div id="divForResetPassword" className="container d-flex justify-content-center align-items-center vh-100">
+            <LoadingIndicator/>
+           <div className="bg-white text-center p-5 mt-3 center">
+              <h3>Forgot Password </h3>
+              <p>Please enter your email and we will send you a link to reset your password.</p>
+              <form className="pb-3" action="#">
+                 <div className="form-group">
+                    <input name="email" id="email" type="email" className="form-control" placeholder="Your Username*" required/>
+                 </div>
+                 <h5>{this.props.ERROR}</h5>
+              </form>
+              <button onClick={() => this.props.resetPasswordFunction()} type="button" className="btn">Reset Password</button>
+           </div>
+        </div>);
+  }
+  }
+  
+class GetToken extends Component{
+    
+    render(){
+      return(
+        <div className="container d-flex justify-content-center align-items-center vh-100">
+              <LoadingIndicator/>
+        <div className="bg-white text-center p-5 mt-3 center">
+           <h3>Forgot Password </h3>
+           <p>Please enter the token you got to your mail.</p>
+           <form className="pb-3" action="#">
+              <div className="form-group">
+                 <input name="token" id="token" type="text" className="form-control"  required/>
+              </div>
+              <h5>{this.props.ERROR}</h5>
+           </form>
+           <button onClick={() => this.props.checkTokenFunction()} type="button" className="btn">Submit</button>
+           {/* <NavLink
+                style={{cursor:"pointer"}}
+                onClick={() => this.checkToken()}
+                to="/updatePassword"
+              >
+                Submit
+              </NavLink> */}
+        </div>
+     </div>);
+     }
+    }
+  
+  
+class UpdatePassword extends Component{
+  
+    render() {
+      return (
+      <div className="container d-flex justify-content-center align-items-center vh-100">
+                 <LoadingIndicator/>
+           <div className="bg-white text-center p-5 mt-3 center">
+              <h3>Change Password </h3>
+              <p>Please enter a new paswword.</p>
+              <form className="pb-3" action="#">
+                 <div className="form-group">
+                    <input name="password" id="password" type="password" className="form-control" placeholder="Your Password*" required/>
+                 </div>
+                 <div className="form-group">
+                    <input name="repass" id="repass" type="password" className="form-control" placeholder="Write It Again*" required/>
+                 </div>
+                 <h5>{this.props.ERROR}</h5>
+              </form>
+              <button onClick={() => this.props.updatePasswordfunction()} type="button" className="btn">Save</button>
+           </div>
+        </div>
+      );
+    }
+  }
+
+export default ResetPassword;

package/src/components/ShoppingCart.js

@@ -0,0 +1,198 @@
+import {React, Component} from 'react';
+import sampleImage from '../logo.svg';
+import '../css/shoppingCart.css';
+import { FaHeart, FaRegHeart, FaShoppingCart, FaEye } from "react-icons/fa";
+import OrderedProduct from "./OrderedProduct.js"
+import swal from "sweetalert";
+import { Container, Table, Row, Button } from "react-bootstrap";
+import LoadingIndicator from "./Spinner";
+import { usePromiseTracker, trackPromise } from "react-promise-tracker"; 
+class ShoppingCart extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      totalPrice: 0,
+      products: [],
+      loggedIn: false,
+      onUpdateCart: props.onUpdateCart,
+    };
+  }
+  componentDidMount = async () => {
+    var options = {
+      method: "GET",
+      headers: { "Content-Type": "application/json" },
+    };
+    trackPromise(
+      fetch("/getCurrentCart", options).then(res => res.json()).then(
+      (result) => {
+        console.log(result)
+        if (result.status == 200) {
+          this.setState({
+            products: result.cart.products,
+            totalPrice: result.cart.products.reduce(
+              (acc, item) => acc + item.price * item.quantity,
+              0
+            ),
+          });
+        }
+      },
+      (error) => {
+        console.log(error);
+      }
+    ));
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    if (this.state.products.length != prevState.products.length) {
+      this.state.onUpdateCart(this.state.products.length);
+    }
+  }
+
+  async intoWishList() {}
+  async deleteFromCart(id) {
+    swal({
+      title: "Are you sure?",
+      text: "Do you want to delete this product from cart?",
+      icon: "warning",
+      buttons: true,
+      dangerMode: true,
+    }).then((willDelete) => {
+      if (willDelete) {
+        var options = {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({productId: id})
+        };
+        trackPromise(
+          fetch("/deleteProductFromCart", options).then(res => res.json()).then(
+          (result) => {
+            console.log(result)
+            if (result.status == 200) {
+              this.setState({
+                products: result.cart.products,
+                totalPrice: result.cart.products.reduce(
+                  (acc, item) => acc + item.price * item.quantity,
+                  0
+                ),
+              });
+              swal("Success","Product Deleted Successfully From Cart", "success")
+            }
+          },
+          (error) => {
+            console.log(error);
+          }
+        ));
+      }
+      })
+    }
+  async payNow(){
+    if(this.state.products.length < 1){
+      swal("Error", "Please add atleast one product to the cart","error")
+      return;
+    }
+    var options = {
+      method: "GET",
+      headers: { "Content-Type": "application/json" },
+    };
+    trackPromise(
+      await fetch("/payNow", options).then(res => {
+      if(res.status == 200){
+          swal("Success","Payment is successful","success");
+          this.setState({products:[], totalPrice: 0});
+          this.onUpdateCart(this.state.products.length);
+    }
+      else{
+        swal("Error","There was an error","error");
+      }
+    }))
+
+  }
+  async updateQuantity(e, id) {
+    var quantity = Number(e.target.value);
+    var product = this.state.products.filter(p => p.id == id);
+    product = product[0]    
+    product.quantity = quantity;
+    var products = this.state.products;
+    products.map((p) => {if(p.id == id) p = product})
+    var options = {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body:JSON.stringify({product:{productId: product.id, price: product.price, quantity: product.quantity}})
+    };
+      fetch("/updateProductInCart", options).then(res => res.json()).then(
+      (result) => {
+        console.log(result)
+        if (result.status == 200) {
+          this.setState({
+            products: result.cart.products,
+            totalPrice: result.cart.products.reduce(
+              (acc, item) => acc + item.price * item.quantity,
+              0
+            ),
+          });
+        }
+      },
+      (error) => {
+        console.log(error);
+      }
+    );
+  }
+
+  render() {
+    return (
+      <div className="productSlider mb-5 mt-5">
+        <Container>
+          <h5 className="text-left mb-4 ps-2">Cart List</h5>
+          <Row>
+            <div className="col-9 cartShow">
+              <Table bordered hover responsive="sm">
+                <thead>
+                  <tr>
+                    <th>Product Img</th>
+                    <th>Name</th>
+                    <th>Price</th>
+                    <th>Quantity</th>
+                    <th>Sub Total</th>
+                    <th>Delete</th>
+                  </tr>
+                </thead>
+                <tbody>
+                <LoadingIndicator/>
+                  {this.state.products.map((product, idx) => (
+                    <OrderedProduct
+                      key={product.id}
+                      isCart={true}
+                      product={product}
+                      onDelete={(id) => this.deleteFromCart(id)}
+                      onUpdate={(e, id) => this.updateQuantity(e, id)}
+                    />
+                  ))}
+                </tbody>
+              </Table>
+            </div>
+            <div className="col-3 cartSum boxShadaw bg-light p-4">
+              <h5 className="text-left mb-4 pb-2">Cart Price</h5>
+              <div className="d-flex justify-content-between mb-3">
+                <h6 className="fw-normal">Tax :</h6>
+                <span>{(this.state.totalPrice * (17 / 117)).toFixed(2)}$</span>
+              </div>
+              <div className="d-flex justify-content-between mb-4">
+                <h6 className="fw-normal">SubTotal Price :</h6>
+                <span>{(this.state.totalPrice * (100 / 117)).toFixed(2)}$</span>
+              </div>
+              <div className="d-flex justify-content-between fw-bold">
+                <h6>Total Price :</h6>
+                <span>{this.state.totalPrice}$</span>
+              </div>
+              <Button  onClick={() => this.payNow()} variant="dark" size="md" className="mt-4 w-100">
+                pay now
+              </Button>
+            </div>
+          </Row>
+        </Container>
+      </div>
+    );
+  }
+}
+
+export default ShoppingCart;

package/src/components/SideNav.js

@@ -0,0 +1,76 @@
+//import useState hook to create menu collapse state
+import React, { useState } from "react";
+
+//import react pro sidebar components
+import {
+  ProSidebar,
+  Menu,
+  MenuItem,
+  SidebarHeader,
+  SidebarFooter,
+  SidebarContent
+} from "react-pro-sidebar";
+
+//import icons from react icons
+import { FaList, FaRegHeart } from "react-icons/fa";
+import {
+  FiHome,
+  FiLogOut,
+  FiArrowLeftCircle,
+  FiArrowRightCircle
+} from "react-icons/fi";
+import { RiPencilLine } from "react-icons/ri";
+import { BiCog } from "react-icons/bi";
+
+//import sidebar css from react-pro-sidebar module and our custom css
+import "react-pro-sidebar/dist/css/styles.css";
+import "../css/sideNav.css";
+
+const Header = () => {
+  //create initial menuCollapse state using useState hook
+  const [menuCollapse, setMenuCollapse] = useState(false);
+
+  //create a custom function that will change menucollapse state from false to true and true to false
+  const menuIconClick = () => {
+    //condition checking to change state from true to false and vice versa
+    menuCollapse ? setMenuCollapse(false) : setMenuCollapse(true);
+  };
+
+  return (
+    <>
+      <div id="header">
+        {/* collapsed props to change menu size using menucollapse state */}
+        <ProSidebar collapsed={menuCollapse}>
+          <SidebarHeader>
+            {/* <div className="logotext"> */}
+              {/* small and big change using menucollapse state */}
+              {/* <p>{menuCollapse ? "Logo" : "Big Logo"}</p> */}
+            {/* </div> */}
+            <div className="closemenu" onClick={menuIconClick}>
+              {/* changing menu collapse icon on click */}
+              {menuCollapse ? <FiArrowRightCircle /> : <FiArrowLeftCircle />}
+              </div>
+          </SidebarHeader>
+          <SidebarContent>
+            <Menu iconShape="square">
+              <MenuItem active={true} icon={<FiHome />}>
+                Home
+              </MenuItem>
+              <MenuItem icon={<FaList />}>Category</MenuItem>
+              <MenuItem icon={<FaRegHeart />}>Favourite</MenuItem>
+              <MenuItem icon={<RiPencilLine />}>Author</MenuItem>
+              <MenuItem icon={<BiCog />}>Settings</MenuItem>
+            </Menu>
+          </SidebarContent>
+          {/* <SidebarFooter>
+            <Menu iconShape="square">
+              <MenuItem icon={<FiLogOut />}>Logout</MenuItem>
+            </Menu>
+          </SidebarFooter> */}
+        </ProSidebar>
+      </div>
+    </>
+  );
+};
+
+export default Header;