Isaac react-redux _ video6

learn-redux/client/actions/actionCreators.js

@@ -0,0 +1,24 @@
+//increment
+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',
+        postId, i
+    }
+}
+

learn-redux/client/components/App.js

@@ -0,0 +1,20 @@
+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 mapDispatchToProps(dispatch) {
+    return bindActionCreators(actionCreators, dispatch);
+
+}
+
+const App = connect(mapStateToProps, mapDispatchToProps)(Main);
+
+export default App;

learn-redux/client/components/Comments.js

@@ -0,0 +1,42 @@
+import React from 'react';
+
+const Comments = React.createClass({
+    renderComments(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();
+        const { postId } = this.props.params;
+        const author = this.refs.author.value;
+        const comment = this.refs.comment.value;
+        console.log(postId + ' : ' + author + '  :  ' + comment);
+        this.props.addComment(postId, author, comment);
+        this.refs.commentForm.reset();
+    },
+
+    render() {
+
+        return (
+            <div className="comments" >
+                {this.props.postComments.map(this.renderComments)}
+                <form ref="commentForm" className="comment-form" onSubmit={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;

learn-redux/client/components/Main.js

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

learn-redux/client/components/Photo.js

@@ -0,0 +1,40 @@
+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}
+                        <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>
+                    </p>
+                </figcaption>
+            </figure>
+        )
+    }
+})
+
+export default Photo;

learn-redux/client/components/PhotoGrid.js

@@ -0,0 +1,18 @@
+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;

learn-redux/client/components/Single.js

@@ -0,0 +1,21 @@
+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;

learn-redux/client/reducers/comments.js

@@ -0,0 +1,33 @@
+function postComments(state = [], action) {
+    switch (action.type) {
+        case 'ADD_COMMENT':
+            return [...state, {
+                user: action.author,
+                text: action.comment
+            }]
+        case 'REMOVE_COMMENT':
+            const i = action.i;
+            console.log('remove comment: ' + [i]);
+            return [...state.slice(0, i),
+            ...state.slice(i + 1)
+            ];
+        default:
+            return state;
+    }
+
+    return state;
+
+}
+
+function comments(state = [], action) {
+    if (typeof action.postId !== 'undefined') {
+        return {
+            ...state,
+            [action.postId]: postComments(state[action.postId], action)
+        }
+    }
+    return state;
+
+}
+
+export default comments;

learn-redux/client/reducers/index.js

@@ -0,0 +1,8 @@
+import { combineReducers } from 'redux';
+import { routerReducer } from 'react-router-redux';
+import posts from './posts';
+import comments from './comments';
+
+const rootreducer = combineReducers({ posts, comments, routing: routerReducer });
+
+export default rootreducer;

learn-redux/client/reducers/posts.js

@@ -0,0 +1,21 @@
+// a reducer takes in two things:
+//1. the actions (info about what happened)
+//2. a copy of current state
+
+function posts(state = [], action) {
+    switch (action.type) {
+        case 'INCREMENT_LIKES':
+            console.log('increment Likes!');
+            const i = action.index;
+            return [
+                ...state.slice(0, i),
+                { ...state[i], likes: state[i].likes + 1 },
+                ...state.slice(i + 1)
+            ]
+        default:
+            return state;
+    }
+
+}
+
+export default posts;

learn-redux/client/reduxstagram.js

@@ -1 +1,27 @@
 // let's go!
+import React from 'react';
+import { render } from 'react-dom';
+// import CSS
+import css from './styles/style.styl';
+//import Main component
+import App from './components/App';
+import Single from './components/Single';
+import PhotoGrid from './components/PhotoGrid';
+
+//import React router deps
+import { Router, Route, IndexRoute, browserHistory } from 'react-router';
+import { Provider } from 'react-redux';
+import store, { history } from './store';
+
+const router = (
+    <Provider store={store}>
+        <Router history={history}>
+            <Route path="/" component={App}>
+                <IndexRoute component={PhotoGrid}></IndexRoute>
+                <Route path="/view/:postId" component={Single}></Route>
+            </Route>
+        </Router>
+    </Provider>
+)
+
+render(router, document.getElementById('root'));

learn-redux/client/store.js

@@ -0,0 +1,33 @@
+import { createStore, compose } from 'redux';
+import { syncHistoryWithStore } from 'react-router-redux';
+import { browserHistory } from 'react-router';
+
+//import root reducer
+import rootReducer from './reducers/index';
+import comments from './data/comments';
+import posts from './data/posts';
+
+//create an object for the default data
+
+const defaultState = {
+    posts, comments
+};
+
+const enhancers = compose(
+    window.devToolsExtension() ? window.devToolsExtension() : f => f
+);
+
+const store = createStore(rootReducer, defaultState, enhancers);
+
+export const history = syncHistoryWithStore(browserHistory, store);
+
+if (module.hot) {
+    module.hot.accept('./reducers', () => {
+        const nextRootReducer = require('./reducers/index').default;
+        store.replaceReducer(nextRootReducer);
+    })
+}
+
+export default store;
+
+