use AuthWrapper for routes

frontend/src/App.tsx

@@ -1,42 +1,17 @@
 import * as React from "react";
-import { connect } from "react-redux";
-import {
-    Redirect,
-    Route,
-    RouteComponentProps,
-    Switch,
-    withRouter,
-} from "react-router";
+import { Route, RouteComponentProps, Switch, withRouter } from "react-router";
 import { AuthScreen } from "~Auth/AuthScreen";
+import { requireAuth } from "~Auth/AuthWrapper";
 import { Home } from "~Home/Home";
-import { Landing } from "~Landing/Landing";
-import { IAppState } from "~redux/reducers";
 
-interface IAppComponentProps extends RouteComponentProps {
-    loggedIn: boolean;
-}
-
-export function AppComponent(props: IAppComponentProps) {
-    const { loggedIn } = props;
-    return loggedIn ? (
+export function AppComponent(props: RouteComponentProps) {
+    return (
         <Switch>
             <Route path="/signup" component={AuthScreen} />,
             <Route path="/login" component={AuthScreen} />,
-            <Route path="/docs/:id" component={Home} />,
-            <Route path="/" component={Home} />,
-        </Switch>
-    ) : (
-        <Switch>
-            <Route path="/signup" component={AuthScreen} />
-            <Route path="/login" component={AuthScreen} />
-            <Route exact={true} path="/" component={Landing} />
-            <Route path="/" component={() => <Redirect to="/login" />} />
+            <Route path="/" component={requireAuth(Home)} />,
         </Switch>
     );
 }
 
-function mapStateToProps(state: IAppState) {
-    return { loggedIn: state.auth.jwt !== null };
-}
-
-export const App = withRouter(connect(mapStateToProps)(AppComponent));
+export const App = withRouter(AppComponent);

frontend/src/Auth/AuthWrapper.tsx

@@ -0,0 +1,39 @@
+import * as React from "react";
+import { connect } from "react-redux";
+import { Redirect } from "react-router";
+import { webRoot } from "~env";
+import { IAppState } from "~redux/reducers";
+
+interface IAuthWrapperComponentProps {
+    loggedIn: boolean;
+}
+
+export const AuthWrapperComponent: React.FunctionComponent<IAuthWrapperComponentProps> = (
+    props,
+) => {
+    if (!props.children) {
+        return <Redirect to={webRoot} />;
+    }
+    if (props.loggedIn) {
+        return <div>{props.children}</div>;
+    } else {
+        return <Redirect to={"/login"} />;
+    }
+};
+
+function mapStateToProps(state: IAppState): IAuthWrapperComponentProps {
+    return { loggedIn: state.auth.jwt !== null };
+}
+
+export const AuthWrapper = connect(mapStateToProps)(AuthWrapperComponent);
+
+export function requireAuth(Component: React.ComponentType): () => JSX.Element {
+    const wrapped = () => {
+        return (
+            <AuthWrapper>
+                <Component />
+            </AuthWrapper>
+        );
+    };
+    return wrapped;
+}