Migrate Records Page to React

app/controllers/results_controller.rb

@@ -161,22 +161,8 @@ def rankings
 
     @ranking_timestamp = ComputeAuxiliaryData.successful_start_date || Date.current
 
-    respond_to do |format|
-      format.html {}
-      format.json do
-        cached_data = Rails.cache.fetch ["results-page-api", *@cache_params, @ranking_timestamp] do
-          rows = DbHelper.execute_cached_query(@cache_params, @ranking_timestamp, @query)
-          comp_ids = rows.map { |r| r["competitionId"] }.uniq
-          if @is_by_region
-            rows = compute_rankings_by_region(rows, @continent, @country)
-          end
-          competitions_by_id = Competition.where(id: comp_ids).index_by(&:id).transform_values { |comp| comp.as_json(methods: %w[], include: [], only: %w[cellName id countryId]) }
-          {
-            rows: rows.as_json, competitionsById: competitions_by_id
-          }
-        end
-        render json: cached_data
-      end
+    respond_from_cache("results-page-api") do |rows|
+      @is_by_region ? compute_rankings_by_region(rows, @continent, @country) : rows
     end
   end
 
@@ -217,6 +203,7 @@ def records
           DAY(competition.start_date)   day,
           event.id             eventId,
           event.name           eventName,
+          result.id            id,
           result.type          type,
           result.value         value,
           result.formatId      formatId,
@@ -261,6 +248,12 @@ def records
           `rank`, type DESC, start_date, roundTypeId, personName
       SQL
     end
+
+    @record_timestamp = ComputeAuxiliaryData.successful_start_date || Date.current
+
+    respond_from_cache("records-page-api") do |rows|
+      @is_slim || @is_separate ? compute_slim_or_separate_records(rows) : rows
+    end
   end
 
   private def current_records_query(value, type)
@@ -306,6 +299,27 @@ def records
     SQL
   end
 
+  private def compute_slim_or_separate_records(rows)
+    single_rows = []
+    average_rows = []
+    rows
+      .group_by { |row| row["eventId"] }
+      .each_value do |event_rows|
+      singles, averages = event_rows.partition { |row| row["type"] == "single" }
+      balance = singles.size - averages.size
+      if balance < 0
+        singles += Array.new(-balance, nil)
+      elsif balance > 0
+        averages += Array.new(balance, nil)
+      end
+      single_rows += singles
+      average_rows += averages
+    end
+
+    slim_rows = single_rows.zip(average_rows)
+    [slim_rows, single_rows.compact, average_rows.compact]
+  end
+
   private def shared_constants_and_conditions
     @years = Competition.non_future_years
     @types = ["single", "average"]
@@ -415,4 +429,29 @@ def records
     rows_to_display = world_rows + continents_rows + countries_rows
     [rows_to_display, first_continent_index, first_country_index]
   end
+
+  private def respond_from_cache(key_prefix, &)
+    respond_to do |format|
+      format.html {}
+      format.json do
+        cached_data = Rails.cache.fetch [key_prefix, *@cache_params, @record_timestamp] do
+          rows = DbHelper.execute_cached_query(@cache_params, @record_timestamp, @query)
+
+          # First, extract unique competitions
+          comp_ids = rows.map { |r| r["competitionId"] }.uniq
+          competitions_by_id = Competition.where(id: comp_ids)
+                                          .index_by(&:id)
+                                          .transform_values { |comp| comp.as_json(methods: %w[country], include: [], only: %w[cellName id]) }
+
+          # Now that we've remembered all competitions, we can safely transform the rows
+          rows = yield rows if block_given?
+
+          {
+            rows: rows.as_json, competitionsById: competitions_by_id
+          }
+        end
+        render json: cached_data
+      end
+    end
+  end
 end

app/helpers/results_helper.rb

@@ -29,27 +29,6 @@ def historical_pb_markers(results)
     end
   end
 
-  def compute_slim_or_separate_records(rows)
-    single_rows = []
-    average_rows = []
-    rows
-      .group_by { |row| row["eventId"] }
-      .each_value do |event_rows|
-        singles, averages = event_rows.partition { |row| row["type"] == "single" }
-        balance = singles.size - averages.size
-        if balance < 0
-          singles += Array.new(-balance, nil)
-        elsif balance > 0
-          averages += Array.new(balance, nil)
-        end
-        single_rows += singles
-        average_rows += averages
-      end
-
-    slim_rows = single_rows.zip(average_rows)
-    [slim_rows, single_rows.compact, average_rows.compact]
-  end
-
   def pb_type_class_for_result(regional_record, pb_marker)
     if pb_marker
       record_class = 'pb'

app/views/results/records.html.erb

@@ -1,64 +1,9 @@
 <% provide(:title, t(".title")) %>
 
-<% record_timestamp = ComputeAuxiliaryData.successful_start_date || Date.current %>
-<% @rows = DbHelper.execute_cached_query(@cache_params, record_timestamp, @query) %>
-
 <div class="container">
   <h1><%= yield(:title) %></h1>
-  <p><%= t("results.last_updated_html", timestamp: wca_local_time(record_timestamp)) %></p>
+  <p><%= t("results.last_updated_html", timestamp: wca_local_time(@record_timestamp)) %></p>
   <p><i><%= t('results.filters_fixes_underway') %></i></p>
 
-  <div id="results-selector" class="results-select form-inline">
-    <%= render 'results_selector', show_records_options: true %>
-  </div>
-
-  <% cache [*@cache_params, record_timestamp, I18n.locale] do %>
-    <%
-      comp_ids = @rows.map { |r| r["competitionId"] }.uniq
-      unless @is_slim
-        @competitions_by_id = Hash[Competition.where(id: comp_ids).map { |c| [c.id, c] }]
-      end
-    %>
-
-    <div id="search-results" class="results">
-      <div id="results-list">
-        <% if @is_mixed %>
-          <% @rows.group_by { |row| row["eventId"] }.each do |event_id, rows| %>
-            <% event = Event.c_find(event_id) %>
-            <h2>
-              <%= link_to rankings_path(event.id, "single"), class: "plain" do %>
-                <%= cubing_icon event.id %>
-                <%= event.name %>
-              <% end %>
-            </h2>
-            <%= render 'records_mixed_table', rows: rows %>
-          <% end %>
-        <% elsif @is_slim || @is_separate %>
-          <% slim_rows, single_rows, average_rows = compute_slim_or_separate_records(@rows) %>
-          <% if @is_slim %>
-            <%= render 'records_slim_table', rows: slim_rows %>
-          <% else %>
-            <h2> <%= t("results.table_elements.type_options.single") %> </h2>
-            <%= render 'records_separate_table', rows: single_rows, type: "single" %>
-
-            <h2> <%= t("results.table_elements.type_options.average") %> </h2>
-            <%= render 'records_separate_table', rows: average_rows, type: "average" %>
-          <% end %>
-        <% elsif @is_history %>
-          <% @rows.group_by { |row| row["eventId"] }.each do |event_id, rows| %>
-            <% event = Event.c_find(event_id) %>
-            <h2>
-              <%= link_to rankings_path(event.id, "single"), class: "plain" do %>
-                <%= cubing_icon event.id %>
-                <%= event.name %>
-              <% end %>
-            </h2>
-            <%= render 'records_histories_table', rows: rows %>
-          <% end %>
-        <% elsif @is_mixed_history %>
-          <%= render 'records_histories_table', rows: @rows %>
-        <% end %>
-      </div>
-    </div>
-  <% end %>
+  <%= react_component("Results/Records") %>
 </div>

app/webpacker/components/Results/DataTable.jsx

@@ -0,0 +1,50 @@
+import { flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table';
+import { Table } from 'semantic-ui-react';
+import React from 'react';
+
+export default function DataTable({ rows, config }) {
+  const table = useReactTable({
+    data: rows || [],
+    columns: config,
+    getCoreRowModel: getCoreRowModel(),
+  });
+
+  return (
+    <div style={{ overflowX: 'scroll' }}>
+      <Table basic="very" compact="very" striped unstackable singleLine>
+        <Table.Header>
+          {table.getHeaderGroups().map((headerGroup) => (
+            <Table.Row key={headerGroup.id}>
+              {headerGroup.headers.map((header) => (
+                <Table.HeaderCell key={header.id} colSpan={header.column.columnDef.colSpan}>
+                  {header.isPlaceholder
+                    ? null
+                    : flexRender(header.column.columnDef.header, header.getContext())}
+                </Table.HeaderCell>
+              ))}
+            </Table.Row>
+          ))}
+        </Table.Header>
+        <Table.Body>
+          {table.getRowModel().rows.map((row) => (
+            <Table.Row key={row.id}>
+              {row.getVisibleCells().map((cell) => (
+                cell.column.columnDef.isMultiAttemptsHack
+                  ? (
+                    <React.Fragment key={cell.id}>
+                      {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                    </React.Fragment>
+                  )
+                  : (
+                    <Table.Cell key={cell.id}>
+                      {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                    </Table.Cell>
+                  )
+              ))}
+            </Table.Row>
+          ))}
+        </Table.Body>
+      </Table>
+    </div>
+  );
+}