Skip to content

Commit

Permalink
Remove toggle for registration status in comp overview
Browse files Browse the repository at this point in the history
  • Loading branch information
@gregorbg
gregorbg committed Jan 3, 2025
1 parent ec318a2 commit 7a167f7
Show file tree
Hide file tree
Showing 4 changed files with 30 additions and 124 deletions.
52 changes: 24 additions & 28 deletions app/webpacker/components/CompetitionsOverview/CompetitionsFilters.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import UtcDatePicker from '../wca/UtcDatePicker';
function CompetitionsFilters({
filterState,
dispatchFilter,
displayMode,
shouldShowAdminDetails,
canViewAdminDetails,
}) {
Expand Down Expand Up @@ -49,6 +50,16 @@ 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>
Expand Down Expand Up @@ -428,8 +439,6 @@ function CustomDateSelector({ filterState, dispatchFilter }) {
export function CompDisplayCheckboxes({
shouldIncludeCancelled,
dispatchFilter,
shouldShowRegStatus,
setShouldShowRegStatus,
shouldShowAdminDetails,
canViewAdminDetails,
displayMode,
Expand All @@ -449,32 +458,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>
)
}
</>
Expand Down
38 changes: 3 additions & 35 deletions app/webpacker/components/CompetitionsOverview/CompetitionsView.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
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,
Expand Down Expand Up @@ -44,7 +44,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],
Expand Down Expand Up @@ -84,35 +84,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);

Expand Down Expand Up @@ -162,8 +134,6 @@ function CompetitionsView({ canViewAdminDetails = false }) {
<CompDisplayCheckboxes
shouldIncludeCancelled={filterState.shouldIncludeCancelled}
dispatchFilter={dispatchFilter}
shouldShowRegStatus={shouldShowRegStatus}
setShouldShowRegStatus={setShouldShowRegStatus}
shouldShowAdminDetails={shouldShowAdminDetails}
canViewAdminDetails={canViewAdminDetails}
displayMode={displayMode}
Expand All @@ -184,10 +154,8 @@ function CompetitionsView({ canViewAdminDetails = false }) {
<ListView
competitions={competitions}
filterState={debouncedFilterState}
shouldShowRegStatus={shouldShowRegStatus}
shouldShowAdminDetails={shouldShowAdminDetails}
isLoading={competitionsIsFetching}
regStatusLoading={regDataIsPending}
fetchMoreCompetitions={competitionsFetchNextPage}
hasMoreCompsToLoad={hasMoreCompsToLoad}
/>
Expand Down
16 changes: 0 additions & 16 deletions app/webpacker/components/CompetitionsOverview/ListView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,8 @@ import { isInProgress, isProbablyOver } from '../../lib/utils/competition-table'
function ListView({
competitions,
filterState,
shouldShowRegStatus,
shouldShowAdminDetails,
isLoading,
regStatusLoading,
fetchMoreCompetitions,
hasMoreCompsToLoad,
}) {
Expand All @@ -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}
/>
Expand All @@ -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}
/>
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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
/>
Expand All @@ -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
Expand Down
Loading

0 comments on commit 7a167f7

Please sign in to comment.