From 49814e123b1ebf94ac97ce13cb18de6753c27d3d Mon Sep 17 00:00:00 2001
From: Marx-wrld <iongonga@kabarak.ac.ke>
Date: Tue, 6 Dec 2022 16:04:30 +0300
Subject: [PATCH] Firebase, usehistory, Redirect

---
 checks.json                      |   1 +
 src/components/App.js            |  35 +++++-----
 src/components/Dashboard.js      |  51 +++++++-------
 src/components/ForgotPassword.js |  96 +++++++++++++-------------
 src/components/Login.js          |  98 +++++++++++++--------------
 src/components/Signup.js         | 111 +++++++++++++++----------------
 src/components/UpdateProfile.js  |  21 +++---
 src/firebase.js                  |  24 ++++---
 src/index.js                     |  14 ++--
 9 files changed, 226 insertions(+), 225 deletions(-)
 create mode 100644 checks.json

diff --git a/checks.json b/checks.json
new file mode 100644
index 0000000..8b70b53
--- /dev/null
+++ b/checks.json
@@ -0,0 +1 @@
+{"enabled":true,"categories":{}}
\ No newline at end of file
diff --git a/src/components/App.js b/src/components/App.js
index 1b6ec8d..3ae4f49 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -1,8 +1,8 @@
 import React from "react"
-import Signup from "./Signup"
-import { Container } from "react-bootstrap"
-import { AuthProvider } from "../contexts/AuthContext"
-import { BrowserRouter as Router, Switch, Route } from "react-router-dom"
+import { Container } from "react-bootstrap";
+import { AuthProvider } from "../contexts/AuthContext";
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom"
+import Signup from "./Signup";
 import Dashboard from "./Dashboard"
 import Login from "./Login"
 import PrivateRoute from "./PrivateRoute"
@@ -11,25 +11,24 @@ import UpdateProfile from "./UpdateProfile"
 
 function App() {
   return (
-    <Container
-      className="d-flex align-items-center justify-content-center"
-      style={{ minHeight: "100vh" }}
-    >
+    <Container className="d-flex align-items-center justif-content-center"
+    style={{ minHeight: "100vh" }}>
       <div className="w-100" style={{ maxWidth: "400px" }}>
-        <Router>
-          <AuthProvider>
-            <Switch>
-              <PrivateRoute exact path="/" component={Dashboard} />
-              <PrivateRoute path="/update-profile" component={UpdateProfile} />
+      <Router>
+      <AuthProvider>
+            <Routes>
+              {/* this private route locks us to the official home page if not yet logged in, so we can't go to the dashboard*/ }
+              <Route exact path="*" element={<PrivateRoute/>} component={Dashboard} />
+              <Route path="/update-profile" component={UpdateProfile} />
               <Route path="/signup" component={Signup} />
               <Route path="/login" component={Login} />
               <Route path="/forgot-password" component={ForgotPassword} />
-            </Switch>
-          </AuthProvider>
-        </Router>
+            </Routes>
+      </AuthProvider>
+      </Router>
       </div>
     </Container>
-  )
+    )
 }
 
-export default App
+export default App;
diff --git a/src/components/Dashboard.js b/src/components/Dashboard.js
index 96e120f..6cbc511 100644
--- a/src/components/Dashboard.js
+++ b/src/components/Dashboard.js
@@ -1,41 +1,38 @@
-import React, { useState } from "react"
-import { Card, Button, Alert } from "react-bootstrap"
+import React, { useState } from 'react';
+import { Card, Button, Alert } from 'react-bootstrap'
 import { useAuth } from "../contexts/AuthContext"
-import { Link, useHistory } from "react-router-dom"
+import { Link, useNavigate } from "react-router-dom"
 
 export default function Dashboard() {
-  const [error, setError] = useState("")
   const { currentUser, logout } = useAuth()
-  const history = useHistory()
-
+  const [error, setError] = useState("")
+  const history = useNavigate()
   async function handleLogout() {
-    setError("")
+    setError('')
 
-    try {
+    try{
       await logout()
-      history.push("/login")
-    } catch {
-      setError("Failed to log out")
+      history.pushState('/login')
     }
+      catch{
+        setError('Failed to logout')
+      }
   }
-
-  return (
+    return (
     <>
-      <Card>
+    <Card>
         <Card.Body>
-          <h2 className="text-center mb-4">Profile</h2>
-          {error && <Alert variant="danger">{error}</Alert>}
-          <strong>Email:</strong> {currentUser.email}
-          <Link to="/update-profile" className="btn btn-primary w-100 mt-3">
-            Update Profile
-          </Link>
+            <h2 className='text-center mb-4'>
+                Profile
+            </h2>
+            {error && <Alert variant="danger">{error}</Alert>}
+            <strong>Email: </strong> {currentUser.email}
+            <Link to="/update-profile" className="btn btn-primary w-100 mt-3">Update Profile</Link>
         </Card.Body>
-      </Card>
-      <div className="w-100 text-center mt-2">
-        <Button variant="link" onClick={handleLogout}>
-          Log Out
-        </Button>
-      </div>
+    </Card>
+    <div className='w-100 text-center mt-2'>
+        <Button variant="link" onClick={handleLogout}> Log Out</Button>
+    </div>
     </>
-  )
+  );
 }
diff --git a/src/components/ForgotPassword.js b/src/components/ForgotPassword.js
index 4a55997..8e08a3a 100644
--- a/src/components/ForgotPassword.js
+++ b/src/components/ForgotPassword.js
@@ -4,52 +4,52 @@ import { useAuth } from "../contexts/AuthContext"
 import { Link } from "react-router-dom"
 
 export default function ForgotPassword() {
-  const emailRef = useRef()
-  const { resetPassword } = useAuth()
-  const [error, setError] = useState("")
-  const [message, setMessage] = useState("")
-  const [loading, setLoading] = useState(false)
-
-  async function handleSubmit(e) {
-    e.preventDefault()
-
-    try {
-      setMessage("")
-      setError("")
-      setLoading(true)
-      await resetPassword(emailRef.current.value)
-      setMessage("Check your inbox for further instructions")
-    } catch {
-      setError("Failed to reset password")
+    const emailRef = useRef()
+    const { resetPassword } = useAuth()
+    const [error, setError] = useState("")
+    const [message, setMessage] = useState("")
+    const [loading, setLoading] = useState(false)
+  
+    async function handleSubmit(e) {
+      e.preventDefault()
+  
+      try {
+        setMessage("")
+        setError("")
+        setLoading(true)
+        await resetPassword(emailRef.current.value)
+        setMessage("Check your inbox for further instructions")
+      } catch {
+        setError("Failed to reset password")
+      }
+  
+      setLoading(false)
     }
-
-    setLoading(false)
-  }
-
-  return (
-    <>
-      <Card>
-        <Card.Body>
-          <h2 className="text-center mb-4">Password Reset</h2>
-          {error && <Alert variant="danger">{error}</Alert>}
-          {message && <Alert variant="success">{message}</Alert>}
-          <Form onSubmit={handleSubmit}>
-            <Form.Group id="email">
-              <Form.Label>Email</Form.Label>
-              <Form.Control type="email" ref={emailRef} required />
-            </Form.Group>
-            <Button disabled={loading} className="w-100" type="submit">
-              Reset Password
-            </Button>
-          </Form>
-          <div className="w-100 text-center mt-3">
-            <Link to="/login">Login</Link>
-          </div>
-        </Card.Body>
-      </Card>
-      <div className="w-100 text-center mt-2">
-        Need an account? <Link to="/signup">Sign Up</Link>
-      </div>
-    </>
-  )
-}
+  
+    return (
+      <>
+        <Card>
+          <Card.Body>
+            <h2 className="text-center mb-4">Password Reset</h2>
+            {error && <Alert variant="danger">{error}</Alert>}
+            {message && <Alert variant="success">{message}</Alert>}
+            <Form onSubmit={handleSubmit}>
+              <Form.Group id="email">
+                <Form.Label>Email</Form.Label>
+                <Form.Control type="email" ref={emailRef} required placeholder="Enter your Email"/>
+              </Form.Group>
+              <Button disabled={loading} className="w-100" type="submit">
+                Reset Password
+              </Button>
+            </Form>
+            <div className="w-100 text-center mt-3">
+              <Link to="/login">Login</Link>
+            </div>
+          </Card.Body>
+        </Card>
+        <div className="w-100 text-center mt-2">
+          Need an account? <Link to="/signup">Register</Link>
+        </div>
+      </>
+    )
+  }
\ No newline at end of file
diff --git a/src/components/Login.js b/src/components/Login.js
index 53ec8b7..8b7fd02 100644
--- a/src/components/Login.js
+++ b/src/components/Login.js
@@ -1,58 +1,56 @@
-import React, { useRef, useState } from "react"
-import { Form, Button, Card, Alert } from "react-bootstrap"
-import { useAuth } from "../contexts/AuthContext"
-import { Link, useHistory } from "react-router-dom"
+import React, { useRef, useState } from 'react';
+import { Form, Button, Card, Alert } from 'react-bootstrap';
+import { useAuth } from '../contexts/AuthContext'
+import { Link, useNavigate } from "react-router-dom"
 
 export default function Login() {
-  const emailRef = useRef()
-  const passwordRef = useRef()
-  const { login } = useAuth()
-  const [error, setError] = useState("")
-  const [loading, setLoading] = useState(false)
-  const history = useHistory()
+    const emailRef = useRef()
+    const passwordRef = useRef()
+    const { login } = useAuth()
+    const [error, setError] = useState("")
+    const [loading, setLoading] = useState(false)
+    const history = useNavigate()
 
-  async function handleSubmit(e) {
-    e.preventDefault()
-
-    try {
-      setError("")
-      setLoading(true)
-      await login(emailRef.current.value, passwordRef.current.value)
-      history.push("/")
-    } catch {
-      setError("Failed to log in")
+    async function handleSubmit(e){
+        e.preventDefault()
+        try {
+            setError('')
+            setLoading(true)
+            await login(emailRef.current.value, passwordRef.current.value)
+            history.push('/')
+        } catch{
+           setError('Failed to Login') 
+        }
+        setLoading(false)
     }
-
-    setLoading(false)
-  }
-
   return (
     <>
-      <Card>
-        <Card.Body>
-          <h2 className="text-center mb-4">Log In</h2>
-          {error && <Alert variant="danger">{error}</Alert>}
-          <Form onSubmit={handleSubmit}>
-            <Form.Group id="email">
-              <Form.Label>Email</Form.Label>
-              <Form.Control type="email" ref={emailRef} required />
-            </Form.Group>
-            <Form.Group id="password">
-              <Form.Label>Password</Form.Label>
-              <Form.Control type="password" ref={passwordRef} required />
-            </Form.Group>
-            <Button disabled={loading} className="w-100" type="submit">
-              Log In
-            </Button>
-          </Form>
-          <div className="w-100 text-center mt-3">
-            <Link to="/forgot-password">Forgot Password?</Link>
-          </div>
-        </Card.Body>
-      </Card>
-      <div className="w-100 text-center mt-2">
-        Need an account? <Link to="/signup">Sign Up</Link>
-      </div>
+        <Card>
+            <Card.Body>
+                <h2 className="text-center mb-4">Login</h2>
+                {error && <Alert variant="danger">{error}</Alert>}
+                <Form onSubmit={ handleSubmit }>
+                    <Form.Group id="email">   
+                        <Form.Label>Email</Form.Label>
+                        <Form.Control type="email"
+                        ref={emailRef} placeholder="Enter your Email" required/>
+                    </Form.Group>
+                    <Form.Group id="password">   
+                        <Form.Label>Password</Form.Label>
+                        <Form.Control type="password"
+                        ref={passwordRef} placeholder="Enter your Password" required/>
+                    </Form.Group>
+                    <br/>
+                    <Button disabled={loading} className='w-100' type="submit">Login</Button>
+                </Form>
+                <div className="w-100 text-center mt-3">
+                      <Link to="/forgot-password">Forgot Password?</Link>
+                </div>
+            </Card.Body>
+        </Card>
+        <div className='w-100 text-center mt-2'>
+            Not yet Registered?  <Link to="/signup">Register</Link>
+        </div>
     </>
-  )
+  );
 }
diff --git a/src/components/Signup.js b/src/components/Signup.js
index 546b77b..f4ceebb 100644
--- a/src/components/Signup.js
+++ b/src/components/Signup.js
@@ -1,64 +1,63 @@
-import React, { useRef, useState } from "react"
-import { Form, Button, Card, Alert } from "react-bootstrap"
-import { useAuth } from "../contexts/AuthContext"
-import { Link, useHistory } from "react-router-dom"
+import React, { useRef, useState } from 'react';
+import { Form, Button, Card, Alert } from 'react-bootstrap';
+import { useAuth } from '../contexts/AuthContext'
+import { Link, useNavigate } from "react-router-dom"
 
 export default function Signup() {
-  const emailRef = useRef()
-  const passwordRef = useRef()
-  const passwordConfirmRef = useRef()
-  const { signup } = useAuth()
-  const [error, setError] = useState("")
-  const [loading, setLoading] = useState(false)
-  const history = useHistory()
+    const emailRef = useRef()
+    const passwordRef = useRef()
+    const passwordConfirmRef = useRef()
+    const { signup } = useAuth()
+    const [error, setError] = useState("")
+    const [loading, setLoading] = useState(false)
+    const history = useNavigate()
 
-  async function handleSubmit(e) {
-    e.preventDefault()
+    async function handleSubmit(e){
+        e.preventDefault()
 
-    if (passwordRef.current.value !== passwordConfirmRef.current.value) {
-      return setError("Passwords do not match")
+        if(passwordRef.current.value === passwordConfirmRef.current.value){
+            return setError('Passwords do not match')
+        }//we dont want to continue to do the signup, we just want to exit out of the function immediately because there was an error.
+        try {
+            setError('')
+            setLoading(true)
+            await signup(emailRef.current.value, passwordRef.current.value)
+            history.push('/')
+        } catch{
+           setError('Failed to create an account') 
+        }
+        setLoading(false)
     }
-
-    try {
-      setError("")
-      setLoading(true)
-      await signup(emailRef.current.value, passwordRef.current.value)
-      history.push("/")
-    } catch {
-      setError("Failed to create an account")
-    }
-
-    setLoading(false)
-  }
-
   return (
     <>
-      <Card>
-        <Card.Body>
-          <h2 className="text-center mb-4">Sign Up</h2>
-          {error && <Alert variant="danger">{error}</Alert>}
-          <Form onSubmit={handleSubmit}>
-            <Form.Group id="email">
-              <Form.Label>Email</Form.Label>
-              <Form.Control type="email" ref={emailRef} required />
-            </Form.Group>
-            <Form.Group id="password">
-              <Form.Label>Password</Form.Label>
-              <Form.Control type="password" ref={passwordRef} required />
-            </Form.Group>
-            <Form.Group id="password-confirm">
-              <Form.Label>Password Confirmation</Form.Label>
-              <Form.Control type="password" ref={passwordConfirmRef} required />
-            </Form.Group>
-            <Button disabled={loading} className="w-100" type="submit">
-              Sign Up
-            </Button>
-          </Form>
-        </Card.Body>
-      </Card>
-      <div className="w-100 text-center mt-2">
-        Already have an account? <Link to="/login">Log In</Link>
-      </div>
+        <Card>
+            <Card.Body>
+                <h2 className="text-center mb-4">Register</h2>
+                {error && <Alert variant="danger">{error}</Alert>}
+                <Form onSubmit={ handleSubmit }>
+                    <Form.Group id="email">   
+                        <Form.Label>Email</Form.Label>
+                        <Form.Control type="email"
+                        ref={emailRef} placeholder="Enter your Email" required/>
+                    </Form.Group>
+                    <Form.Group id="password">   
+                        <Form.Label>Password</Form.Label>
+                        <Form.Control type="password"
+                        ref={passwordRef} placeholder="Enter your Password" required/>
+                    </Form.Group>
+                    <Form.Group id="password-confirm">   
+                        <Form.Label>Confirm Password</Form.Label>
+                        <Form.Control type="password"
+                        ref={passwordConfirmRef} placeholder="Confirm Password"  required/>
+                    </Form.Group>
+                    <br/>
+                    <Button disabled={loading} className='w-100' type="submit">Register</Button>
+                </Form>
+            </Card.Body>
+        </Card>
+        <div className='w-100 text-center mt-2'>
+            Already have an account?  <Link to="/login">Login</Link>
+        </div>
     </>
-  )
-}
+  );
+}
\ No newline at end of file
diff --git a/src/components/UpdateProfile.js b/src/components/UpdateProfile.js
index 67a8b39..cdc41c2 100644
--- a/src/components/UpdateProfile.js
+++ b/src/components/UpdateProfile.js
@@ -1,7 +1,7 @@
 import React, { useRef, useState } from "react"
 import { Form, Button, Card, Alert } from "react-bootstrap"
 import { useAuth } from "../contexts/AuthContext"
-import { Link, useHistory } from "react-router-dom"
+import { Link, useNavigate } from "react-router-dom"
 
 export default function UpdateProfile() {
   const emailRef = useRef()
@@ -10,9 +10,10 @@ export default function UpdateProfile() {
   const { currentUser, updatePassword, updateEmail } = useAuth()
   const [error, setError] = useState("")
   const [loading, setLoading] = useState(false)
-  const history = useHistory()
+  const history = useNavigate()
 
   function handleSubmit(e) {
+    //if passwords are not same I set this error
     e.preventDefault()
     if (passwordRef.current.value !== passwordConfirmRef.current.value) {
       return setError("Passwords do not match")
@@ -24,19 +25,21 @@ export default function UpdateProfile() {
 
     if (emailRef.current.value !== currentUser.email) {
       promises.push(updateEmail(emailRef.current.value))
+      //Check if our email is not equal to our current email
+      //if we've changed our email, I'll want to add that email by using (promises.push)
     }
     if (passwordRef.current.value) {
       promises.push(updatePassword(passwordRef.current.value))
     }
 
-    Promise.all(promises)
-      .then(() => {
-        history.push("/")
+    Promise.all(promises) //Our array promises
+      .then(() => { //our .then will run everytime our promises execute
+        history.push("/") //redirecting to our home page
       })
       .catch(() => {
         setError("Failed to update account")
       })
-      .finally(() => {
+      .finally(() => { //our .finally will set our loading back to false and it runs if we either succeed or fail
         setLoading(false)
       })
   }
@@ -62,7 +65,7 @@ export default function UpdateProfile() {
               <Form.Control
                 type="password"
                 ref={passwordRef}
-                placeholder="Leave blank to keep the same"
+                placeholder="Leave it blank to keep them same"
               />
             </Form.Group>
             <Form.Group id="password-confirm">
@@ -70,7 +73,7 @@ export default function UpdateProfile() {
               <Form.Control
                 type="password"
                 ref={passwordConfirmRef}
-                placeholder="Leave blank to keep the same"
+                placeholder="Leave it blank to keep them same"
               />
             </Form.Group>
             <Button disabled={loading} className="w-100" type="submit">
@@ -84,4 +87,4 @@ export default function UpdateProfile() {
       </div>
     </>
   )
-}
+}
\ No newline at end of file
diff --git a/src/firebase.js b/src/firebase.js
index aa2516c..d2d4df1 100644
--- a/src/firebase.js
+++ b/src/firebase.js
@@ -1,15 +1,19 @@
-import firebase from "firebase/app"
-import "firebase/auth"
+import firebase from 'firebase/compat/app';
+import 'firebase/compat/auth';
+import 'firebase/compat/firestore';
+import "firebase/compat/database";
+import "firebase/compat/storage";
 
 const app = firebase.initializeApp({
-  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
-  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
-  databaseURL: process.env.REACT_APP_FIREBASE_DATABASE_URL,
-  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
-  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
-  messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
-  appId: process.env.REACT_APP_FIREBASE_APP_ID
+    apiKey: "process.env.REACT_APP_FIREBASE_API_KEY",
+    authDomain: "process.env.REACT_APP_FIREBASE_AUTH_DOMAIN",
+    databaseURL: "process.env.REACT_APP_FIREBASE_DATABASE_URL",
+    projectId: "process.env.REACT_APP_FIREBASE_PROJECT_ID",
+    storageBucket: "process.env.REACT_APP_FIREBASE_STORAGE_BUCKET",
+    messagingSenderId: "process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID",
+    appId: "process.env.1:842089015099:web:dbf2bb61d5a132b92e791e",
+    measurementId: "process.env.REACT_APP_FIREBASE_MEASUREMENT_ID"
 })
 
 export const auth = app.auth()
-export default app
+export default app
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index f4d1c4f..889a215 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,11 +1,11 @@
-import React from "react"
-import ReactDOM from "react-dom"
-import App from "./components/App"
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './components/App';
 import "bootstrap/dist/css/bootstrap.min.css"
 
-ReactDOM.render(
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>,
-  document.getElementById("root")
-)
+  </React.StrictMode>
+);