feat(auth): create homepage screen

Author: andela-akhenda

__tests__/unit/src/Child.spec.js …ests__/unit/src/components/Child.spec.js__tests__/unit/src/Child.spec.js renamed to __tests__/unit/src/components/Child.spec.js __tests__/unit/src/Child.spec.js renamed to __tests__/unit/src/components/Child.spec.js

@@ -3,7 +3,7 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import renderer from 'react-test-renderer';
 
-import Child from 'src/Child';
+import Child from 'src/components/Child';
 import * as Utils from 'src/utils/capitalize';
 
 

…nit/src/__snapshots__/Child.spec.js.snap …ponents/__snapshots__/Child.spec.js.snap__tests__/unit/src/__snapshots__/Child.spec.js.snap renamed to __tests__/unit/src/components/__snapshots__/Child.spec.js.snap __tests__/unit/src/__snapshots__/Child.spec.js.snap renamed to __tests__/unit/src/components/__snapshots__/Child.spec.js.snap

@@ -3,22 +3,22 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import renderer from 'react-test-renderer';
 
-import App from 'src/App';
-import Child from 'src/Child';
+import HomeScreen from 'src/containers/HomeScreen';
+import Child from 'src/components/Child';
 
 
-describe('App', () => {
+describe('HomeScreen', () => {
   let component;
   let textInput;
   const defaultState = { text: '' };
 
   test('renders correctly', () => {
-    const tree = renderer.create(<App />).toJSON();
+    const tree = renderer.create(<HomeScreen />).toJSON();
     expect(tree).toMatchSnapshot();
   });
 
   beforeEach(() => {
-    component = shallow(<App />);
+    component = shallow(<HomeScreen />);
     textInput = component.find('TextInput');
   });
 

__tests__/unit/src/App.spec.js …_/unit/src/containers/HomeScreen.spec.js__tests__/unit/src/App.spec.js renamed to __tests__/unit/src/containers/HomeScreen.spec.js __tests__/unit/src/App.spec.js renamed to __tests__/unit/src/containers/HomeScreen.spec.js

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`App renders correctly 1`] = `
+exports[`HomeScreen renders correctly 1`] = `
 <View
   style={
     Object {

…/unit/src/__snapshots__/App.spec.js.snap …rs/__snapshots__/HomeScreen.spec.js.snap__tests__/unit/src/__snapshots__/App.spec.js.snap renamed to __tests__/unit/src/containers/__snapshots__/HomeScreen.spec.js.snap __tests__/unit/src/__snapshots__/App.spec.js.snap renamed to __tests__/unit/src/containers/__snapshots__/HomeScreen.spec.js.snap

@@ -136,7 +136,8 @@
     "collectCoverage": true,
     "preset": "react-native",
     "testRegex": "/__tests__/unit/.*\\.spec\\.js$",
-    "setupTestFrameworkScriptFile": "./__tests__/unit/setup.js"
+    "setupTestFrameworkScriptFile": "./__tests__/unit/setup.js",
+    "transformIgnorePatterns": ["node_modules/(?!react-native|native-base|react-navigation|mobx-react)"]
   },
   "detox": {
     "test-runner": "jest",

package.json

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { StyleSheet, View, Text, TouchableOpacity } from 'react-native';
 
-import { capitalizeWords } from './utils/capitalize';
+import { capitalizeWords } from 'src/utils/capitalize';
 
 export default class Child extends Component {
   getCapitalizedText() {

src/Child.js src/components/Child.jssrc/Child.js renamed to src/components/Child.js

@@ -0,0 +1,80 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Platform, Text, View, TextInput } from 'react-native';
+import { connect } from 'react-redux';
+
+import Child from 'src/components/Child';
+import LoadingIndicator from 'src/components/LoadingIndicator';
+import { getUserInfo } from 'src/state/actions/auth';
+import styles from './styles/HomeScreenStyles';
+
+const instructions = Platform.select({
+  ios: 'Press Cmd+R to reload,\n' +
+    'Cmd+D or shake for dev menu',
+  android: 'Double tap R on your keyboard to reload,\n' +
+    'Shake or press menu button for dev menu',
+});
+
+class HomeScreen extends Component {  
+  constructor(props) {
+    super(props);
+
+    this.state = { text: '' };
+  }
+  
+  setText(text) {
+    this.setState({ text });
+  }
+  
+  handleTextChange(text) {
+    this.setText(text);
+  }
+
+  clearText() {
+    this.setText('');
+  }
+
+  render() {
+    const { user } = this.props;
+    const { text } = this.state;
+
+    if (user === null) return <LoadingIndicator />;
+
+    return (
+      <View testID='Welcome' style={styles.container}>
+        <Text testID='WelcomeTitle' style={styles.welcome}>
+          Welcome to React Native!
+        </Text>
+        <Text testID='WelcomeInstruction' style={styles.instructions}>
+          To get started, edit App.js
+        </Text>
+        <Text testID='Instructions' style={styles.instructions}>
+          {instructions}
+        </Text>
+        <TextInput
+          value={text}
+          testID='TextInput'
+          style={styles.input}
+          placeholder={'Write something...'}
+          onChangeText={txt => this.handleTextChange(txt)}
+        />
+        <Child text={text} onClear={() => this.clearText()} />
+      </View>
+    );
+  }
+}
+
+HomeScreen.propTypes = {
+  user: PropTypes.object,
+  token: PropTypes.string,
+  getUserInfo: PropTypes.func,
+};
+
+const mapStateToProps = (state) => {
+  return {
+    user: state.auth.user,
+    token: state.auth.token,
+  };
+};
+
+export default connect(mapStateToProps, { getUserInfo })(HomeScreen);

src/containers/HomeScreen.js

@@ -0,0 +1,29 @@
+import { StyleSheet } from 'react-native';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#F5FCFF',
+  },
+  welcome: {
+    fontSize: 20,
+    textAlign: 'center',
+    margin: 10,
+  },
+  instructions: {
+    textAlign: 'center',
+    color: '#333333',
+    marginBottom: 5,
+  },
+  input: {
+    width: '80%',
+    height: 60,
+    padding: 10,
+    marginTop: 30,
+    alignSelf: 'center',
+  },
+});
+
+export default styles;