Added a couple of interesting and easy features with a few code

blog/src/components/posts_index.js

@@ -1,4 +1,4 @@
-import _ from "lodash";
+//import _ from "lodash";  
 import React, { Component } from "react";
 import { connect } from "react-redux";
 import { Link } from "react-router-dom";
@@ -10,7 +10,8 @@ class PostsIndex extends Component {
   }
 
   renderPosts() {
-    return _.map(this.props.posts, post => {
+      //return _.map(this.props.posts, post => {
+      return Object.values(this.props.posts).map(post => { // my version without lodash
       return (
         <li className="list-group-item" key={post.id}>
           <Link to={`/posts/${post.id}`}>
@@ -21,6 +22,8 @@ class PostsIndex extends Component {
     });
   }
 
+
+
   render() {
     return (
       <div>

blog/src/components/posts_new.js

@@ -7,27 +7,32 @@ import { createPost } from "../actions";
 class PostsNew extends Component {
   renderField(field) {
     const { meta: { touched, error } } = field;
+    /* destructuring ES6 (the line above is the same as this below)
+    const touched = field.meta.touched;
+    const error = field.meta.error;*/
+
     const className = `form-group ${touched && error ? "has-danger" : ""}`;
-
-    return (
+
+
+    let customField = !field.texarea ? <input className="form-control" type="text" {...field.input} /> : <textarea className="form-control" {...field.input} />; // defining the input type
+
+      return(
       <div className={className}>
         <label>{field.label}</label>
-        <input className="form-control" type="text" {...field.input} />
+        {customField}
         <div className="text-help">
           {touched ? error : ""}
         </div>
       </div>
-    );
+      );
   }
 
   onSubmit(values) {
-    this.props.createPost(values, () => {
-      this.props.history.push("/");
-    });
+    this.props.createPost(values, () => this.props.history.push("/"));
   }
 
   render() {
-    const { handleSubmit } = this.props;
+    const { handleSubmit } = this.props;// destructuring ES6
 
     return (
       <form onSubmit={handleSubmit(this.onSubmit.bind(this))}>
@@ -42,6 +47,7 @@ class PostsNew extends Component {
           component={this.renderField}
         />
         <Field
+          texarea = "yep" // is it a textarea?
           label="Post Content"
           name="content"
           component={this.renderField}

blog/src/components/posts_show.js

@@ -5,13 +5,14 @@ import { fetchPost, deletePost } from "../actions";
 
 class PostsShow extends Component {
   componentDidMount() {
-    const { id } = this.props.match.params;
-    this.props.fetchPost(id);
+      if(!this.props.post){//if the post doesn't already exist [save something and be lighter] could be also in the post_index but it changes often
+        const { id } = this.props.match.params;// props from React-Router
+        this.props.fetchPost(id);
+      }
   }
 
   onDeleteClick() {
     const { id } = this.props.match.params;
-
     this.props.deletePost(id, () => {
       this.props.history.push("/");
     });
@@ -35,14 +36,17 @@ class PostsShow extends Component {
         </button>
         <h3>{post.title}</h3>
         <h6>Categories: {post.categories}</h6>
-        <p>{post.content}</p>
+        <p className="pre-content">{post.content}</p>
       </div>
     );
   }
 }
 
-function mapStateToProps({ posts }, ownProps) {
+function mapStateToProps({ posts }, ownProps) { // ownProps retrieve the componet props, so in this case we have access to React-Router id props from here
   return { post: posts[ownProps.match.params.id] };
 }
+/*function mapStateToProps(state) {
+  return { post : state.posts. };
+} din't work coz the state return an obj that as a id as key and the request obj as a param, [he setted like that]*/
 
 export default connect(mapStateToProps, { fetchPost, deletePost })(PostsShow);

blog/src/reducers/reducer_posts.js

@@ -6,6 +6,11 @@ export default function(state = {}, action) {
     case DELETE_POST:
       return _.omit(state, action.payload);
     case FETCH_POST:
+          /*const post = action.payload.data;
+          const postid = action.payload.data.id
+          const newstate = { ...state }; // this spread operator does't seem to have a real utility on my opinion
+          newstate[postid] = post;// add a new property for the obj newstate with the id as a key and post as a value
+          return newstate;*/
       return { ...state, [action.payload.data.id]: action.payload.data };
     case FETCH_POSTS:
       return _.mapKeys(action.payload.data, "id");

blog/style/style.css

@@ -1,3 +1,10 @@
 form a {
   margin-left: 5px;
 }
+
+/*content post take formatting*/
+p.pre-content { white-space: pre-wrap;
+  white-space:  -moz-pre-wrap;  /* Mozilla, since 1999 */
+ white-space: -pre-wrap;      /* Opera 4-6 */
+ white-space: -o-pre-wrap;    /* Opera 7 */
+ word-wrap: break-word;       /* Internet Explorer 5.5+ */;}

book_list/src/components/app.js

@@ -1,10 +1,10 @@
 import React from "react";
-import { Component } from "react";
+//import { Component } from "react";
 
 import BookList from "../containers/book-list";
 import BookDetail from "../containers/book-detail";
 
-export default class App extends Component {
+/*export default class App extends Component {
   render() {
     return (
       <div>
@@ -13,4 +13,16 @@ export default class App extends Component {
       </div>
     );
   }
-}
+}*/
+
+// functional version component (why it uses class component since there's no state involved in the App component?)
+ const App = () => {
+    return (
+      <div>
+        <BookList />
+        <BookDetail />
+      </div>
+    );
+  }
+
+export default App;

book_list/src/containers/book-list.js

@@ -10,7 +10,7 @@ class BookList extends Component {
         <li
           key={book.title}
           onClick={() => this.props.selectBook(book)}
-          className="list-group-item"
+          className={book.selectClass ? "list-group-item selected" :  " list-group-item"}               
         >
           {book.title}
         </li>

book_list/src/reducers/reducer_books.js

@@ -1,8 +1,22 @@
-export default function() {
-  return [
+export default function(state, action) {
+
+    //my data init
+    const initData = [
     { title: "Javascript: The Good Parts", pages: 101 },
     { title: "Harry Potter", pages: 39 },
     { title: "The Dark Tower", pages: 85 },
     { title: "Eloquent Ruby", pages: 1 }
   ];
+
+    //my action to select in the list
+    switch(action.type){
+        case "BOOK_SELECTED":
+           initData.map(selcbook => {
+                selcbook.title === action.payload.title ? selcbook.selectClass='selected' : '';
+               //selcbook.title === action.payload.title ? console.log(selcbook.title) : '';
+
+           });
+    }
+
+  return initData
 }

book_list/style/style.css

@@ -0,0 +1 @@
+.selected { background-color: #ccc !important;}

video_browser/src/components/search_bar.js

@@ -4,12 +4,13 @@ class SearchBar extends Component {
   constructor(props) {
     super(props);
 
-    this.state = { term: "" };
+    this.state = { term: props.itermp };
   }
 
   render() {
     return (
       <div className="search-bar">
+        <label>Seacrh field </label> <br/>
         <input
           value={this.state.term}
           onChange={event => this.onInputChange(event.target.value)}

video_browser/src/components/video_detail.js

@@ -3,7 +3,7 @@ import React from "react";
 const VideoDetail = ({ video }) => {
   if (!video) {
     return <div>Loading...</div>;
-  }
+   }
 
   const videoId = video.id.videoId;
   const url = `https://www.youtube.com/embed/${videoId}`;
@@ -14,7 +14,7 @@ const VideoDetail = ({ video }) => {
         <iframe className="embed-responsive-item" src={url} />
       </div>
       <div className="details">
-        <div>{video.snippet.title}</div>
+        <h2>{video.snippet.title}</h2>
         <div>{video.snippet.description}</div>
       </div>
     </div>

video_browser/src/index.js

@@ -6,17 +6,22 @@ import SearchBar from "./components/search_bar";
 import VideoList from "./components/video_list";
 import VideoDetail from "./components/video_detail";
 const API_KEY = "AIzaSyAuQCVeNfKhtRk9KlChQPT1nO27DPO_5Ss";
+const iterm = "surfboards";
 
 class App extends Component {
   constructor(props) {
     super(props);
 
+
+
     this.state = {
       videos: [],
-      selectedVideo: null
+      selectedVideo: null 
     };
+
+    //this.iterm = "surfboards";
 
-    this.videoSearch("surfboards");
+    this.videoSearch(iterm);
   }
 
   videoSearch(term) {
@@ -27,15 +32,28 @@ class App extends Component {
       });
     });
   }
+
+    /* setTimeout attempt (work differtly coz waits but then execute the function for every typing)
+    delayedVideoSearch = term => setTimeout(() => this.videoSearch(term), 5000);*/
+    //my debouced version [debounce (Lodash library method) does the trick, waits and then executes the function just once]
+    debouncedVideoSearch = _.debounce(term => {
+      this.videoSearch(term);
+    }, 500);
 
   render() {
+    /* Original version [not clear having the same name and I don't know why to put it in the render function (maybe just to take the same name)]
     const videoSearch = _.debounce(term => {
       this.videoSearch(term);
-    }, 300);
+    }, 500);*/
+
+
 
     return (
       <div>
-        <SearchBar onSearchTermChange={videoSearch} />
+        <SearchBar 
+        onSearchTermChange={this.debouncedVideoSearch} 
+        itermp={iterm} 
+        />
         <VideoDetail video={this.state.selectedVideo} />
         <VideoList
           onVideoSelect={selectedVideo => this.setState({ selectedVideo })}

weather/package.json

@@ -25,7 +25,7 @@
     "react-dom": "^0.14.3",
     "react-google-maps": "^4.7.1",
     "react-redux": "^4.0.0",
-    "react-sparklines": "^1.4.2",
+    "react-sparklines": "^1.6.0",
     "redux": "^3.0.4",
     "redux-promise": "^0.5.0"
   }

weather/src/components/app.js

@@ -2,7 +2,7 @@ import React from "react";
 import { Component } from "react";
 
 import SearchBar from "../containers/search_bar";
-import WeatherList from "../containers/weather_list";
+import WeatherList from "../containers/weather_list"; 
 
 export default class App extends Component {
   render() {

weather/src/components/chart.js

@@ -1,4 +1,4 @@
-import _ from "lodash";
+//import _ from "lodash";
 import React from "react";
 import {
   Sparklines,
@@ -7,9 +7,13 @@ import {
 } from "react-sparklines";
 
 function average(data) {
-  return _.round(_.sum(data) / data.length);
+  //return _.round(_.sum(data) / data.length);
+    return Math.round(data.reduce((curr, next) => curr + next)/data.length);
 }
 
+
+
+
 export default props => {
   return (
     <div>

weather/src/containers/search_bar.js

@@ -10,9 +10,10 @@ class SearchBar extends Component {
     this.state = { term: "" };
 
     this.onInputChange = this.onInputChange.bind(this);
-    this.onFormSubmit = this.onFormSubmit.bind(this);
+    this.onFormSubmit = this.onFormSubmit.bind(this);   
   }
-
+
+
   onInputChange(event) {
     this.setState({ term: event.target.value });
   }

weather/src/containers/weather_list.js

@@ -10,6 +10,8 @@ class WeatherList extends Component {
     const pressures = cityData.list.map(weather => weather.main.pressure);
     const humidities = cityData.list.map(weather => weather.main.humidity);
     const { lon, lat } = cityData.city.coord;
+
+
 
     return (
       <tr key={name}>