From 63c30750af499be95e2f09e23549260e294e4813 Mon Sep 17 00:00:00 2001
From: Stepan Usatiuk <stepanusatiuk@gmail.com>
Date: Mon, 12 Oct 2020 18:35:39 +0300
Subject: [PATCH] use AuthWrapper for routes

---
 frontend/src/App.tsx              | 37 +++++------------------------
 frontend/src/Auth/AuthWrapper.tsx | 39 +++++++++++++++++++++++++++++++
 2 files changed, 45 insertions(+), 31 deletions(-)
 create mode 100644 frontend/src/Auth/AuthWrapper.tsx

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 6ac8141..69c50a9 100644
--- a/frontend/src/App.tsx
+++ b/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);
diff --git a/frontend/src/Auth/AuthWrapper.tsx b/frontend/src/Auth/AuthWrapper.tsx
new file mode 100644
index 0000000..e66ec58
--- /dev/null
+++ b/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;
+}