Skip to content

Commit

Permalink
used react hooks, changed many classes to function based components, …
Browse files Browse the repository at this point in the history 
…redirect dashboard problem
  • Loading branch information
@naimish73
naimish73 committed Aug 23, 2022
1 parent e7c2ca8 commit fb8d0db
Show file tree
Hide file tree
Showing 10 changed files with 250 additions and 253 deletions.
114 changes: 62 additions & 52 deletions src/App.js
View file
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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) => {
Expand All @@ -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,
Expand Down
89 changes: 34 additions & 55 deletions src/components/EmailPassword/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { Component } from "react";
import React, { useState } from "react";
import "./styles.scss";
import { withRouter } from "../../withRouter";

Expand All @@ -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);
6 changes: 6 additions & 0 deletions src/components/Header/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,9 @@ const Header = (props) => {
<div className="callToActions">
{currentUser && (
<ul>
<li>
<Link to="/dashboard">Dashboard</Link>
</li>
<li>
<span
onClick={() => {
Expand All @@ -35,6 +38,9 @@ const Header = (props) => {
)}
{!currentUser && (
<ul>
<li>
<Link to="/dashboard">Dashboard</Link>
</li>
<li>
<Link to="/registration">Register</Link>
</li>
Expand Down
Loading

0 comments on commit fb8d0db

Please sign in to comment.