Manage form params vs. URL params. And replace state with params.

"One needs to understand what the source of the params in a reflex is. And there are two sources:

the closest form
the url of the currently displayed page"

Source: https://github.com/stimulusreflex/stimulus_reflex/issues/290#issuecomment-683334963

app/controllers/admin/products_v3_controller.rb

@@ -2,9 +2,6 @@
 
 module Admin
   class ProductsV3Controller < Spree::Admin::BaseController
-    def index
-      @page = params[:page] || 1
-      @per_page = params[:per_page] || 15
-    end
+    def index; end
   end
 end

app/reflexes/products_reflex.rb

@@ -3,36 +3,52 @@
 class ProductsReflex < ApplicationReflex
   include Pagy::Backend
 
+  before_reflex :init_params
+
   def fetch
-    @page ||= element.dataset.page || 1
-    @per_page ||= element.dataset.perpage || 15
-    @search_term ||= element.dataset.searchterm || ""
-
-    fetch_products
-
-    render_products
+    fetch_and_render_products
   end
 
   def change_per_page
     @per_page = element.value.to_i
     @page = 1
 
-    fetch
+    fetch_and_render_products
   end
 
   def filter
-    @per_page = params[:per_page]
     @page = 1
-    @search_term = params[:search_term]
-    @producer_id = params[:producer_id]
-    @category_id = params[:category_id]
 
-    fetch_products
-    render_products
+    fetch_and_render_products
   end
 
   private
 
+  def init_params
+    init_filters_params
+    init_pagination_params
+  end
+
+  def init_filters_params
+    # params comes from the form
+    # _params comes from the url
+    # priority is given to params from the form (if present) over url params
+    @search_term = params[:search_term] || params[:_search_term]
+    @producer_id = params[:producer_id] || params[:_producer_id]
+    @category_id = params[:category_id] || params[:_category_id]
+  end
+
+  def init_pagination_params
+    # prority is given to element dataset (if present) over url params
+    @page = element.dataset.page || params[:_page] || 1
+    @per_page = element.dataset.perpage || params[:_per_page] || 15
+  end
+
+  def fetch_and_render_products
+    fetch_products
+    render_products
+  end
+
   def render_products
     cable_ready.replace(
       selector: "#products-content",
@@ -103,7 +119,12 @@ class ProductsReflex < ApplicationReflex
   def current_url
     url = URI(request.original_url)
     url.query = url.query.present? ? "#{url.query}&" : ""
-    url.query += "page=#{@page}&per_page=#{@per_page}"
+    # add params with _ to avoid conflicts with params from the form
+    url.query += "_page=#{@page}"
+    url.query += "&_per_page=#{@per_page}"
+    url.query += "&_search_term=#{@search_term}" if @search_term.present?
+    url.query += "&_producer_id=#{@producer_id}" if @producer_id.present?
+    url.query += "&_category_id=#{@category_id}" if @category_id.present?
     url.to_s
   end
 end

app/views/admin/products_v3/index.html.haml

@@ -10,7 +10,7 @@
 
 = render partial: 'spree/admin/shared/product_sub_menu'
 
-#products_v3_page{"data-controller": "products", "data-page": @page , "data-perpage": @per_page}
+#products_v3_page{ "data-controller": "products" }
   #loading-spinner.spinner-container{ "data-controller": "loading", "data-products-target": "loading" }
     .spinner
     = t('.loading')