Faster logs

src/component/list.js

@@ -56,12 +56,7 @@ export class List extends Component {
         ref={component => (this.list = component)}
         dataSource={this.dataSource}
         renderHeader={this.props.renderHeader}
-        renderRow={data => {
-          if (this.props.scrollToEnd) {
-            setTimeout(() => this.list._scrollViewRef.scrollToEnd(), 50);
-          }
-          return this.props.renderItem(data);
-        }}
+        renderRow={this.props.renderItem}
         enableEmptySections={true}
       />
     );
@@ -72,7 +67,6 @@ List.propTypes = {
   data: PropTypes.array.isRequired,
   renderHeader: PropTypes.func,
   renderItem: PropTypes.func.isRequired,
-  scrollToEnd: PropTypes.bool,
 };
 
 //

src/config.js

@@ -13,7 +13,7 @@ module.exports.PREFIX_URI = `${prefixName}:`;
 
 module.exports.DEFAULT_ROUTE = 'Welcome';
 module.exports.MIN_PASSWORD_LENGTH = 8;
-module.exports.MAX_LOG_LENGTH = 30;
+module.exports.MAX_LOG_LENGTH = 100;
 
 module.exports.UNITS = {
   sat: { display: 'SAT', displayLong: 'Satoshi', denominator: 1 },

src/view/cli.js

@@ -1,34 +1,31 @@
-import React from 'react';
-import { StyleSheet } from 'react-native';
+import React, { Component } from 'react';
+import { ScrollView, StyleSheet } from 'react-native';
 import { observer } from 'mobx-react';
 import PropTypes from 'prop-types';
 import Background from '../component/background';
 import { Header, Title } from '../component/header';
 import Text from '../component/text';
-import { List, ListContent } from '../component/list';
 import { Button, BackButton } from '../component/button';
 import { color, font } from '../component/style';
 
 //
 // CLI View
 //
 
+const styles = StyleSheet.create({
+  header: {
+    marginBottom: 1, // display separator above output background color
+  },
+});
+
 const CLIView = ({ store, nav }) => (
   <Background color={color.blackDark}>
-    <Header separator>
+    <Header separator style={styles.header}>
       <BackButton onPress={() => nav.goSettings()} />
       <Title title="Logs" />
       <Button disabled onPress={() => {}} />
     </Header>
-    <Background color={color.cliBackground}>
-      <ListContent>
-        <List
-          data={store.logs.slice()}
-          renderItem={text => <LogItem text={text} />}
-          scrollToEnd={true}
-        />
-      </ListContent>
-    </Background>
+    <LogOutput logs={store.logs.slice()} />
   </Background>
 );
 
@@ -37,17 +34,46 @@ CLIView.propTypes = {
   nav: PropTypes.object.isRequired,
 };
 
-const iStyles = StyleSheet.create({
+//
+// Log Output
+//
+
+const logStyles = StyleSheet.create({
+  content: {
+    flexGrow: 1,
+    backgroundColor: color.cliBackground,
+    paddingTop: 25,
+    paddingBottom: 25,
+    paddingLeft: 50,
+    paddingRight: 50,
+  },
   text: {
-    textAlign: 'left',
     fontSize: font.sizeS,
   },
 });
 
-const LogItem = ({ text }) => <Text style={iStyles.text}>{text}</Text>;
+class LogOutput extends Component {
+  constructor(props) {
+    super(props);
+    this._ref = React.createRef();
+  }
+
+  get printLogs() {
+    setTimeout(() => this._ref.current.scrollToEnd(), 50);
+    return this.props.logs.map(l => l.replace(/\s+$/, '')).join('\n');
+  }
+
+  render() {
+    return (
+      <ScrollView ref={this._ref} contentContainerStyle={logStyles.content}>
+        <Text style={logStyles.text}>{this.printLogs}</Text>
+      </ScrollView>
+    );
+  }
+}
 
-LogItem.propTypes = {
-  text: PropTypes.string,
+LogOutput.propTypes = {
+  logs: PropTypes.array.isRequired,
 };
 
 export default observer(CLIView);

test/unit/action/log.spec.js

@@ -51,12 +51,12 @@ describe('Action Logs Unit Tests', () => {
 
     describe('constructor()', () => {
       it('should keep logs trimmed and keep the tail of the logs', () => {
-        for (var i = 0; i < 31; i++) {
+        for (var i = 0; i < 101; i++) {
           ipcRendererStub.emit('logs', 'some-event', i.toString());
         }
-        expect(store.logs.length, 'to equal', 30);
+        expect(store.logs.length, 'to equal', 100);
         expect(store.logs[0], 'to equal', '1');
-        expect(store.logs[29], 'to equal', '30');
+        expect(store.logs[99], 'to equal', '100');
       });
     });
   });