From 85969a581ae4f03e3fefe716e6f3d74c9ae8d12c Mon Sep 17 00:00:00 2001
From: Gregor Billing <gbilling@worldcubeassociation.org>
Date: Mon, 30 Dec 2024 23:42:26 +0900
Subject: [PATCH 1/3] Use GenderSelector in EditProfileForm

---
 .../ContactEditProfilePage/EditProfileForm.jsx     | 14 +++-----------
 .../components/GenderSelector/GenderSelector.js    |  3 ++-
 2 files changed, 5 insertions(+), 12 deletions(-)

diff --git a/app/webpacker/components/ContactEditProfilePage/EditProfileForm.jsx b/app/webpacker/components/ContactEditProfilePage/EditProfileForm.jsx
index dd0e333d76b..cdabd1f0ede 100644
--- a/app/webpacker/components/ContactEditProfilePage/EditProfileForm.jsx
+++ b/app/webpacker/components/ContactEditProfilePage/EditProfileForm.jsx
@@ -5,22 +5,16 @@ import { QueryClient, useQuery } from '@tanstack/react-query';
 import _ from 'lodash';
 import I18n from '../../lib/i18n';
 import { apiV0Urls, contactEditProfileActionUrl } from '../../lib/requests/routes.js.erb';
-import { genders } from '../../lib/wca-data.js.erb';
 import Loading from '../Requests/Loading';
 import Errored from '../Requests/Errored';
 import useSaveAction from '../../lib/hooks/useSaveAction';
 import { fetchJsonOrError } from '../../lib/requests/fetchWithAuthenticityToken';
 import UtcDatePicker from '../wca/UtcDatePicker';
 import CountrySelector from '../CountrySelector/CountrySelector';
+import GenderSelector from '../GenderSelector/GenderSelector';
 
 const CONTACT_EDIT_PROFILE_FORM_QUERY_CLIENT = new QueryClient();
 
-const genderOptions = _.map(genders.byId, (gender) => ({
-  key: gender.id,
-  text: gender.name,
-  value: gender.id,
-}));
-
 export default function EditProfileForm({
   wcaId,
   onContactSuccess,
@@ -103,11 +97,9 @@ export default function EditProfileForm({
         countryIso2={editedProfileDetails?.country_iso2}
         onChange={handleFormChange}
       />
-      <Form.Select
-        options={genderOptions}
-        label={I18n.t('activerecord.attributes.user.gender')}
+      <GenderSelector
         name="gender"
-        value={editedProfileDetails?.gender}
+        gender={editedProfileDetails?.gender}
         onChange={handleFormChange}
       />
       <Form.Field
diff --git a/app/webpacker/components/GenderSelector/GenderSelector.js b/app/webpacker/components/GenderSelector/GenderSelector.js
index ffa09ea6d84..d988e26d477 100644
--- a/app/webpacker/components/GenderSelector/GenderSelector.js
+++ b/app/webpacker/components/GenderSelector/GenderSelector.js
@@ -10,9 +10,10 @@ const genderOptions = _.map(genders.byId, (gender) => ({
   value: gender.id,
 }));
 
-function GenderSelector({ gender, onChange }) {
+function GenderSelector({ name, gender, onChange }) {
   return (
     <Form.Select
+      name={name}
       label="Gender"
       value={gender}
       options={genderOptions}

From 64abcdd61ac79d4eb98220bb6e8eb454c7d22c40 Mon Sep 17 00:00:00 2001
From: Gregor Billing <gbilling@worldcubeassociation.org>
Date: Mon, 30 Dec 2024 23:44:31 +0900
Subject: [PATCH 2/3] Use GenderSelector in EditPersonForm

---
 .../components/GenderSelector/GenderSelector.js   |  8 +++++++-
 .../Panel/pages/EditPersonPage/EditPersonForm.jsx | 15 ++++-----------
 2 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/app/webpacker/components/GenderSelector/GenderSelector.js b/app/webpacker/components/GenderSelector/GenderSelector.js
index d988e26d477..6d72ea08df3 100644
--- a/app/webpacker/components/GenderSelector/GenderSelector.js
+++ b/app/webpacker/components/GenderSelector/GenderSelector.js
@@ -10,7 +10,12 @@ const genderOptions = _.map(genders.byId, (gender) => ({
   value: gender.id,
 }));
 
-function GenderSelector({ name, gender, onChange }) {
+function GenderSelector({
+  name,
+  gender,
+  onChange,
+  disabled = false,
+}) {
   return (
     <Form.Select
       name={name}
@@ -18,6 +23,7 @@ function GenderSelector({ name, gender, onChange }) {
       value={gender}
       options={genderOptions}
       onChange={onChange}
+      disabled={disabled}
     />
   );
 }
diff --git a/app/webpacker/components/Panel/pages/EditPersonPage/EditPersonForm.jsx b/app/webpacker/components/Panel/pages/EditPersonPage/EditPersonForm.jsx
index 25c95cc42bc..c1ac96d6f1f 100644
--- a/app/webpacker/components/Panel/pages/EditPersonPage/EditPersonForm.jsx
+++ b/app/webpacker/components/Panel/pages/EditPersonPage/EditPersonForm.jsx
@@ -7,16 +7,11 @@ import { adminCheckRecordsUrl, apiV0Urls } from '../../../../lib/requests/routes
 import useSaveAction from '../../../../lib/hooks/useSaveAction';
 import Loading from '../../../Requests/Loading';
 import I18n from '../../../../lib/i18n';
-import { genders, countries } from '../../../../lib/wca-data.js.erb';
+import { countries } from '../../../../lib/wca-data.js.erb';
 import useLoadedData from '../../../../lib/hooks/useLoadedData';
 import Errored from '../../../Requests/Errored';
 import UtcDatePicker from '../../../wca/UtcDatePicker';
-
-const genderOptions = _.map(genders.byId, (gender) => ({
-  key: gender.id,
-  text: gender.name,
-  value: gender.id,
-}));
+import GenderSelector from '../../../GenderSelector/GenderSelector';
 
 const countryOptions = _.map(countries.byIso2, (country) => ({
   key: country.iso2,
@@ -144,12 +139,10 @@ export default function EditPersonForm({ wcaId, onSuccess, showDestroyButton = f
           value={editedUserDetails?.representing || ''}
           onChange={handleFormChange}
         />
-        <Form.Select
-          options={genderOptions}
-          label={I18n.t('activerecord.attributes.user.gender')}
+        <GenderSelector
           name="gender"
           disabled={!editedUserDetails}
-          value={editedUserDetails?.gender || ''}
+          gender={editedUserDetails?.gender || ''}
           onChange={handleFormChange}
         />
         <Form.Field

From 513a268c9fb88ce7d14b9febafa88fd4f8dd4fed Mon Sep 17 00:00:00 2001
From: Gregor Billing <gbilling@worldcubeassociation.org>
Date: Mon, 30 Dec 2024 23:45:41 +0900
Subject: [PATCH 3/3] Localize GenderSelector label

---
 app/webpacker/components/GenderSelector/GenderSelector.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/app/webpacker/components/GenderSelector/GenderSelector.js b/app/webpacker/components/GenderSelector/GenderSelector.js
index 6d72ea08df3..e195281f94c 100644
--- a/app/webpacker/components/GenderSelector/GenderSelector.js
+++ b/app/webpacker/components/GenderSelector/GenderSelector.js
@@ -3,6 +3,7 @@ import _ from 'lodash';
 import { Form } from 'semantic-ui-react';
 
 import { genders } from '../../lib/wca-data.js.erb';
+import I18n from '../../lib/i18n';
 
 const genderOptions = _.map(genders.byId, (gender) => ({
   key: gender.id,
@@ -19,7 +20,7 @@ function GenderSelector({
   return (
     <Form.Select
       name={name}
-      label="Gender"
+      label={I18n.t('activerecord.attributes.user.gender')}
       value={gender}
       options={genderOptions}
       onChange={onChange}