Add files via upload

Author: bgoonz

notes/learn-redux/README.md

@@ -0,0 +1,14 @@
+# Learn Redux
+
+This is my course for wes bos's learn redux
+
+## Running
+
+First `npm install` to grab all the necessary dependencies.
+
+Then run `npm start` and open <localhost:7770> in your browser.
+
+## Production Build
+
+Run `npm build` to create a distro folder and a bundle.js file.
+

notes/learn-redux/client/actions/actionCreators.js

@@ -0,0 +1,24 @@
+// increment (increment likes)
+export function increment(index) {
+  return {
+    type: 'INCREMENT_LIKES',
+    index
+  }
+}
+// add comment
+export function addComment(postId, author, comment) {
+  return {
+    type: 'ADD_COMMENT',
+    postId,
+    author,
+    comment
+  }
+}
+// remove comment
+export function removeComment(postId, i) {
+  return {
+    type: 'REMOVE_COMMENT',
+    i,
+    postId
+  }
+}

notes/learn-redux/client/components/App.js

@@ -0,0 +1,19 @@
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import * as actionCreators from '../actions/actionCreators';
+import Main from './Main';
+
+function mapStateToProps(state) {
+  return {
+    posts: state.posts,
+    comments: state.comments
+  }
+}
+
+function mapDispachToProps(dispatch) {
+  return bindActionCreators(actionCreators, dispatch);
+}
+
+const App = connect(mapStateToProps, mapDispachToProps)(Main);
+
+export default App;

notes/learn-redux/client/components/Comments.js

@@ -0,0 +1,40 @@
+import React from 'react';
+
+const Comments = React.createClass({
+  renderComment(comment, i) {
+    return (
+      <div className="comment" key={i}>
+        <p>
+          <strong>{comment.user}</strong>
+          {comment.text}
+          <button className="remove-comment" onClick={this.props.removeComment.bind(null, this.props.params.postId, i)}>&times;</button>
+        </p>
+      </div>
+    )
+  },
+  handleSubmit(e) {
+    e.preventDefault();
+    console.log('Submitting the form!');
+    console.log(this.refs);
+    const { postId } = this.props.params;
+    const author = this.refs.comment.value;
+    const comment = this.refs.comment.value;
+    this.props.addComment(postId, author, comment);
+    this.refs.commentForm.reset();
+  },
+
+  render() {
+    return (
+      <div className="comments">
+        {this.props.postComments.map(this.renderComment)}
+        <form ref="commentForm" className="comment-form" onSumbit={this.handleSubmit}>
+          <input type="text" ref="author" placeholder="author" />
+          <input type="text" ref="comment" placeholder="comment" />
+          <input type="submit" hidden />
+        </form>
+      </div>
+    )
+  }
+});
+
+export default Comments;

notes/learn-redux/client/components/Main.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Link } from 'react-router';
+
+const Main = React.createClass({
+  render() {
+    return (
+      <div>
+        <h1>
+          <Link to="/">Reduxstagram</Link>
+        </h1>
+        {React.cloneElement(this.props.children, this.props)}
+      </div>
+    )
+  }
+});
+
+export default Main;

notes/learn-redux/client/components/Photo.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Link } from 'react-router';
+import CSSTransitionGroup from 'react-addons-css-transition-group';
+
+const Photo = React.createClass({
+  render() {
+    const { post, i, comments } = this.props;
+    return (
+      <figure className="grid-figure">
+        <div className="grid-photo-wrap">
+          <Link to={`/view/${post.code}`}>
+            <img src={post.display_src} alt={post.caption} className="grid-photo" />
+          </Link>
+
+          <CSSTransitionGroup transitionName="like" transitionEnterTimeout={500} transitionLeaveTimeout={500}>
+            <span key={post.likes} className="likes-heart">{post.likes}</span>
+          </CSSTransitionGroup>
+
+        </div>
+
+        <figcaption>
+          <p>{post.caption}</p>
+          <div className="control-buttons">
+            <button onClick={this.props.increment.bind(null, i)} className="likes">&hearts; {post.likes}</button>
+            <Link className="button" to={`/view/${post.code}`}>
+              <span className="comment-count">
+                <span className="speech-bubble"></span>
+                {comments[post.code] ? comments[post.code].length : 0}
+              </span>
+            </Link>
+          </div>
+        </figcaption>
+
+      </figure>
+    )
+  }
+});
+
+export default Photo;

notes/learn-redux/client/components/PhotoGrid.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import Photo from './Photo'
+
+const PhotoGrid = React.createClass({
+  render() {
+    return (
+      <div className="photo-grid">
+        {this.props.posts.map((post, i) => <Photo {...this.props} key={i} i={i} post={post} />)}
+      </div>
+    )
+  }
+});
+
+export default PhotoGrid;

notes/learn-redux/client/components/Single.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import Photo from './Photo';
+import Comments from './Comments';
+
+const Single = React.createClass({
+  render() {
+    const { postId } = this.props.params;
+    const i = this.props.posts.findIndex((post) => post.code === postId);
+    const post = this.props.posts[i];
+    const postComments = this.props.comments[postId] || [];
+    return (
+      <div className="single-photo">
+        <Photo i={i} post={post} {...this.props} />
+        <Comments postComments={postComments} {...this.props} />
+      </div>
+    )
+  }
+});
+
+export default Single;