Skip to content

Commit 5d80381

Browse files
ZwerdZwerd
committedOct 8, 2017
update Albums app
1 parent f24e843 commit 5d80381

File tree

8 files changed

+271
-74
lines changed

8 files changed

+271
-74
lines changed
 

‎Albums/App.js

+16-53
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,20 @@
1-
/**
2-
* Sample React Native App
3-
* https://github.com/facebook/react-native
4-
* @flow
5-
*/
1+
// Import a Library to help create a Component
2+
import React, {Component} from 'react';
3+
import { Text, AppRegistry, ScrollView } from 'react-native';
4+
import Header from './src/components/header';
5+
import AlbumList from './src/components/AlbumList';
66

7-
import React, { Component } from 'react';
8-
import {
9-
Platform,
10-
StyleSheet,
11-
Text,
12-
View
13-
} from 'react-native';
147

15-
const instructions = Platform.select({
16-
ios: 'Press Cmd+R to reload,\n' +
17-
'Cmd+D or shake for dev menu',
18-
android: 'Double tap R on your keyboard to reload,\n' +
19-
'Shake or press menu button for dev menu',
20-
});
21-
22-
export default class App extends Component<{}> {
23-
render() {
24-
return (
25-
<View style={styles.container}>
26-
<Text style={styles.welcome}>
27-
Welcome to React Native!
28-
</Text>
29-
<Text style={styles.instructions}>
30-
To get started, edit App.js
31-
</Text>
32-
<Text style={styles.instructions}>
33-
{instructions}
34-
</Text>
35-
</View>
36-
);
8+
export default class albums extends Component{
9+
render(){
10+
return(
11+
<ScrollView>
12+
<Header headerText={'Albums'}/>
13+
<AlbumList />
14+
</ScrollView>
15+
)
3716
}
38-
}
17+
};
3918

40-
const styles = StyleSheet.create({
41-
container: {
42-
flex: 1,
43-
justifyContent: 'center',
44-
alignItems: 'center',
45-
backgroundColor: '#F5FCFF',
46-
},
47-
welcome: {
48-
fontSize: 20,
49-
textAlign: 'center',
50-
margin: 10,
51-
},
52-
instructions: {
53-
textAlign: 'center',
54-
color: '#333333',
55-
marginBottom: 5,
56-
},
57-
});
19+
//Render it to the device
20+
AppRegistry.registerComponent('albums', () => App);

‎Albums/package.json

+22-21
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,23 @@
11
{
2-
"name": "Albums",
3-
"version": "0.0.1",
4-
"private": true,
5-
"scripts": {
6-
"start": "node node_modules/react-native/local-cli/cli.js start",
7-
"test": "jest"
8-
},
9-
"dependencies": {
10-
"react": "16.0.0-beta.5",
11-
"react-native": "0.49.2"
12-
},
13-
"devDependencies": {
14-
"babel-jest": "21.2.0",
15-
"babel-preset-react-native": "4.0.0",
16-
"jest": "21.2.1",
17-
"react-test-renderer": "16.0.0-beta.5"
18-
},
19-
"jest": {
20-
"preset": "react-native"
21-
}
22-
}
2+
"name": "Albums",
3+
"version": "0.0.1",
4+
"private": true,
5+
"scripts": {
6+
"start": "node node_modules/react-native/local-cli/cli.js start",
7+
"test": "jest"
8+
},
9+
"dependencies": {
10+
"axios": "^0.16.2",
11+
"react": "16.0.0-beta.5",
12+
"react-native": "0.49.2"
13+
},
14+
"devDependencies": {
15+
"babel-jest": "21.2.0",
16+
"babel-preset-react-native": "4.0.0",
17+
"jest": "21.2.1",
18+
"react-test-renderer": "16.0.0-beta.5"
19+
},
20+
"jest": {
21+
"preset": "react-native"
22+
}
23+
}

‎Albums/src/components/AlbumDetail.js

+75
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
import React from 'react';
2+
import { Text, View, Image, Linking} from 'react-native';
3+
import Card from './Card';
4+
import CardSection from './CardSection';
5+
import Button from './Button';
6+
7+
const AlbumDetail = ({album}) => {
8+
const { title, artist, thumbnail_image, image, url} =album;
9+
const {
10+
thumbnailStyle,
11+
headerContectStyle,
12+
thumbnailContainerStyle,
13+
headerTextStyle,
14+
imageStyle
15+
} = styles;
16+
return(
17+
<Card>
18+
19+
<CardSection>
20+
<View style={thumbnailContainerStyle}>
21+
<Image
22+
style={thumbnailStyle}
23+
source={{uri: thumbnail_image}}
24+
/>
25+
</View>
26+
<View style={headerContectStyle}>
27+
<Text style={headerTextStyle}>{title}</Text>
28+
<Text>{artist}</Text>
29+
</View>
30+
</CardSection>
31+
32+
<CardSection>
33+
<Image
34+
style={imageStyle}
35+
source={{uri: image}}
36+
/>
37+
</CardSection>
38+
39+
<CardSection>
40+
<Button onPress={() => Linking.openURL(url)}>
41+
Buy Now
42+
</Button>
43+
</CardSection>
44+
45+
</Card>
46+
)
47+
};
48+
49+
const styles = {
50+
headerContectStyle: {
51+
flexDirection: 'column',
52+
justifyContent: 'space-around'
53+
},
54+
headerTextStyle:{
55+
fontSize:18,
56+
fontWeight: 'bold'
57+
},
58+
thumbnailStyle: {
59+
height: 50,
60+
width: 50,
61+
},
62+
thumbnailContainerStyle:{
63+
justifyContent: 'center',
64+
alignItems:'center',
65+
marginLeft: 10,
66+
marginRight:10,
67+
},
68+
imageStyle: {
69+
height: 300,
70+
flex: 1,
71+
width: null,
72+
}
73+
}
74+
75+
export default AlbumDetail;

‎Albums/src/components/AlbumList.js

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import React, {Component} from 'react';
2+
import { View } from 'react-native';
3+
import axios from 'axios';
4+
import AlbumDetail from './AlbumDetail';
5+
6+
7+
class AlbumList extends Component {
8+
state = { albums: []};
9+
10+
11+
componentWillMount(){
12+
axios.get('https://rallycoding.herokuapp.com/api/music_albums')
13+
.then(response => this.setState({albums: response.data}));
14+
}
15+
16+
renderAlbums(){
17+
return this.state.albums.map(album =>
18+
<AlbumDetail key={album.title} album={album} />
19+
)
20+
}
21+
22+
23+
render() {
24+
console.log(this.state)
25+
return(
26+
<View>
27+
{this.renderAlbums()}
28+
</View>
29+
)
30+
}
31+
}
32+
33+
export default AlbumList;

‎Albums/src/components/Button.js

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import React from 'react';
2+
import { Text, TouchableOpacity } from 'react-native';
3+
4+
5+
6+
const Button = ({ onPress, children }) => {
7+
const {buttonStyle, textStyle} = styles;
8+
return (
9+
<TouchableOpacity onPress={onPress} style={buttonStyle}>
10+
<Text style={textStyle}>
11+
{children}
12+
</Text>
13+
</TouchableOpacity>
14+
);
15+
};
16+
17+
18+
const styles = {
19+
textStyle: {
20+
alignSelf: 'center',
21+
color: '#007aff',
22+
fontSize: 16,
23+
fontWeight:'600',
24+
paddingTop: 10,
25+
paddingBottom:10,
26+
},
27+
buttonStyle:{
28+
flex:1,
29+
alignSelf: 'stretch',
30+
backgroundColor: '#fff',
31+
borderRadius: 5,
32+
borderWidth: 1,
33+
borderColor: '#007aff',
34+
marginLeft: 5,
35+
marginRight: 5,
36+
}
37+
}
38+
export default Button;

‎Albums/src/components/Card.js

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import React from 'react';
2+
import { View } from 'react-native';
3+
4+
const Card = (props) => {
5+
return (
6+
<View style={styles.containerStyle}>
7+
{props.children}
8+
</View>
9+
);
10+
};
11+
12+
13+
const styles = {
14+
containerStyle: {
15+
borderWidth: 1,
16+
borderRadius: 2,
17+
borderColor: '#ddd',
18+
borderBottomWidth: 0,
19+
shadowColor: '#000',
20+
shadowOffset: { width: 0, height: 2 },
21+
shadowOpacity: 0.1,
22+
shadowRadius: 2,
23+
elevation: 1,
24+
marginLeft: 5,
25+
marginRight: 5,
26+
marginTop: 10
27+
28+
}
29+
}
30+
export default Card;

‎Albums/src/components/CardSection.js

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import React from 'react';
2+
import { View } from 'react-native';
3+
4+
const CardSection = (props) => {
5+
return(
6+
<View style={styles.containerStyle}>
7+
{props.children}
8+
</View>
9+
);
10+
};
11+
12+
const styles = {
13+
containerStyle: {
14+
borderBottomWidth: 1,
15+
padding: 5,
16+
backgroundColor: '#fff',
17+
justifyContent: 'flex-start',
18+
flexDirection: 'row',
19+
borderColor: '#ddd',
20+
position: 'relative',
21+
}
22+
}
23+
24+
export default CardSection;

‎Albums/src/components/header.js

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import React, {Component} from 'react';
2+
import { Text, View } from 'react-native';
3+
4+
5+
class Header extends Component{
6+
render(){
7+
return(
8+
<View style={styles.viewStyle}>
9+
<Text style={styles.textStyle}>{this.props.headerText}</Text>
10+
</View>
11+
)
12+
}
13+
};
14+
15+
const styles = {
16+
viewStyle:{
17+
backgroundColor: '#f8f8f8',
18+
alignItems:'center',
19+
justifyContent:'center',
20+
height: 60,
21+
paddingTop: 15,
22+
shadowOffset: { width: 0, height: 2},
23+
shadowOpacity: 0.8,
24+
elevation: 2,
25+
position: 'relative'
26+
},
27+
textStyle: {
28+
fontSize:20
29+
}
30+
31+
};
32+
33+
export default Header;

0 commit comments

Comments
 (0)
Please sign in to comment.