Adding React.js, Redux, revamping dashboard

7 files changed, 114 insertions, 0 deletions

diff --git a/app/assets/javascripts/components/components/column.jsx b/app/assets/javascripts/components/components/column.jsx
new file mode 100644
index 000000000..c585b6b0b
--- /dev/null
+++ b/app/assets/javascripts/components/components/column.jsx
@@ -0,0 +1,19 @@
+import StatusListContainer from '../containers/status_list_container';
+import ColumnHeader        from './column_header';
+
+const Column = React.createClass({
+  propTypes: {
+    type: React.PropTypes.string
+  },
+
+  render: function() {
+    return (
+      <div style={{ width: '350px', flex: '0 0 auto', background: '#282c37', margin: '10px', marginRight: '0', display: 'flex', flexDirection: 'column' }}>
+        <ColumnHeader type={this.props.type} />
+        <StatusListContainer type={this.props.type} />
+      </div>
+    );
+  }
+});
+
+export default Column;
diff --git a/app/assets/javascripts/components/components/column_header.jsx b/app/assets/javascripts/components/components/column_header.jsx
new file mode 100644
index 000000000..e2f7d7c1c
--- /dev/null
+++ b/app/assets/javascripts/components/components/column_header.jsx
@@ -0,0 +1,15 @@
+const ColumnHeader = React.createClass({
+  propTypes: {
+    type: React.PropTypes.string
+  },
+
+  render: function() {
+    return (
+      <div style={{ padding: '15px', fontSize: '16px', background: '#2f3441', flex: '0 0 auto' }}>
+        {this.props.type}
+      </div>
+    );
+  }
+});
+
+export default ColumnHeader;
diff --git a/app/assets/javascripts/components/components/columns_area.jsx b/app/assets/javascripts/components/components/columns_area.jsx
new file mode 100644
index 000000000..1c46f722d
--- /dev/null
+++ b/app/assets/javascripts/components/components/columns_area.jsx
@@ -0,0 +1,15 @@
+import Column from './column';
+
+const ColumnsArea = React.createClass({
+
+  render: function() {
+    return (
+      <div style={{ display: 'flex', flexDirection: 'row', flex: '1' }}>
+        <Column type='home' />
+        <Column type='mentions' />
+      </div>
+    );
+  }
+});
+
+export default ColumnsArea;
diff --git a/app/assets/javascripts/components/components/frontend.jsx b/app/assets/javascripts/components/components/frontend.jsx
new file mode 100644
index 000000000..6f9c46fa9
--- /dev/null
+++ b/app/assets/javascripts/components/components/frontend.jsx
@@ -0,0 +1,16 @@
+import NavBar      from './nav_bar';
+import ColumnsArea from './columns_area';
+
+const Frontend = React.createClass({
+
+  render: function() {
+    return (
+      <div style={{ flex: '0 0 auto', display: 'flex', width: '100%', height: '100%', background: '#1a1c23' }}>
+        <NavBar />
+        <ColumnsArea />
+      </div>
+    );
+  }
+});
+
+export default Frontend;
diff --git a/app/assets/javascripts/components/components/nav_bar.jsx b/app/assets/javascripts/components/components/nav_bar.jsx
new file mode 100644
index 000000000..1ece3cc34
--- /dev/null
+++ b/app/assets/javascripts/components/components/nav_bar.jsx
@@ -0,0 +1,8 @@
+const NavBar = React.createClass({
+
+  render: function() {
+    return <div style={{ background: '#2f3441', width: '60px', margin: '10px', marginRight: '0' }} />;
+  }
+});
+
+export default NavBar;
diff --git a/app/assets/javascripts/components/components/status.jsx b/app/assets/javascripts/components/components/status.jsx
new file mode 100644
index 000000000..9bbb02077
--- /dev/null
+++ b/app/assets/javascripts/components/components/status.jsx
@@ -0,0 +1,19 @@
+import ImmutablePropTypes from 'react-immutable-proptypes';
+
+const Status = React.createClass({
+  propTypes: {
+    status: ImmutablePropTypes.map.isRequired
+  },
+
+  render: function() {
+    console.log(this.props.status.toJS());
+
+    return (
+      <div style={{ height: '100px' }}>
+        {this.props.status.getIn(['account', 'username'])}: {this.props.status.get('content')}
+      </div>
+    );
+  }
+});
+
+export default Status;
diff --git a/app/assets/javascripts/components/components/status_list.jsx b/app/assets/javascripts/components/components/status_list.jsx
new file mode 100644
index 000000000..c986c773b
--- /dev/null
+++ b/app/assets/javascripts/components/components/status_list.jsx
@@ -0,0 +1,22 @@
+import Status             from './status';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+
+const StatusList = React.createClass({
+  propTypes: {
+    statuses: ImmutablePropTypes.list.isRequired
+  },
+
+  render: function() {
+    return (
+      <div style={{ overflowY: 'scroll', flex: '1 1 auto' }}>
+        <div>
+          {this.props.statuses.map((status) => {
+            return <Status key={status.get('id')} status={status} />;
+          })}
+        </div>
+      </div>
+    );
+  }
+});
+
+export default StatusList;