la-flowerita 0.1.0

package/src/components/Catalog.js

@@ -0,0 +1,118 @@
+//components/ProductList.js
+
+import React, { Component } from "react";
+import Product from "./Product";
+import NewProductModal from "./NewProductModal";
+import "../css/catalog.css";
+import { FaPlus } from "react-icons/fa";
+import { FiRefreshCcw } from "react-icons/fi";
+import LoadingIndicator from "./Spinner";
+import { usePromiseTracker, trackPromise } from "react-promise-tracker"; 
+class ProductList extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      products: false,
+      type: false,
+      wishlist: [],
+      showModal:false
+    };
+  }
+
+  componentDidMount(){
+    var type = this.state.type ? this.state.type : "All";
+    var options = {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body:JSON.stringify({type: type})
+    };
+    console.log(type);
+    trackPromise(
+    fetch("/getCatalog", options).then(res => res.json())
+    .then((result) => {
+      this.setState({ products: result.products });
+      // console.log(this.state.products);
+    }));
+    options = {
+      method: "GET",
+      headers: { "Content-Type": "application/json" },
+  };
+  trackPromise(
+    fetch("/getCurrentWishlist", options).then(res => res.json())
+    .then((result) => {
+      console.log(result.wishlist.products[0]);
+      this.setState({ wishlist: result.wishlist.products.map(p => p.id) });
+    }));
+  }
+
+  componentDidUpdate = async(prevProps,prevState) =>  {
+    if (this.state.type !== prevState.type) {
+    console.log('type changed');
+    var type = this.state.type ? this.state.type : "All";
+    var options = {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body:JSON.stringify({type: type})
+    };
+    console.log(type);
+    trackPromise(
+    fetch("/getCatalog", options).then(res => res.json())
+    .then((result) => {
+      this.setState({ products: result.products });
+      console.log(this.state.products);
+    }));
+ }
+}
+  refreshPage() {
+    window.location.reload(false);
+  }
+
+  async changeType(e){
+    var type = e.target.value;
+    this.setState({type:type, products:false});
+  }
+
+  render() {
+    return (
+      <div className="container main-content">      
+      <div className="catalog-btn" role="group" aria-label="Basic example">
+      <button type="button" onClick={() => this.refreshPage()} title="Refresh"><FiRefreshCcw/></button>
+      <button type="button" onClick={() => this.setState({showModal:true})} title="Add New Product"><FaPlus />{this.state.showModal? <NewProductModal showModal={true}/>:""}</button>
+      <button style={{width:"100px", height:"40px"}} type="button" onClick={(e) => this.changeType(e)} title="Show Flowers Only" value="Flower" >Flowers</button>
+      <button style={{width:"120px", height:"40px"}} type="button" onClick={(e) => this.changeType(e)} title="Show Bouquests Only" value="Bouquest">Bouquests</button>
+      <button className="sortersButtons" type="button" onClick={(e) => this.changeType(e)} title="Show All products" value="All">All</button>
+      </div>
+      <LoadingIndicator/>
+        { this.state.products && this.state.products.length > 0 ? 
+        this.state.products.map((product) => {
+          return (
+            <Product
+              id={product._id}
+              image={product.image}
+              name={product.name}
+              color={product.color}
+              price={product.price}
+              description={product.description}
+              type={product.type}
+              onUpdateCart={(num) => this.props.onUpdateCart(num)}
+              onUpdateWishlist={(num) => this.props.onUpdateWishlist(num)}
+              isInWishList={this.state.wishlist.indexOf(product._id) == -1 ? false: true}
+              maxAmount={product.maxAmount}
+              sellerName={product.sellerId}
+            />
+          );
+        }):""}{ this.state.products && this.state.products.length == 0 ? 
+        <h1> There are no products for this category</h1>
+      :""}
+        <br />
+        <br />
+        <br />
+        <br />
+      </div>
+    );
+  }
+}
+
+export default ProductList;
+

package/src/components/Chat.js

@@ -0,0 +1,77 @@
+import React, { useEffect, useState } from "react";
+import ScrollToBottom from "react-scroll-to-bottom";
+
+function Chat({ socket, username, room }) {
+    const [currentMessage, setCurrentMessage] = useState("");
+    const [messageList, setMessageList] = useState([]);
+
+    const sendMessage = async () => {
+        if (currentMessage !== "") {
+            const messageData = {
+                room: room,
+                author: username,
+                message: currentMessage,
+                time:
+                    new Date(Date.now()).getHours() +
+                    ":" +
+                    new Date(Date.now()).getMinutes(),
+            };
+
+            await socket.emit("send_message", messageData);
+            setMessageList((list) => [...list, messageData]);
+            setCurrentMessage("");
+        }
+    };
+
+    useEffect(() => {
+        socket.on("receive_message", (data) => {
+            setMessageList((list) => [...list, data]);
+        });
+    }, [socket]);
+
+    return (
+        <div className="chat-window">
+            <div className="chat-header">
+                <p>Live Chat</p>
+            </div>
+            <div className="chat-body">
+                <ScrollToBottom className="message-container">
+                    {messageList.map((messageContent) => {
+                        return (
+                            <div
+                                className="message"
+                                id={username === messageContent.author ? "you" : "other"}
+                            >
+                                <div>
+                                    <div className="message-content">
+                                        <p>{messageContent.message}</p>
+                                    </div>
+                                    <div className="message-meta">
+                                        <p id="time">{messageContent.time}</p>
+                                        <p id="author">{messageContent.author}</p>
+                                    </div>
+                                </div>
+                            </div>
+                        );
+                    })}
+                </ScrollToBottom>
+            </div>
+            <div className="chat-footer">
+                <input
+                    type="text"
+                    value={currentMessage}
+                    placeholder="Hey..."
+                    onChange={(event) => {
+                        setCurrentMessage(event.target.value);
+                    }}
+                    onKeyPress={(event) => {
+                        event.key === "Enter" && sendMessage();
+                    }}
+                />
+                <button onClick={sendMessage}>&#9658;</button>
+            </div>
+        </div>
+    );
+}
+
+export default Chat;

package/src/components/Contact.js

@@ -0,0 +1,48 @@
+import React, { Component } from "react";
+import '../css/contact.css';
+
+class Contact extends Component {
+  render() {
+    return (
+        <div className="bg-contact100">
+        <div className="container-contact100">
+          <div className="wrap-contact100">
+            <div className="contact100-pic js-tilt" data-tilt>
+              <img src="images/contact-us.png" alt="IMG"/>
+            </div>
+            <form className="contact100-form validate-form">
+                      <span className="contact100-form-title">
+                          Get in touch
+                      </span>
+              <div className="wrap-input100 validate-input" data-validate="Name is required">
+                <input className="input100" type="text" name="name" placeholder="Name"/>
+                <span className="focus-input100"></span>
+                <span className="symbol-input100">
+                              <i className="fa fa-user" aria-hidden="true"></i>
+                          </span>
+              </div>
+              <div className="wrap-input100 validate-input" data-validate="Valid email is required: ex@abc.xyz">
+                <input className="input100" type="text" name="email" placeholder="Email"/>
+                <span className="focus-input100"></span>
+                <span className="symbol-input100">
+                              <i className="fa fa-envelope" aria-hidden="true"></i>
+                          </span>
+              </div>
+              <div className="wrap-input100 validate-input" data-validate="Message is required">
+                <textarea className="input100" name="message" placeholder="Message"></textarea>
+                <span className="focus-input100"></span>
+              </div>
+              <div className="container-contact100-form-btn">
+                <button className="contact100-form-btn">
+                  Send
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      </div>     
+    );
+  }
+}
+ 
+export default Contact;

package/src/components/Dashboard.js

@@ -0,0 +1,13 @@
+import React, { Component } from "react";
+
+class Dashboard extends Component {
+  render() {
+    return (
+      <div>
+        <h1>Welcome to The Flower Shop!</h1>
+      </div>
+    );
+  }
+}
+
+export default Dashboard;

package/src/components/DetailsProductModal.js

@@ -0,0 +1,362 @@
+import React, { Component } from "react";
+import { confirmAlert } from 'react-confirm-alert'; // Import
+import 'react-confirm-alert/src/react-confirm-alert.css'; // Import css
+import Button from "react-bootstrap/Button";
+import Modal from "react-bootstrap/Modal";
+import { NavLink } from "react-router-dom";
+import { FaPlus } from "react-icons/fa";
+import '../css/newProductModal.css';
+import withAuth from "./Auth.js";
+import {FaEye, FaPen, FaTrash } from "react-icons/fa";
+import swal from 'sweetalert';
+import LoadingIndicator from "./Spinner";
+import { usePromiseTracker, trackPromise } from "react-promise-tracker"; 
+class DetailsProductModal extends Component {
+  constructor(props) {
+    super(props);
+    console.log(props);
+    this.state = {
+      showModal: props.showModal,
+      isUpdate: false,
+      name: props.name,
+      price: props.price,
+      description: props.description,
+      color: props.color,
+      type: props.type,
+      id: props.id,
+      image:props.image,
+      picture: false,
+      src: false,
+      maxAmount:props.maxAmount,
+      ERROR: "",
+    };
+  }
+
+  handleClose = () => {
+    this.setState({ showModal: false });
+  };
+  handleShow = () => {
+    this.setState({ showModal: true });
+  };
+  changeUpdate = () => {
+    this.setState({ isUpdate: !this.state.isUpdate });
+  };
+  
+  showConfirmDialog = () => {
+    this.handleClose();
+    confirmAlert({
+      title: 'Confirm to submit',
+      message: 'Are you sure to do this.',
+      buttons: [
+        {
+          label: 'Yes',
+          onClick: () => this.deleteProduct()
+        },
+        {
+          label: 'No',
+        }
+      ]
+    });
+  };
+  async deleteProduct(){
+    var options = {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({id: this.state.id}),
+    };
+    trackPromise(
+      fetch("/deleteProduct", options).then(
+      (res) => {
+        console.log(res);
+        if (res.status == 200) {
+          console.log("deleting product was successful");
+        } else if (res.status == 404) {
+          this.setState({ ERROR: "Product does not exist already" });
+        } else if (res.status == 400) {
+          this.setState({ ERROR: "There was an error. Please try again" });
+        } else if (res.status == 500) {
+          this.setState({ ERROR: "There was an error on our side" });
+        }
+      },
+      (error) => {
+        this.setState({
+          ERROR: error,
+        });
+      }
+    ));
+    swal("Deleted!", "Product deleted successfully!", "success");
+  }
+  async updateProduct() {
+    var name = this.state.name;
+    var price = this.state.price;
+    var description = this.state.description;
+    var color = this.state.color;
+    var type = this.state.type;
+    var maxAmount = this.state.maxAmount;
+    if (
+      name == "" ||
+      price == "" ||
+      description == "" ||
+      color == "" ||
+      type == "" || 
+      maxAmount == ""
+      ) {
+      this.setState({ ERROR: "Please fill all the fields." });
+      return;
+    }
+    var product = {
+      name: name,
+      color: color,
+      description: description,
+      price: price,
+      type: type,
+      maxAmount: maxAmount,
+      _id: this.state.id
+    };
+
+    var options = {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({product: product}),
+    };
+    trackPromise(
+      fetch("/updateProduct", options).then(
+      (res) => {
+        console.log(res);
+        if (res.status == 200) {
+          console.log("updating product was successful");
+        } else if (res.status == 400) {
+          this.setState({ ERROR: "There was an error. Please try again" });
+        } else if (res.status == 500) {
+          this.setState({ ERROR: "There was an error on our side" });
+        }
+      },
+      (error) => {
+        this.setState({
+          ERROR: error,
+        });
+      }
+    ));
+    if (!this.state.picture) {
+      swal("Updated!", "Product updated successfully!", "success");
+    }else{
+    var myFormData = new FormData();
+    myFormData.append('file', this.state.picture);
+    myFormData.append('id', this.state.id);
+
+    const response = await fetch("/addProductPicture", {
+      method: "POST",
+      body: myFormData,
+    });
+    if (response.status == 200) {
+      swal("Updated!", "Product updated successfully!", "success");
+    }
+  }
+  }
+  renderPreview() {
+    if(this.state.src) {
+      return (
+        <img src={this.state.src} style={{"maxWidth": "inherit", "maxHeight": "inherit"}}/>
+      );
+    } else {
+      return (
+        <p>
+          No Preview
+        </p>
+      );
+    }
+  }
+
+  handlePictureSelected(event) {
+    var picture = event.target.files[0];
+    var src     = URL.createObjectURL(picture);
+
+    this.setState({
+      picture: picture,
+      src: src
+    });
+  }
+
+  inputsHandler = (e) => {
+    this.setState({ [e.target.name]: e.target.value });
+  };
+  radioHandler = (e) => {
+    this.setState({
+      [e.target.name]: document.querySelector(
+        `input[name=${e.target.name}]:checked`
+      ).id,
+    });
+  };
+  colorSelected = (e) => {
+    this.setState({
+        color : e.target.value});
+  };
+  render() {
+    return (
+      <div>
+        <Modal
+          style={{ opacity: 1 }}
+          show={this.state.showModal}
+          onHide={() => this.handleClose()}
+        >
+          
+          <Modal.Header>
+            <Modal.Title>
+              <div className="modal-header">
+              <img style={{"maxWidth": "inherit", "maxHeight": "50%","borderRadius":"50%"}} src={this.props.path} 
+                onError={( e ) => {
+                  e.target.src='https://www.freeiconspng.com/uploads/no-image-icon-11.PNG';
+                  e.target.onerror = null; // prevents looping
+                }}
+                alt={this.state.name} height="150" />
+                <h5 className="modal-title" id="exampleModalLabel">
+                  {this.state.name}
+                </h5>
+              </div>
+            </Modal.Title>
+          </Modal.Header>
+          <Modal.Body>
+          <LoadingIndicator/>
+            <form key={this.state.id}>
+              <div className="mb-3">
+                <input
+                  type="text"
+                  name="name"
+                  id="name"
+                  className="form-control"
+                  placeholder="Name of the flower"
+                  onChange={this.inputsHandler}
+                  defaultValue={this.state.name}
+                  required
+                  autoFocus
+                  disabled = {this.state.isUpdate? "" : "disabled"}
+                />
+              </div>
+              <div className="mb-3" style={{display:this.state.isUpdate? "block" : "none"}}>
+                Pick a color
+                <input defaultValue={this.state.color} onChange={this.colorSelected} type="color" disabled = {this.state.isUpdate? "" : "disabled"}/>
+              </div>
+              <div className="mb-3" style={{display:!this.state.isUpdate? "block" : "none"}}>
+                <input type="color" value={this.state.color} disabled = "disabled"/>
+              </div>
+              <div className="mb-3">
+                <input
+                  type="text"
+                  name="description"
+                  id="description"
+                  className="form-control"
+                  placeholder="Description"
+                  defaultValue={this.state.description}
+                  onChange={this.inputsHandler}
+                  required
+                  disabled = {this.state.isUpdate? "" :"disabled"}
+                />
+              </div>
+              <div className="mb-3">
+                <input
+                  type="number"
+                  step="0.01"
+                  name="price"
+                  id="price"
+                  className="form-control"
+                  placeholder="Price"
+                  onChange={this.inputsHandler}
+                  defaultValue={this.state.price}
+                  required
+                  disabled = {this.state.isUpdate? "" :"disabled"}
+                />
+              </div>
+              <div className="mb-3">
+                <input
+                  type="number"
+                  name="maxAmount"
+                  id="maxAmount"
+                  className="form-control"
+                  placeholder="Max Amount"
+                  onChange={this.inputsHandler}
+                  defaultValue={this.state.maxAmount}
+                  required
+                  disabled = {this.state.isUpdate? "" :"disabled"}
+                />
+              </div>
+              <div className="mb-3" style={{display: this.state.isUpdate? "none" : "block"}}>
+              <input
+                  type="text"
+                  name="type"
+                  id="type"
+                  className="form-control"
+                  placeholder="Type"
+                  defaultValue={this.state.type}
+                  onChange={this.inputsHandler}
+                  required
+                  disabled = "disabled" 
+                  />
+                  </div>
+                  <div className="mb-3" style={{display:this.state.isUpdate? "block" : "none"}}>
+                <input
+                  type="radio"
+                  name="type"
+                  id="Bouquet"
+                  onChange={this.radioHandler}
+                  checked = {this.state.type == "Bouquet" ? "checked" : null}
+                />
+                <label for="rd1">Bouquet</label>
+                <input
+                  type="radio"
+                  name="type"
+                  id="Flower"
+                  onChange={this.radioHandler}
+                  checked = {this.state.type == "Flower" ? "checked" : null}
+                />
+                <label for="rd2">Flower</label>
+              </div>
+              <div style={{display:this.state.isUpdate? "block" : "none"}} className="mb-3">
+                <h2>Upload Product Image</h2>
+                <input 
+                  name="file"  
+                  id="file"
+                  type="file"
+                  onChange={this.handlePictureSelected.bind(this)}
+                />
+                <br/>
+                <div style={{"maxWidth": "80%", "maxHeight": "80%"}}>
+                {this.renderPreview()}
+                </div>
+                <hr/>
+              </div>
+            </form>
+          </Modal.Body>
+          <Modal.Footer>
+            <h5>{this.state.ERROR}</h5>
+            <div className="modal-footer">
+            <a
+              role="button"
+              style={{display: this.state.isUpdate? "block" : "none"}}
+              onClick={() => this.changeUpdate()}
+            >
+              <FaEye/>
+            </a>
+            <a
+              role="button"
+              style={{display: !this.state.isUpdate? "block" : "none"}}
+              onClick={() => this.showConfirmDialog()}
+            >
+              <FaTrash/>
+            </a>
+            <a
+              role="button"
+              style={{display: !this.state.isUpdate? "block" : "none"}}
+              onClick={() => this.changeUpdate()}
+            >
+              <FaPen/>
+            </a>
+            <button onClick={() => this.updateProduct()} className="button-17" style={{display: this.state.isUpdate? "block" : "none"}}>Update</button>
+            </div>
+          </Modal.Footer>
+        </Modal>
+      </div>
+    );
+  }
+}
+
+export default DetailsProductModal;