From fb8d0db00c929ee6543fc1668f5a6a09fcef5293 Mon Sep 17 00:00:00 2001
From: Naimish <naimishbbhuva@gmail.com>
Date: Tue, 23 Aug 2022 19:01:35 +0530
Subject: [PATCH] used react hooks, changed many classes to function based
 components, redirect dashboard problem

---
 src/App.js                            | 114 +++++++++++---------
 src/components/EmailPassword/index.js |  89 ++++++----------
 src/components/Header/index.js        |   6 ++
 src/components/SignIn/index.js        | 111 ++++++++-----------
 src/components/Signup/index.js        | 147 ++++++++++++--------------
 src/customHooks/index.js              |   3 +
 src/customHooks/useAuth.js            |  19 ++++
 src/hoc/withAuth.js                   |   6 ++
 src/pages/Dashboard/index.js          |   8 ++
 src/pages/Dashboard/styles.scss       |   0
 10 files changed, 250 insertions(+), 253 deletions(-)
 create mode 100644 src/customHooks/index.js
 create mode 100644 src/customHooks/useAuth.js
 create mode 100644 src/hoc/withAuth.js
 create mode 100644 src/pages/Dashboard/index.js
 create mode 100644 src/pages/Dashboard/styles.scss

diff --git a/src/App.js b/src/App.js
index 7d8c2b6..6b40bbd 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,9 +1,12 @@
-import React, { Component } from "react";
+import React, { useEffect } from "react";
 import { connect } from "react-redux/es/exports";
 import { Route, Routes, Navigate } from "react-router-dom";
 import { auth, handleUserProfile } from "./firebase/utils";
 import { setCurrentUser } from "./redux/User/user.actions";
 
+//hoc
+import WithAuth from "./hoc/withAuth";
+
 //layouts
 import MainLayout from "./layouts/MainLayout";
 import HomepageLayout from "./layouts/HomepageLayout";
@@ -13,13 +16,13 @@ import HomePage from "./pages/Homepage";
 import Login from "./pages/Login";
 import Recovery from "./pages/Recovery";
 import Registration from "./pages/Registration";
+import Dashboard from "./pages/Dashboard";
 
-class App extends Component {
-    authListener = null;
-    componentDidMount() {
-        const { setCurrentUser } = this.props;
+const App = (props) => {
+    const { setCurrentUser, currentUser } = props;
 
-        this.authListener = auth.onAuthStateChanged(async (userAuth) => {
+    useEffect(() => {
+        const authListener = auth.onAuthStateChanged(async (userAuth) => {
             if (userAuth) {
                 const userRef = await handleUserProfile(userAuth);
                 userRef.onSnapshot((snapshot) => {
@@ -31,55 +34,62 @@ class App extends Component {
             }
             setCurrentUser(userAuth);
         });
-    }
-    componentWillUnmount() {
-        this.authListener();
-    }
+        return () => {
+            authListener();
+        };
+    }, []);
 
-    render() {
-        const { currentUser } = this.props;
-        return (
-            <div className="App">
-                <Routes>
-                    <Route
-                        path="/"
-                        element={
-                            <HomepageLayout>
-                                <HomePage />
-                            </HomepageLayout>
-                        }
-                    />
-                    <Route
-                        path="/registration"
-                        element={
-                            <MainLayout>
-                                <Registration />
-                                {currentUser ? <Navigate to="/" /> : null}
-                            </MainLayout>
-                        }
-                    />
-                    <Route
-                        path="/login"
-                        element={
-                            <MainLayout>
-                                <Login />
-                                {currentUser ? <Navigate to="/" /> : null}
-                            </MainLayout>
-                        }
-                    />
-                    <Route
-                        path="/recovery"
-                        element={
+    return (
+        <div className="App">
+            <Routes>
+                <Route
+                    path="/"
+                    element={
+                        <HomepageLayout>
+                            <HomePage />
+                        </HomepageLayout>
+                    }
+                />
+                <Route
+                    path="/registration"
+                    element={
+                        <MainLayout>
+                            <Registration />
+                            {currentUser ? <Navigate to="/" /> : null}
+                        </MainLayout>
+                    }
+                />
+                <Route
+                    path="/login"
+                    element={
+                        <MainLayout>
+                            <Login />
+                            {currentUser ? <Navigate to="/" /> : null}
+                        </MainLayout>
+                    }
+                />
+                <Route
+                    path="/recovery"
+                    element={
+                        <MainLayout>
+                            <Recovery />
+                        </MainLayout>
+                    }
+                />
+                <Route
+                    path="/dashboard"
+                    element={
+                        <WithAuth>
                             <MainLayout>
-                                <Recovery />
+                                <Dashboard />
                             </MainLayout>
-                        }
-                    />
-                </Routes>
-            </div>
-        );
-    }
-}
+                        </WithAuth>
+                    }
+                />
+            </Routes>
+        </div>
+    );
+};
 
 const mapStateToProps = ({ user }) => ({
     currentUser: user.currentUser,
diff --git a/src/components/EmailPassword/index.js b/src/components/EmailPassword/index.js
index 31c46c2..02466b0 100644
--- a/src/components/EmailPassword/index.js
+++ b/src/components/EmailPassword/index.js
@@ -1,4 +1,4 @@
-import React, { Component } from "react";
+import React, { useState } from "react";
 import "./styles.scss";
 import { withRouter } from "../../withRouter";
 
@@ -8,79 +8,58 @@ import Button from "../forms/Button";
 
 import { auth } from "../../firebase/utils";
 
-const initialState = {
-    email: "",
-    errors: [],
-};
+const EmailPassword = (props) => {
+    const [email, setEmail] = useState("");
+    const [errors, setErrors] = useState([]);
 
-class EmailPassword extends Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            ...initialState,
-        };
-        this.handleChange = this.handleChange.bind(this);
-    }
-    handleChange(e) {
-        const { name, value } = e.target;
-        this.setState({
-            [name]: value,
-        });
-    }
-    handleSubmit = async (e) => {
+    const handleSubmit = async (e) => {
         e.preventDefault();
         try {
-            const { email } = this.state;
             const config = {
                 url: "http://localhost:3000/login",
             };
             await auth
                 .sendPasswordResetEmail(email, config)
                 .then(() => {
-                    this.props.navigate("/login");
+                    props.navigate("/login");
                 })
                 .catch((e) => {
                     console.log(e);
                     const err = ["Email not found, please try again"];
-                    this.setState({
-                        errors: err,
-                    });
+                    setErrors(err);
                 });
         } catch (err) {
             console.log(err);
         }
     };
 
-    render() {
-        const { email, errors } = this.state;
-        const configAuthWrapper = {
-            headline: "Email Password",
-        };
+    const configAuthWrapper = {
+        headline: "Email Password",
+    };
 
-        return (
-            <AuthWrapper {...configAuthWrapper}>
-                <div className="formWrap">
-                    {errors.length > 0 && (
-                        <ul>
-                            {errors.map((e, index) => {
-                                return <li key={index}>{e}</li>;
-                            })}
-                        </ul>
-                    )}
-                    <form onSubmit={this.handleSubmit}>
-                        <FormInput
-                            type="email"
-                            name="email"
-                            value={email}
-                            placeholder="Email"
-                            onChange={this.handleChange}
-                        />
-                        <Button type="submit">Email Password</Button>
-                    </form>
-                </div>
-            </AuthWrapper>
-        );
-    }
-}
+    return (
+        <AuthWrapper {...configAuthWrapper}>
+            <div className="formWrap">
+                {errors.length > 0 && (
+                    <ul>
+                        {errors.map((e, index) => {
+                            return <li key={index}>{e}</li>;
+                        })}
+                    </ul>
+                )}
+                <form onSubmit={handleSubmit}>
+                    <FormInput
+                        type="email"
+                        name="email"
+                        value={email}
+                        placeholder="Email"
+                        handleChange={(e) => setEmail(e.target.value)}
+                    />
+                    <Button type="submit">Email Password</Button>
+                </form>
+            </div>
+        </AuthWrapper>
+    );
+};
 
 export default withRouter(EmailPassword);
diff --git a/src/components/Header/index.js b/src/components/Header/index.js
index a52130c..5281850 100644
--- a/src/components/Header/index.js
+++ b/src/components/Header/index.js
@@ -21,6 +21,9 @@ const Header = (props) => {
                 <div className="callToActions">
                     {currentUser && (
                         <ul>
+                            <li>
+                                <Link to="/dashboard">Dashboard</Link>
+                            </li>
                             <li>
                                 <span
                                     onClick={() => {
@@ -35,6 +38,9 @@ const Header = (props) => {
                     )}
                     {!currentUser && (
                         <ul>
+                            <li>
+                                <Link to="/dashboard">Dashboard</Link>
+                            </li>
                             <li>
                                 <Link to="/registration">Register</Link>
                             </li>
diff --git a/src/components/SignIn/index.js b/src/components/SignIn/index.js
index 36783ab..1d93156 100644
--- a/src/components/SignIn/index.js
+++ b/src/components/SignIn/index.js
@@ -1,4 +1,4 @@
-import React, { Component } from "react";
+import React, { useState } from "react";
 import "./styles.scss";
 import { signInWithGoogle, auth } from "./../../firebase/utils";
 import { Link } from "react-router-dom";
@@ -7,78 +7,61 @@ import AuthWrapper from "../AuthWrapper";
 import FormInput from "./../forms/FormInput";
 import Buttons from "./../forms/Button";
 
-const initialState = {
-    email: "",
-    password: "",
-};
-
-class SignIn extends Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            ...initialState,
-        };
-        this.handleChange = this.handleChange.bind(this);
-    }
+const SignIn = (props) => {
+    const [email, setEmail] = useState("");
+    const [password, setPassword] = useState("");
+    const resetForm = () => {
+        setEmail("");
+        setPassword("");
+    };
 
-    handleSubmit = async (e) => {
+    const handleSubmit = async (e) => {
         e.preventDefault();
-        const { email, password } = this.state;
         try {
             await auth.signInWithEmailAndPassword(email, password);
-            this.setState({
-                ...initialState,
-            });
+            resetForm();
         } catch (err) {
             console.log(err);
         }
     };
-    handleChange(e) {
-        const { name, value } = e.target;
-        this.setState({
-            [name]: value,
-        });
-    }
-    render() {
-        const { email, password } = this.state;
-        const configAuthWrapper = {
-            headline: "LogIn",
-        };
 
-        return (
-            <AuthWrapper {...configAuthWrapper}>
-                <div className="formWrap">
-                    <form onSubmit={this.handleSubmit}>
-                        <FormInput
-                            type="email"
-                            name="email"
-                            value={email}
-                            placeholder="Email"
-                            handleChange={this.handleChange}
-                        />
-                        <FormInput
-                            type="password"
-                            name="password"
-                            value={password}
-                            placeholder="Password"
-                            handleChange={this.handleChange}
-                        />
-                        <Buttons type="submit">Login</Buttons>
-                        <div className="socialSignin">
-                            <div className="row">
-                                <Buttons onClick={signInWithGoogle}>
-                                    Sign in with Google
-                                </Buttons>
-                            </div>
-                        </div>
-                        <div className="links">
-                            <Link to="/recovery">Reset Password</Link>
+    const configAuthWrapper = {
+        headline: "LogIn",
+    };
+
+    return (
+        <AuthWrapper {...configAuthWrapper}>
+            <div className="formWrap">
+                <form onSubmit={handleSubmit}>
+                    <FormInput
+                        type="email"
+                        name="email"
+                        value={email}
+                        placeholder="Email"
+                        handleChange={(e) => setEmail(e.target.value)}
+                    />
+                    <FormInput
+                        type="password"
+                        name="password"
+                        value={password}
+                        placeholder="Password"
+                        handleChange={(e) => setPassword(e.target.value)}
+                    />
+                    <Buttons type="submit">Login</Buttons>
+                    <div className="socialSignin">
+                        <div className="row">
+                            <Buttons onClick={signInWithGoogle}>
+                                Sign in with Google
+                            </Buttons>
                         </div>
-                    </form>
-                </div>
-            </AuthWrapper>
-        );
-    }
-}
+                    </div>
+                    <div className="links">
+                        <Link to="/recovery">Reset Password</Link>
+                    </div>
+                </form>
+            </div>
+        </AuthWrapper>
+    );
+};
 
 export default SignIn;
diff --git a/src/components/Signup/index.js b/src/components/Signup/index.js
index eb98d8c..d0a9cb8 100644
--- a/src/components/Signup/index.js
+++ b/src/components/Signup/index.js
@@ -1,4 +1,4 @@
-import React, { Component } from "react";
+import React, { useState } from "react";
 import "./styles.scss";
 
 import { auth, handleUserProfile } from "./../../firebase/utils";
@@ -7,36 +7,25 @@ import AuthWrapper from "../AuthWrapper";
 import FormInput from "../forms/FormInput";
 import Button from "../forms/Button";
 
-const initialState = {
-    displayName: "",
-    email: "",
-    password: "",
-    confirmPassword: "",
-    errors: [],
-};
+const Signup = (props) => {
+    const [displayName, setDisplayName] = useState("");
+    const [email, setEmail] = useState("");
+    const [password, setPassowrd] = useState("");
+    const [confirmPassword, setConfirmPassword] = useState("");
+    const [errors, setErrors] = useState([]);
 
-class Signup extends Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            ...initialState,
-        };
-        this.handleChange = this.handleChange.bind(this);
-    }
-    handleChange(e) {
-        const { name, value } = e.target;
-        this.setState({
-            [name]: value,
-        });
-    }
-    handleFormSubmit = async (event) => {
+    const reset = () => {
+        setDisplayName("");
+        setEmail("");
+        setPassowrd("");
+        setConfirmPassword("");
+        setErrors([]);
+    };
+    const handleFormSubmit = async (event) => {
         event.preventDefault();
-        const { displayName, email, password, confirmPassword } = this.state;
         if (password !== confirmPassword) {
             const err = ["Password don't match..."];
-            this.setState({
-                errors: err,
-            });
+            setErrors(err);
             return;
         }
         try {
@@ -45,66 +34,60 @@ class Signup extends Component {
                 password
             );
             await handleUserProfile(user, { displayName });
-            this.setState({
-                ...initialState,
-            });
+            reset();
         } catch (err) {
             console.log(err);
         }
     };
 
-    render() {
-        const { displayName, email, password, confirmPassword, errors } =
-            this.state;
-        const configAuthWrapper = {
-            headline: "Registration",
-        };
+    const configAuthWrapper = {
+        headline: "Registration",
+    };
 
-        return (
-            <AuthWrapper {...configAuthWrapper}>
-                <div className="formWrap">
-                    {errors.length > 0 && (
-                        <ul>
-                            {errors.map((err, index) => {
-                                return <li key={index}>{err}</li>;
-                            })}
-                        </ul>
-                    )}
-                    <form onSubmit={this.handleFormSubmit}>
-                        <FormInput
-                            type="text"
-                            name="displayName"
-                            value={displayName}
-                            placeholder="Full name"
-                            onChange={this.handleChange}
-                        />
-                        <FormInput
-                            type="email"
-                            name="email"
-                            value={email}
-                            placeholder="Email"
-                            onChange={this.handleChange}
-                        />
-                        <FormInput
-                            type="password"
-                            name="password"
-                            value={password}
-                            placeholder="Password"
-                            onChange={this.handleChange}
-                        />
-                        <FormInput
-                            type="password"
-                            name="confirmPassword"
-                            value={confirmPassword}
-                            placeholder="Confirm Password"
-                            onChange={this.handleChange}
-                        />
-                        <Button type="submit">Register</Button>
-                    </form>
-                </div>
-            </AuthWrapper>
-        );
-    }
-}
+    return (
+        <AuthWrapper {...configAuthWrapper}>
+            <div className="formWrap">
+                {errors.length > 0 && (
+                    <ul>
+                        {errors.map((err, index) => {
+                            return <li key={index}>{err}</li>;
+                        })}
+                    </ul>
+                )}
+                <form onSubmit={handleFormSubmit}>
+                    <FormInput
+                        type="text"
+                        name="displayName"
+                        value={displayName}
+                        placeholder="Full name"
+                        handleChange={(e) => setDisplayName(e.target.value)}
+                    />
+                    <FormInput
+                        type="email"
+                        name="email"
+                        value={email}
+                        placeholder="Email"
+                        handleChange={(e) => setEmail(e.target.value)}
+                    />
+                    <FormInput
+                        type="password"
+                        name="password"
+                        value={password}
+                        placeholder="Password"
+                        handleChange={(e) => setPassowrd(e.target.value)}
+                    />
+                    <FormInput
+                        type="password"
+                        name="confirmPassword"
+                        value={confirmPassword}
+                        placeholder="Confirm Password"
+                        handleChange={(e) => setConfirmPassword(e.target.value)}
+                    />
+                    <Button type="submit">Register</Button>
+                </form>
+            </div>
+        </AuthWrapper>
+    );
+};
 
 export default Signup;
diff --git a/src/customHooks/index.js b/src/customHooks/index.js
new file mode 100644
index 0000000..68a75b2
--- /dev/null
+++ b/src/customHooks/index.js
@@ -0,0 +1,3 @@
+import useAuth from "./useAuth";
+
+export { useAuth };
diff --git a/src/customHooks/useAuth.js b/src/customHooks/useAuth.js
new file mode 100644
index 0000000..79b1d5e
--- /dev/null
+++ b/src/customHooks/useAuth.js
@@ -0,0 +1,19 @@
+import { useEffect } from "react";
+import { useSelector } from "react-redux";
+// import { withRouter } from "../withRouter";
+import { Redirect, Route } from "react-router-dom";
+
+const mapState = ({ user }) => ({
+    currentUser: user.currentUser,
+});
+
+const useAuth = (props) => {
+    const { currentUser } = useSelector(mapState);
+    useEffect(() => {
+        if (!currentUser) {
+        }
+    }, [currentUser]);
+    return currentUser;
+};
+
+export default useAuth;
diff --git a/src/hoc/withAuth.js b/src/hoc/withAuth.js
new file mode 100644
index 0000000..fb69e87
--- /dev/null
+++ b/src/hoc/withAuth.js
@@ -0,0 +1,6 @@
+import { useAuth } from "../customHooks";
+import { withRouter } from "../withRouter";
+
+const WithAuth = (props) => useAuth(props) && props.children;
+
+export default WithAuth;
diff --git a/src/pages/Dashboard/index.js b/src/pages/Dashboard/index.js
new file mode 100644
index 0000000..233dbe2
--- /dev/null
+++ b/src/pages/Dashboard/index.js
@@ -0,0 +1,8 @@
+import React from "react";
+import "./styles.scss";
+
+const Dashboard = (props) => {
+    return <h1>Your logged in</h1>;
+};
+
+export default Dashboard;
diff --git a/src/pages/Dashboard/styles.scss b/src/pages/Dashboard/styles.scss
new file mode 100644
index 0000000..e69de29