import {h, Component} from 'preact';
import {connect} from 'preact-redux';

const mapStateToProps = state => {
  const {loggedIn, authTags} = state.Auth;
  return {
    loggedIn,
    authTags,
  };
};

const Protected = (child, auth, args) => {
  return connect(mapStateToProps)(
    class extends Component {
      // '/x/login'
      render(props) {
        const {loggedIn, authTags} = props;
        if (!loggedIn || (auth && !new Set(authTags.split(',')).has(auth))) {
          return <div>Unauthorized</div>;
        }
        return h(child, Object.assign({}, props, args));
      }
    },
  );
};

export default Protected;

@@ -30,16 +30,133 @@
 react';%0A
+import %7BLink%7D from 'react-router-dom';%0Aimport Button from 'component/button';%0Aimport FaIcon from 'component/faicon';%0A
 import %7B
@@ -185,16 +185,16 @@
 redux';%0A
-
 %0Aconst m
@@ -424,28 +424,8 @@
 t %7B%0A
-      // '/x/login'%0A
     
@@ -511,11 +511,310 @@
 edIn
- %7C%7C
+) %7B%0A          return (%0A            %3Cdiv%3E%0A              %3Ch4%3ENot Logged In%3C/h4%3E%0A              %3CLink to=%22/x/login%22%3E%0A                %3CButton outline%3E%0A                  Login %3CFaIcon icon=%22chevron-right%22 /%3E%0A                %3C/Button%3E%0A              %3C/Link%3E%0A            %3C/div%3E%0A          );%0A        %7D%0A        if
  (au
@@ -859,17 +859,16 @@
 s(auth))
-)
  %7B%0A     
@@ -883,31 +883,94 @@
 urn 
-%3Cdiv%3EUnauthorized%3C/div%3E
+(%0A            %3Cdiv%3E%0A              %3Ch4%3EUnauthorized%3C/h4%3E%0A            %3C/div%3E%0A          )
 ;%0A  

Remove automatic redirection for protected routes