Revert code to the first point of the workshop

VDUCHEW · May 21, 2015 · cacaf25 · cacaf25
1 parent 7ec37a7
commit cacaf25
Show file tree

Hide file tree

Showing 7 changed files with 16 additions and 305 deletions.
diff --git a/AlbumDetailScreen.js b/AlbumDetailScreen.js
@@ -10,7 +10,6 @@ var {
   TouchableHighlight,
   Text,
   Image,
-  LinkingIOS
 } = React;
 
 function yearFromReleaseDate(releaseDate) {
@@ -22,80 +21,11 @@ function fullSizeUrl(thumbUrl) {
 }
 
 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>
+      <View />
     );
   }
 });

diff --git a/Albums.js b/Albums.js
@@ -5,19 +5,14 @@ var React = require('react-native');
 
 var {
   StyleSheet,
-  NavigatorIOS
+  View // Remove this view and add a NavigatorIOS
 } = React;
 
 var Albums = React.createClass({
   render() {
     return (
-      <NavigatorIOS
-        style={styles.container}
-        tintColor='#FE2E64'
-        initialRoute={{
-          title: 'Albums',
-          component: AlbumsSearchScreen
-        }}/>
+      /*Add a NavigatorIOS component here*/
+      <View />
     );
   }
 });

diff --git a/AlbumsListScreen.js b/AlbumsListScreen.js
@@ -5,42 +5,16 @@ var AlbumDetailScreen = require('./AlbumDetailScreen');
 var React = require('react-native');
 
 var {
-  ListView
+  // You'll need to import a ListView here
+  View, 
 } = 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} />
+      // Replace this view by a ListView
+      <View />
     );
   }
 });

diff --git a/AlbumsSearchScreen.js b/AlbumsSearchScreen.js
@@ -4,14 +4,7 @@ var AlbumsListScreen = require('./AlbumsListScreen');
 var React = require('react-native');
 
 var {
-  StyleSheet,
   View,
-  ActivityIndicatorIOS,
-  Text,
-  TextInput,
-  TouchableHighlight,
-  Image,
-  ScrollView
 } = React;
 
 var iTunesSearchURL = 'https://itunes.apple.com/search?';
@@ -32,108 +25,16 @@ function urlForAlbumsQueryWithResultsLimit(query, resultsLimit) {
 
 var AlbumsSearchScreen = React.createClass({
 
-  getInitialState() {
-    return {
-      isLoading: false,
-      errorMessage: '',
-      searchString: '',
-    };
-  },
-
-  onSearchTextChanged(event) {
-    this.setState({searchString: event.nativeEvent.text});
-  },
-
-  _executeQuery(query) {
-    console.log(query);
-
-    this.setState({ isLoading: true, errorMessage: '' });
-
-    fetch(query)
-      .then(response => response.json())
-      .then(json => this._handleResponse(json.results))
-      .catch(error => this.setState({
-        isLoading: false,
-        errorMessage: 'Something bad happened: \n' + error
-      }));
-  },
-
-  _handleResponse(results) {
-    this.setState({ isLoading: false });
-
-    if (results.length > 0) {
-      this.props.navigator.push({
-        title: this.state.searchString,
-        component: AlbumsListScreen,
-        passProps: {albums: results}
-      });
-    } else {
-      this.setState({ errorMessage: "Can't find albums for your search input." });
-    }
-  },
-
-  searchAlbums() {
-    var query = urlForAlbumsQueryWithResultsLimit(this.state.searchString, 200);
-    this._executeQuery(query);
-  },
-
-  onSearchTextSubmitEditing(event) {
-    this.searchAlbums();
-  },
-
   render() {
-    var spinner = this.state.isLoading ?
-      <ActivityIndicatorIOS size='large' /> :
-      <View />;
+    // Configure an "activity indicator" view here
 
     return (
-      <ScrollView alwaysBounceVertical={false}>
-        <View style={styles.container}>
-          <Image source={require('image!itunes_logo')} style={styles.image} />
-          <Text style={styles.description}>
-            Search by artist, album or genre:
-          </Text>
-          <TextInput
-            style={styles.searchInput}
-            onChange={this.onSearchTextChanged}
-            onSubmitEditing={this.onSearchTextSubmitEditing}
-            clearButtonMode={'while-editing'}
-            placeholder='Search album'
-            returnKeyType='search' />
-          {spinner}
-          <Text style={styles.description}>{this.state.errorMessage}</Text>
-        </View>
-      </ScrollView>
+      // We should layout here a "Search" screen
+      <View />
     );
   }
 });
 
-var styles = StyleSheet.create({
-  container: {
-    padding: 30,
-    alignItems: 'center'
-  },
-
-  description: {
-    marginBottom: 20,
-    fontSize: 18,
-    color: '#656565',
-  },
-
-  searchInput: {
-    height: 36,
-    padding: 4,
-    marginBottom: 30,
-    fontSize: 18,
-    borderWidth: 1,
-    borderColor: '#FF8000',
-    borderRadius: 8,
-  },
-
-  image: {
-    width: 100,
-    height: 100,
-  }
-});
+// Fill the styles here
 
 module.exports = AlbumsSearchScreen;
diff --git a/FavoritesListScreen.js b/FavoritesListScreen.js
@@ -20,13 +20,11 @@ var FavoritesListScreen = React.createClass({
   },
 
   componentDidMount() {
-    FavoritesStore.on(FavoritesStore.CHANGE_EVENT, this.onFavoritesChange);
 
-    FavoritesStore.loadPersistedFavorites();
   },
 
   componentWillUnmount() {
-    FavoritesStore.removeListener(FavoritesStore.CHANGE_EVENT, this.onFavoritesChange);
+
   },
 
   onFavoritesChange() {

diff --git a/FavoritesStore.js b/FavoritesStore.js
@@ -10,59 +10,24 @@ var {
   AsyncStorage
 } = React;
 
+// You will use it soon
 var STORAGE_KEY = 'iTunesCatalog:Favorites';
 
 var _favorites = {};
 
 var FavoritesStore = assign({}, EventEmitter.prototype, {
 
-  CHANGE_EVENT: 'change',
-
-  loadPersistedFavorites() {
-    AsyncStorage.getItem(STORAGE_KEY)
-      .then((value) => {
-        if (value !== null) {
-          _favorites = JSON.parse(value);
-
-          this.emit(this.CHANGE_EVENT);
-        }
-      })
-      .done();
-  },
-
   getAll() {
-    return Object.keys(_favorites).map(key => _favorites[key]);
+    return [];
   },
 
   isFavorite(album) {
-    return _favorites[album.collectionId] !== undefined;
-  },
-
-  toggleFavorite(album) {
-    if (this.isFavorite(album)) {
-      this.unfavorite(album);
-    } else {
-      this.favorite(album);
-    }
-  },
-
-  favorite(album) {
-    _favorites[album.collectionId] = album;
 
-    this.saveChanges();
   },
 
-  unfavorite(album) {
-    delete _favorites[album.collectionId];
+  toggleFavorite(album) {
 
-    this.saveChanges();
   },
-
-  saveChanges() {
-    AsyncStorage.setItem(STORAGE_KEY, JSON.stringify(_favorites)).done();
-
-    this.emit(this.CHANGE_EVENT);
-  }
 });
 
 module.exports = FavoritesStore;