Remove usage of next-routes, use dynamic routes

Signed-off-by: Janus Reith <[email protected]>

components/CheckoutActions/CheckoutActions.js

@@ -13,7 +13,7 @@ import { addTypographyStyles } from "@reactioncommerce/components/utils";
 import withAddressValidation from "containers/address/withAddressValidation";
 import Dialog from "@material-ui/core/Dialog";
 import PageLoading from "components/PageLoading";
-import { Router } from "routes";
+import Router from "next/router";
 // import track from "lib/tracking/track";
 // import TRACKING from "lib/tracking/constants";
 // import trackCheckout from "lib/tracking/trackCheckout";

components/CheckoutButtons/CheckoutButtons.js

@@ -1,7 +1,7 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
 import Button from "@reactioncommerce/components/Button/v1";
-import { Router } from "routes";
+import Router from "next/router";
 
 export default class CheckoutButtons extends Component {
   static propTypes = {

components/Entry/Entry.js

@@ -1,6 +1,6 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
-import { Router } from "routes";
+import Router from "next/router";
 import { withStyles } from "@material-ui/core/styles";
 import Typography from "@material-ui/core/Typography";
 import Grid from "@material-ui/core/Grid";

components/Link/Link.js

@@ -1,7 +1,7 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
 import React, { Component } from "react";
 import PropTypes from "prop-types";
-import routes, { Link as NextLink } from "routes";
+import NextLink from "next/link";
 import classNames from "classnames";
 import { withStyles } from "@material-ui/core/styles";
 // import track from "lib/tracking/track";
@@ -87,25 +87,8 @@ class Link extends Component {
       );
     }
 
-    // If link is a relative and should open in the same window,
-    // use `NextLink` component
-    if (process.env.ENABLE_SPA_ROUTING === false) {
-      const { urls: { as } } = routes.findAndGetUrls(route || to || href, params);
-
-      return (
-        <a
-          href={as}
-          className={classNames(classes.anchor, className)}
-          onClick={this.handleClick}
-          onKeyDown={this.handleKeyDown}
-        >
-          {children}
-        </a>
-      );
-    }
-
     return (
-      <NextLink route={route || to || href} params={params} {...props} passHref>
+      <NextLink href={route || to || href} {...props} passHref>
         <a
           className={classNames(classes.anchor, className)}
           onClick={this.handleClick}

components/MiniCart/MiniCart.js

@@ -7,7 +7,7 @@ import CartItems from "components/CartItems";
 import CartEmptyMessage from "@reactioncommerce/components/CartEmptyMessage/v1";
 import IconButton from "@material-ui/core/IconButton";
 import CartIcon from "mdi-material-ui/Cart";
-import { Router } from "routes";
+import Router from "next/router";
 import Badge from "@material-ui/core/Badge";
 import Popper from "@material-ui/core/Popper";
 import Fade from "@material-ui/core/Fade";

components/NavigationDesktop/NavigationItemDesktop.js

@@ -13,7 +13,7 @@ import ChevronDownIcon from "mdi-material-ui/ChevronDown";
 import ChevronRight from "mdi-material-ui/ChevronRight";
 import ChevronUpIcon from "mdi-material-ui/ChevronUp";
 import { withStyles } from "@material-ui/core/styles";
-import { Router } from "routes";
+import Router from "next/router";
 import Link from "components/Link";
 
 const styles = (theme) => ({

components/NavigationMobile/NavigationItemMobile.js

@@ -2,7 +2,7 @@ import React, { Component, Fragment } from "react";
 import PropTypes from "prop-types";
 import classNames from "classnames";
 import { inject, observer } from "mobx-react";
-import { Router } from "routes";
+import Router from "next/router";
 import ListItemIcon from "@material-ui/core/ListItemIcon";
 import ListItemText from "@material-ui/core/ListItemText";
 import Divider from "@material-ui/core/Divider";

components/ProductDetail/ProductDetail.js

@@ -13,7 +13,7 @@ import ProductDetailVendor from "components/ProductDetailVendor";
 import ProductDetailDescription from "components/ProductDetailDescription";
 import ProductDetailPrice from "components/ProductDetailPrice";
 import MediaGallery from "components/MediaGallery";
-import { Router } from "routes";
+import Router from "next/router";
 import priceByCurrencyCode from "lib/utils/priceByCurrencyCode";
 import variantById from "lib/utils/variantById";
 // import trackProduct from "lib/tracking/trackProduct";

lib/stores/RoutingStore.js

@@ -1,5 +1,5 @@
 import { action, toJS, observable, decorate } from "mobx";
-import routes, { Router } from "routes";
+import Router from "next/router";
 import { inPageSizes, PAGE_SIZES } from "lib/utils/pageSizes";
 
 /**
@@ -69,30 +69,6 @@ class RoutingStore {
     this.requestPath = path;
   }
 
-  /**
-   * Set a new rewrite route for the browser app that resolves to an internal route.
-   * This is used to handle rewrite urls from an HTTP proxy by adding a new
-   * route so the browser-side app can properly resolve that path to a page.
-   * @name setRewriteRoute
-   * @param {String} from Path to add a dynamic route for.
-   * @param {String} to Internal page route, usually in the form of "/"" for home, "/product", "/tag", etc
-   * @returns {undefined} No return value
-   */
-  setRewriteRoute(from, to) {
-    this.setRequestPath(from);
-
-    if (process.browser) {
-      // Remove all generated rewrite routes
-      const routesWithoutRewrites = routes.routes.filter(({ name }) => (
-        name.startsWith("rewrite-") === false
-      ));
-      routes.routes = routesWithoutRewrites;
-
-      // Add new generated route
-      routes.add(`rewrite-${from}`, from, to);
-    }
-  }
-
   /**
    * Set a query string for the current route
    * @name setSearch
@@ -157,7 +133,6 @@ decorate(RoutingStore, {
   setTagId: action,
   updateRoute: action,
   setRequestPath: action,
-  setRewriteRoute: action,
   setSearch: action
 })
 

lib/utils/withLocales.js

@@ -1,8 +1,6 @@
-/* eslint-disable react/display-name, react/no-multi-comp */
-
-import React, { Component } from "react";
+import React from "react";
 import PropTypes from "prop-types";
-import { inject, observer } from "mobx-react";
+import locales from "./locales.json";
 
 /**
  *
@@ -12,47 +10,18 @@ import { inject, observer } from "mobx-react";
  * @return {Class} - React component with locales on props
  */
 export default function withLocales(ComponentWithLocales) {
-  class WithLocales extends Component {
-    static propTypes = {
-      forwardRef: PropTypes.func,
-      locales: PropTypes.object,
-      uiStore: PropTypes.object
-    };
-
-    static defaultProps = {
-      locales: {}
-    };
-
-    async componentDidMount() {
-      const { uiStore } = this.props;
-      const { locales: currentLocales } = uiStore;
-      if (Object.keys(currentLocales).length === 0) {
-        // eslint-disable-next-line
-        await this.loadLocales().then((locales) => {
-          uiStore.setLocales(locales);
-        });
-      }
-    }
-
-    async loadLocales() {
-      let locales;
-      try {
-        locales = await import("static/data/locales.json");
-      } catch (error) {
-        // eslint-disable-next-line
-        console.error(error);
-      }
-      return locales.default;
-    }
-
-    render() {
-      const { uiStore } = this.props;
-      const { locales } = uiStore;
-      return <ComponentWithLocales ref={this.props.forwardRef} {...this.props} locales={locales} />;
-    }
+  function WithLocales(props) {
+    return <ComponentWithLocales ref={props.forwardRef} {...props} locales={locales} />;
   }
 
-  const WrappedComp = inject("uiStore")(observer(WithLocales));
+  WithLocales.propTypes = {
+    forwardRef: PropTypes.func,
+    locales: PropTypes.object
+  };
+
+  WithLocales.defaultProps = {
+    locales: {}
+  };
 
-  return React.forwardRef((props, ref) => <WrappedComp {...props} forwardRef={ref} />);
-}
+  return React.forwardRef((props, ref) => <WithLocales {...props} forwardRef={ref} />);
+}

package.json

@@ -66,7 +66,6 @@
     "mobx": "~4.9.2",
     "mobx-react": "~5.4.3",
     "next": "^9.3.0",
-    "next-routes": "~1.4.2",
     "passport": "~0.4.0",
     "passport-oauth2": "~1.4.0",
     "prop-types": "^15.7.2",

pages/cart.js

@@ -11,7 +11,7 @@ import withCart from "containers/cart/withCart";
 import CartItems from "components/CartItems";
 import CheckoutButtons from "components/CheckoutButtons";
 import Link from "components/Link";
-import { Router } from "routes";
+import Router from "next/router";
 import PageLoading from "components/PageLoading";
 // import track from "lib/tracking/track";
 import variantById from "lib/utils/variantById";

pages/checkout.js → pages/cart/checkout.js

@@ -1,6 +1,6 @@
 import React, { Component, Fragment } from "react";
 import PropTypes from "prop-types";
-import { Router } from "routes";
+import Router from "next/router";
 import { observer } from "mobx-react";
 import Helmet from "react-helmet";
 import { withStyles } from "@material-ui/core/styles";