reactive-router 0.7.2 → 0.7.2.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: de5d8d7aa19c159852f4e5722fb3e8e966906f97
-  data.tar.gz: 3c899bf968c0a8159e1d9a54718abbd7003a2c41
+  metadata.gz: 4a1f60fd3c97f98310d7643481504e00b0e951b4
+  data.tar.gz: f718f2647d0ec852ed16bbb58d1380fd24cee429
 SHA512:
-  metadata.gz: a33cc7159885f78d3440c7f313200f125854ed78e4b14eb8cc6456777acc12a7aaf48f4d8fc589f12607b92b2f90f3b5002e5a5ff2d00e8d5df4228838999e46
-  data.tar.gz: aecb8065ccb425998f6e0efd331e6e5795645aef666b1e0102d52646681e3d8376a0a0372022282916a91dbe98ef0f42625872217d9fcd0a08b282760b7384d0
+  metadata.gz: 0cf192f6f4ac03fca07ea4d664beee3099e9001be8cbfb6ea6c3a8e330382260b292f2bb9c99902932df6e818a51e5e485965768bfd8cbda63d49cfe10ebac47
+  data.tar.gz: 69b2a639e7372c004b95ea30feb25ae5567fbf04d8e02662b15feb066d6627d1dd30b3afad6ef04fe39fa1c0f44708c2bebfa29d9633d862acb3fd869b2b9a70

data/README.md

@@ -20,7 +20,150 @@ Or install it yourself as:
 
 ## Usage
 
-TODO: Write usage instructions here
+The router is a React component that loads other components depending on the current URL.
+
+Unlike other compnents there can only be one router on a page.
+
+To get you started here is a sample router.   
+
+```ruby
+module Components
+  module Accounts
+
+    class Show
+
+      include React::Router  # instead of React::Component, you use React::Router
+      
+      # the routes macro creates the mapping between URLs and components to display
+
+      routes(path: "/account/:user_id") do  # i.e. we expect to see something like /account/12345
+        # routes can be nested  the dashboard will be at /account/12345/dashboard
+        # the DashboardRoute component will be mounted
+        route(name: "Dashboard", path: "dashboard", handler: Components::Accounts::DashboardRoute)
+        route(path: "orders", name: "Orders", handler: Components::Accounts::OrdersRoute)
+        # when displaying an order we need the order order as well as the user_id
+        route(path: "orders/:order_id", name: "Order", handler: Components::Accounts::OrderRoute)
+        route(path: "statement", name: "Statement", handler: Components::Accounts::StatementRoute)
+        # the special redirect route 
+        redirect(from: "/account/:user_id", to: "Dashboard")
+      end
+      
+      # you grab the url params and preprocess them using the router_param macro.
+      # when Router is mounted it will receive the :user_id from the url.  In this case we grab
+      # the corresponding active_record model.
+      
+      router_param :user_id do |id|
+        User.find(id)
+      end
+
+      # like any component routers can have params that are passed in when the router is mounted
+
+      required_param :user_param, type: User
+      required_param :user_orders_param, type: [Order]
+      required_param :production_center_address_param, type: Address
+      required_param :open_invoices_param
+      required_param :user_profiles_param, type: [PaymentProfile]
+      required_param :user_addresses_param, type: [Address]
+      
+      # because the underlying javascript router has no provisions to pass params we
+      # will export states and copy the params to the states so the lower components can read them
+      # expect this get fixed in the near future
+
+      export_state :user
+      export_state :production_center_address
+      export_state :open_invoices
+      export_state :payment_profiles
+      export_state :addresses
+      
+      # the router also makes a good place for other top level states to be housed (i.e. the flux architecture)
+      export_state :order_count
+
+      before_mount do
+        # before mounting the router we copy the incoming params that the lower level components will need
+        user! user_param
+        production_center_address! production_center_address_param
+        open_invoices! open_invoices_param
+        payment_profiles! user_profiles_param
+        addresses! user_addresses_param
+        
+        order_count! user.orders.count  # grab our top level state info and save it away
+        
+      end
+
+      # For routers you define a show method instead of a render method
+      def show
+        div do
+          div.account_nav do
+          
+            # link is a special router component that generates an on page link, that will maintain history etc.
+            # basically an intelligent anchor tag.  When a user clicks a link, it will rerender the router, update
+            # the history etc.
+            # So for example when "My Statement" is clicked. The route changes to /account/:id/statement
+            
+            link(to: "Dashboard", class: "no-underline btn btn-default", params: { user_id: user.id }) { "Account Dashboard" }
+            link(to: "Orders", class: "no-underline btn btn-default", params: { user_id: user.id }) { "My Quotes & Orders" }
+            link(to: "Statement", class: "no-underline btn btn-default", params: { user_id: user.id }) { "My Statement" }
+
+          end
+        # someplace in the router show method you will have route_handler component which mounts and renders the component
+        # indicated by the current route.
+        route_handler   
+        end
+      end
+    end
+    
+    # We can't pass parameters to the routed components, so we set up these mini components
+    # which grab the state from router and send it along to the actual component
+  
+    class DashboardRoute
+
+      include React::Component
+
+      def render
+        AccountDashboard user: Show.user, addresses: Show.addresses, payment_profiles: Show.payment_profiles
+      end
+
+    end
+
+    class StatementRoute
+
+      include React::Component
+
+      def render
+        Statement production_center_address: Show.production_center_address,
+        open_invoices: Show.open_invoices, current_invoices: Show.open_invoices[:invoices],
+        mailing_address: Show.open_invoices[:mailing_address]
+      end
+
+    end
+
+    class OrdersRoute
+
+      include React::Component
+
+      def render
+        AccountOrders user: Show.user #, orders: Show.orders
+      end
+
+    end
+
+    class OrderRoute
+
+      include React::Component
+
+      router_param :order_id do |id|
+        Order.find(id)
+      end
+
+      def render
+        OrderShow(order: order_id, referrer: "account")
+      end
+
+    end
+    
+  end
+end
+```
 
 ## Development
 

data/lib/reactive-router/router.rb

@@ -1,3 +1,4 @@
+
 module React
 
   module Router
@@ -36,7 +37,7 @@ module React
             routes = self.class.build_routes
             %x{
               ReactRouter.run(#{routes}, window.reactive_router_static_location, function(root) {
-                self.root = React.createElement(root);
+                self.root = React.createElement(root, self.native.props);
               });
             }
             React::Element.new(@root, 'Root', {}, nil)
@@ -55,11 +56,15 @@ module React
 
         after_mount do
           unless self.class.routing!
-            dom_node = `React.findDOMNode(#{self}.native)`
+            dom_node = if `typeof React.findDOMNode === 'undefined'`
+              `#{self}.native.getDOMNode`            # v0.12.0
+            else
+              `React.findDOMNode(#{self}.native)`    # v0.13.0
+            end
             routes = self.class.build_routes
             %x{
               ReactRouter.run(#{routes}, ReactRouter.HistoryLocation, function(root) {
-                React.render(React.createElement(root), #{dom_node});
+                React.render(React.createElement(root, self.native.props), #{dom_node});
               });
             }
           end

data/lib/reactive-router/version.rb

@@ -1,3 +1,3 @@
 module ReactiveRouter
-  VERSION = "0.7.2"
+  VERSION = "0.7.2.1"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: reactive-router
 version: !ruby/object:Gem::Version
-  version: 0.7.2
+  version: 0.7.2.1
 platform: ruby
 authors:
 - Adam George
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2015-08-21 00:00:00.000000000 Z
+date: 2015-09-02 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler