created page to sell products

Author: MUHAMMED-FARIZ-KP

src/App.js

@@ -3,6 +3,8 @@ import './App.css';
 import { BrowserRouter as Router,Route} from 'react-router-dom';
 import Signup from './Pages/Signup'
 import Login from './Pages/Login';
+import CreatePage from './Pages/Create';
+import View from './Pages/ViewPost'
 import { AuthContext,FirebaseContext } from './store/Context';
 
 /**
@@ -32,6 +34,13 @@ function App() {
         <Route path='/login'> 
           <Login />
         </Route>
+
+        <Route path='/create'> 
+        <CreatePage />
+        </Route>
+        <Route path='/view'> 
+        <View/>
+        </Route>
 
       </Router>
     </div>

src/Components/Create/Create.js

@@ -1,20 +1,49 @@
-import React, { Fragment } from 'react';
+import React, { Fragment, useContext, useState } from 'react';
 import './Create.css';
 import Header from '../Header/Header';
-
+import { FirebaseContext,AuthContext } from '../../store/Context';
+import firebase from 'firebase/app';
+import 'firebase/storage';
+import { useHistory } from 'react-router-dom'; 
 const Create = () => {
+  const {firebase}=useContext(FirebaseContext)
+  const {user}=useContext(AuthContext)
+  const history=useHistory()
+  const [name,setName]=useState('')
+  const [category,setCategory]=useState('')
+  const [price,setPrice]=useState('')
+  const [image,setImage]=useState(null)
+  const date=new Date()
+  const handleSubmit=()=>{
+        firebase.storage().ref(`/image/${image.name}`).put(image).then(({ref})=>{
+          ref.getDownloadURL().then((url)=>{
+            console.log(url)
+            firebase.firestore().collection('products').add({
+              name,
+              category,
+              price,
+              url,
+              userId:user.uid,
+              createdAt:date.toDateString() 
+            })
+            history.push('/')
+          })
+        }) 
+  }
   return (
     <Fragment>
       <Header />
       <card>
         <div className="centerDiv">
-          <form>
+          
             <label htmlFor="fname">Name</label>
             <br />
             <input
               className="input"
               type="text"
               id="fname"
+              value={name}
+              onChange={(e)=>setName(e.target.value)}
               name="Name"
               defaultValue="John"
             />
@@ -25,23 +54,27 @@ const Create = () => {
               className="input"
               type="text"
               id="fname"
+              value={category}
+              onChange={(e)=>setCategory(e.target.value)}
               name="category"
               defaultValue="John"
             />
             <br />
             <label htmlFor="fname">Price</label>
             <br />
-            <input className="input" type="number" id="fname" name="Price" />
+            <input className="input" type="number" id="fname"value={price} onChange={(e)=>setPrice(e.target.value)} name="Price" />
             <br />
-          </form>
+          
           <br />
-          <img alt="Posts" width="200px" height="200px" src=""></img>
-          <form>
+          <img alt="Posts" width="200px" height="200px" src={image ? URL.createObjectURL(image):""}></img>
+          
             <br />
-            <input type="file" />
+            <input onChange={(e)=>{
+              setImage(e.target.files[0])
+            }} type="file" />
             <br />
-            <button className="uploadBtn">upload and Submit</button>
-          </form>
+            <button onClick={handleSubmit} className="uploadBtn">upload and Submit</button>
+          
         </div>
       </card>
     </Fragment>

src/Components/Posts/Posts.js

@@ -1,10 +1,25 @@
-import React from 'react';
-
+import React,{useEffect,useState,useContext} from 'react';
+import {useHistory} from 'react-router-dom'
 import Heart from '../../assets/Heart';
 import './Post.css';
+import { FirebaseContext } from '../../store/Context';
 
 function Posts() {
+  const {firebase}=useContext(FirebaseContext)
+  const [products,setProducts]=useState([])
+  useEffect(()=>{
+    firebase.firestore().collection('products').get().then((snapshot)=>{
+        const allPost=snapshot.docs.map((product)=>{
+          return{
+            ...product.data(),
+            id:product.id
+          }
+         
 
+        })
+        setProducts(allPost) 
+    })
+  })
   return (
     <div className="postParentDiv">
       <div className="moreView">
@@ -13,24 +28,29 @@ function Posts() {
           <span>View more</span>
         </div>
         <div className="cards">
-          <div
-            className="card"
-          >
-            <div className="favorite">
-              <Heart></Heart>
-            </div>
-            <div className="image">
-              <img src="../../../Images/R15V3.jpg" alt="" />
-            </div>
-            <div className="content">
-              <p className="rate">&#x20B9; 250000</p>
-              <span className="kilometer">Two Wheeler</span>
-              <p className="name"> YAMAHA R15V3</p>
-            </div>
-            <div className="date">
-              <span>Tue May 04 2021</span>
-            </div>
-          </div>
+        {products.map(product=>{
+          return <div
+           className="card"
+         >
+           <div className="favorite">
+             <Heart></Heart>
+           </div>
+           <div className="image">
+             <img src={product.url} alt="" />
+           </div>
+           <div className="content">
+             <p className="rate">&#x20B9; {product.price}</p>
+             <span className="kilometer">{product.category}</span>
+             <p className="name"> {product.name}</p>
+           </div>
+           <div className="date">
+             <span>{product.createdAt}</span>
+           </div>
+         </div>
+
+        })
+         
+      }
         </div>
       </div>
       <div className="recommendations">

src/Pages/Create.js

@@ -1,4 +1,5 @@
 import React, { Fragment } from 'react';
+
 import Header from '../Components/Header/Header';
 import Create from '../Components/Create/Create';
 

src/firebase/config.js

@@ -1,6 +1,7 @@
 import firebase from 'firebase/app';
 import 'firebase/auth';
 import 'firebase/firestore';
+import 'firebase/storage'
 // For Firebase JS SDK v7.20.0 and later, measurementId is optional
 const firebaseConfig = {
     apiKey: "AIzaSyAkRtp7S1LrCiKGTnKK_3Jycr-tu91Zda0",