Initial commit: the whole project completed

AlbumDetailScreen.js

@@ -0,0 +1,150 @@
+'use strict';
+
+var React = require('react-native');
+var FavoritesStore = require('./FavoritesStore');
+
+var {
+  StyleSheet,
+  View,
+  ScrollView,
+  TouchableHighlight,
+  Text,
+  Image,
+  LinkingIOS
+} = React;
+
+function yearFromReleaseDate(releaseDate) {
+  return (new Date(releaseDate)).getFullYear();
+}
+
+function fullSizeUrl(thumbUrl) {
+  return thumbUrl.replace('.100x100-75', '');
+}
+
+var AlbumDetailScreen = React.createClass({
+  getInitialState() {
+    return this.computedState();
+  },
+
+  computedState() {
+    return {
+      isFavorite: FavoritesStore.isFavorite(this.props.album)
+    }
+  },
+
+  componentDidMount() {
+    // way of calculating relative size:
+    // https://github.com/facebook/react-native/issues/953
+    setTimeout(this.measureArtworkContainer);
+
+    FavoritesStore.on(FavoritesStore.CHANGE_EVENT, this.onFavoritesChange);
+  },
+
+  measureArtworkContainer() {
+    this.refs.artworkContainer.measure((ox, oy, width, height) => {
+      this.setState({artworkContainerHeight: width});
+    });
+  },
+
+  componentWillUnmount() {
+    FavoritesStore.removeListener(FavoritesStore.CHANGE_EVENT, this.onFavoritesChange);
+  },
+
+  onFavoritesChange() {
+    this.setState(this.computedState());
+  },
+
+  onShowMoreButtonPressed() {
+    LinkingIOS.openURL(this.props.album.collectionViewUrl);
+  },
+
+  onFavoriteButtonPressed() {
+    FavoritesStore.toggleFavorite(this.props.album);
+  },
+
+  render() {
+    var album = this.props.album;
+    var year = yearFromReleaseDate(album.releaseDate);
+    var favoriteButtonText = this.state.isFavorite ? 'Unfavorite' : 'Favorite';
+    var artworkContainerHeight = this.state.artworkContainerHeight;
+
+    return (
+      <ScrollView alwaysBounceVertical={false}>
+        <View style={{
+                flex: 1,
+                alignItems: 'stretch',
+                height: artworkContainerHeight}}
+              ref="artworkContainer">
+          <Image style={styles.artwork} source={{uri: fullSizeUrl(album.artworkUrl100)}} />
+        </View>
+        <View style={styles.bodyContainer}>
+          <Text style={styles.title}
+                numberOfLines={2}>{album.collectionName} ({year})</Text>
+          <Text style={styles.subtitle}
+                numberOfLines={1}>{album.artistName}</Text>
+          <TouchableHighlight
+            style={[styles.button, styles.favoriteButton]}
+            underlayColor='#AA6600'
+            onPress={this.onFavoriteButtonPressed} >
+            <Text style={styles.buttonText}>{favoriteButtonText}</Text>
+          </TouchableHighlight>
+          <TouchableHighlight
+            style={[styles.button, styles.showMoreButton]}
+            underlayColor='#FF0040'
+            onPress={this.onShowMoreButtonPressed} >
+            <Text style={styles.buttonText}>Show on iTunes</Text>
+          </TouchableHighlight>
+        </View>
+      </ScrollView>
+    );
+  }
+});
+
+var styles = StyleSheet.create({
+  bodyContainer: {
+    padding: 10
+  },
+
+  artwork: {
+    flex: 1
+  },
+
+  artworkContainer: {
+    flex: 1,
+    alignItems: 'stretch',
+  },
+
+  title: {
+    fontSize: 20,
+    color: '#FF8000',
+    fontWeight: 'bold'
+  },
+
+  subtitle: {
+    fontSize: 16,
+    color: '#656565'
+  },
+
+  button: {
+    justifyContent: 'center',
+    borderRadius: 8,
+    marginTop: 10,
+    height: 36,
+  },
+
+  favoriteButton: {
+    backgroundColor: '#FF9900',
+  },
+
+  showMoreButton: {
+    backgroundColor: '#FE2E64',
+  },
+
+  buttonText: {
+    fontSize: 18,
+    color: 'white',
+    alignSelf: 'center',
+  },
+});
+
+module.exports = AlbumDetailScreen;

Albums.js

@@ -0,0 +1,31 @@
+'use strict';
+
+var AlbumsSearchScreen = require('./AlbumsSearchScreen');
+var React = require('react-native');
+
+var {
+  StyleSheet,
+  NavigatorIOS
+} = React;
+
+var Albums = React.createClass({
+  render() {
+    return (
+      <NavigatorIOS
+        style={styles.container}
+        tintColor='#FE2E64'
+        initialRoute={{
+          title: 'Albums',
+          component: AlbumsSearchScreen
+        }}/>
+    );
+  }
+});
+
+var styles = StyleSheet.create({
+  container: {
+    flex: 1
+  }
+});
+
+module.exports = Albums;

AlbumsListScreen.js

@@ -0,0 +1,48 @@
+'use strict';
+
+var AlbumsRow = require('./AlbumsRow');
+var AlbumDetailScreen = require('./AlbumDetailScreen');
+var React = require('react-native');
+
+var {
+  ListView
+} = React;
+
+var AlbumsListScreen = React.createClass({
+
+  getInitialState() {
+    var dataSource = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
+
+    return {
+      dataSource: dataSource.cloneWithRows(this.props.albums)
+    };
+  },
+
+  onRowPress(rowID) {
+    var album = this.props.albums[rowID];
+
+    this.props.navigator.push({
+      title: album.collectionName,
+      component: AlbumDetailScreen,
+      passProps: {album: album}
+    });
+  },
+
+  renderRow(rowData, sectionID, rowID) {
+    return (
+      <AlbumsRow
+        onPress={() => this.onRowPress(rowID)}
+        rowData={rowData} />
+    );
+  },
+
+  render() {
+    return (
+      <ListView
+        dataSource={this.state.dataSource}
+        renderRow={this.renderRow} />
+    );
+  }
+});
+
+module.exports = AlbumsListScreen;

AlbumsRow.js

@@ -0,0 +1,76 @@
+'use strict';
+
+var React = require('react-native');
+
+var {
+  StyleSheet,
+  View,
+  TouchableHighlight,
+  Text,
+  Image
+} = React;
+
+function yearFromReleaseDate(releaseDate) {
+  return (new Date(releaseDate)).getFullYear()
+}
+
+var AlbumsRow = React.createClass({
+  render() {
+    var album = this.props.rowData;
+    var year = yearFromReleaseDate(album.releaseDate)
+
+    return (
+      <TouchableHighlight
+        onPress={this.props.onPress}
+        underlayColor='#CCCCCC'>
+        <View>
+          <View style={styles.rowContainer}>
+            <Image style={styles.thumb} source={{uri: album.artworkUrl100}} />
+            <View style={styles.textContainer}>
+              <Text style={styles.title}
+                    numberOfLines={2}>{album.collectionName} ({year})</Text>
+              <Text style={styles.subtitle}
+                    numberOfLines={1}>{album.artistName}</Text>
+            </View>
+          </View>
+          <View style={styles.separator} />
+        </View>
+      </TouchableHighlight>
+    );
+  }
+});
+
+var styles = StyleSheet.create({
+  rowContainer: {
+    flexDirection: 'row',
+    padding: 10
+  },
+
+  textContainer: {
+    flex: 1
+  },
+
+  thumb: {
+    width: 80,
+    height: 80,
+    marginRight: 10
+  },
+
+  title: {
+    fontSize: 20,
+    color: '#FF8000',
+    fontWeight: 'bold'
+  },
+
+  subtitle: {
+    fontSize: 16,
+    color: '#656565'
+  },
+
+  separator: {
+    height: 1,
+    backgroundColor: '#dddddd'
+  },
+});
+
+module.exports = AlbumsRow;