my initial commit

package.json

@@ -1,20 +1,24 @@
 {
+  "homepage": "https://farizz7676.github.io/React_olx_clone/",
   "name": "olx",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
-    "firebase": "^8.4.3",
+    "chokidar": "^3.5.3",
+    "firebase": "^8.10.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "4.0.3",
+    "react-scripts": "^4.0.3",
     "web-vitals": "^1.0.1"
   },
   "scripts": {
     "start": "react-scripts start",
+    "predeploy": "npm run build",
+    "deploy": "gh-pages -d build",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
@@ -36,5 +40,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "gh-pages": "^5.0.0"
   }
 }

src/App.js

@@ -1,15 +1,47 @@
-import React from 'react';
+import React, { useEffect, useContext } from 'react';
 import './App.css';
-
-/**
- * ?  =====Import Components=====
- */
+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';
+import Post, { PostContext } from './store/PostContext';
 import Home from './Pages/Home';
 
 function App() {
+  const { setUser } = useContext(AuthContext);
+  const { firebase } = useContext(FirebaseContext);
+
+  useEffect(() => {
+    firebase.auth().onAuthStateChanged((user) => {
+      setUser(user);
+    });
+  }, [firebase, setUser]);
+
   return (
     <div>
-      <Home />
+      <Post>
+        <Router>
+          <Route exact path="/">
+            <Home />
+          </Route>
+          <Route path="/signup">
+            <Signup />
+          </Route>
+          <Route path="/login">
+            <Login />
+          </Route>
+          <Route path="/create">
+            <CreatePage />
+          </Route>
+          <Route path="/view">
+            <PostContext.Consumer>
+              {(postContext) => <View postDetails={postContext.postDetails} />}
+            </PostContext.Consumer>
+          </Route>
+        </Router>
+      </Post>
     </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/Header/Header.js

@@ -1,12 +1,17 @@
-import React from 'react';
-
+import React,{useContext} from 'react';
+import {useHistory} from 'react-router-dom'
 import './Header.css';
 import OlxLogo from '../../assets/OlxLogo';
 import Search from '../../assets/Search';
 import Arrow from '../../assets/Arrow';
 import SellButton from '../../assets/SellButton';
 import SellButtonPlus from '../../assets/SellButtonPlus';
+import { AuthContext, FirebaseContext } from '../../store/Context';
+
 function Header() {
+  const history=useHistory()
+  const {user}=useContext(AuthContext)
+  const {firebase}=useContext(FirebaseContext)
   return (
     <div className="headerParentDiv">
       <div className="headerChildDiv">
@@ -34,9 +39,14 @@ function Header() {
           <Arrow></Arrow>
         </div>
         <div className="loginPage">
-          <span>Login</span>
+          <span>{user ?  `Welcome ${user.displayName}` :"Login" }</span>
           <hr />
+
         </div>
+        {user && <span onClick={()=>{
+          firebase.auth().signOut()
+          history.push('/login')
+        }}>Logout</span> }
 
         <div className="sellMenu">
           <SellButton></SellButton>

src/Components/Login/Login.js

@@ -1,20 +1,36 @@
-import React from 'react';
-
+import React, { useState,useContext } from 'react';
+import {FirebaseContext}  from '../../store/Context';
 import Logo from '../../olx-logo.png';
 import './Login.css';
+import { useHistory } from 'react-router-dom'; 
 
 function Login() {
+  const [email,setEmail]=useState('')
+  const [password,setPassword]=useState('')
+  const {firebase}=useContext(FirebaseContext)
+  const history = useHistory();
+  const handleLogin=(e)=>{
+    e.preventDefault()
+    firebase.auth().signInWithEmailAndPassword(email,password).then(()=>{
+      history.push('/')
+    }).catch((error)=>{
+
+      alert(error.message )
+    })
+  }
   return (
     <div>
       <div className="loginParentDiv">
         <img width="200px" height="200px" src={Logo}></img>
-        <form>
+        <form onSubmit={handleLogin}>
           <label htmlFor="fname">Email</label>
           <br />
           <input
             className="input"
             type="email"
             id="fname"
+            value={email}
+            onChange={(e)=>setEmail(e.target.value)}
             name="email"
             defaultValue="John"
           />
@@ -25,6 +41,8 @@ function Login() {
             className="input"
             type="password"
             id="lname"
+            value={password}
+            onChange={(e)=>setPassword(e.target.value)}
             name="password"
             defaultValue="Doe"
           />

src/Components/Posts/Posts.js

@@ -1,10 +1,28 @@
-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';
+import { PostContext } from '../../store/PostContext';
 
 function Posts() {
+  const {firebase}=useContext(FirebaseContext)
+  const [products,setProducts]=useState([])
+  const {setPostDetails}=useContext(PostContext)
+  const history=useHistory()
+  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 +31,33 @@ 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"
+           onClick={()=>{
+                setPostDetails(product)
+                history.push('/view')
+           }}
+         >
+           <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">