From 7f9d16fbcb2161fb0d1588e4912d08bc6db225f6 Mon Sep 17 00:00:00 2001 From: Mpilo Mshengu Date: Fri, 15 Feb 2019 08:16:23 +0200 Subject: [PATCH 01/10] create product UI --- src/js/components/Products/Product.js | 247 ++++++++++++++++++++++++ src/js/components/Products/Product.scss | 61 ++++++ 2 files changed, 308 insertions(+) create mode 100644 src/js/components/Products/Product.js create mode 100644 src/js/components/Products/Product.scss diff --git a/src/js/components/Products/Product.js b/src/js/components/Products/Product.js new file mode 100644 index 0000000..7d3e24b --- /dev/null +++ b/src/js/components/Products/Product.js @@ -0,0 +1,247 @@ +import React, { Component } from "react"; +import Navbar from "../Navbar/Navbar"; +import "./Product.scss"; +import {storage} from "../firebase" + + +class Product extends Component { + constructor(props){ + super(props); + this.state ={ + Name:'', + CoverImageLocation:'', + Description:'', + Price:'', + Type:'', + SizeOption:'', + ColourOption:'' , + image:"", + url:'', + small:false, + medium:false, + large:false, + speedy:false, + color:false, + kyn:false, + count:10 + + } + + this.handleChange=this.handleChange.bind(this) + this.onChange=this.onChange.bind(this); + this.handleUpload= this.handleUpload.bind(this); + this.onSubmit=this.onSubmit.bind(this); + this.Small=this.Small.bind(this); + this.Medium=this.Medium.bind(this); + this.Large=this.Large.bind(this); + this.Speedy=this.Speedy.bind(this); + this.KYN= this.KYN.bind(this); + this.Color=this.Color.bind(this); + } + handleUpload=()=>{ + const {image}= this.state; + const uploadTask =storage.ref(`images/${image.name}`).put(image) + uploadTask.on('state_changed', + (snapshot)=>{ +//progress function...... + },(error)=>{ + console.log(error) + //error function + },()=>{ + //complete function... + storage.ref('images').child(image.name).getDownloadURL().then(url=>{ + this.setState(url) + }) + }) + } + handleChange=e=>{ + + if(e.target.files[0]){ + const {image}= e.target.files[0]; + this.setState(()=>({image})); + } + } + //checkbox + handleChecked () { + this.setState({isChecked: !this.state.isChecked}); + } + onChange(e){ + this.setState({[e.target.name]:e.target.value}); + } + + onSubmit(e){ + e.preventDefault(); + const post={ + Name:this.state.Name, + Description: this.state.Description, + Price:this.state.Price, + Type:this.state.Type, + SizeOption:this.state.count, + ColourOption:this.state.ColourOption, + CoverImageLocation:this.state.FileUpload, + } + fetch('https://localhost:44311/api/Products',{ + method:'POST', + headers:{ + 'Accept': 'application/json', + 'content-type':'application/json' + }, + body:JSON.stringify(post) + }) + .then(response=>response.json()) + .then(data=>console.log(data)); + + } + Color(){ + if(this.state.color==false){ + this.setState({color:true}); + this.setState({ColourOption:1}) + } + else{ + this.setState({color:false}) + } + + } + Speedy(){ + if(this.state.speedy==false){ + this.setState({speedy:true}); + this.setState({Type:"Speedy"}) + + } + else{ + this.setState({speedy:false}); + } + + } + KYN(){ + if(this.state.kyn==false){ + this.setState({kyn:true}); + this.setState({Type:"Know your nation"}) + + } + else{ + this.setState({nyk:false}); + } + + } + Small(){ + if(this.state.small==false){ + this.setState({small:true}); + this.setState({count:1}); + + } + else{ + this.setState({small:false}); + + } + } + + Medium(){ + + if(this.state.medium==false){ + this.state.medium=true; + this.setState({count:2}) + } + else{ + this.state.medium=false; + } + } + Large(){ + if(this.state.large==false){ + this.setState({large:true}); + this.setState({count:3}) + + } + else{ + this.setState({large:false}); + } + + } + + + render() + { + + let loc_navBarTitle = "CREATE PRODUCT"; + let loc_navbarItems = [true, false, false, true]; + + return ( +
+ +
+
+

+
+
+ Uploaded images +
+
+
+ + + + +
+
+ + +
+
+ +
+
+