Migrate Competition Overview Page to React

app/models/competition.rb

@@ -2212,6 +2212,10 @@ def serializable_hash(options = nil)
     )
   end
 
+  def competitor_count
+    competitors.count
+  end
+
   def to_ics
     cal = Icalendar::Calendar.new
     wcif_ids = rounds.to_h { |r| [r.wcif_id, r.to_string_map] }

app/views/competitions/_nav.html.erb

@@ -280,48 +280,3 @@
     </div>
   </div>
 </div>
-
-<script>
-  (function() {
-    var $nav = $('#competition-nav > .list-group');
-    $nav.affix({
-      offset: {
-        top: function() {
-          var parentTop = $nav.parent().offset().top;
-          var affixTopSpacing = 20; // From .bs-affix in wca.scss
-          return parentTop - affixTopSpacing;
-        },
-        bottom: function () {
-          return (this.bottom = $('.footer').outerHeight(true));
-        },
-      },
-    });
-
-    $('#not-bookmarked').click(function() {
-      window.wca.cancelPendingAjaxAndAjax('bookmark', {
-        url: '<%= bookmark_path %>',
-        method: 'POST',
-        data: {
-          'id': <%= @competition.id.to_json.html_safe %>,
-        },
-        success: function(data) {
-          $('#not-bookmarked').toggle();
-          $('#bookmarked').toggle();
-        }
-      });
-    });
-    $('#bookmarked').click(function() {
-      window.wca.cancelPendingAjaxAndAjax('bookmark', {
-        url: '<%= unbookmark_path %>',
-        method: 'POST',
-        data: {
-          'id': <%= @competition.id.to_json.html_safe %>,
-        },
-        success: function(data) {
-          $('#not-bookmarked').toggle();
-          $('#bookmarked').toggle();
-        }
-      });
-    });
-  })();
-</script>

app/views/competitions/show.html.erb

@@ -1,45 +1,27 @@
 <% provide(:title, @competition.display_name) %>
-<%# We use this to hide the 'Events' information for competition which didn't declared rounds %>
+<% options = { methods: %w[city has_event_change_deadline_date? allow_registration_edits? event_change_deadline_date
+ refund_policy_percent refund_policy_limit_date currency_code waiting_list_deadline_date organizers delegates
+ base_entry_fee_lowest_denomination registration_open registration_close extra_registration_requirements has_fees?
+ competition_events base_entry_fee using_payment_integrations? series_sibling_competitions main_event_id has_rounds?
+ external_registration_page part_of_competition_series? contact use_wca_registration is_probably_over?
+ registration_not_yet_opened? registration_past? competitor_limit competitor_limit_enabled venue_details
+ external_website venue_address latitude_degrees longitude_degrees website has_schedule? country_iso2 events
+ media number_of_bookmarks date_range information on_the_spot_registration? on_the_spot_entry_fee_lowest_denomination
+ guests_per_registration_limit_enabled? guests_per_registration_limit uses_qualification? allow_registration_without_qualification
+ events_per_registration_limit_enabled? events_per_registration_limit guests_entry_fee_lowest_denomination all_guests_allowed?
+ uses_cumulative? uses_cumulative_across_rounds? uses_cutoff? uses_qualification? results_posted? competitor_count]} %>
 <%= render layout: 'nav' do %>
-  <ul class="nav nav-tabs">
-    <li><a href="#general-info" data-toggle="tab"><%=t 'competitions.show.general_info' %></a></li>
-    <% if @competition.has_rounds? %>
-      <li><a href="#competition-events" data-toggle="tab"><%=t 'competitions.show.events' %></a></li>
-    <% end %>
-    <% if @competition.has_schedule? %>
-      <li><a href="#competition-schedule" data-toggle="tab"><%=t 'competitions.show.schedule' %></a></li>
-    <% end %>
-    <% @competition.tabs.each do |tab| %>
-      <li><a href="#<%= tab.slug %>" data-toggle="tab"><%= tab.name %></a></li>
-    <% end %>
-  </ul>
-
-  <div class="tab-content" id="competition-tabs">
-    <div class="tab-pane" id="general-info">
-      <%= render layout: 'results_nav', locals: { layout_nav: false } do %>
-        <%= render "results_table", results: @competition.winning_results, hide_pos: true, hide_round: true %>
-      <% end %>
-    </div>
-    <% if @competition.has_rounds? %>
-      <div class="tab-pane" id="competition-events">
-        <%= render "events_tab" %>
-      </div>
-    <% end %>
-    <% if @competition.has_schedule? %>
-      <div class="tab-pane" id="competition-schedule">
-        <%= render "competition_schedule_tab", competition: @competition %>
-      </div>
-    <% end %>
-    <% @competition.tabs.each do |tab| %>
-      <div class="tab-pane" id="<%= tab.slug %>">
-        <%=md tab.content %>
-        <% if current_user&.can_manage_competition?(@competition) %>
-          <%= link_to edit_competition_tab_path(@competition, tab), class: "btn btn-primary" do %>
-            <%= ui_icon("edit") %> Edit
-          <% end %>
-        <% end %>
-      </div>
-    <% end %>
-    <%= render "time_limit_cutoff_format_info", competition: @competition %>
-  </div>
+  <%= react_component("CompetitionTabs", {
+    tabs: @competition.tabs.as_json,
+    competition: @competition.as_json(options),
+    wcifEvents: @competition.events_wcif, wcifSchedule: @competition.schedule_wcif, locale: I18n.locale,
+    userInfo: current_user.as_json({
+                                     only: %w[wca_id unconfirmed_wca_id],
+                                     methods: [],
+                                     include: [],
+                                   }),
+    winners: winners(@competition, @competition.main_event),
+    records: records(@competition),
+    media: @competition.media.accepted
+  }) %>
 <% end %>

app/webpacker/components/CompetitionTabs/CompetitionTab.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Icon, TabPane } from 'semantic-ui-react';
+import Markdown from '../Markdown';
+import { editCompetitionTabUrl } from '../../lib/requests/routes.js.erb';
+
+export default function CompetitionTab({ tab, canManage, competition }) {
+  return (
+    <TabPane>
+      <Markdown md={tab.content} id={tab.id} />
+      { canManage && (
+      <a href={editCompetitionTabUrl(competition.id, tab.id)}>
+        <Icon name="edit" />
+        Edit
+      </a>
+      )}
+    </TabPane>
+  );
+}

app/webpacker/components/EventsTable/index.jsx → app/webpacker/components/CompetitionTabs/EventsTable/index.jsx

@@ -7,15 +7,15 @@ import {
   TableHeaderCell,
   TableRow,
 } from 'semantic-ui-react';
-import I18n from '../../lib/i18n';
-import { events, formats } from '../../lib/wca-data.js.erb';
+import I18n from '../../../lib/i18n';
+import { events, formats } from '../../../lib/wca-data.js.erb';
 import {
   advancementConditionToString,
   cutoffToString,
   eventQualificationToString,
   getRoundTypeId,
   timeLimitToString,
-} from '../../lib/utils/wcif';
+} from '../../../lib/utils/wcif';
 
 export default function EventsTable({ competitionInfo, wcifEvents }) {
   return (