import React, { useState } from "react"; import { Container, Card, Form, Button, Grid, Progress, Message, } from "semantic-ui-react"; import "./AddProduct.css"; import { db, storage } from "../../Firebase/FirebaseConfig"; import { useStateValue } from "../../StateProvider/StateProvider"; import { Link, useHistory } from "react-router-dom"; function AddProduct() { const history = useHistory(); const [image, setImage] = useState(null); const [title, setTitle] = useState(""); const [price, setPrice] = useState(); const [rating, setRating] = useState(); const [progress, setProgress] = useState(0); const [{ user }] = useStateValue(); const handleChange = (event) => { if (event.target.files[0]) { setImage(event.target.files[0]); } }; const handleUpload = () => { const uploadTask = storage.ref(`images/${image.name}`).put(image); uploadTask.on( "state_changed", (snapshot) => { //progress function const progress = Math.round( (snapshot.bytesTransferred / snapshot.totalBytes) * 100 ); //proogress details setProgress(progress); }, (error) => { console.error(error); alert(error.message); }, //final upload () => { storage .ref("images") .child(image.name) .getDownloadURL() .then((url) => { //post image inside data db.collection("Products").add({ title, price, rating, imageUrl: url, }); setProgress(0); setTitle(""); setPrice(); setRating(); setImage(null); history.push("/"); }); } ); }; return ( <div className="addProduct"> <Container> <Grid centered columns={3} doubling stackable> {user ? ( <Grid.Column> <h2>Add Product</h2> <Card> <Form className="addProduct__form"> <Form.Field required> <label>Product title</label> <input placeholder="product title" type="text" onChange={(event) => setTitle(event.target.value)} /> </Form.Field> <Form.Field required> <label>Product Price</label> <input placeholder="product price" type="number" onChange={(event) => setPrice(event.target.value)} /> </Form.Field> <Form.Field required> <label>Product Rating</label> <input placeholder="product rating" type="number" onChange={(event) => setRating(event.target.value)} /> </Form.Field> <Form.Field required> <input placeholder="Last Name" type="file" onChange={handleChange} /> <Progress percent={progress} indicating size="tiny" /> </Form.Field> <Button color="green" type="submit" onClick={handleUpload}> Upload </Button> </Form> </Card> </Grid.Column> ) : ( <div className="addProduct__warningMessage"> <Message warning> <Message.Header> You must sign in to upload a product! </Message.Header> <p> Please visit <Link to="/login">sigin page</Link>, then try again. </p> </Message> </div> )} </Grid> </Container> </div> ); } export default AddProduct;