Show Registration status in comp overview page by default

app/controllers/api/v0/competitions_controller.rb

@@ -25,7 +25,7 @@ def competition_index
 
     competitions = competitions_scope.search(params[:q], params: params)
 
-    serial_methods = ["short_display_name", "city", "country_iso2", "event_ids", "date_range", "latitude_degrees", "longitude_degrees"]
+    serial_methods = ["short_display_name", "city", "country_iso2", "event_ids", "date_range", "latitude_degrees", "longitude_degrees", "cached_registration_status"]
     serial_includes = {}
 
     serial_includes["delegates"] = { only: ["id", "name"], methods: [], include: ["avatar"] } if admin_mode

app/models/competition.rb

@@ -1008,6 +1008,12 @@ def registration_status
     end
   end
 
+  def cached_registration_status
+    Rails.cache.fetch(["comp-registration-status", self.id], expires_in: 5.minutes) do
+      self.registration_status
+    end
+  end
+
   def any_registrations?
     self.registrations.any?
   end

app/webpacker/components/CompetitionsOverview/CompetitionsFilters.js

@@ -16,6 +16,7 @@ import UtcDatePicker from '../wca/UtcDatePicker';
 function CompetitionsFilters({
   filterState,
   dispatchFilter,
+  displayMode,
   shouldShowAdminDetails,
   canViewAdminDetails,
 }) {
@@ -30,17 +31,17 @@ function CompetitionsFilters({
         />
       </Form.Field>
 
-      <Form.Group>
-        <Form.Field width={8}>
+      <Form.Group widths="equal">
+        <Form.Field>
           <RegionSelector region={filterState.region} dispatchFilter={dispatchFilter} />
         </Form.Field>
-        <Form.Field width={8}>
+        <Form.Field>
           <SearchBar text={filterState.search} dispatchFilter={dispatchFilter} />
         </Form.Field>
       </Form.Group>
 
       {shouldShowAdminDetails && (
-        <Form.Field width={16}>
+        <Form.Field>
           <DelegateSelector delegateId={filterState.delegate} dispatchFilter={dispatchFilter} />
         </Form.Field>
       )}
@@ -49,12 +50,20 @@ function CompetitionsFilters({
         <TimeOrderButtonGroup filterState={filterState} dispatchFilter={dispatchFilter} />
       </Form.Field>
 
+      <Form.Group inline>
+        <CompDisplayCheckboxes
+          shouldIncludeCancelled={filterState.shouldIncludeCancelled}
+          dispatchFilter={dispatchFilter}
+          shouldShowAdminDetails={shouldShowAdminDetails}
+          canViewAdminDetails={canViewAdminDetails}
+          displayMode={displayMode}
+        />
+      </Form.Group>
+
       {canViewAdminDetails && shouldShowAdminDetails && (
-        <Form.Group>
-          <Form.Field>
-            <AdminStatusButtonGroup filterState={filterState} dispatchFilter={dispatchFilter} />
-          </Form.Field>
-        </Form.Group>
+        <Form.Field>
+          <AdminStatusButtonGroup filterState={filterState} dispatchFilter={dispatchFilter} />
+        </Form.Field>
       )}
     </Form>
   );
@@ -428,8 +437,6 @@ function CustomDateSelector({ filterState, dispatchFilter }) {
 export function CompDisplayCheckboxes({
   shouldIncludeCancelled,
   dispatchFilter,
-  shouldShowRegStatus,
-  setShouldShowRegStatus,
   shouldShowAdminDetails,
   canViewAdminDetails,
   displayMode,
@@ -449,32 +456,19 @@ export function CompDisplayCheckboxes({
       </div>
 
       {
-        displayMode === 'list' && (
-          <>
-            <div id="registration-status" className="registration-status-selector">
-              <Form.Checkbox
-                label={I18n.t('competitions.index.show_registration_status')}
-                name="show_registration_status"
-                id="show_registration_status"
-                checked={shouldShowRegStatus}
-                onChange={() => setShouldShowRegStatus(!shouldShowRegStatus)}
-              />
-            </div>
-            {canViewAdminDetails && (
-              <div id="admin-data" className="admin-data-selector">
-                <Form.Checkbox
-                  toggle
-                  label={I18n.t('competitions.index.use_admin_view')}
-                  name="show_admin_data"
-                  id="show_admin_data"
-                  checked={shouldShowAdminDetails}
-                  onChange={() => dispatchFilter(
-                    { shouldShowAdminDetails: !shouldShowAdminDetails },
-                  )}
-                />
-              </div>
-            )}
-          </>
+        displayMode === 'list' && canViewAdminDetails && (
+          <div id="admin-data" className="admin-data-selector">
+            <Form.Checkbox
+              toggle
+              label={I18n.t('competitions.index.use_admin_view')}
+              name="show_admin_data"
+              id="show_admin_data"
+              checked={shouldShowAdminDetails}
+              onChange={() => dispatchFilter(
+                { shouldShowAdminDetails: !shouldShowAdminDetails },
+              )}
+            />
+          </div>
         )
       }
     </>

app/webpacker/components/CompetitionsOverview/CompetitionsView.js

@@ -1,11 +1,10 @@
 import React, {
   useEffect, useMemo, useReducer, useState,
 } from 'react';
-import { keepPreviousData, useInfiniteQuery, useQuery } from '@tanstack/react-query';
+import { useInfiniteQuery } from '@tanstack/react-query';
 import {
   Button,
   Container,
-  Form,
   Header,
   Icon,
   Segment,
@@ -16,7 +15,7 @@ import I18n from '../../lib/i18n';
 import { apiV0Urls, WCA_API_PAGINATION } from '../../lib/requests/routes.js.erb';
 import { fetchJsonOrError } from '../../lib/requests/fetchWithAuthenticityToken';
 
-import CompetitionsFilters, { CompDisplayCheckboxes, ToggleListOrMapDisplay } from './CompetitionsFilters';
+import CompetitionsFilters, { ToggleListOrMapDisplay } from './CompetitionsFilters';
 import ListView from './ListView';
 import MapView from './MapView';
 import {
@@ -44,7 +43,7 @@ function CompetitionsView({ canViewAdminDetails = false }) {
   );
   const debouncedFilterState = useDebounce(filterState, DEBOUNCE_MS);
   const [displayMode, setDisplayMode] = useState(() => getDisplayMode(searchParams));
-  const [shouldShowRegStatus, setShouldShowRegStatus] = useState(false);
+
   const competitionQueryKey = useMemo(
     () => calculateQueryKey(debouncedFilterState, canViewAdminDetails),
     [debouncedFilterState, canViewAdminDetails],
@@ -84,35 +83,7 @@ function CompetitionsView({ canViewAdminDetails = false }) {
     },
   });
 
-  const baseCompetitions = rawCompetitionData?.pages.flatMap((page) => page.data);
-  const compIds = baseCompetitions?.map((comp) => comp.id) || [];
-
-  const {
-    data: compRegistrationData,
-    isFetching: regDataIsPending,
-  } = useQuery({
-    queryFn: () => fetchJsonOrError(apiV0Urls.competitions.registrationData, {
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      method: 'POST',
-      body: JSON.stringify({ ids: compIds }),
-    }),
-    queryKey: ['registration-info', ...compIds],
-    enabled: shouldShowRegStatus && compIds.length > 0,
-    // This is where the magic happens: Using `keepPreviousData` makes it so that
-    //   all previously loaded indicators are held in-cache while the fetcher for the next
-    //   batch is running in the background. (Adding comment here because it's not in the docs)
-    placeholderData: keepPreviousData,
-    select: (data) => data.data,
-  });
-
-  const competitions = useMemo(() => (shouldShowRegStatus ? (
-    baseCompetitions?.map((comp) => {
-      const regData = compRegistrationData?.find((reg) => reg.id === comp.id);
-      return regData ? { ...comp, ...regData } : comp;
-    })
-  ) : baseCompetitions), [baseCompetitions, compRegistrationData, shouldShowRegStatus]);
+  const competitions = rawCompetitionData?.pages.flatMap((page) => page.data);
 
   const [showFilters, setShowFilters] = useState(true);
 
@@ -153,29 +124,15 @@ function CompetitionsView({ canViewAdminDetails = false }) {
             dispatchFilter={dispatchFilter}
             shouldShowAdminDetails={shouldShowAdminDetails}
             canViewAdminDetails={canViewAdminDetails}
+            displayMode={displayMode}
           />
         </Segment>
       </Transition>
 
-      <Form>
-        <Form.Group inline>
-          <CompDisplayCheckboxes
-            shouldIncludeCancelled={filterState.shouldIncludeCancelled}
-            dispatchFilter={dispatchFilter}
-            shouldShowRegStatus={shouldShowRegStatus}
-            setShouldShowRegStatus={setShouldShowRegStatus}
-            shouldShowAdminDetails={shouldShowAdminDetails}
-            canViewAdminDetails={canViewAdminDetails}
-            displayMode={displayMode}
-          />
-        </Form.Group>
-        <Form.Field>
-          <ToggleListOrMapDisplay
-            displayMode={displayMode}
-            setDisplayMode={setDisplayMode}
-          />
-        </Form.Field>
-      </Form>
+      <ToggleListOrMapDisplay
+        displayMode={displayMode}
+        setDisplayMode={setDisplayMode}
+      />
 
       <Segment basic>
         {
@@ -184,10 +141,8 @@ function CompetitionsView({ canViewAdminDetails = false }) {
             <ListView
               competitions={competitions}
               filterState={debouncedFilterState}
-              shouldShowRegStatus={shouldShowRegStatus}
               shouldShowAdminDetails={shouldShowAdminDetails}
               isLoading={competitionsIsFetching}
-              regStatusLoading={regDataIsPending}
               fetchMoreCompetitions={competitionsFetchNextPage}
               hasMoreCompsToLoad={hasMoreCompsToLoad}
             />

app/webpacker/components/CompetitionsOverview/ListView.js

@@ -11,10 +11,8 @@ import { isInProgress, isProbablyOver } from '../../lib/utils/competition-table'
 function ListView({
   competitions,
   filterState,
-  shouldShowRegStatus,
   shouldShowAdminDetails,
   isLoading,
-  regStatusLoading,
   fetchMoreCompetitions,
   hasMoreCompsToLoad,
 }) {
@@ -39,10 +37,8 @@ function ListView({
             <ListViewSection
               competitions={competitions}
               title={I18n.t('competitions.index.titles.ongoing_and_upcoming')}
-              shouldShowRegStatus={shouldShowRegStatus}
               shouldShowAdminDetails={shouldShowAdminDetails}
               selectedDelegate={filterState.delegate}
-              regStatusLoading={regStatusLoading}
               isLoading={isLoading}
               hasMoreCompsToLoad={hasMoreCompsToLoad}
             />
@@ -68,19 +64,15 @@ function ListView({
             <ListViewSection
               competitions={inProgressComps}
               title={I18n.t('competitions.index.titles.in_progress')}
-              shouldShowRegStatus={shouldShowRegStatus}
               selectedDelegate={filterState.delegate}
-              regStatusLoading={regStatusLoading}
               isLoading={isLoading && !upcomingComps?.length}
               hasMoreCompsToLoad={hasMoreCompsToLoad && !upcomingComps?.length}
             />
           )}
           <ListViewSection
             competitions={upcomingComps}
             title={I18n.t('competitions.index.titles.upcoming')}
-            shouldShowRegStatus={shouldShowRegStatus}
             selectedDelegate={filterState.delegate}
-            regStatusLoading={regStatusLoading}
             isLoading={isLoading}
             hasMoreCompsToLoad={hasMoreCompsToLoad}
           />
@@ -99,11 +91,9 @@ function ListView({
           <ListViewSection
             competitions={competitions}
             title={I18n.t('competitions.index.titles.recent', { count: competitionConstants.competitionRecentDays })}
-            shouldShowRegStatus={shouldShowRegStatus}
             shouldShowAdminDetails={shouldShowAdminDetails}
             selectedDelegate={filterState.delegate}
             isLoading={isLoading}
-            regStatusLoading={regStatusLoading}
             hasMoreCompsToLoad={hasMoreCompsToLoad}
           />
           <ListViewFooter
@@ -120,11 +110,9 @@ function ListView({
           <ListViewSection
             competitions={competitions}
             title={filterState.selectedYear === 'all_years' ? I18n.t('competitions.index.titles.past_all') : I18n.t('competitions.index.titles.past', { year: filterState.selectedYear })}
-            shouldShowRegStatus={shouldShowRegStatus}
             shouldShowAdminDetails={shouldShowAdminDetails}
             selectedDelegate={filterState.delegate}
             isLoading={isLoading}
-            regStatusLoading={regStatusLoading}
             hasMoreCompsToLoad={hasMoreCompsToLoad}
           />
           <ListViewFooter
@@ -141,11 +129,9 @@ function ListView({
           <ListViewSection
             competitions={competitions}
             title={I18n.t('competitions.index.titles.by_announcement')}
-            shouldShowRegStatus={shouldShowRegStatus}
             shouldShowAdminDetails={shouldShowAdminDetails}
             selectedDelegate={filterState.delegate}
             isLoading={isLoading}
-            regStatusLoading={regStatusLoading}
             hasMoreCompsToLoad={hasMoreCompsToLoad}
             isSortedByAnnouncement
           />
@@ -163,11 +149,9 @@ function ListView({
           <ListViewSection
             competitions={competitions}
             title={I18n.t('competitions.index.titles.custom')}
-            shouldShowRegStatus={shouldShowRegStatus}
             shouldShowAdminDetails={shouldShowAdminDetails}
             selectedDelegate={filterState.delegate}
             isLoading={isLoading}
-            regStatusLoading={regStatusLoading}
             hasMoreCompsToLoad={hasMoreCompsToLoad}
           />
           <ListViewFooter