From 304931aed8e83b2b4ce69176c96eaab5f6364b9a Mon Sep 17 00:00:00 2001
From: Viktoryia Kliushun <vikstash@gmail.com>
Date: Thu, 19 Oct 2023 14:51:46 +0200
Subject: [PATCH 1/2] [TS migration] Migrate 'RadioButtons.js' component

---
 .../{RadioButtons.js => RadioButtons.tsx}     | 27 +++++++++----------
 1 file changed, 12 insertions(+), 15 deletions(-)
 rename src/components/{RadioButtons.js => RadioButtons.tsx} (61%)

diff --git a/src/components/RadioButtons.js b/src/components/RadioButtons.tsx
similarity index 61%
rename from src/components/RadioButtons.js
rename to src/components/RadioButtons.tsx
index 455f4dad1674..f570bf6fad3e 100644
--- a/src/components/RadioButtons.js
+++ b/src/components/RadioButtons.tsx
@@ -1,33 +1,31 @@
 import React, {useState} from 'react';
 import {View} from 'react-native';
-import PropTypes from 'prop-types';
-import _ from 'underscore';
 import RadioButtonWithLabel from './RadioButtonWithLabel';
 import styles from '../styles/styles';
 
-const propTypes = {
+type Choice = {
+    label: string;
+    value: string;
+};
+
+type RadioButtonsProps = {
     /** List of choices to display via radio buttons */
-    items: PropTypes.arrayOf(
-        PropTypes.shape({
-            label: PropTypes.string.isRequired,
-            value: PropTypes.string.isRequired,
-        }),
-    ).isRequired,
+    items: Choice[];
 
     /** Callback to fire when selecting a radio button */
-    onPress: PropTypes.func.isRequired,
+    onPress: (value: string) => void;
 };
 
-function RadioButtons(props) {
+function RadioButtons(props: RadioButtonsProps) {
     const [checkedValue, setCheckedValue] = useState('');
 
     return (
         <View>
-            {_.map(props.items, (item, index) => (
+            {props.items.map((item) => (
                 <RadioButtonWithLabel
-                    key={`${item.label}-${index}`}
+                    key={item.value}
                     isChecked={item.value === checkedValue}
-                    style={[styles.mt4]}
+                    style={styles.mt4}
                     onPress={() => {
                         setCheckedValue(item.value);
                         return props.onPress(item.value);
@@ -39,7 +37,6 @@ function RadioButtons(props) {
     );
 }
 
-RadioButtons.propTypes = propTypes;
 RadioButtons.displayName = 'RadioButtons';
 
 export default RadioButtons;

From 84e6c26ba8f86a2b5952e13629d5a4c6114ee07d Mon Sep 17 00:00:00 2001
From: Viktoryia Kliushun <vikstash@gmail.com>
Date: Thu, 19 Oct 2023 16:11:53 +0200
Subject: [PATCH 2/2] Destructure props object

---
 src/components/RadioButtons.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/RadioButtons.tsx b/src/components/RadioButtons.tsx
index f570bf6fad3e..cf9830d4b967 100644
--- a/src/components/RadioButtons.tsx
+++ b/src/components/RadioButtons.tsx
@@ -16,19 +16,19 @@ type RadioButtonsProps = {
     onPress: (value: string) => void;
 };
 
-function RadioButtons(props: RadioButtonsProps) {
+function RadioButtons({items, onPress}: RadioButtonsProps) {
     const [checkedValue, setCheckedValue] = useState('');
 
     return (
         <View>
-            {props.items.map((item) => (
+            {items.map((item) => (
                 <RadioButtonWithLabel
                     key={item.value}
                     isChecked={item.value === checkedValue}
                     style={styles.mt4}
                     onPress={() => {
                         setCheckedValue(item.value);
-                        return props.onPress(item.value);
+                        return onPress(item.value);
                     }}
                     label={item.label}
                 />