Use redux hooks on the auth component

This commit is contained in:
Grégoire Delattre 2020-04-03 16:29:06 +02:00
parent 2e83c3169f
commit e7f96a1bd7

View File

@ -1,17 +1,19 @@
import React from "react"; import React from "react";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import { connect } from "react-redux"; import { useDispatch, useSelector } from "react-redux";
import { Route, Redirect } from "react-router-dom"; import { Route, Redirect } from "react-router-dom";
import { setUserToken } from "./actions/users"; import { setUserToken } from "./actions/users";
const protectedRoute = ({ export const ProtectedRoute = ({ component: Component, ...otherProps }) => {
component: Component, const dispatch = useDispatch();
isLogged,
isActivated, const isLogged = useSelector((state) => state.userStore.get("isLogged"));
isTokenSet, const isActivated = useSelector((state) =>
setUserToken, state.userStore.get("isActivated")
...otherProps );
}) => { const isTokenSet = useSelector((state) => state.userStore.get("isTokenSet"));
const isAuthenticated = () => { const isAuthenticated = () => {
if (isTokenSet) { if (isTokenSet) {
return true; return true;
@ -20,7 +22,7 @@ const protectedRoute = ({
const token = localStorage.getItem("token"); const token = localStorage.getItem("token");
if (isLogged || (token && token !== "")) { if (isLogged || (token && token !== "")) {
if (!isTokenSet) { if (!isTokenSet) {
setUserToken(token); dispatch(setUserToken(token));
} }
return true; return true;
} }
@ -45,24 +47,12 @@ const protectedRoute = ({
/> />
); );
}; };
protectedRoute.propTypes = { ProtectedRoute.propTypes = {
component: PropTypes.func, component: PropTypes.func,
isLogged: PropTypes.bool.isRequired,
isActivated: PropTypes.bool.isRequired,
isTokenSet: PropTypes.bool.isRequired,
setUserToken: PropTypes.func.isRequired,
}; };
export const ProtectedRoute = connect(
(state) => ({
isLogged: state.userStore.get("isLogged"),
isAdmin: state.userStore.get("isLogged"),
isActivated: state.userStore.get("isActivated"),
isTokenSet: state.userStore.get("isTokenSet"),
}),
{ setUserToken }
)(protectedRoute);
const adminRoute = ({ component: Component, isAdmin, ...otherProps }) => { export const AdminRoute = ({ component: Component, ...otherProps }) => {
const isAdmin = useSelector((state) => state.userStore.get("isAdmin"));
return ( return (
<Route <Route
{...otherProps} {...otherProps}
@ -76,10 +66,6 @@ const adminRoute = ({ component: Component, isAdmin, ...otherProps }) => {
/> />
); );
}; };
adminRoute.propTypes = { AdminRoute.propTypes = {
component: PropTypes.func, component: PropTypes.func,
isAdmin: PropTypes.bool.isRequired,
}; };
export const AdminRoute = connect((state) => ({
isAdmin: state.userStore.get("isLogged"),
}))(adminRoute);