Show list of results

src/components/ResultItem.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import zxcvbn from 'zxcvbn';
+import {
+  Text,
+  View,
+  StyleSheet
+} from 'react-native';
+import _ from 'underscore';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center'
+  } as React.ViewStyle,
+});
+
+interface Props {
+  data: any;
+}
+
+
+export default function Result(props: Props) {
+  return (
+    <Text>{props.data.key}: {JSON.stringify(props.data.value)}</Text>
+  );
+}

src/components/Results.tsx

@@ -1,10 +1,13 @@
-import React, { Component }from 'react';
+import React from 'react';
 import zxcvbn from 'zxcvbn';
 import {
   Text,
   View,
-  StyleSheet
+  StyleSheet,
+  ListView
 } from 'react-native';
+import _ from 'underscore';
+import ResultItem from './ResultItem';
 
 const styles = StyleSheet.create({
   container: {
@@ -12,21 +15,73 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center'
   } as React.ViewStyle,
+  listView: {
+    flex: 1
+  } as React.ViewStyle,
+  listItem: {
+    borderBottomWidth: 1,
+    borderBottomColor: '#333',
+    paddingTop: 5,
+    paddingBottom: 8,
+    paddingHorizontal: 16
+  } as React.ViewStyle
 });
 
 interface Props {
   value: string;
 }
 
-interface State {
+interface State {}
 
+export default class Result extends React.Component<Props, State> {
+  dataSource: any;
+
+  constructor() {
+    super();
+    this.dataSource = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
+  }
+
+  parseData(results: any) {
+    const newResults = _.clone(results);
+    const hashTimes = Object.keys(newResults.crack_times_display).map(function (key) {
+      const value = newResults.crack_times_display[key];
+      return {key, value};
+    });
+    delete newResults.crack_times_display;
+    delete newResults.crack_times_seconds;
+    const out = Object.keys(newResults).map(function (key) {
+      const value = newResults[key];
+      return {key, value};
+    });
+    return _.union(out, hashTimes);
+  }
+
+  renderRow(rowData: any, sectionId: string, rowId: string) {
+    let extraRowStyles = {};
+    if (rowId === '0') {
+      extraRowStyles = {
+        borderTopWidth: 1,
+        borderTopColor: '#333'
+      };
     }
 
-export default function Result(props : Props) {
-  const resultData = zxcvbn(props.value);
     return (
-    <View style={styles.container}>
-      <Text>{resultData.score}</Text>
+      <View style={[styles.listItem, extraRowStyles]}>
+        <ResultItem data={rowData} />
       </View>
     );
   }
+
+  render() {
+    const results = this.parseData(zxcvbn(this.props.value));
+    return (
+      <View style={styles.container}>
+        <ListView
+          style={styles.listView}
+          dataSource={this.dataSource.cloneWithRows(results)}
+          renderRow={this.renderRow.bind(this)}
+          removeClippedSubviews />
+      </View>
+    );
+  }
+}