Add next parameter when redirecting to login

package-lock.json

@@ -4210,8 +4210,7 @@
     "decode-uri-component": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz",
-      "integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=",
-      "dev": true
+      "integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU="
     },
     "decompress": {
       "version": "4.2.0",
@@ -10559,6 +10558,24 @@
         "prepend-http": "^1.0.0",
         "query-string": "^4.1.0",
         "sort-keys": "^1.0.0"
+      },
+      "dependencies": {
+        "query-string": {
+          "version": "4.3.4",
+          "resolved": "https://registry.npmjs.org/query-string/-/query-string-4.3.4.tgz",
+          "integrity": "sha1-u7aTucqRXCMlFbIosaArYJBD2+s=",
+          "dev": true,
+          "requires": {
+            "object-assign": "^4.1.0",
+            "strict-uri-encode": "^1.0.0"
+          }
+        },
+        "strict-uri-encode": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz",
+          "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=",
+          "dev": true
+        }
       }
     },
     "normalize.css": {
@@ -12684,13 +12701,12 @@
       "dev": true
     },
     "query-string": {
-      "version": "4.3.4",
-      "resolved": "https://registry.npmjs.org/query-string/-/query-string-4.3.4.tgz",
-      "integrity": "sha1-u7aTucqRXCMlFbIosaArYJBD2+s=",
-      "dev": true,
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/query-string/-/query-string-6.2.0.tgz",
+      "integrity": "sha512-5wupExkIt8RYL4h/FE+WTg3JHk62e6fFPWtAZA9J5IWK1PfTfKkMS93HBUHcFpeYi9KsY5pFbh+ldvEyaz5MyA==",
       "requires": {
-        "object-assign": "^4.1.0",
-        "strict-uri-encode": "^1.0.0"
+        "decode-uri-component": "^0.2.0",
+        "strict-uri-encode": "^2.0.0"
       }
     },
     "querystring": {
@@ -14705,10 +14721,9 @@
       }
     },
     "strict-uri-encode": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz",
-      "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=",
-      "dev": true
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz",
+      "integrity": "sha1-ucczDHBChi9rFC3CdLvMWGbONUY="
     },
     "string-width": {
       "version": "2.1.1",

package.json

@@ -98,6 +98,7 @@
     "mobx": "^5.0.3",
     "mobx-react": "^5.2.3",
     "normalize.css": "^8.0.0",
+    "query-string": "^6.2.0",
     "react-helmet": "^5.2.0",
     "react-router": "^4.3.1",
     "react-router-dom": "^4.3.1"

src/pages/AdminCommonPage/AdminCommonPage.tsx

@@ -1,6 +1,8 @@
 import * as React from "react";
+import { Redirect } from "react-router-dom";
 import AdminHeader from "../../components/AdminHeader";
 import AdminSidebar from "../../components/AdminSidebar";
+import { isAuthenticated } from "../../auth";
 import "./AdminCommonPage.scss";
 
 export interface AdminCommonPageProps {
@@ -8,13 +10,48 @@ export interface AdminCommonPageProps {
   match: {
     path: string;
   };
+  requireAuthentication?: boolean;
+}
+export interface AdminCommonPageState {
+  redirecting: boolean;
 }
-export interface AdminCommonPageState { }
 
 class AdminCommonPage extends React.Component<AdminCommonPageProps, AdminCommonPageState> {
+  unmounted: boolean;
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      redirecting: false,
+    };
+
+    if (props.requireAuthentication) {
+      this.updateIsAuthenticated();
+    }
+  }
+
+  componentWillUnmount() {
+    this.unmounted = true;
+  }
+
+  updateIsAuthenticated = async () => {
+    const redirecting = !await isAuthenticated();
+    if (!this.unmounted && redirecting) {
+      this.setState({
+        redirecting,
+      });
+    }
+  }
+
   render() {
     const Page = this.props.page;
     const { path } = this.props.match;
+    const { redirecting } = this.state;
+
+    if (redirecting) {
+      const loginURL = `/admin/login?next=${path}`;
+      return <Redirect to={loginURL} />;
+    }
 
     return (
       <React.Fragment>

src/pages/AdminLoginPage/AdminLoginPage.tsx

@@ -1,6 +1,7 @@
 import * as React from "react";
 import Helmet from "react-helmet";
 import { Redirect } from "react-router-dom";
+import * as qs from "query-string";
 import { generateToken, setTokenCookie, isAuthenticated } from "../../auth";
 import "./AdminLoginPage.scss";
 
@@ -8,6 +9,9 @@ export interface AdminLoginPageProps {
   history: {
     push: (to: string) => void;
   };
+  location: {
+    search: string;
+  };
 }
 export interface AdminLoginPageState {
   username: string;
@@ -48,7 +52,8 @@ class AdminLoginPage extends React.Component<AdminLoginPageProps, AdminLoginPage
       console.log("JWT token:", token);
       setTokenCookie(token);
 
-      history.push("/admin");
+      const next = this.getRedirectURL();
+      history.push(next);
     } catch (err) {
       this.setState({
         error: "Failed to log in!",
@@ -80,10 +85,19 @@ class AdminLoginPage extends React.Component<AdminLoginPageProps, AdminLoginPage
     );
   }
 
+  getRedirectURL = () => {
+    const { location } = this.props;
+    const { search } = location;
+    const params = qs.parse(search);
+    const { next } = params;
+    return next || "/admin";
+  }
+
   render() {
     const { username, password, isAuthenticated } = this.state;
     if (isAuthenticated) {
-      return <Redirect to="/admin" />;
+      const next = this.getRedirectURL();
+      return <Redirect to={next} />;
     }
 
     return (

src/routes.tsx

@@ -24,11 +24,7 @@ const renderAdminLoginPage = (Page) => (props): JSX.Element => {
 };
 
 const renderAdminPage = (Page) => (props): JSX.Element => {
-  if (!!getTokenCookie()) {
-    return <AdminCommonPage page={Page} {...props} />;
-  } else {
-    return <Redirect to="/admin/login" />;
-  }
+  return <AdminCommonPage page={Page} {...props} requireAuthentication />;
 };
 
 const commonRoutes = [
@@ -47,10 +43,6 @@ const adminRoutes = [
 ];
 
 class Routes extends Component {
-  static getDerivedStateFromProps(props, state) {
-    console.log(props);
-  }
-
   render() {
     return (
       <Fragment>