From 1c9612b3a3eebfa015c97e3b66ef47bf498a22d1 Mon Sep 17 00:00:00 2001
From: Jake Howard <git@theorangeone.net>
Date: Sun, 18 Sep 2016 12:01:28 +0100
Subject: [PATCH] add results components

---
 src/components/BlankResults.tsx | 27 +++++++++++++++++++++++++++
 src/components/Input.tsx        |  1 -
 src/components/Results.tsx      | 32 ++++++++++++++++++++++++++++++++
 src/types/index.ts              |  5 +++++
 src/views/main.tsx              | 12 +++++++++---
 5 files changed, 73 insertions(+), 4 deletions(-)
 create mode 100644 src/components/BlankResults.tsx
 create mode 100644 src/components/Results.tsx

diff --git a/src/components/BlankResults.tsx b/src/components/BlankResults.tsx
new file mode 100644
index 0000000..6e00402
--- /dev/null
+++ b/src/components/BlankResults.tsx
@@ -0,0 +1,27 @@
+import React, { Component }from 'react';
+
+import {
+  Text,
+  View,
+  StyleSheet
+} from 'react-native';
+
+const styles = StyleSheet.create({
+    container: {
+      flex: 1,
+      alignItems: 'center',
+      justifyContent: 'center'
+    } as React.ViewStyle,
+});
+
+interface Props {
+}
+
+
+export default function BlankResults(props : Props) {
+  return (
+    <View style={styles.container}>
+      <Text>Something</Text>
+    </View>
+  );
+}
diff --git a/src/components/Input.tsx b/src/components/Input.tsx
index e5eadfd..0ca5a3d 100644
--- a/src/components/Input.tsx
+++ b/src/components/Input.tsx
@@ -3,7 +3,6 @@ import React, { Component }from 'react';
 import { TextInput, View, StyleSheet } from 'react-native';
 import { BRAND_PRIMARY } from '../settings/styles';
 
-
 const styles = StyleSheet.create({
     inputBorder: {
       borderWidth: 1,
diff --git a/src/components/Results.tsx b/src/components/Results.tsx
new file mode 100644
index 0000000..81fefcf
--- /dev/null
+++ b/src/components/Results.tsx
@@ -0,0 +1,32 @@
+import React, { Component }from 'react';
+import zxcvbn from 'zxcvbn';
+import {
+  Text,
+  View,
+  StyleSheet
+} from 'react-native';
+
+const styles = StyleSheet.create({
+    container: {
+      flex: 1,
+      alignItems: 'center',
+      justifyContent: 'center'
+    } as React.ViewStyle,
+});
+
+interface Props {
+  value: string;
+}
+
+interface State {
+
+}
+
+export default function Result(props : Props) {
+  const resultData = zxcvbn(props.value);
+  return (
+    <View style={styles.container}>
+      <Text>{resultData.score}</Text>
+    </View>
+  );
+}
diff --git a/src/types/index.ts b/src/types/index.ts
index 7f1c6d5..bcd6432 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -4,3 +4,8 @@ declare module "react-native-vector-icons/FontAwesome" {
   var noTypeInfoYet: any; // any var name here really
   export = noTypeInfoYet;
 }
+
+declare module "zxcvbn" {
+  var noTypeInfoYet: any; // any var name here really
+  export = noTypeInfoYet;
+}
diff --git a/src/views/main.tsx b/src/views/main.tsx
index 000eff7..3cf2540 100644
--- a/src/views/main.tsx
+++ b/src/views/main.tsx
@@ -5,11 +5,14 @@ import {
     View
 } from 'react-native';
 import Input from '../components/Input';
+import Results from '../components/Results';
+import BlankResults from '../components/BlankResults';
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
     alignItems: 'stretch',
+    justifyContent: 'center',
     backgroundColor: '#FFF',
   } as React.ViewStyle,
 
@@ -39,12 +42,15 @@ export default class App extends Component<any, State> {
   }
 
   render() {
+    const results = this.state.text ? (
+      <Results value={this.state.text} />
+    ) : (
+      <BlankResults />
+    );
     return (
       <View style={styles.container}>
         <Input onSubmit={this.handleSubmit} value={this.state.text} />
-        <Text style={styles.text}>
-          Welcome to React Native!
-        </Text>
+        { results }
       </View>
     );
   }