Fix todos bug

Author: zetachang

example/todos/app/application.rb

@@ -10,6 +10,13 @@
 require "components/app.react"
 
 Document.ready? do
-  # Render the top-level React.rb component, it will take care the rest
-  React.render React.create_element(TodoAppView), Element.find('#todoapp').get(0)
+  element = React.create_element(TodoAppView, filter: "all")
+  component = React.render(element, Element.find('#todoapp').get(0))
+
+  Vienna::Router.new.tap do |router|
+    router.route('/:filter') do |params|
+      component.set_props(filter: params[:filter].empty? ? "all" : params[:filter])
+    end
+  end.update
+
 end

example/todos/app/components/app.react.rb

@@ -7,32 +7,27 @@ class TodoAppView
 
   KEY_ENTER = 13
 
-  define_state(:todos) { [] }
-  define_state(:current_filter) { "all" }
+  params do
+    requires :filter, values: ["all", "active", "completed"]
+  end
 
-  before_mount :set_up
+  define_state(:todos) { [] }
 
-  def set_up
-    Todo.on(:create)  { Todo.adapter.sync_models(Todo); reload_current }
-    Todo.on(:update)  { Todo.adapter.sync_models(Todo); reload_current }
-    Todo.on(:destroy) { Todo.adapter.sync_models(Todo); reload_current }
-    router.update
+  before_mount do
+    Todo.on(:create)  { Todo.adapter.sync_models(Todo); reload_current_filter }
+    Todo.on(:update)  { Todo.adapter.sync_models(Todo); reload_current_filter }
+    Todo.on(:destroy) { Todo.adapter.sync_models(Todo); reload_current_filter }
   end
 
-  def router
-    @router ||= Vienna::Router.new.tap do |router|
-      router.route('/:filter') do |params|
-        apply_filter(params[:filter].empty? ? "all" : params[:filter])
-      end
-    end
+  before_receive_props do |next_props|
+    apply_filter next_props[:filter]
   end
 
-  def reload_current
-    apply_filter(current_filter)
+  def reload_current_filter
+    apply_filter(params[:filter])
   end
 
   def apply_filter(filter)
-    self.current_filter = filter
     Todo.adapter.find_all(Todo) do |models|
       case filter
       when "all"
@@ -60,7 +55,7 @@ def render
         input(id: "new-todo", placeholder: "What needs to be done?").on(:key_down) { |e| handle_keydown(e) }
       end
       present TodoList, todos: self.todos
-      present Footer, selected_filter: self.current_filter
+      present Footer, selected_filter: params[:filter]
     end
   end
 end

example/todos/app/components/footer.react.rb

@@ -17,7 +17,7 @@ def render
                    {href: "#/active", filter: "active"},
                    {href: "#/completed", filter: "completed"}]
         filters.map do |item|
-          li { a(href: item[:href], class_name: {selected: params[:selectedFilter] == item[:filter]}) { item[:filter].capitalize } }
+          li { a(href: item[:href], class_name: {selected: params[:selected_filter] == item[:filter]}) { item[:filter].capitalize } }
         end
       end
 

lib/react/component.rb

@@ -50,19 +50,19 @@ def component_did_mount
     end
 
     def component_will_receive_props(next_props)
-      self.run_callback(:before_receive_props, next_props)
+      self.run_callback(:before_receive_props, Hash.new(next_props))
     end
 
     def should_component_update?(next_props, next_state)
-      self.respond_to?(:needs_update?) ? self.needs_update? : true
+      self.respond_to?(:needs_update?) ? self.needs_update?(Hash.new(next_props), Hash.new(next_state)) : true
     end
 
     def component_will_update(next_props, next_state)
-      self.run_callback(:before_update, next_props, next_state)
+      self.run_callback(:before_update, Hash.new(next_props), Hash.new(next_state))
     end
 
     def component_did_update(prev_props, prev_state)
-      self.run_callback(:after_update, prev_props, prev_state)
+      self.run_callback(:after_update, Hash.new(prev_props), Hash.new(prev_state))
     end
 
     def component_will_unmount