my initial commit

Author: MUHAMMED-FARIZ-KP

package-lock.json

@@ -6,11 +6,12 @@
     "@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": {

package.json

@@ -1,15 +1,39 @@
-import React 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 Login from './Pages/Login';
+import { AuthContext,FirebaseContext } from './store/Context';
 
 /**
  * ?  =====Import Components=====
  */
 import Home from './Pages/Home';
 
+
 function App() {
+  const {setUser}=useContext(AuthContext)
+  const {firebase}=useContext(FirebaseContext)
+  useEffect(()=>{
+    firebase.auth().onAuthStateChanged((user)=>{
+      setUser(user)
+    })
+  })
   return (
     <div>
-      <Home />
+      <Router>
+        <Route exact path='/'> 
+          <Home />
+        </Route>
+
+        <Route path='/signup'> 
+          <Signup />
+        </Route>
+        <Route path='/login'> 
+          <Login />
+        </Route>
+        
+      </Router>
     </div>
   );
 }

src/App.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/Header/Header.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/Login/Login.js

@@ -1,20 +1,60 @@
-import React from 'react';
-
+import React, { useState, useContext } from 'react';
 import Logo from '../../olx-logo.png';
 import './Signup.css';
+import FirebaseContext from '../../store/Context';
+import { useHistory } from 'react-router-dom';
 
 export default function Signup() {
+  const history = useHistory();
+  const [username, setUsername] = useState('');
+  const [email, setEmail] = useState('');
+  const [phone, setPhone] = useState('');
+  const [password, setPassword] = useState('');
+  const { firebase } = useContext(FirebaseContext); // Remove 'firestore' from the destructured assignment
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    firebase
+      .auth()
+      .createUserWithEmailAndPassword(email, password)
+      .then((result) => {
+        result.user
+          .updateProfile({ displayName: username })
+          .then(() => {
+            firebase
+              .firestore() // Access Firestore directly from the 'firebase' instance
+              .collection('users') // Access the 'users' collection
+              .add({
+                id: result.user.uid,
+                username: username,
+                phone: phone,
+              })
+              .then(() => {
+                history.push('/login');
+              })
+              .catch((error) => {
+                console.error('Error adding document: ', error);
+              });
+          });
+      })
+      .catch((error) => {
+        console.error('Error creating user: ', error);
+      });
+  };
+
   return (
     <div>
       <div className="signupParentDiv">
-        <img width="200px" height="200px" src={Logo}></img>
-        <form>
+        <img width="200px" height="200px" src={Logo} alt="Logo" />
+        <form onSubmit={handleSubmit}>
           <label htmlFor="fname">Username</label>
           <br />
           <input
             className="input"
             type="text"
             id="fname"
+            value={username}
+            onChange={(e) => setUsername(e.target.value)}
             name="name"
             defaultValue="John"
           />
@@ -25,6 +65,8 @@ export default function Signup() {
             className="input"
             type="email"
             id="fname"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
             name="email"
             defaultValue="John"
           />
@@ -35,6 +77,8 @@ export default function Signup() {
             className="input"
             type="number"
             id="lname"
+            value={phone}
+            onChange={(e) => setPhone(e.target.value)}
             name="phone"
             defaultValue="Doe"
           />
@@ -45,14 +89,16 @@ export default function Signup() {
             className="input"
             type="password"
             id="lname"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
             name="password"
             defaultValue="Doe"
           />
           <br />
           <br />
           <button>Signup</button>
         </form>
-        <a>Login</a>
+        <a href="/login">Login</a>
       </div>
     </div>
   );

src/Components/Signup/Signup.js

@@ -0,0 +1,18 @@
+import firebase from 'firebase/app';
+import 'firebase/auth';
+import 'firebase/firestore';
+// For Firebase JS SDK v7.20.0 and later, measurementId is optional
+const firebaseConfig = {
+    apiKey: "AIzaSyAkRtp7S1LrCiKGTnKK_3Jycr-tu91Zda0",
+    authDomain: "olx-clone1-a47a5.firebaseapp.com",
+    projectId: "olx-clone1-a47a5",
+    storageBucket: "olx-clone1-a47a5.appspot.com",
+    messagingSenderId: "197762478746",
+    appId: "1:197762478746:web:5c923c5f292d10dcec6523",
+    measurementId: "G-JSEN9LG3HT"
+  };
+  firebase.initializeApp(firebaseConfig);
+
+
+
+export default firebase;

src/firebase/config.js

@@ -1,5 +1,15 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';
+import {FirebaseContext} from './store/Context';
+import Context from './store/Context'; 
+import firebase from './firebase/config';
 
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.render(
+  <FirebaseContext.Provider value={{ firebase }}> {/* Wrap 'firebase' inside an object */}
+    <Context>
+        <App />
+    </Context>
+  </FirebaseContext.Provider>,
+  document.getElementById('root')
+);

src/index.js

@@ -0,0 +1,13 @@
+import { createContext, useState } from 'react';
+
+export const FirebaseContext = createContext(null);
+export const AuthContext =createContext(null)
+
+export default function Context({children}){
+    const [user,setUser]=useState(null)
+    return(
+        <AuthContext.Provider value={{user,setUser}}> 
+                {children}
+        </AuthContext.Provider>
+    )
+}