weechatRN

commit 0086c355e560d119c550a3758b667befa58a53e0
parent 38f41a5f00deeb9eabf90a46cb285f0fcdde9a4f
Author: Johan Lindskogen <johan.lindskogen@gmail.com>
Date:   Sun,  1 Apr 2018 22:32:25 +0200

Optimize away rerenders

Diffstat:
M
src/usecase/App.tsx
 | 
7
+++----
M
src/usecase/buffers/ui/Buffer.tsx
 | 
31
+++++++++++++++++++++----------
M
src/usecase/buffers/ui/BufferContainer.tsx
 | 
16
++++++++++------
M
src/usecase/buffers/ui/BufferLine.tsx
 | 
2
+-
M
src/usecase/buffers/ui/BufferList.tsx
 | 
26
+++++++++++++++++---------
M
src/usecase/buffers/ui/BufferListItem.tsx
 | 
1
-

6 files changed, 52 insertions(+), 31 deletions(-)
diff --git a/src/usecase/App.tsx b/src/usecase/App.tsx
@@ -19,7 +19,7 @@ import BufferList from "./buffers/ui/BufferList";
 import { StoreState } from "../store";
 
 interface Props {
-  buffers: WeechatBuffer[];
+  buffers: { [key: string]: WeechatBuffer };
   currentBufferId: string | null;
   currentBuffer: WeechatBuffer | null;
   fetchLinesForBuffer: (bufferId: string) => void;
@@ -52,7 +52,6 @@ class App extends React.Component<Props> {
 
   sendMessage = (message: string) => {
     const { currentBuffer, sendMessageToBuffer } = this.props;
-    console.log(this.props);
 
     sendMessageToBuffer(currentBuffer.full_name, message);
   };
@@ -67,7 +66,7 @@ class App extends React.Component<Props> {
 
     const sidebar = (
       <BufferList
-        buffers={_.orderBy(buffers, ["number"])}
+        buffers={_.orderBy(_.values(buffers), ["number"])}
         currentBufferId={currentBufferId}
         onSelectBuffer={this.changeCurrentBuffer}
       />
@@ -119,7 +118,7 @@ export default connect((state: StoreState) => {
   const currentBuffer = currentBufferId && state.buffers[currentBufferId];
 
   return {
-    buffers: _.values(state.buffers),
+    buffers: state.buffers,
     currentBufferId,
     currentBuffer
   };
diff --git a/src/usecase/buffers/ui/Buffer.tsx b/src/usecase/buffers/ui/Buffer.tsx
@@ -1,5 +1,12 @@
 import * as React from "react";
-import { StyleSheet, Animated, Keyboard, FlatList, View } from "react-native";
+import {
+  StyleSheet,
+  Animated,
+  Keyboard,
+  FlatList,
+  View,
+  ListRenderItem
+} from "react-native";
 import { connect } from "react-redux";
 import * as _ from "lodash";
 
@@ -13,7 +20,17 @@ interface Props {
   bufferId: string;
 }
 
-class Buffer extends React.Component<Props> {
+const keyExtractor = (line: WeechatLine, index: number) =>
+  _.last(line.pointers);
+
+class Buffer extends React.PureComponent<Props> {
+  renderBuffer: ListRenderItem<WeechatLine> = ({ item }) => {
+    const { onLongPress, parseArgs } = this.props;
+
+    return (
+      <BufferLine line={item} onLongPress={onLongPress} parseArgs={parseArgs} />
+    );
+  };
   render() {
     const { lines, onLongPress, parseArgs } = this.props;
     return (
@@ -23,14 +40,8 @@ class Buffer extends React.Component<Props> {
         )}
         inverted
         keyboardDismissMode="interactive"
-        keyExtractor={line => _.last(line.pointers)}
-        renderItem={({ item }) => (
-          <BufferLine
-            line={item}
-            onLongPress={onLongPress}
-            parseArgs={parseArgs}
-          />
-        )}
+        keyExtractor={keyExtractor}
+        renderItem={this.renderBuffer}
       />
     );
   }
diff --git a/src/usecase/buffers/ui/BufferContainer.tsx b/src/usecase/buffers/ui/BufferContainer.tsx
@@ -39,6 +39,12 @@ export default class BufferContainer extends React.Component<Props, State> {
     textValue: ""
   };
 
+  parseArgs = getParseArgs(
+    styles.link,
+    this.handleOnPress,
+    this.handleOnLongPress
+  );
+
   handleOnFocus() {
     Animated.timing(this.state.inputWidth, {
       toValue: 310,
@@ -86,6 +92,8 @@ export default class BufferContainer extends React.Component<Props, State> {
     });
   };
 
+  onLongPress = (line: WeechatLine) => {};
+
   render() {
     const { bufferId } = this.props;
     const { textValue } = this.state;
@@ -98,12 +106,8 @@ export default class BufferContainer extends React.Component<Props, State> {
       <KeyboardAvoidingView style={styles.container} behavior="padding">
         <Buffer
           bufferId={bufferId}
-          onLongPress={line => null}
-          parseArgs={getParseArgs(
-            styles.link,
-            this.handleOnPress,
-            this.handleOnLongPress
-          )}
+          onLongPress={this.onLongPress}
+          parseArgs={this.parseArgs}
         />
         <View style={styles.bottomBox}>
           <Animated.View style={{ width: this.state.inputWidth }}>
diff --git a/src/usecase/buffers/ui/BufferLine.tsx b/src/usecase/buffers/ui/BufferLine.tsx
@@ -9,7 +9,7 @@ interface Props {
   parseArgs: any;
 }
 
-export default class BufferLine extends React.Component<Props> {
+export default class BufferLine extends React.PureComponent<Props> {
   render() {
     const { line, onLongPress, parseArgs } = this.props;
 
diff --git a/src/usecase/buffers/ui/BufferList.tsx b/src/usecase/buffers/ui/BufferList.tsx
@@ -5,7 +5,8 @@ import {
   Text,
   TouchableHighlight,
   FlatList,
-  View
+  View,
+  ListRenderItem
 } from "react-native";
 import BufferListItem from "./BufferListItem";
 
@@ -15,7 +16,20 @@ interface Props {
   onSelectBuffer: (b: WeechatBuffer) => any;
 }
 
+const keyExtractor = (buffer: WeechatBuffer): string => buffer.id;
+
 export default class BufferList extends React.Component<Props> {
+  renderListItem: ListRenderItem<WeechatBuffer> = ({ item }) => {
+    const { onSelectBuffer, currentBufferId } = this.props;
+
+    return (
+      <BufferListItem
+        buffer={item}
+        onSelectBuffer={onSelectBuffer}
+        currentBufferId={currentBufferId}
+      />
+    );
+  };
   render() {
     const { buffers, onSelectBuffer, currentBufferId } = this.props;
 
@@ -25,14 +39,8 @@ export default class BufferList extends React.Component<Props> {
         <FlatList
           style={styles.container}
           data={buffers}
-          keyExtractor={buffer => buffer.id}
-          renderItem={({ item }) => (
-            <BufferListItem
-              buffer={item}
-              onSelectBuffer={onSelectBuffer}
-              currentBufferId={currentBufferId}
-            />
-          )}
+          keyExtractor={keyExtractor}
+          renderItem={this.renderListItem}
         />
       </View>
     );
diff --git a/src/usecase/buffers/ui/BufferListItem.tsx b/src/usecase/buffers/ui/BufferListItem.tsx
@@ -5,7 +5,6 @@ import {
   Dimensions,
   Text,
   TouchableHighlight,
-  FlatList,
   View,
   TextStyle,
   ViewStyle