Merge pull request rizwanzaheer#1 from RizwanZaheer/Dev

Dev

Author: Rizwan Zaheer

App.js

@@ -7,11 +7,11 @@
 import React, { Component } from 'react';
 import {
   Platform,
-  StyleSheet,
-  Text,
   View
 } from 'react-native';
-import Header from './src/components/header';
+import Header from './src/components/Header';
+import AlbumList from './src/components/AlbumList';
+
 
 const instructions = Platform.select({
   ios: 'Press Cmd+R to reload,\n' +
@@ -24,37 +24,10 @@ type Props = {};
 export default class App extends Component<Props> {
   render() {
     return (
-        <Header />
-      // <View style={styles.container}>
-      //   <Text style={styles.welcome}>
-      //     Welcome to React Native App
-      //   </Text>
-      //   <Text style={styles.instructions}>
-      //     That's first App
-      //   </Text>
-      //   <Text style={styles.instructions}>
-      //     {instructions}
-      //   </Text>
-      // </View>
+      <View>
+        <Header headerText='Albums' />
+        <AlbumList />
+      </View>
     );
   }
 }
-
-// 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,
-//   },
-// });

package.json

@@ -7,6 +7,7 @@
     "test": "jest"
   },
   "dependencies": {
+    "axios": "^0.18.0",
     "react": "16.3.1",
     "react-native": "0.55.4"
   },

src/components/AlbumDetail.js

@@ -0,0 +1,14 @@
+import React, { Component } from 'react';
+import { View, Text } from 'react-native';
+
+class AlbumDetail extends Component {
+  render() {
+    const { title } = this.props.album;
+    return (
+      <View>
+        <Text>{title}</Text>
+      </View>
+    );
+  }
+}
+export default AlbumDetail;

src/components/AlbumList.js

@@ -0,0 +1,32 @@
+import React, { Component } from 'react';
+import { View } from 'react-native';
+import axios from 'axios';
+import AlbumDetail from './AlbumDetail';
+
+class AlbumList extends Component {
+  state = {
+    albums: []
+  };
+  componentWillMount() {
+    console.log('component will mount in Album list.');
+    axios.get('https://rallycoding.herokuapp.com/api/music_albums').then((response) => {
+      console.log('response is: ', response.data);
+      this.setState({ albums: response.data });
+    }).catch(((err) => {
+      console.log('catch ', err);
+    }));
+  }
+  renderAlbums() {
+    return this.state.albums.map(album => <AlbumDetail key={album.title} album={album} />);
+  }
+
+  render() {
+    return (
+      <View>
+        {this.renderAlbums()}
+      </View>
+    );
+  }
+}
+
+export default AlbumList;

src/components/header.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import { Text, View } from "react-native";
 
-const Header = () => {
+const Header = (props) => {
     const { textStyle, viewStyle } = styles;
     return (
         <View style={viewStyle}>
-            <Text style={textStyle}> Albums </Text>
+            <Text style={textStyle}> {props.headerText} </Text>
         </View>
     );
 };
@@ -14,9 +14,18 @@ export default Header;
 const styles = {
     viewStyle: {
         backgroundColor: '#F8F8F8',
+        justifyContent: 'center',
+        alignItems: 'center',
+        height: 60,
+        paddingTop: 15,
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.2,
+        elevation: 2,
+        position: 'relative',
     },
     textStyle: {
         fontSize: 20,
-        color: 'red'
+        color: 'green'
     }
 };