From c822a10dbac9c595d171b34b00e6594f27c25d6b Mon Sep 17 00:00:00 2001
From: Gregor Billing <gbilling@worldcubeassociation.org>
Date: Mon, 3 Feb 2025 19:47:12 +0900
Subject: [PATCH] Combine 'ResultsFilter' after merge

---
 .../components/Results/Rankings/index.jsx     | 10 +-
 .../components/Results/ResultsFilter.jsx      |  8 +-
 .../components/Results/resultsFilter.jsx      | 95 -------------------
 3 files changed, 12 insertions(+), 101 deletions(-)
 delete mode 100644 app/webpacker/components/Results/resultsFilter.jsx

diff --git a/app/webpacker/components/Results/Rankings/index.jsx b/app/webpacker/components/Results/Rankings/index.jsx
index 0a12fe8acc8..141026462e6 100644
--- a/app/webpacker/components/Results/Rankings/index.jsx
+++ b/app/webpacker/components/Results/Rankings/index.jsx
@@ -5,7 +5,7 @@ import { Container } from 'semantic-ui-react';
 import RankingsTable from './RankingsTable';
 import WCAQueryClientProvider from '../../../lib/providers/WCAQueryClientProvider';
 import { rankingsUrl } from '../../../lib/requests/routes.js.erb';
-import ResultsFilter from '../resultsFilter';
+import ResultsFilter from '../ResultsFilter';
 
 const ActionTypes = {
   SET_EVENT: 'SET_EVENT',
@@ -65,6 +65,8 @@ export default function Wrapper() {
   );
 }
 
+const SHOW_CATEGORIES = ['100 persons', '100 results', 'by region', 'history', 'mixed history'];
+
 export function Rankings() {
   const [filterState, dispatch] = useReducer(
     filterReducer,
@@ -94,7 +96,11 @@ export function Rankings() {
 
   return (
     <Container fluid>
-      <ResultsFilter filterState={filterState} filterActions={filterActions} />
+      <ResultsFilter
+        filterState={filterState}
+        filterActions={filterActions}
+        showCategories={SHOW_CATEGORIES}
+      />
       <RankingsTable filterState={filterState} />
     </Container>
   );
diff --git a/app/webpacker/components/Results/ResultsFilter.jsx b/app/webpacker/components/Results/ResultsFilter.jsx
index 007e4e60aaf..da13a460dfb 100644
--- a/app/webpacker/components/Results/ResultsFilter.jsx
+++ b/app/webpacker/components/Results/ResultsFilter.jsx
@@ -69,7 +69,7 @@ export default function ResultsFilter({
                 >
                   {I18n.t('results.selector_elements.type_selector.single')}
                 </Button>
-                <Button active={rankingType === 'average'} onClick={() => setRankingType('average')}>{I18n.t('results.selector_elements.type_selector.average')}</Button>
+                { event !== '333mbf' && <Button active={rankingType === 'average'} onClick={() => setRankingType('average')}>{I18n.t('results.selector_elements.type_selector.average')}</Button>}
               </ButtonGroup>
             </Form.Field>
           )}
@@ -78,7 +78,7 @@ export default function ResultsFilter({
           {/*    <Button>All years</Button> */}
           {/*   </ButtonGroup> */}
           {/* </Form.Field> */}
-          <Form.Field width={4}>
+          <Form.Field>
             <Header as="h6">{I18n.t('results.selector_elements.gender_selector.gender')}</Header>
             <ButtonGroup compact color="teal" widths={3}>
               <Button active={gender === 'All'} onClick={() => setGender('All')}>{I18n.t('results.selector_elements.gender_selector.gender_all')}</Button>
@@ -86,11 +86,11 @@ export default function ResultsFilter({
               <Button active={gender === 'Female'} onClick={() => setGender('Female')}>{I18n.t('results.selector_elements.gender_selector.female')}</Button>
             </ButtonGroup>
           </Form.Field>
-          <Form.Field width={2}>
+          <Form.Field>
             <Header as="h6">{I18n.t('results.selector_elements.show_selector.show')}</Header>
             <ButtonGroup compact color="teal" widths={showCategories.length}>
               {showCategories.map((category) => (
-                <Button active={show === category} onClick={() => setShow(category)}>{I18n.t(`results.selector_elements.show_selector.${_.snakeCase(category)}`)}</Button>
+                <Button key={category} active={show === category} onClick={() => setShow(category)}>{I18n.t(`results.selector_elements.show_selector.${_.snakeCase(category.replace(/^\d+/, '').trim())}`)}</Button>
               ))}
             </ButtonGroup>
           </Form.Field>
diff --git a/app/webpacker/components/Results/resultsFilter.jsx b/app/webpacker/components/Results/resultsFilter.jsx
deleted file mode 100644
index a8e58dda9ff..00000000000
--- a/app/webpacker/components/Results/resultsFilter.jsx
+++ /dev/null
@@ -1,95 +0,0 @@
-import React, { useMemo } from 'react';
-import {
-  Button, ButtonGroup, Form, Header, Segment,
-} from 'semantic-ui-react';
-import { EventSelector } from '../wca/EventSelector';
-import { RegionSelector } from '../CompetitionsOverview/CompetitionsFilters';
-import { countries } from '../../lib/wca-data.js.erb';
-import I18n from '../../lib/i18n';
-
-export default function ResultsFilter({ filterState, filterActions }) {
-  const {
-    event,
-    region,
-    rankingType,
-    gender,
-    show,
-  } = filterState;
-
-  const {
-    setEvent,
-    setRegion,
-    setRankingType,
-    setGender,
-    setShow,
-  } = filterActions;
-
-  const regionIso2 = useMemo(() => {
-    if (region === 'world') {
-      return 'all';
-    }
-    return countries.real.find((country) => country.id === region)?.iso2 || region;
-  }, [region]);
-  return (
-    <Segment raised>
-      <Form>
-        <Form.Field>
-          <EventSelector
-            title={I18n.t('results.selector_elements.events_selector.event')}
-            selectedEvents={[event]}
-            onEventSelection={({ eventId }) => setEvent(eventId)}
-            hideAllButton
-            hideClearButton
-          />
-        </Form.Field>
-        <Form.Field>
-          <RegionSelector
-            region={regionIso2}
-            dispatchFilter={({ region: r }) => {
-              if (r === 'all') {
-                setRegion('world');
-              } else {
-                setRegion(countries.byIso2[r]?.id ?? r);
-              }
-            }}
-          />
-        </Form.Field>
-        <Form.Group widths="equal">
-          <Form.Field>
-            <Header as="h6">{I18n.t('results.selector_elements.type_selector.type')}</Header>
-            <ButtonGroup primary compact widths={2}>
-              <Button
-                active={rankingType === 'single'}
-                onClick={() => setRankingType('single')}
-              >
-                {I18n.t('results.selector_elements.type_selector.single')}
-              </Button>
-              { event !== '333mbf' && <Button active={rankingType === 'average'} onClick={() => setRankingType('average')}>{I18n.t('results.selector_elements.type_selector.average')}</Button>}
-            </ButtonGroup>
-          </Form.Field>
-          {/* <Form.Field width={1}> */}
-          {/*   <ButtonGroup> */}
-          {/*    <Button>All years</Button> */}
-          {/*   </ButtonGroup> */}
-          {/* </Form.Field> */}
-          <Form.Field>
-            <Header as="h6">{I18n.t('results.selector_elements.gender_selector.gender')}</Header>
-            <ButtonGroup compact color="teal" widths={3}>
-              <Button active={gender === 'All'} onClick={() => setGender('All')}>{I18n.t('results.selector_elements.gender_selector.gender_all')}</Button>
-              <Button active={gender === 'Male'} onClick={() => setGender('Male')}>{I18n.t('results.selector_elements.gender_selector.male')}</Button>
-              <Button active={gender === 'Female'} onClick={() => setGender('Female')}>{I18n.t('results.selector_elements.gender_selector.female')}</Button>
-            </ButtonGroup>
-          </Form.Field>
-          <Form.Field>
-            <Header as="h6">{I18n.t('results.selector_elements.show_selector.show')}</Header>
-            <ButtonGroup compact color="teal" widths={3}>
-              <Button active={show === '100 persons'} onClick={() => setShow('100 persons')}>{I18n.t('results.selector_elements.show_selector.persons')}</Button>
-              <Button active={show === '100 results'} onClick={() => setShow('100 results')}>{I18n.t('results.selector_elements.show_selector.results')}</Button>
-              <Button active={show === 'by region'} onClick={() => setShow('by region')}>{I18n.t('results.selector_elements.show_selector.by_region')}</Button>
-            </ButtonGroup>
-          </Form.Field>
-        </Form.Group>
-      </Form>
-    </Segment>
-  );
-}