React challange

.gitignore

@@ -1,7 +1,7 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
 # dependencies
-/node_modules
+node_modules
 /.pnp
 .pnp.js
 

package.json

@@ -6,11 +6,11 @@
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
-    "firebase": "^8.4.3",
+    "firebase": "^9.17.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "4.0.3",
+    "react-scripts": "^5.0.1",
     "web-vitals": "^1.0.1"
   },
   "scripts": {

src/App.js

@@ -1,15 +1,46 @@
-import React from 'react';
-import './App.css';
-
+import React, { useContext, useEffect } from "react";
+import "./App.css";
+import { BrowserRouter as Router, Route } from "react-router-dom";
+import Signup from "./Pages/Signup";
+import Login from "./Pages/Login";
+import Create from "./Pages/Create";
+import View from "./Pages/ViewPost";
 /**
  * ?  =====Import Components=====
  */
-import Home from './Pages/Home';
+import { AuthContext, FirebaseContext } from "./store/Context";
+import Home from "./Pages/Home";
+import Post from "./store/PostContext";
 
 function App() {
+  const { setUser } = useContext(AuthContext);
+  const { firebase } = useContext(FirebaseContext);
+  useEffect(() => {
+    firebase.auth().onAuthStateChanged((user) => {
+      setUser(user);
+    });
+  });
   return (
     <div>
-      <Home />
+      <Post>
+        <Router>
+          <Route exact path="/">
+            <Home />
+          </Route>
+          <Route path="/signup">
+            <Signup />
+          </Route>
+          <Route path="/login">
+            <Login />
+          </Route>
+          <Route path="/create">
+            <Create />
+          </Route>
+          <Route path="/view">
+            <View />
+          </Route>
+        </Router>
+      </Post>
     </div>
   );
 }

src/Components/Banner/Banner.css

@@ -1,4 +1,5 @@
 .bannerParentDiv {
+  width: 100%;
   padding-top: 4em;
 }
 .bannerParentDiv .bannerChildDiv {
@@ -24,10 +25,10 @@
 
 .bannerChildDiv .banner {
   position: relative;
-  width: 100vw;
+  width: 100%;
 }
 .bannerChildDiv .banner img{
-  width: 100vw;
+  width: 100%;
 }
 
 @media only screen and (max-width: 700px) {

src/Components/Create/Create.js

@@ -1,8 +1,38 @@
-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 { useHistory } from 'react-router-dom';
+
+
 
 const Create = () => {
+  const history = useHistory()
+  const {firebase} = useContext(FirebaseContext)
+  const {user} = useContext(AuthContext)
+  const[name,setName]= useState()
+  const[category,setCategory]= useState()
+  const[price,setPrice]= useState()
+  const[image,setImage]= useState()
+  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 />
@@ -15,6 +45,8 @@ const Create = () => {
               className="input"
               type="text"
               id="fname"
+              value={name}
+              onChange={(e)=> setName(e.target.value)}
               name="Name"
               defaultValue="John"
             />
@@ -24,24 +56,33 @@ const Create = () => {
             <input
               className="input"
               type="text"
-              id="fname"
+              id="fcate"
+              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="fprice"
+             value={price}
+             onChange={(e)=> setPrice(e.target.value)}
+             name="Price" />
             <br />
           </form>
           <br />
-          <img alt="Posts" width="200px" height="200px" src=""></img>
-          <form>
+          {image && <img alt='images' width="200px" height="200px" src={image ? URL.createObjectURL(image) : null}></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/Footer/Footer.css

@@ -1,5 +1,5 @@
 .footerParentDiv {
-  width: 100vw;
+  width: 100%;
 }
 .footerParentDiv .content {
   display: flex;

src/Components/Header/Header.css

@@ -60,6 +60,7 @@
   align-items: center;
 }
 
+
 .productSearch .searchAction {
   min-width: 48px;
   height: 48px;
@@ -161,4 +162,4 @@
   .sellMenu {
     display: none;
   }
-}
+}

src/Components/Header/Header.js

@@ -1,17 +1,22 @@
-import React from 'react';
+import React,{useContext} from 'react';
 
 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';
+import { Link, useHistory } from 'react-router-dom';
 function Header() {
+  const history = useHistory()
+  const {user}= useContext(AuthContext)
+  const {firebase} = useContext(FirebaseContext)
   return (
     <div className="headerParentDiv">
       <div className="headerChildDiv">
         <div className="brandName">
-          <OlxLogo></OlxLogo>
+          <Link to="/"><OlxLogo/></Link>
         </div>
         <div className="placeSearch">
           <Search></Search>
@@ -34,17 +39,21 @@ function Header() {
           <Arrow></Arrow>
         </div>
         <div className="loginPage">
-          <span>Login</span>
+          <span>{user ? user.displayName : 'Login'}</span>
           <hr />
         </div>
+          {user && <button onClick={()=>{
+            firebase.auth().signOut()
+            history.push('/login')
+          }}>Logout</button> }
 
-        <div className="sellMenu">
+        <Link to="/create"><div className="sellMenu">
           <SellButton></SellButton>
           <div className="sellMenuContent">
             <SellButtonPlus></SellButtonPlus>
             <span>SELL</span>
           </div>
-        </div>
+        </div></Link>
       </div>
     </div>
   );

src/Components/Login/Login.js

@@ -1,38 +1,54 @@
-import React from 'react';
-
+import React, { useContext,useState } from 'react';
+import { Link, useHistory } from 'react-router-dom';
 import Logo from '../../olx-logo.png';
+import { FirebaseContext } from '../../store/Context';
 import './Login.css';
 
 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>
+        <img alt='img' width="200px" height="200px" src={Logo}></img>
+        <form onSubmit={handleLogin}>
           <label htmlFor="fname">Email</label>
           <br />
           <input
             className="input"
             type="email"
+            value={email}
+            onChange={(e)=>setEmail(e.target.value)}
             id="fname"
-            name="email"
-            defaultValue="John"
+            name="email" 
           />
           <br />
           <label htmlFor="lname">Password</label>
           <br />
           <input
             className="input"
             type="password"
-            id="lname"
+            value={password}
+            onChange={(e)=>setPassword(e.target.value)}
+            id="lpass"
             name="password"
-            defaultValue="Doe"
+
           />
           <br />
           <br />
           <button>Login</button>
         </form>
-        <a>Signup</a>
+        <Link to="/signup">Signup</Link>
       </div>
     </div>
   );

src/Components/Posts/Posts.js

@@ -1,9 +1,28 @@
-import React from 'react';
-
+import React,{useContext,useEffect,useState} from 'react';
+import { useHistory } from 'react-router-dom';
 import Heart from '../../assets/Heart';
+import { FirebaseContext } from '../../store/Context';
+import { PostContext } from '../../store/PostContext';
 import './Post.css';
 
 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
+        }
+      })
+      console.log(allPost);
+      setProducts(allPost)
+    })
+  }, [])
+
 
   return (
     <div className="postParentDiv">
@@ -13,24 +32,39 @@ function Posts() {
           <span>View more</span>
         </div>
         <div className="cards">
-          <div
-            className="card"
-          >
+
+          {
+            products.map((product,index)=>{
+              console.log(product);
+              return(
+
+
+                <div
+                className="card" onClick={()=>{
+                  setPostDetails(product)
+                  history.push("/view")
+                }}
+                 key={index+"cards"}>
             <div className="favorite">
               <Heart></Heart>
             </div>
             <div className="image">
-              <img src="../../../Images/R15V3.jpg" alt="" />
+              <img src={product?.url} alt="" />
             </div>
             <div className="content">
-              <p className="rate">&#x20B9; 250000</p>
-              <span className="kilometer">Two Wheeler</span>
-              <p className="name"> YAMAHA R15V3</p>
+              <p className="rate">&#x20B9; {product?.price}</p>
+              <span className="kilometer">{product?.category}</span>
+              <p className="name"> {product?.name}</p>
             </div>
             <div className="date">
-              <span>Tue May 04 2021</span>
+              <span>{product?.createdAt}</span>
             </div>
           </div>
+            )
+            })
+          }
+
+
         </div>
       </div>
       <div className="recommendations">