Wiring in from Reddit

package.json

@@ -21,13 +21,15 @@
   "dependencies": {
     "axios": "^0.9.0",
     "griddle-react": "0.5.1",
+    "isomorphic-fetch": "^2.1.1",
     "object-assign": "4.0.1",
     "react": "15.0.1",
     "react-bootstrap": "0.29.3",
     "react-dom": "15.0.1",
     "react-redux": "4.4.5",
     "react-router": "2.3.0",
     "redux": "3.5.1",
+    "redux-logger": "^2.4.0",
     "redux-thunk": "2.0.1"
   },
   "devDependencies": {

src/app/actions/index.js

@@ -0,0 +1,64 @@
+import fetch from 'isomorphic-fetch';
+
+export const REQUEST_POSTS = 'REQUEST_POSTS';
+export const RECEIVE_POSTS = 'RECEIVE_POSTS';
+export const SELECT_REDDIT = 'SELECT_REDDIT';
+export const INVALIDATE_REDDIT = 'INVALIDATE_REDDIT';
+
+export function selectReddit(reddit) {
+  return {
+    type: SELECT_REDDIT,
+    reddit
+  };
+}
+
+export function invalidateReddit(reddit) {
+  return {
+    type: INVALIDATE_REDDIT,
+    reddit
+  };
+}
+
+function requestPosts(reddit) {
+  return {
+    type: REQUEST_POSTS,
+    reddit
+  };
+}
+
+function receivePosts(reddit, json) {
+  return {
+    type: RECEIVE_POSTS,
+    reddit,
+    posts: json.data.children.map(child => child.data),
+    receivedAt: Date.now()
+  };
+}
+
+function fetchPosts(reddit) {
+  return dispatch => {
+    dispatch(requestPosts(reddit));
+    return fetch(`https://www.reddit.com/r/${reddit}.json`)
+      .then(response => response.json())
+      .then(json => dispatch(receivePosts(reddit, json)));
+  };
+}
+
+function shouldFetchPosts(state, reddit) {
+  const posts = state.postsByReddit[reddit];
+  if (!posts) {
+    return true;
+  }
+  if (posts.isFetching) {
+    return false;
+  }
+  return posts.didInvalidate;
+}
+
+export function fetchPostsIfNeeded(reddit) {
+  return (dispatch, getState) => {
+    if (shouldFetchPosts(getState(), reddit)) {
+      return dispatch(fetchPosts(reddit));
+    }
+  };
+}

src/app/api/redditMeta.js

@@ -0,0 +1,189 @@
+//Griddle Custom Components
+
+import GriddleResponsiveHeader from '../components/griddle-responsive-header';
+import GriddleCell from '../components/griddle-cell';
+import GriddleAvatar from '../components/griddle-avatar';
+import GriddleNameLink from '../components/griddle-name-link';
+import GriddleCustomHeader from '../components/griddle-custom-header';
+import GriddleCustomPager from '../components/griddle-custom-pager';
+
+
+module.exports = {
+  columnMeta: [
+    {
+      "columnName": "id",
+      "order": 1,
+      "sortable": true,
+      "locked": false,
+      "visible": false,
+      "customComponent": GriddleResponsiveHeader,
+      "responsiveHeaderProps": {"right": "name"},
+      "displayName": "ID",
+      "customHeaderComponent": GriddleCustomHeader,
+      "cssClassName": "griddle__column--id"
+    },
+    {
+      "columnName": "domain",
+      "order": 2,
+      "locked": false,
+      "visible": false,
+      "customComponent": GriddleAvatar,
+      "sortable": false,
+      "displayName": "Domain",
+      "customHeaderComponent": GriddleCustomHeader,
+      "cssClassName": "griddle__column--avatar"
+    },
+    {
+      "columnName": "subreddit_id",
+      "order": 3,
+      "locked": false,
+      "visible": false,
+      "customComponent": GriddleNameLink,
+      "customComponentLinkSrc": "link",
+      "displayName": "Sub-Reddit ID",
+      "customHeaderComponent": GriddleCustomHeader,
+      "cssClassName": "griddle__column--name"
+    },
+    {
+      "columnName": "downs",
+      "order": 4,
+      "locked": false,
+      "visible": false,
+      "customComponent": GriddleCell,
+      "displayName": "Down Votes",
+      "customHeaderComponent": GriddleCustomHeader,
+      "cssClassName": "griddle__column--age"
+    },
+    {
+      "columnName": "ups",
+      "order": 5,
+      "locked": false,
+      "visible": false,
+      "customComponent": GriddleCell,
+      "displayName": "Ups",
+      "customHeaderComponent": GriddleCustomHeader,
+      "cssClassName": "griddle__column--trade"
+    },
+    {
+      "columnName": "author",
+      "order": 6,
+      "locked": false,
+      "visible": true,
+      "customComponent": GriddleCell,
+      "sortable": false,
+      "displayName": "Author",
+      "customHeaderComponent": GriddleCustomHeader,
+      "cssClassName": "griddle__column--known"
+    },
+    {
+      "columnName": "created",
+      "order": 7,
+      "locked": false,
+      "visible": false,
+      "customComponent": GriddleCell,
+      "displayName": "Created",
+      "customHeaderComponent": GriddleCustomHeader,
+      "cssClassName": "griddle__column--last-ref"
+    },
+    {
+      "columnName": "created_utc",
+      "order": 8,
+      "locked": false,
+      "visible": true,
+      "customComponent": GriddleCell,
+      "displayName": "Created UTC",
+      "customHeaderComponent": GriddleCustomHeader,
+      "cssClassName": "griddle__column--last-ref"
+    },
+    {
+      "columnName": "subreddit",
+      "order": 9,
+      "locked": false,
+      "visible": true,
+      "customComponent": GriddleCell,
+      "displayName": "SubReddit",
+      "customHeaderComponent": GriddleCustomHeader,
+      "cssClassName": "griddle__column--last-ref"
+    },
+    {
+      "columnName": "gilded",
+      "order": 10,
+      "locked": false,
+      "visible": false,
+      "customComponent": GriddleCell,
+      "displayName": "Gilded",
+      "customHeaderComponent": GriddleCustomHeader,
+      "cssClassName": "griddle__column--last-ref"
+    },
+    {
+      "columnName": "url",
+      "order": 11,
+      "locked": false,
+      "visible": true,
+      "customComponent": GriddleCell,
+      "displayName": "URL",
+      "customHeaderComponent": GriddleCustomHeader,
+      "cssClassName": "griddle__column--last-ref"
+    },
+    {
+      "columnName": "selftext_html",
+      "order": 12,
+      "locked": false,
+      "visible": false,
+      "customComponent": GriddleCell,
+      "displayName": "SelfText HTML",
+      "customHeaderComponent": GriddleCustomHeader,
+      "cssClassName": "griddle__column--last-ref"
+    },
+    {
+      "columnName": "score",
+      "order": 13,
+      "locked": false,
+      "visible": true,
+      "customComponent": GriddleCell,
+      "displayName": "Score",
+      "customHeaderComponent": GriddleCustomHeader,
+      "cssClassName": "griddle__column--last-ref"
+    },
+    {
+      "columnName": "num_comments",
+      "order": 14,
+      "locked": false,
+      "visible": true,
+      "customComponent": GriddleCell,
+      "displayName": "Number of Comments",
+      "customHeaderComponent": GriddleCustomHeader,
+      "cssClassName": "griddle__column--last-ref"
+    },
+    {
+      "columnName": "permalink",
+      "order": 15,
+      "locked": false,
+      "visible": false,
+      "customComponent": GriddleCell,
+      "displayName": "Permalink",
+      "customHeaderComponent": GriddleCustomHeader,
+      "cssClassName": "griddle__column--last-ref"
+    },
+    {
+      "columnName": "selftext",
+      "order": 16,
+      "locked": false,
+      "visible": true,
+      "customComponent": GriddleCell,
+      "displayName": "SelfText",
+      "customHeaderComponent": GriddleCustomHeader,
+      "cssClassName": "griddle__column--last-ref"
+    },
+    {
+      "columnName": "thumbnail",
+      "order": 17,
+      "locked": false,
+      "visible": true,
+      "customComponent": GriddleAvatar,
+      "displayName": "Thumbnail",
+      "customHeaderComponent": GriddleCustomHeader,
+      "cssClassName": "griddle__column--last-ref"
+    }
+  ]
+};

src/app/components/griddle-avatar.js

@@ -14,6 +14,7 @@ class GriddleAvatar extends React.Component{
     const displayName = this.props.metadata.displayName;
     const imageSrc = this.props.rowData[this.props.metadata.columnName];
 
+
     const linkSrc = !this.props.metadata.customComponentLinkSrc ? "#": this.props.rowData[this.props.metadata.customComponentLinkSrc];
     const target = (!this.props.metadata.customComponentLinkSrc) ? null : "_blank";
 

src/app/components/griddle-popup-text.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+//Griddle Components
+import Griddle from 'griddle-react';
+
+import { Panel, Modal, Button } from 'react-bootstrap';
+
+class GriddlePopupLink extends React.Component{
+  constructor(props){
+    super(props);
+    this.state = {
+      show: false
+    };
+    this.handleToggle = this.handleToggle.bind(this);
+  }
+
+  handleToggle(){
+    this.setState({
+      show: !this.state.show
+    });
+  }
+
+
+  render(){
+
+    const displayName = this.props.metadata.displayName;
+    const linkText = this.props.rowData[this.props.metadata.columnName];
+    const abbreviatedText = linkText.substring(0,80);
+
+    return(
+      <div className="griddle__inner-cell" data-table-cat={displayName}>
+        <div className="griddle__data">
+          <div>
+            {abbreviatedText}
+            ...<br/>
+            <a href="#" onClick={this.handleToggle}>
+              Click for More
+            </a>
+          </div>
+        </div>
+
+
+        <Modal show={this.state.show} onHide={this.handleToggle} >
+          <Modal.Body>
+            {linkText}
+          </Modal.Body>
+          <Modal.Footer>
+            <Button onClick={this.handleToggle}>
+              Close
+            </Button>
+          </Modal.Footer>
+        </Modal>
+      </div>
+    );
+  }
+}
+GriddlePopupLink.propTypes = {
+  rowData: React.PropTypes.object,
+  metadata: React.PropTypes.object
+};
+
+export default GriddlePopupLink;

src/app/components/reddit-api-picker.js

@@ -0,0 +1,33 @@
+import React, { Component, PropTypes } from 'react';
+
+export default class Picker extends Component {
+
+  render() {
+    const { value, onChange, options } = this.props;
+
+    return (
+      <span>
+        <h1>{value}</h1>
+        <select
+
+          onChange={e => onChange(e.target.value)}
+                value={value}
+        >
+          {options.map(option =>
+            <option value={option} key={option}>
+              {option}
+            </option>)
+          }
+        </select>
+      </span>
+    );
+  }
+}
+
+Picker.propTypes = {
+  options: PropTypes.arrayOf(
+    PropTypes.string.isRequired
+  ).isRequired,
+  value: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired
+};