Shim some stuff in <Link/> for legacy reasons

webpack/farmware/set_active_farmware_by_name.ts

@@ -3,18 +3,14 @@ import { urlFriendly, lastUrlChunk } from "../util";
 import { Actions } from "../constants";
 
 export function setActiveFarmwareByName(farmwareNames: (string | undefined)[]) {
-  if (lastUrlChunk() == "farmware") {
-    return;
-  }
+  const chunk = urlFriendly(lastUrlChunk());
+  if (chunk == "farmware") { return; }
 
-  farmwareNames.map(name => {
-    if (name) {
-      const urlName = urlFriendly(name);
-      (lastUrlChunk() === urlName) && store.dispatch({
-        type: Actions.SELECT_FARMWARE,
-        payload: name
-      });
+  farmwareNames.map(payload => {
+    if (payload) {
+      const urlName = urlFriendly(payload);
+      const match = chunk === urlName;
+      match && store.dispatch({ type: Actions.SELECT_FARMWARE, payload });
     }
   });
-
 }

webpack/link.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { html5LinkOnClick } from "takeme";
+import { navigate } from "takeme";
 
 interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
   to: string;
@@ -10,5 +10,10 @@ interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
 
 export const Link: React.SFC<LinkProps> = (props) => <a
   {...props}
-  onClick={e => html5LinkOnClick({ event: e.nativeEvent })}
-  href={props.to} />;
+  href={props.to}
+  onClick={(e: React.MouseEvent<HTMLAnchorElement>) => {
+    e.preventDefault();
+    /** BEGIN LEGACY SHIMS */
+    const href = props.to;
+    navigate(href.startsWith("/app") ? href.replace("/app", "") : href);
+  }} />;

webpack/route_config_new.ts

@@ -1,4 +1,5 @@
 import { RouteConfig } from "takeme";
+import { Apology } from "./apology";
 
 interface FarmBotRoute<T> { $: string; enter: () => Promise<T>; key: keyof T; }
 
@@ -14,13 +15,16 @@ const rc =
           callback((await enter())[key], info);
         } catch (e) {
           console.error(e);
-          alert("Kaboom");
+          callback(Apology, info);
         }
       }
     };
   };
 
-export const ROUTES = [
+/** Bind the route to a callback by calling in a function that passes the
+  callback in as the first argument
+ */
+export const UNBOUND_ROUTES = [
   rc({
     $: "/account",
     enter: () => import("./account/index"),
@@ -101,13 +105,13 @@ export const ROUTES = [
     enter: () => import("./devices/devices"),
     key: "Devices"
   }),
-  // rc({
-  //   $: "/farmware",
-  //   enter: () => import("./farmware/index"),
-  //   key: "FarmwarePage"
-  // }),
   rc({
-    $: "/farmware(/:farmware)",
+    $: "/farmware/*",
+    enter: () => import("./farmware/index"),
+    key: "FarmwarePage"
+  }),
+  rc({
+    $: "/farmware",
     enter: () => import("./farmware/index"),
     key: "FarmwarePage"
   }),
@@ -127,12 +131,7 @@ export const ROUTES = [
     key: "Regimens"
   }),
   rc({
-    $: "/sequences",
-    enter: () => import("./sequences/sequences"),
-    key: "Sequences"
-  }),
-  rc({
-    $: "/sequences/:sequence",
+    $: "/sequences(/:sequence)",
     enter: () => import("./sequences/sequences"),
     key: "Sequences"
   }),

webpack/routes.tsx

@@ -10,7 +10,7 @@ import { attachToRoot } from "./util";
 import { Callback } from "i18next";
 import { ErrorBoundary } from "./error_boundary";
 import { Router } from "takeme";
-import { ROUTES } from "./route_config_new";
+import { UNBOUND_ROUTES } from "./route_config_new";
 import { App } from "./app";
 
 interface RootComponentProps { store: Store; }
@@ -39,7 +39,7 @@ export class RootComponent extends React.Component<RootComponentProps, RootCompo
     (c: React.ComponentType) => this.setState({ CurrentRoute: c });
 
   componentDidMount() {
-    const routes = ROUTES.map(x => x(this.changeRoute));
+    const routes = UNBOUND_ROUTES.map(bindTo => bindTo(this.changeRoute));
     new Router(routes).enableHtml5Routing("/app").init();
   }