Chore(Inertia): Migrate Collabs page APIs to Inertia partial reloads #2811

romitg2 · 2026-01-10T09:02:40Z

Issue: #856

Description

Refactors the Collabs page tables to use Inertia's router.reload() with partial props instead of custom JSON API endpoints.
updates table to do server side sorting instead of client side (consistent with other pages)

Before/After

Before:

Screen.Recording.2026-01-10.at.3.43.59.PM.mov

After:

Screen.Recording.2026-01-10.at.2.25.04.PM.mov

Test Results

Checklist

I have read the contributing guidelines
I have watched Gumroad PR review livestreams
I have performed a self-review and left review comments on my PR
I have added/updated tests for my changes

AI Disclosure

used claude-code with opus 4.5 to assist with code change

romitg2 · 2026-01-10T09:04:53Z

app/controllers/products/collabs_controller.rb

-  def memberships_paged
-    props = CollabProductsPagePresenter.new(**presenter_params).memberships_table_props
-
-    render json: {
-      pagination: props[:memberships_pagination],
-      entries: props[:memberships],
-    }
-  end
-
-  def products_paged
-    props = CollabProductsPagePresenter.new(**presenter_params).products_table_props
-
-    render json: {
-      pagination: props[:products_pagination],
-      entries: props[:products],


removed separate API endpoints as we're switched to Inertia Partial reload.

romitg2 · 2026-01-10T09:05:48Z

app/controllers/products/collabs_controller.rb

+    render inertia: "Products/Collabs/Index", props: {
+      stats: -> { presenter.initial_page_props[:stats] },
+      archived_tab_visible: -> { presenter.initial_page_props[:archived_tab_visible] },
+      collaborators_disabled_reason: -> { presenter.initial_page_props[:collaborators_disabled_reason] },
+      products: -> { presenter.products_table_props[:products] },
+      products_pagination: -> { presenter.products_table_props[:products_pagination] },
+      products_sort: -> { presenter.products_sort },
+      memberships: -> { presenter.memberships_table_props[:memberships] },
+      memberships_pagination: -> { presenter.memberships_table_props[:memberships_pagination] },
+      memberships_sort: -> { presenter.memberships_sort },
    }


switched to inertia partial reload, used lazy evaluated props for partial reload.

romitg2 · 2026-01-10T09:08:38Z

app/javascript/components/ProductsPage/Collabs/MembershipsTable.tsx

-import { getPagedMemberships, MembershipsParams, Membership } from "$app/data/collabs";
+import { Membership } from "$app/data/collabs";
 import { classNames } from "$app/utils/classNames";
 import { formatPriceCentsWithCurrencySymbol } from "$app/utils/currency";
-import { asyncVoid } from "$app/utils/promise";
-import { AbortError, assertResponseError } from "$app/utils/request";


removed client-side fetching related imports

romitg2 · 2026-01-10T09:11:09Z

app/javascript/components/ProductsPage/Collabs/MembershipsTable.tsx

+  const onSetSort = (newSort: Sort<MembershipSortKey> | null) => {
+    setSort(newSort);
+    setIsLoading(true);
+    router.reload({
+      data: {
+        memberships_sort_key: newSort?.key,
+        memberships_sort_direction: newSort?.direction,
+        memberships_page: undefined,
+      },
+      only: ["memberships", "memberships_pagination", "memberships_sort"],
+      onFinish: () => setIsLoading(false),
+    });
+  };


Replaced custom loadMemberships/loadProducts fetch functions with Inertia's router.reload()

romitg2 · 2026-01-10T09:16:21Z

app/javascript/components/CollabsPage.tsx

-              <NavigationButton
+              <NavigationButtonInertia


collaborators/new page is now migrated to inertia, so to avoid full reload we'll use inertia based NavigationButtonInertia.

romitg2 · 2026-01-10T09:17:39Z

app/javascript/data/collabs.ts

Removed getPagedProducts and getPagedMemberships functions ( no longer needed, as we'll use inertia partial reload )

romitg2 · 2026-01-10T09:19:24Z

config/routes.rb

Removed products_paged and memberships_paged routes, these endpoints are no longer needed with Inertia partial reloads.

romitg2 · 2026-01-10T09:20:28Z

spec/controllers/products/collabs_controller_spec.rb


      [membership_collab_1, membership_collab_2].each do |product|
-        expect(memberships.any? { |m| m[:id] == product.id }).to be(true)
+        expect(memberships.any? { |m| m["id"] == product.id }).to be(true)


Changed symbol keys to string keys (m[:id] → m["id"]), as Inertia props come back as string keys

romitg2 · 2026-01-10T09:22:09Z

spec/controllers/products/collabs_controller_spec.rb

  end

-  describe "GET memberships_paged" do
+  describe "GET index with pagination" do


Updated pagination/sorting tests, now test via index action params instead of separate endpoints.

romitg2 · 2026-01-10T09:22:54Z

spec/controllers/products/collabs_controller_spec.rb


-  describe "GET products_paged" do
-    before { stub_const("CollabProductsPagePresenter::PER_PAGE", 1) }
+  describe "GET index with sorting" do


Added sorting tests, verifies products_sort and memberships_sort params work correctly.

romitg2 · 2026-01-10T09:31:29Z

app/presenters/collab_products_page_presenter.rb

+  PER_PAGE = 10

-  def initialize(pundit_user:, page: 1, sort_params: {}, query: nil)
+  attr_reader :products_sort, :memberships_sort


These are exposed publicly so the controller can pass them back to the frontend as props

(products_sort: -> { presenter.products_sort })

romitg2 · 2026-01-10T09:36:52Z

app/javascript/components/CollabsPage.tsx

+                <CollabsMembershipsTable
+                  entries={memberships}
+                  pagination={membershipsPagination}
+                  sort={membershipsSort}
+                />


Added sort props, passes memberships_sort and products_sort to table components.

romitg2 · 2026-01-10T09:48:06Z

app/presenters/collab_products_page_presenter.rb


  private
-    attr_reader :pundit_user, :page, :sort_params, :query, :total_revenue, :total_customers, :total_members, :total_collaborations
+    attr_reader :pundit_user, :products_page, :memberships_page, :query, :total_revenue, :total_customers, :total_members, :total_collaborations


Previously there was a single page param shared by both tables ( each table were using separate endpoints to make requests). now we use single index endpoint with partial reload.

romitg2 · 2026-01-10T09:49:24Z

config/routes.rb

Removed unused routes, as we'll use single index endpoint with partial reload to fetch data.

romitg2 · 2026-01-10T10:03:25Z

app/javascript/components/ProductsPage/Collabs/ProductsTable.tsx

-import { getPagedProducts, ProductsParams, Product } from "$app/data/collabs";
+import { Product } from "$app/data/collabs";
 import { classNames } from "$app/utils/classNames";
 import { formatPriceCentsWithCurrencySymbol } from "$app/utils/currency";
-import { asyncVoid } from "$app/utils/promise";
-import { AbortError, assertResponseError } from "$app/utils/request";

 import { Pagination, PaginationProps } from "$app/components/Pagination";
 import { ProductIconCell } from "$app/components/ProductsPage/ProductIconCell";
-import { showAlert } from "$app/components/server-components/Alert";


removed client-side fetching related imports, as we'll use inertia partial reload

romitg2 · 2026-01-10T10:04:28Z

app/javascript/components/ProductsPage/Collabs/ProductsTable.tsx

-
-  const { entries: products, pagination, isLoading } = state;
-
-  const loadProducts = asyncVoid(async ({ page, query }: ProductsParams) => {
-    setState((prevState) => ({ ...prevState, isLoading: true }));
-    try {
-      activeRequest.current?.cancel();
-
-      const request = getPagedProducts({
-        page,
-        query,
-      });
-      activeRequest.current = request;
-
-      setState({
-        ...(await request.response),
-        isLoading: false,
-        query,
-      });
-      activeRequest.current = null;
-      tableRef.current?.scrollIntoView({ behavior: "smooth" });
-    } catch (e) {
-      if (e instanceof AbortError) return;
-      assertResponseError(e);
-      setState((prevState) => ({ ...prevState, isLoading: false }));
-      showAlert(e.message, "error");
-    }
-  });
-
-  const { items, thProps } = useClientSortingTableDriver<Product>(state.entries);
+  const [sort, setSort] = React.useState<Sort<ProductSortKey> | null>(props.sort);
+  const items = props.entries;
+
+  const onSetSort = (newSort: Sort<ProductSortKey> | null) => {
+    setSort(newSort);
+    setIsLoading(true);
+    router.reload({
+      data: {
+        products_sort_key: newSort?.key,
+        products_sort_direction: newSort?.direction,
+        products_page: undefined,
+      },
+      only: ["products", "products_pagination", "products_sort"],
+      onFinish: () => setIsLoading(false),
+    });
+  };
+
+  const thProps = useSortingTableDriver<ProductSortKey>(sort, onSetSort);
+
+  const handlePageChange = (page: number) => {
+    setIsLoading(true);
+    router.reload({
+      data: { products_page: page },
+      only: ["products", "products_pagination", "products_sort"],
+      onFinish: () => {
+        setIsLoading(false);
+        tableRef.current?.scrollIntoView({ behavior: "smooth" });
+      },
+    });
+  };


updated to use Inertia partial reload, rather than client side API based fetching

romitg2 · 2026-01-10T12:44:03Z

@binary-koan could you please review this PR?

Thanks!

migrate

5b2b3ba

romitg2 commented Jan 10, 2026

View reviewed changes

romitg2 changed the title ~~Chore(Inertia): Migrate Collabs page to Inertia partial reloads~~ Chore(Inertia): Migrate Collabs page APIs to Inertia partial reloads Jan 10, 2026

romitg2 commented Jan 10, 2026

View reviewed changes

scrollIntoView

5117df2

romitg2 commented Jan 10, 2026

View reviewed changes

romitg2 added 2 commits January 10, 2026 15:54

chore

ddda9a5

update

652d520

Merge branch 'main' into inerita-api/collabs

ff4ab6e

Chore(Inertia): Migrate Collabs page APIs to Inertia partial reloads #2811

Are you sure you want to change the base?

Chore(Inertia): Migrate Collabs page APIs to Inertia partial reloads #2811

Uh oh!

Conversation

romitg2 commented Jan 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Before/After

Before:

After:

Test Results

Checklist

AI Disclosure

Uh oh!

romitg2 Jan 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

romitg2 Jan 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

romitg2 commented Jan 10, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

romitg2 commented Jan 10, 2026 •

edited

Loading

romitg2 Jan 10, 2026 •

edited

Loading

romitg2 Jan 10, 2026 •

edited

Loading