Migrate Competition Overview Page to React

app/assets/javascripts/competition_tabs.js

@@ -1,31 +1,3 @@
-onPage("competitions#show", function() {
-  showTabFromHash();
-
-  $('a[data-toggle="tab"]').on('show.bs.tab', function(e) {
-    window.location.hash = $(e.target).attr('href');
-  });
-
-  // Update the displayed tab when the back/forward is clicked changing the hash.
-  $(window).on('hashchange', showTabFromHash);
-
-  function showTabFromHash() {
-    var id = window.location.hash || '#general-info';
-    $('a[href="' + id + '"]').tab('show');
-    $(id).find("iframe").each(function () {
-      $iframe = $(this);
-      if ($iframe.attr("src") === undefined) {
-        $iframe.attr("src", $iframe.data("src"));
-      }
-    });
-    // The FullCalendar implementation that lives inside React (rendered client-side!)
-    //   does not go well with the Bootstrap Tabs that are rendered server-side :(
-    //   So we "fake" a resize fo React FullCalendar to compute its own dimensions correctly.
-    if (id === '#competition-schedule') {
-      window.dispatchEvent(new Event('resize'));
-    }
-  }
-});
-
 onPage("competition_tabs#index", function() {
   $('.reorder-up').on('click', function() {
     var $thisRow = $(this).closest('tr');

app/models/competition.rb

@@ -1868,6 +1868,23 @@ def to_wcif(authorized: false)
     }
   end
 
+  def to_competition_overview_info(include_results: true)
+    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
+                            competition_series] }
+    options[:methods].append("winning_results") if include_results
+    self.as_json(options)
+  end
+
   def to_competition_info
     options = {
       only: %w[id name website start_date registration_open registration_close announced_at cancelled_at end_date competitor_limit
@@ -2238,6 +2255,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

@@ -222,12 +222,7 @@
     <div id="competition-data">
       <h3>
         <% if current_user && @competition.upcoming? %>
-          <span class="bookmark-icon" id="not-bookmarked" data-toggle="tooltip" data-placement="bottom" title="<%= I18n.t('competitions.competition_info.bookmark') %>" <% if current_user.is_bookmarked?(@competition) %>style="display: none;"<% end %>>
-            <%= ui_icon('bookmark') %>
-          </span>
-          <span class="bookmark-icon" id="bookmarked" data-toggle="tooltip" data-placement="bottom" title="<%= I18n.t('competitions.competition_info.is_bookmarked') %>" <% if !current_user.is_bookmarked?(@competition) %>style="display: none;"<% end %>>
-            <%= ui_icon('bookmark') %>
-          </span>
+          <%= react_component("BookmarkIcon", { competitionIsBookmarked: current_user.is_bookmarked?(@competition), competitionId: @competition.id }, { style: "display: inline" }) %>
         <% end %>
         <% if @competition.championships.any? %>
           <span class="championship-trophy" data-toggle="tooltip" data-placement="bottom" title="<%= @competition.championships.sort.map { |championship| championship.name }.join(", ") %>">
@@ -280,48 +275,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>