Skip to content

Commit

Permalink
migration to hooks pt.1
Browse files Browse the repository at this point in the history
  • Loading branch information
@FacuEM
FacuEM committed Feb 10, 2021
1 parent 4a0bdff commit 10b634e
Show file tree
Hide file tree
Showing 18 changed files with 361 additions and 291 deletions.
39 changes: 39 additions & 0 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 3 additions & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,11 @@
"node-sass": "^5.0.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-redux": "^7.2.2",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.2",
"redux": "^4.0.5",
"redux-logger": "^3.0.6",
"web-vitals": "^1.1.0"
},
"scripts": {
Expand Down
151 changes: 76 additions & 75 deletions src/App.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,12 @@
import { Switch, Route, Redirect } from "react-router-dom";
import React, { Component } from "react";
import React, { useEffect } from "react";
import { auth, handleUserProfile } from "./firebase/utils";
import { connect } from "react-redux";
import { setCurrentUser } from "./redux/User/user.actions";
import "./default.scss";

// hoc
import WithAuth from "./hoc/withAuth";
// layouts
import MainLayout from "./layouts/MainLayout";
import HomepageLayout from "./layouts/HomepageLayout";
Expand All @@ -10,89 +15,85 @@ import Homepage from "./pages/Homepage";
import Registration from "./pages/Registration";
import Login from "./pages/Login";
import Recovery from "./pages/Recovery";
import Dashboard from "./pages/Dashboard";

const initialState = { currentUser: null };

class App extends Component {
constructor(props) {
super(props);
this.state = {
...initialState,
};
}
authListener = null;
componentDidMount() {
this.authListener = auth.onAuthStateChanged(async (userAuth) => {
const App = (props) => {
const { setCurrentUser, currentUser } = props;
useEffect(() => {
const authListener = auth.onAuthStateChanged(async (userAuth) => {
if (userAuth) {
const userRef = await handleUserProfile(userAuth);
userRef.onSnapshot((snapshot) => {
this.setState({
currentUser: {
id: snapshot.id,
...snapshot.data(),
},
setCurrentUser({
id: snapshot.id,
...snapshot.data(),
});
});
}
this.setState({
...initialState,
});
setCurrentUser(userAuth);
});
}
componentWillUnmount() {
this.authListener();
}

render() {
const { currentUser } = this.state;
return (
<div className="App">
<Switch>
<Route
exact
path="/"
render={() => (
<HomepageLayout currentUser={currentUser}>
<Homepage />
</HomepageLayout>
)}
/>
<Route
path="/registration"
render={() =>
currentUser ? (
<Redirect to="/" />
) : (
<MainLayout currentUser={currentUser}>
<Registration />
</MainLayout>
)
}
/>
<Route
path="/login"
render={() =>
currentUser ? (
<Redirect to="/" />
) : (
<MainLayout currentUser={currentUser}>
<Login />
</MainLayout>
)
}
/>
<Route
path="/recovery"
render={() => (
return () => {
authListener();
};
}, []);

return (
<div className="App">
<Switch>
<Route
exact
path="/"
render={() => (
<HomepageLayout>
<Homepage />
</HomepageLayout>
)}
/>
<Route
path="/registration"
render={() => (
<MainLayout>
<Registration />
</MainLayout>
)}
/>
<Route
path="/login"
render={() => (
<MainLayout>
<Login />
</MainLayout>
)}
/>
<Route
path="/recovery"
render={() => (
<MainLayout>
<Recovery />
</MainLayout>
)}
/>
<Route
path="/dashboard"
render={() => (
<WithAuth>
<MainLayout>
<Recovery />
<Dashboard />
</MainLayout>
)}
/>
</Switch>
</div>
);
}
}
</WithAuth>
)}
/>
</Switch>
</div>
);
};

const mapStateToProps = ({ user }) => ({
currentUser: user.currentUser,
});
const mapDispatchToProps = (dispatch) => ({
setCurrentUser: (user) => dispatch(setCurrentUser(user)),
});

export default App;
export default connect(mapStateToProps, mapDispatchToProps)(App);
96 changes: 38 additions & 58 deletions src/components/EmailPassword/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,81 +1,61 @@
import React, { Component } from "react";
import { withRouter } from "react-router-dom";
import React, { useState } from "react";
import { useHistory } from "react-router-dom";
import "./styles.scss";
import AuthWrapper from "./../AuthWrapper";
import FormInput from "./../forms/FormInput";
import Button from "./../forms/Button";
import { auth } from "./../../firebase/utils";

const initialState = {
email: "",
errors: [],
};

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 EmailPassword = (props) => {
let history = useHistory();
const [email, setEmail] = useState("");
const [errors, setErrors] = useState([]);
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.histoy.push("/login"))
.then(() => history.push("/login"))
.catch(() => {
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",
};
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>
);
}
}
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={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);
export default EmailPassword;
8 changes: 6 additions & 2 deletions src/components/Header/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
import React from "react";
import { Link } from "react-router-dom";
import { useSelector } from "react-redux";
import "./styles.scss";
import Logo from "./../../assets/logo.png";
import { auth } from "./../../firebase/utils";

const Header = (props) => {
const { currentUser } = props;
const currentUser = useSelector((state) => state.user.currentUser);
return (
<header className="header">
<div className="wrap">
Expand All @@ -18,7 +19,10 @@ const Header = (props) => {
{currentUser && (
<ul>
<li>
<span onClick={() => auth.signOut()}>LogOut</span>
<Link to="/dashboard">My Account</Link>
</li>
<li>
<span onClick={() => auth.signOut()}>LOGOUT</span>
</li>
</ul>
)}
Expand Down
Loading

0 comments on commit 10b634e

Please sign in to comment.