Added components

package.json

@@ -34,5 +34,11 @@
     "json-loader": "^0.5.3",
     "webpack": "^1.12.2",
     "webpack-dev-server": "^1.12.0"
+  },
+    "dependencies": {
+        "climb-social": "^1.1.0",
+        "react": "^0.14.0",
+        "react-dom": "^0.14.0",
+        "react-motion": "^0.3.1"
   }
 }

src/components/Author.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+
+
+class Author extends React.Component {
+
+    render() {
+
+        return (
+            <a className="climb__tile__author"
+               href={ this.props.link }>
+
+                <img src={ this.props.picture}
+                     alt={ `Profile pic of ${this.props.name}` }/>
+
+                <h4 className="climb__tile__author__username">
+                    { this.props.username }
+                </h4>
+
+                <h4 className="climb__tile__author__followers">
+                    { this.props.followers_count }
+                </h4>
+
+            </a>
+        );
+    }
+}
+
+Author.propTypes = {};
+
+export default Author;

src/components/Image.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+
+class Image extends React.Component {
+
+    render() {
+        return (
+            <img className="climb__tile__image"
+                 src={ this.props.src } data-width={ this.props.width } data-height={ this.props.height }/>
+        );
+    }
+}
+
+Image.propTypes = {
+    src: React.PropTypes.string.isRequired,
+    width: React.PropTypes.number,
+    height: React.PropTypes.number
+};
+
+export default Image;

src/components/Message.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+
+class Message extends React.Component {
+
+    render() {
+        return (
+            <div className="climb__tile__message"
+                 dangerouslySetInnerHTML={{__html: this.props.body}}>
+            </div>
+        );
+    }
+}
+
+Message.propTypes = {
+    body: React.PropTypes.string.isRequired
+};
+
+export default Message;

src/components/Tile.jsx

@@ -0,0 +1,101 @@
+import React from 'react';
+import Image from './Image';
+import Message from './Message';
+import Author from './Author';
+
+
+class Tile extends React.Component {
+
+    constructor(props) {
+        super(props);
+    }
+
+    createImage() {
+
+        if (this.props.image !== null) {
+            const {url: src, width, height} = this.props.image;
+            return (
+                <Image src={ src }
+                       width={ width }
+                       height={ height }/>
+            );
+        }
+        return null;
+    }
+
+    createMessage() {
+
+        if (this.props.message) {
+            return (
+                <Message body={ this.props.message }/>
+            );
+        }
+        return null;
+    }
+
+    createClassString() {
+
+        let classString = `climb__tile climb__tile--${this.props.source_type}`;
+
+        if (this.props.image) {
+            classString += ' climb__tile--has-media climb__tile--has-image';
+        }
+
+        if (this.props.video_url) {
+            classString += ' climb__tile--has-media climb__tile--has-video';
+        }
+
+        return classString;
+    }
+
+    render() {
+
+        const image = this.createImage();
+        const message = this.createMessage();
+        const classString = this.createClassString();
+        const {author} = this.props;
+
+        return (
+            <div className={ classString }
+                 style={this.props.style}>
+
+                <a href={ this.props.link }>
+                    { image }
+                </a>
+
+                <div className="climb__tile__content">
+                    { message }
+                </div>
+
+                <Author {...author} />
+
+            </div>
+        );
+    }
+}
+
+
+Tile.propTypes = {
+
+    // Required attrs
+    link: React.PropTypes.string.isRequired,
+    source_type: React.PropTypes.string.isRequired,
+    timestamp: React.PropTypes.number.isRequired,
+    author: React.PropTypes.shape({
+        username: React.PropTypes.string.isRequired,
+        picture: React.PropTypes.string.isRequired,
+        link: React.PropTypes.string.isRequired
+    }),
+
+    // Optional attrs
+    message: React.PropTypes.string,
+    video_src: React.PropTypes.string,
+    image: React.PropTypes.shape({
+        url: React.PropTypes.string.isRequired,
+        width: React.PropTypes.number.isRequired,
+        height: React.PropTypes.number.isRequired
+    })
+
+};
+
+export default Tile;

src/components/Wall.jsx

@@ -0,0 +1,79 @@
+import React, {Component, PropTypes} from 'react';
+import Tile from './Tile';
+import {TransitionMotion, spring} from 'react-motion';
+
+
+class Wall extends Component {
+
+    static propTypes = {
+        items: PropTypes.object.isRequired
+    };
+
+    getStyles() {
+        const configs = {};
+        Object.keys(this.props.items).map(key => {
+            configs[key] = {
+                opacity: spring(1),
+                scale: spring(1),
+                item: this.props.items[key]
+            };
+        });
+        return configs;
+    }
+
+    willEnter(key) {
+        return {
+            opacity: spring(0),
+            scale: spring(0),
+            item: this.props.items[key]
+        };
+    }
+
+    willLeave(key, style) {
+        return {
+            opacity: spring(0),
+            scale: spring(0),
+            item: style.item
+        };
+    }
+
+    renderTile(key, itemValues) {
+
+        const {item, ...styleConfig} = itemValues;
+        const {...itemProps} = item;
+
+        const style = {
+            opacity: styleConfig.opacity,
+            transform: `scale(${styleConfig.scale})`,
+            '-webkit-backface-visibility': 'hidden',
+            '-webkit-perspective': '1000'
+        };
+
+        return (
+            <Tile key={key}
+                  style={style}
+                {...itemProps } />
+        );
+
+    }
+
+    render() {
+        return (
+            <TransitionMotion
+                styles={this.getStyles.bind(this)()}
+                willEnter={this.willEnter.bind(this)}
+                willLeave={this.willLeave.bind(this)}>
+                {values =>
+                    <div className="climb__wall">
+                        {Object.keys(values).map(key => {
+                            const itemValues = values[key];
+                            return this.renderTile(key, itemValues);
+                        })}
+                    </div>
+                }
+            </TransitionMotion>
+        );
+    }
+}
+
+export default Wall;

src/components/WallContainer.jsx

@@ -0,0 +1,62 @@
+import React, {Component, PropTypes} from 'react';
+import climb from 'climb-social';
+import Wall from './Wall';
+
+
+class WallContainer extends Component {
+
+    constructor(props) {
+        super(props);
+    }
+
+    state = {
+        items: []
+    };
+
+    static propTypes = {
+        collectionId: PropTypes.string.isRequired,
+        limit: PropTypes.oneOfType([
+            PropTypes.number,
+            PropTypes.string
+        ])
+    };
+
+    static defaultProps = {
+        collectionId: '561ba63445284e1740e016f7',
+        limit: 30
+    };
+
+    init() {
+
+        if (!this.props.collectionId) {
+            return;
+        }
+
+        climb
+            .getStream(this.props.collectionId, this.props.limit)
+            .subscribe(items => {
+
+                const mappedItems = {};
+                items.map(item => {
+                    mappedItems[item.id] = item;
+                });
+
+                this.setState({
+                    items: mappedItems
+                });
+
+            });
+    }
+
+    componentDidMount() {
+        this.init();
+    }
+
+    render() {
+        return (
+            <Wall items={this.state.items}/>
+        );
+    }
+}
+
+export default WallContainer;

src/index.html

@@ -4,7 +4,9 @@
     <meta charset="UTF-8">
     <title>Worklife – Camden</title>
 </head>
-<body>
-    Display
+<body style="padding: 0; margin: 0; height: 100%; width: 100%;">
+<div id="root"
+     style="height: 100%; width: 100%;">
+</div>
 </body>
 </html>

src/index.js

@@ -1,3 +1,8 @@
-/**
- * Created by michele on 14/10/15.
- */
+import React from 'react';
+import ReactDOM from 'react-dom';
+import WallContainer from './components/WallContainer';
+
+ReactDOM.render(
+    <WallContainer collectionId="561ba63445284e1740e016f7"/>,
+    document.getElementById('root')
+);

webpack.config.js

@@ -40,9 +40,6 @@ module.exports = {
             }
         ]
     },
-    externals: {
-        'react': 'React'
-    },
     plugins: [
         new HtmlWebpackPlugin({
             inject: true,