fix: handle default route and remove dependency on jQuery 🎉 (#327)

closes #326 and closes #266
webiny · Dec 10, 2018 · 1ebf7f1 · 1ebf7f1
1 parent 41e1135
commit 1ebf7f1
Show file tree

Hide file tree

Showing 7 changed files with 291 additions and 150 deletions.
diff --git a/idea.js b/idea.js
@@ -7,6 +7,7 @@ System.config({
         "webiny-api/*": "./packages/webiny-api/src/*",
         "webiny-api-cms/*": "./packages/webiny-api-cms/src/*",
         "webiny-ui/*": "./packages/webiny-ui/src/*",
-        "webiny-plugins/*": "./packages/webiny-plugins/src/*"
+        "webiny-plugins/*": "./packages/webiny-plugins/src/*",
+        "webiny-react-router/*": "./packages/webiny-react-router/src/*"
     }
 });
diff --git a/packages/demo-admin/src/config/development.js b/packages/demo-admin/src/config/development.js
@@ -10,7 +10,7 @@ import { createOmitTypenameLink } from "webiny-app/graphql";
 export default {
     router: {
         basename: "/admin",
-        defaultRoute: "Policies",
+        defaultRoute: "Cms.Pages",
         middleware: [renderMiddleware()]
     },
     apolloClient: new ApolloClient({

diff --git a/packages/demo-admin/src/config/production.js b/packages/demo-admin/src/config/production.js
@@ -9,7 +9,7 @@ import { createAuthLink } from "webiny-app-admin/security";
 export default {
     router: {
         basename: "/admin",
-        defaultRoute: "Policies",
+        defaultRoute: "Cms.Pages",
         middleware: [renderMiddleware()]
     },
     apolloClient: new ApolloClient({

diff --git a/packages/webiny-react-router/package.json b/packages/webiny-react-router/package.json
@@ -15,7 +15,6 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.0.0",
-    "jquery": "^3.3.1",
     "lodash": "^4.17.5",
     "query-string": "^6.0.0",
     "path-to-regexp": "^2.2.0",

diff --git a/packages/webiny-react-router/src/Router.cmp.js b/packages/webiny-react-router/src/Router.cmp.js
@@ -1,6 +1,5 @@
 // @flow
 import React from "react";
-import $ from "jquery";
 import parse from "url-parse";
 
 class Router extends React.Component<*, *> {
@@ -20,25 +19,29 @@ class Router extends React.Component<*, *> {
             });
         });
 
-        $(document)
-            .off("click", "a")
-            .on("click", "a", function(e) {
-                if (this.href.endsWith("#") || this.target === "_blank") {
-                    return;
-                }
+        document.addEventListener("click", function(event: Event) {
+            // $FlowFixMe
+            const a = event.path.find(el => el.tagName === "A");
+            if (!a) {
+                return;
+            }
 
-                // Check if it's an anchor link
-                if (this.href.indexOf("#") > -1) {
-                    return;
-                }
+            if (a.href.endsWith("#") || a.target === "_blank") {
+                return;
+            }
 
-                if (this.href.startsWith(window.location.origin)) {
-                    e.preventDefault();
+            // Check if it's an anchor link
+            if (a.href.indexOf("#") > -1) {
+                return;
+            }
 
-                    let url = parse(this.href, true);
-                    history.push(url.pathname, router.config.basename);
-                }
-            });
+            if (a.href.startsWith(window.location.origin)) {
+                event.preventDefault();
+
+                let url = parse(a.href, true);
+                history.push(url.pathname, router.config.basename);
+            }
+        });
 
         router.matchRoute(history.location.pathname).then(route => {
             this.setState({ route });

diff --git a/packages/webiny-react-router/src/Router.js b/packages/webiny-react-router/src/Router.js
@@ -78,6 +78,27 @@ class Router {
         return _.find(this.routes, { name });
     }
 
+    async renderDefaultRoute() {
+        const defaultRoute = this.routes.find(r => r.name === this.config.defaultRoute);
+
+        if (defaultRoute) {
+            this.route = defaultRoute;
+            this.match = {
+                path: defaultRoute.path,
+                url: defaultRoute.path,
+                isExact: true,
+                params: {},
+                query: {}
+            };
+            const params = { route: defaultRoute, output: null, match: this.match };
+            await this.middleware(params);
+
+            return params.output;
+        }
+
+        return null;
+    }
+
     async matchRoute(pathname: string) {
         debug("Matching location %o", pathname);
         let route = null;
@@ -118,7 +139,7 @@ class Router {
             return params.output;
         }
 
-        return route;
+        return await this.renderDefaultRoute();
     }
 }