From 09c29e1ba57fc9d14ce21c51eebcd8c40319fa86 Mon Sep 17 00:00:00 2001
From: kdxcxs <cx@kdxcxs.com>
Date: Sun, 6 Dec 2020 13:56:39 +0800
Subject: [PATCH] refactor: pass `this` to YooForumUI when YooForumTopicUI is
 clicked

As feature is growing fast, it needs to pass to many args, so i decide to pass this instead.
---
 src/ui/YooForumTopicUI.js | 10 ++--------
 src/ui/YooForumUI.js      | 35 +++++++++++++++++++++++++----------
 2 files changed, 27 insertions(+), 18 deletions(-)

diff --git a/src/ui/YooForumTopicUI.js b/src/ui/YooForumTopicUI.js
index 7e4e6df..183df9b 100644
--- a/src/ui/YooForumTopicUI.js
+++ b/src/ui/YooForumTopicUI.js
@@ -46,15 +46,9 @@ export default class YooForumTopicUI extends Component {
 
   onPress() {
     if (!this.state.detailShowing) {
-      this.props.showDetail(
-        this.state.translate,
-        this.state.layoutY,
-        this.onAnimationFinished,
-        this.props.replies,
-        this.state.layoutHeight,
-      );
+      this.props.showDetail(this);
     } else {
-      this.props.hideDetail(this.state.translate, this.onAnimationFinished);
+      this.props.hideDetail();
     }
   }
 
diff --git a/src/ui/YooForumUI.js b/src/ui/YooForumUI.js
index 8dba2ba..a5cf94f 100644
--- a/src/ui/YooForumUI.js
+++ b/src/ui/YooForumUI.js
@@ -88,22 +88,29 @@ export default class YooForumUI extends Component {
     this.replyRef = createRef();
     this.showDetail = this.showDetail.bind(this);
     this.hideDetail = this.hideDetail.bind(this);
+    this.currentForumTopicUI = null;
   }
 
-  showDetail(translate, layoutY, onAnimationFinished, replies, layoutHeight) {
+  showDetail(ForumTopicUI) {
+    this.currentForumTopicUI = ForumTopicUI;
     this.replyRef.current.scrollTo({x: 0, y: 0, animated: false});
     this.setState({
       scrollEnabled: false,
-      currentReplies: replies,
+      currentReplies: this.currentForumTopicUI.props.replies,
     });
     this.state.replyTranslateY.setValue(
-      this.state.currentPosition + layoutHeight + screenHeight,
+      this.state.currentPosition +
+        this.currentForumTopicUI.state.layoutHeight +
+        screenHeight,
     );
     Animated.parallel([
-      Animated.timing(translate, {
+      Animated.timing(this.currentForumTopicUI.state.translate, {
         toValue: {
           x: screenWidth,
-          y: this.state.currentPosition - layoutY + 8,
+          y:
+            this.state.currentPosition -
+            this.currentForumTopicUI.state.layoutY +
+            8,
         },
         duration: 250,
         useNativeDriver: true,
@@ -114,18 +121,21 @@ export default class YooForumUI extends Component {
         useNativeDriver: true,
       }),
       Animated.timing(this.state.replyTranslateY, {
-        toValue: this.state.currentPosition + layoutHeight + 8,
+        toValue:
+          this.state.currentPosition +
+          this.currentForumTopicUI.state.layoutHeight +
+          8,
         duration: 250,
         delay: 250,
         useNativeDriver: true,
       }),
-    ]).start(onAnimationFinished);
+    ]).start(this.currentForumTopicUI.onAnimationFinished);
   }
 
-  hideDetail(translate, onAnimationFinished) {
+  hideDetail() {
     this.setState({scrollEnabled: true});
     Animated.parallel([
-      Animated.timing(translate, {
+      Animated.timing(this.currentForumTopicUI.state.translate, {
         toValue: {
           x: 0,
           y: 0,
@@ -143,7 +153,12 @@ export default class YooForumUI extends Component {
         duration: 250,
         useNativeDriver: true,
       }),
-    ]).start(onAnimationFinished);
+    ]).start(
+      function () {
+        this.currentForumTopicUI.onAnimationFinished();
+        this.currentForumTopicUI = null;
+      }.bind(this),
+    );
   }
 
   render() {