producs view page modified

Author: MUHAMMED-FARIZ-KP

src/App.js

@@ -1,48 +1,47 @@
-import React,{useEffect,useContext} from 'react';
+import React, { useEffect, useContext } from 'react';
 import './App.css';
-import { BrowserRouter as Router,Route} from 'react-router-dom';
-import Signup from './Pages/Signup'
+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 Components=====
- */
+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)
-    })
-  })
-  return (
-    <div>
-      <Router>
-        <Route exact path='/'> 
-          <Home />
-        </Route>
+  const { setUser } = useContext(AuthContext);
+  const { firebase } = useContext(FirebaseContext);
 
-        <Route path='/signup'> 
-          <Signup />
-        </Route>
-        <Route path='/login'> 
-          <Login />
-        </Route>
+  useEffect(() => {
+    firebase.auth().onAuthStateChanged((user) => {
+      setUser(user);
+    });
+  }, [firebase, setUser]);
 
-        <Route path='/create'> 
-        <CreatePage />
-        </Route>
-        <Route path='/view'> 
-        <View/>
-        </Route>
-        
-      </Router>
+  return (
+    <div>
+      <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/Posts/Posts.js

@@ -3,10 +3,13 @@ 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)=>{
@@ -31,6 +34,10 @@ function Posts() {
         {products.map(product=>{
           return <div
            className="card"
+           onClick={()=>{
+                setPostDetails(product)
+                history.push('/view')
+           }}
          >
            <div className="favorite">
              <Heart></Heart>

src/Components/View/View.js

@@ -1,29 +1,53 @@
-import React from 'react';
-
+import React, { useEffect, useState, useContext } from 'react';
 import './View.css';
+import { PostContext } from '../../store/PostContext';
+import { FirebaseContext } from '../../store/Context';
+
 function View() {
+  const [userDetails, setUserDetails] = useState();
+  const { postDetails } = useContext(PostContext);
+  const { firebase } = useContext(FirebaseContext);
+
+  useEffect(() => {
+    if (postDetails && postDetails.userId) {
+      const { userId } = postDetails;
+      firebase
+        .firestore()
+        .collection('users')
+        .where('id', '==', userId)
+        .get()
+        .then((res) => {
+          res.forEach((doc) => {
+            setUserDetails(doc.data());
+          });
+        });
+    }
+  }, [firebase, postDetails]);
+
   return (
     <div className="viewParentDiv">
       <div className="imageShowDiv">
-        <img
-          src="../../../Images/R15V3.jpg"
-          alt=""
-        />
+        {postDetails && postDetails.url && (
+          <img src={postDetails.url} alt="" />
+        )}
       </div>
       <div className="rightSection">
         <div className="productDetails">
-          <p>&#x20B9; 250000 </p>
-          <span>YAMAHA R15V3</span>
-          <p>Two Wheeler</p>
-          <span>Tue May 04 2021</span>
-        </div>
-        <div className="contactDetails">
-          <p>Seller details</p>
-          <p>No name</p>
-          <p>1234567890</p>
+          <p>&#x20B9; {postDetails && postDetails.price}</p>
+          <span>{postDetails.name}</span>
+          <p>{postDetails.category}</p>
+          <span>{postDetails.createdAt}</span>
         </div>
+        {userDetails && (
+          <div className="contactDetails">
+            <p>Seller details</p>
+            <p>{userDetails.username}</p>
+            <p>{userDetails.phone}</p>
+          </div>
+        )}
       </div>
     </div>
   );
 }
+
 export default View;

src/store/PostContext.js

@@ -0,0 +1,15 @@
+import { createContext, useState } from 'react';
+
+export const PostContext = createContext(null);
+
+function Post({ children }) {
+  const [postDetails, setPostDetails] = useState();
+
+  return (
+    <PostContext.Provider value={{ postDetails, setPostDetails }}>
+      {children}
+    </PostContext.Provider>
+  );
+}
+
+export default Post;