From 335f6de00a50593d3dd6461d3a020e5513bb8876 Mon Sep 17 00:00:00 2001
From: Luna Wei <luwe@fb.com>
Date: Fri, 22 Jan 2021 13:44:19 -0800
Subject: [PATCH] Refactor renderSmallSwitchOption

Summary:
Changelog:
[General][Changed] - Refactor `renderSmallSwitchOption`, a RNTester util for list based components to not pass state around.

Reviewed By: nadiia

Differential Revision: D25986317

fbshipit-source-id: cbbd71cc1b1bab71ecd007980f2813f7a066b3f2
---
 .../js/components/ListExampleShared.js        | 11 ++--
 .../js/examples/FlatList/FlatListExample.js   | 51 ++++++++++++++++---
 .../MultiColumn/MultiColumnExample.js         | 22 ++++++--
 .../SectionList/SectionListExample.js         | 27 ++++++++--
 4 files changed, 91 insertions(+), 20 deletions(-)

diff --git a/packages/rn-tester/js/components/ListExampleShared.js b/packages/rn-tester/js/components/ListExampleShared.js
index 522d72e3d93..84ca599630e 100644
--- a/packages/rn-tester/js/components/ListExampleShared.js
+++ b/packages/rn-tester/js/components/ListExampleShared.js
@@ -240,19 +240,20 @@ function pressItem(context: Object, key: string) {
 }
 
 function renderSmallSwitchOption(
-  context: Object,
-  key: string,
+  label: string,
+  value: boolean,
+  setValue: boolean => void,
 ): null | React.Node {
   if (Platform.isTV) {
     return null;
   }
   return (
     <View style={styles.option}>
-      <Text>{key}:</Text>
+      <Text>{label}:</Text>
       <Switch
         style={styles.smallSwitch}
-        value={context.state[key]}
-        onValueChange={value => context.setState({[key]: value})}
+        value={value}
+        onValueChange={setValue}
       />
     </View>
   );
diff --git a/packages/rn-tester/js/examples/FlatList/FlatListExample.js b/packages/rn-tester/js/examples/FlatList/FlatListExample.js
index 4dec5886a01..95185e3112b 100644
--- a/packages/rn-tester/js/examples/FlatList/FlatListExample.js
+++ b/packages/rn-tester/js/examples/FlatList/FlatListExample.js
@@ -98,6 +98,9 @@ class FlatListExample extends React.PureComponent<Props, State> {
     this._listRef.recordInteraction(); // e.g. flipping logViewable switch
   }
 
+  _setBooleanValue: string => boolean => void = key => value =>
+    this.setState({[key]: value});
+
   render(): React.Node {
     const filterRegex = new RegExp(String(this.state.filterText), 'i');
     const filter = item =>
@@ -123,14 +126,46 @@ class FlatListExample extends React.PureComponent<Props, State> {
               />
             </View>
             <View style={styles.options}>
-              {renderSmallSwitchOption(this, 'virtualized')}
-              {renderSmallSwitchOption(this, 'horizontal')}
-              {renderSmallSwitchOption(this, 'fixedHeight')}
-              {renderSmallSwitchOption(this, 'log')}
-              {renderSmallSwitchOption(this, 'inverted')}
-              {renderSmallSwitchOption(this, 'empty')}
-              {renderSmallSwitchOption(this, 'debug')}
-              {renderSmallSwitchOption(this, 'useFlatListItemComponent')}
+              {renderSmallSwitchOption(
+                'Virtualized',
+                this.state.virtualized,
+                this._setBooleanValue('virtualized'),
+              )}
+              {renderSmallSwitchOption(
+                'Horizontal',
+                this.state.horizontal,
+                this._setBooleanValue('horizontal'),
+              )}
+              {renderSmallSwitchOption(
+                'Fixed Height',
+                this.state.fixedHeight,
+                this._setBooleanValue('fixedHeight'),
+              )}
+              {renderSmallSwitchOption(
+                'Log Viewable',
+                this.state.logViewable,
+                this._setBooleanValue('logViewable'),
+              )}
+              {renderSmallSwitchOption(
+                'Inverted',
+                this.state.inverted,
+                this._setBooleanValue('inverted'),
+              )}
+              {renderSmallSwitchOption(
+                'Empty',
+                this.state.empty,
+                this._setBooleanValue('empty'),
+              )}
+              {renderSmallSwitchOption(
+                'Debug',
+                this.state.debug,
+                this._setBooleanValue('debug'),
+              )}
+              {renderSmallSwitchOption(
+                'Use FlatListItemComponent',
+                this.state.useFlatListItemComponent,
+                this._setBooleanValue('useFlatListItemComponent'),
+              )}
               {Platform.OS === 'android' && (
                 <View>
                   <TextInput
diff --git a/packages/rn-tester/js/examples/MultiColumn/MultiColumnExample.js b/packages/rn-tester/js/examples/MultiColumn/MultiColumnExample.js
index 7d6b554cd59..0ecf04679f4 100644
--- a/packages/rn-tester/js/examples/MultiColumn/MultiColumnExample.js
+++ b/packages/rn-tester/js/examples/MultiColumn/MultiColumnExample.js
@@ -56,6 +56,10 @@ class MultiColumnExample extends React.PureComponent<
   _onChangeNumColumns = numColumns => {
     this.setState(() => ({numColumns: Number(numColumns)}));
   };
+
+  _setBooleanValue: string => boolean => void = key => value =>
+    this.setState({[key]: value});
+
   render(): React.Node {
     const filterRegex = new RegExp(String(this.state.filterText), 'i');
     const filter = item =>
@@ -81,9 +85,21 @@ class MultiColumnExample extends React.PureComponent<
             />
           </View>
           <View style={styles.row}>
-            {renderSmallSwitchOption(this, 'virtualized')}
-            {renderSmallSwitchOption(this, 'fixedHeight')}
-            {renderSmallSwitchOption(this, 'logViewable')}
+            {renderSmallSwitchOption(
+              'Virtualized',
+              this.state.virtualized,
+              this._setBooleanValue('virtualized'),
+            )}
+            {renderSmallSwitchOption(
+              'Fixed Height',
+              this.state.fixedHeight,
+              this._setBooleanValue('fixedHeight'),
+            )}
+            {renderSmallSwitchOption(
+              'Log Viewable',
+              this.state.logViewable,
+              this._setBooleanValue('logViewable'),
+            )}
           </View>
         </View>
         <SeparatorComponent />
diff --git a/packages/rn-tester/js/examples/SectionList/SectionListExample.js b/packages/rn-tester/js/examples/SectionList/SectionListExample.js
index 239372b5749..64a8de09718 100644
--- a/packages/rn-tester/js/examples/SectionList/SectionListExample.js
+++ b/packages/rn-tester/js/examples/SectionList/SectionListExample.js
@@ -108,6 +108,9 @@ class SectionListExample extends React.PureComponent<{...}, $FlowFixMeState> {
       this._sectionListRef.scrollToLocation({sectionIndex, itemIndex});
   }
 
+  _setBooleanValue: string => boolean => void = key => value =>
+    this.setState({[key]: value});
+
   render(): React.Node {
     const filterRegex = new RegExp(String(this.state.filterText), 'i');
     const filter = item =>
@@ -136,10 +139,26 @@ class SectionListExample extends React.PureComponent<{...}, $FlowFixMeState> {
             value={this.state.filterText}
           />
           <View style={styles.optionSection}>
-            {renderSmallSwitchOption(this, 'virtualized')}
-            {renderSmallSwitchOption(this, 'logViewable')}
-            {renderSmallSwitchOption(this, 'debug')}
-            {renderSmallSwitchOption(this, 'inverted')}
+            {renderSmallSwitchOption(
+              'virtualized',
+              this.state.virtualized,
+              this._setBooleanValue('virtualized'),
+            )}
+            {renderSmallSwitchOption(
+              'Log Viewable',
+              this.state.logViewable,
+              this._setBooleanValue('logViewable'),
+            )}
+            {renderSmallSwitchOption(
+              'Debug',
+              this.state.debug,
+              this._setBooleanValue('debug'),
+            )}
+            {renderSmallSwitchOption(
+              'Inverted',
+              this.state.inverted,
+              this._setBooleanValue('inverted'),
+            )}
             <Spindicator value={this._scrollPos} />
           </View>
           <View style={styles.scrollToRow}>