Add doc for last components

Author: mathieuancelin

step-8/readme.md

@@ -388,11 +388,85 @@ La liste de sélection des vins pourrait également afficher une miniature de la
 
 ### Fiche de détail d'un vin
 
-// TODO
+La fiche de détail d'un vin est laissée à votre imagination, n'hésitez pas a consulter [la documentation `react-native`](https://facebook.github.io/react-native/docs/getting-started.html) pour voir les possibilités offertes par le framework.
+
+ La structure technique du composant `src/components/wine.js` est cependant la suivante :
+
+```javascript
+import React, { PropTypes, Image, View, Text, ScrollView, TouchableWithoutFeedback } from 'react-native';
+import { connect } from 'react-redux';
+import { fetchWine, fetchWineLiked, setTitle, toggleWineLiked } from '../actions';
+import { styles } from './style';
+import { apiHost } from '../actions';
+
+const mapStateToProps = (state) => {
+  return {
+    currentWine: state.currentWine.wine,
+    liked: state.currentWine.liked
+  };
+}
+
+export const Wine = connect(mapStateToProps)(React.createClass({
+  componentDidMount() {
+    this.props.dispatch(fetchWine(this.props.wine.id)).then(() => {
+      this.props.dispatch(fetchWineLiked(this.props.wine.id));
+    });
+  },
+
+  handleToggleLike() {
+    this.props.dispatch(toggleWineLiked(this.props.wine.id));
+  },
+
+  render() {
+    const { wine, liked } = this.props;
+    return (
+      ...
+    );
+  }
+}));
+```
 
 ### Commentaires
 
-// TODO
+Le composant de commentaire est extrêment similaire à la version web, vous avez à votre disposition le composant `<TexInput />` offert par `react-native` et un composant `<Button />` dans le dossier `src/components`
+
+```javascript
+import React, { PropTypes, View, Text, TextInput } from 'react-native';
+import moment from 'moment';
+import { connect } from 'react-redux';
+import { addComment, fetchComments, postComment } from '../actions';
+import { styles } from './style';
+import { Button } from './button';
+
+const mapStateToProps = (state) => {
+  return {
+    comments: state.currentWine.comments
+  };
+}
+
+export const Comments = connect(mapStateToProps)(React.createClass({
+  getInitialState() {
+    return {
+      commentTitle: '',
+      commentBody: ''
+    };
+  },
+
+  handlePostComment() {
+    const payload = { title: this.state.commentTitle, content: this.state.commentBody };
+    this.props.dispatch(postComment(this.props.wineId, payload)).then(() => {
+      ...
+      this.setState({ commentTitle: '', commentBody: '' });
+    });
+  },
+
+  render() {
+    return (
+      ...
+    );
+  }
+}));
+```
 
 ## A vous de jouer !
 

step-8/src/components/comments.js

@@ -14,74 +14,23 @@ const mapStateToProps = (state) => {
 }
 
 export const Comments = connect(mapStateToProps)(React.createClass({
-
-  propTypes: {
-    comments: PropTypes.array,
-    dispatch: PropTypes.func.isRequired,
-    wineId: PropTypes.string.isRequired
-  },
-
   getInitialState() {
     return {
       commentTitle: '',
       commentBody: ''
     };
   },
 
-  componentDidMount() {
-    this.updateComments();
-  },
-
-  updateComments() {
-    this.props.dispatch(fetchComments(this.props.wineId));
-  },
-
-  handleCommentTitleChange(commentTitle) {
-    this.setState({ commentTitle });
-  },
-
-  handleCommentBodyChange(commentBody) {
-    this.setState({ commentBody });
-  },
-
   handlePostComment() {
     const payload = { title: this.state.commentTitle, content: this.state.commentBody };
     this.props.dispatch(postComment(this.props.wineId, payload)).then(() => {
-      this.updateComments();
-      this.props.dispatch(addComment());
       this.setState({ commentTitle: '', commentBody: '' });
     });
   },
 
   render() {
     return (
-      <View>
-        <Text style={styles.commentsTitle}>Comments</Text>
-        {
-          this.props.comments.map(comment =>
-            <View key={comment.date.toString()} style={styles.comment}>
-              <Text style={styles.commentTitle}>{comment.title} (le {moment(comment.date).format('DD/MM/YYYY à HH:mm:ss')})</Text>
-              <Text>{comment.content}</Text>
-            </View>
-          )
-        }
-        <View style={styles.commentForm}>
-          <TextInput
-              style={styles.inputText}
-              onChangeText={this.handleCommentTitleChange}
-              placeholder="Titre du commentaire"
-              value={this.state.commentTitle} />
-          <TextInput
-              style={styles.inputText}
-              onChangeText={this.handleCommentBodyChange}
-              placeholder="Commentaire"
-              multiline={true}
-              value={this.state.commentBody} />
-          <Button
-              action={this.handlePostComment}
-              style={styles.commentButton}>Commenter</Button>
-        </View>
-      </View>
+      <Text>comments</Text>
     );
   }
 }));

step-8/src/components/wine.js

@@ -14,47 +14,9 @@ const mapStateToProps = (state) => {
   };
 }
 
-const Label = React.createClass({
-  propTypes: {
-    children: PropTypes.string
-  },
-  render() {
-    return (
-      <Text style={styles.label}>{this.props.children}</Text>
-    );
-  }
-});
-
-const LabelValue = React.createClass({
-  propTypes: {
-    children: PropTypes.string
-  },
-  render() {
-    return (
-      <Text style={styles.labelValue}>{this.props.children}</Text>
-    );
-  }
-});
-
 export const Wine = connect(mapStateToProps)(React.createClass({
-  propTypes: {
-    dispatch: PropTypes.func.isRequired,
-    liked: PropTypes.bool,
-    region: PropTypes.string,
-    wine: PropTypes.shape({
-      id: PropTypes.string,
-      name: PropTypes.string,
-      type: PropTypes.oneOf(['Rouge', 'Blanc', 'Rosé', 'Effervescent', 'Moelleux']),
-      appellation: PropTypes.shape({
-        name: PropTypes.string,
-        region: PropTypes.string
-      }),
-      grapes: PropTypes.arrayOf(PropTypes.string)
-    })
-  },
   componentDidMount() {
     this.props.dispatch(fetchWine(this.props.wine.id)).then(() => {
-      this.props.dispatch(setTitle(this.props.wine.name));
       this.props.dispatch(fetchWineLiked(this.props.wine.id));
     });
   },
@@ -66,31 +28,7 @@ export const Wine = connect(mapStateToProps)(React.createClass({
   render() {
     const { wine, liked } = this.props;
     return (
-      <ScrollView style={styles.scene}>
-        <View style={styles.container}>
-          <Image style={styles.winePic} source={{ uri: `http://${apiHost}:3000/api/wines/${this.props.wine.id}/image` }} />
-          <View style={styles.flexColumn}>
-            <View style={styles.bottomSpaced}>
-              <Text style={styles.wineTitle}>{wine.name}</Text>
-            </View>
-            <Label>Type</Label>
-            <LabelValue>{wine.type}</LabelValue>
-            <Label>Région</Label>
-            <LabelValue>{wine.appellation.region}</LabelValue>
-            <Label>Appellation</Label>
-            <LabelValue>{wine.appellation.name}</LabelValue>
-            <Label>Cépages</Label>
-            <LabelValue>{wine.grapes.join(', ')}</LabelValue>
-            <TouchableWithoutFeedback onPress={this.handleToggleLike}>
-              <View onPress={this.handleToggleLike} style={styles.likeView}>
-                <Image onPress={this.handleToggleLike} style={styles.likePic} source={liked ? require('./liked.png') : require('./unliked.png')} />
-                <Text onPress={this.handleToggleLike} style={styles.likeTitle}>{liked ? 'Unlike' : 'Like'}</Text>
-              </View>
-            </TouchableWithoutFeedback>
-          </View>
-        </View>
-        <Comments wineId={this.props.wine.id} />
-      </ScrollView>
+      <Text>Wine</Text>
     );
   }
 }));