Skip to content

Instantly share code, notes, and snippets.

@twhid

twhid/ampersand-router.js

Created September 20, 2016 13:32
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save twhid/7de1f6f88d95e171c59496cc6258b2e2 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save twhid/7de1f6f88d95e171c59496cc6258b2e2 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. twhid created this gist Sep 20, 2016.
    43 changes: 43 additions & 0 deletions ampersand-router.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,43 @@
    const Router = new AmpersandRouter({
    // define all of the routes in our application.
    // AmpersandRouter will invoke the method named when a route is
    // matched on either page load or a browser back/forward click
    routes: {
    '/my/order/receipt/:orderId': 'loadReceipt'
    '/my/order/:orderId': 'loadOrder',
    '/my/orders': 'loadOrders',
    },
    initialize(options) {
    this.store = options.store;
    // subscribe to changes in our redux store. Update the URL to always match
    // the data in the redux store.
    options.store.subscribe(() => {
    // URL “render” logic
    const {pageType, orderId} = this.store.getState();

    switch pageType {
    case 'orders': {
    // trigger: false, because we are only updating the URL in response to
    // current state.
    this.navigate('/my/orders', {trigger: false});
    }
    case 'order': {
    this.navigate(`/my/orders/${orderId}`, {trigger: false});
    }
    case 'receipt': {
    this.navigate(`/my/orders/receipt/${orderId}`, {trigger: false});
    }
    }
    });
    },
    // dispatch redux actions to update the store on the new route.
    loadOrders() {
    this.store.dispatch({type: 'VIEW_ORDERS'});
    },
    loadOrder(orderId) {
    this.store.dispatch({type: 'VIEW_ORDERS', orderId});
    }
    loadReceipt(orderId) {
    this.store.dispatch({type: 'VIEW_RECEIPT', orderId});
    }
    })