Use redux hooks on the auth component
This commit is contained in:
parent
2e83c3169f
commit
e7f96a1bd7
@ -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);
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user