From d0a455b3c31aaaf3ffbda8ec1ffa9fffad2a32f9 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 pressItem

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

Reviewed By: nadiia

Differential Revision: D25986318

fbshipit-source-id: d0dd85f783a83f73f83cfb1bd19d144c37af9ef9
---
 .../rn-tester/js/components/ListExampleShared.js  | 15 +++------------
 .../js/examples/FlatList/FlatListExample.js       | 13 ++++++++++++-
 .../js/examples/MultiColumn/MultiColumnExample.js | 12 +++++++++++-
 .../js/examples/SectionList/SectionListExample.js | 14 +++++++++++++-
 4 files changed, 39 insertions(+), 15 deletions(-)

diff --git a/packages/rn-tester/js/components/ListExampleShared.js b/packages/rn-tester/js/components/ListExampleShared.js
index 84ca599630e..2312ee69c22 100644
--- a/packages/rn-tester/js/components/ListExampleShared.js
+++ b/packages/rn-tester/js/components/ListExampleShared.js
@@ -225,18 +225,9 @@ function getItemLayout(
   return {length, offset: (length + separator) * index + header, index};
 }
 
-function pressItem(context: Object, key: string) {
-  const index = Number(key);
-  const pressed = !context.state.data[index].pressed;
-  context.setState(state => {
-    const newData = [...state.data];
-    newData[index] = {
-      ...state.data[index],
-      pressed,
-      title: 'Item ' + key + (pressed ? ' (pressed)' : ''),
-    };
-    return {data: newData};
-  });
+function pressItem(item: Item): Item {
+  const title = `Item ${item.key}${!item.pressed ? ' (pressed)' : ''}`;
+  return {...item, title, pressed: !item.pressed};
 }
 
 function renderSmallSwitchOption(
diff --git a/packages/rn-tester/js/examples/FlatList/FlatListExample.js b/packages/rn-tester/js/examples/FlatList/FlatListExample.js
index 95185e3112b..6e6df4913af 100644
--- a/packages/rn-tester/js/examples/FlatList/FlatListExample.js
+++ b/packages/rn-tester/js/examples/FlatList/FlatListExample.js
@@ -281,10 +281,21 @@ class FlatListExample extends React.PureComponent<Props, State> {
       );
     }
   };
+
   _pressItem = (key: string) => {
     this._listRef && this._listRef.recordInteraction();
-    pressItem(this, key);
+    const index = Number(key);
+    const itemState = pressItem(this.state.data[index]);
+    this.setState(state => ({
+      ...state,
+      data: [
+        ...state.data.slice(0, index),
+        itemState,
+        ...state.data.slice(index + 1),
+      ],
+    }));
   };
+
   _listRef: React.ElementRef<typeof Animated.FlatList>;
 }
 
diff --git a/packages/rn-tester/js/examples/MultiColumn/MultiColumnExample.js b/packages/rn-tester/js/examples/MultiColumn/MultiColumnExample.js
index 0ecf04679f4..6ca4431bb43 100644
--- a/packages/rn-tester/js/examples/MultiColumn/MultiColumnExample.js
+++ b/packages/rn-tester/js/examples/MultiColumn/MultiColumnExample.js
@@ -167,8 +167,18 @@ class MultiColumnExample extends React.PureComponent<
       );
     }
   };
+
   _pressItem = (key: string) => {
-    pressItem(this, key);
+    const index = Number(key);
+    const itemState = pressItem(this.state.data[index]);
+    this.setState(state => ({
+      ...state,
+      data: [
+        ...state.data.slice(0, index),
+        itemState,
+        ...state.data.slice(index + 1),
+      ],
+    }));
   };
 }
 
diff --git a/packages/rn-tester/js/examples/SectionList/SectionListExample.js b/packages/rn-tester/js/examples/SectionList/SectionListExample.js
index 64a8de09718..622226b38fa 100644
--- a/packages/rn-tester/js/examples/SectionList/SectionListExample.js
+++ b/packages/rn-tester/js/examples/SectionList/SectionListExample.js
@@ -286,7 +286,19 @@ class SectionListExample extends React.PureComponent<{...}, $FlowFixMeState> {
   };
 
   _pressItem = (key: string) => {
-    !isNaN(key) && pressItem(this, key);
+    if (isNaN(key)) {
+      return;
+    }
+    const index = Number(key);
+    const itemState = pressItem(this.state.data[index]);
+    this.setState(state => ({
+      ...state,
+      data: [
+        ...state.data.slice(0, index),
+        itemState,
+        ...state.data.slice(index + 1),
+      ],
+    }));
   };
 }