The logic: Show a component only if the user logged in
import React from 'react';
import {connect} from "react-redux";
interface AuthenticatedUserOnlyProps {
authenticated: boolean
}
function mapStateToProps(state: State) {
return {
authenticated: state.authenticated
};
}
export function authenticatedUserOnly<T>(WrappedComponent: React.ComponentType<T>) {
class FinalComponent extends React.Component<AuthenticatedUserOnlyProps > {
public render() {
const {authenticated, ...otherProps} = this.props;
if (authenticated) {
return <WrappedComponent {...(otherProps as T)}/>
} else {
return null;
}
}
};
return connect(mapStateToProps, null)(FinalComponent);
}
To use it, just
render() {
const someComponent = authenticatedUserOnly(SomeComponent);
return {
<div>
{someComponent }
</div>
}
}