Merge and unmerge timelines on follow/unfollow, solves #21, #22

6 files changed, 60 insertions, 12 deletions

diff --git a/app/assets/javascripts/components/components/column.jsx b/app/assets/javascripts/components/components/column.jsx
index 64a4e6545..7f9a4665a 100644
--- a/app/assets/javascripts/components/components/column.jsx
+++ b/app/assets/javascripts/components/components/column.jsx
@@ -1,11 +1,10 @@
-import StatusListContainer from '../containers/status_list_container';
-import ColumnHeader        from './column_header';
-import PureRenderMixin     from 'react-addons-pure-render-mixin';
+import ColumnHeader    from './column_header';
+import PureRenderMixin from 'react-addons-pure-render-mixin';
 
 const Column = React.createClass({
 
   propTypes: {
-    type: React.PropTypes.string,
+    heading: React.PropTypes.string,
     icon: React.PropTypes.string
   },
 
@@ -17,10 +16,16 @@ const Column = React.createClass({
   },
 
   render () {
+    let header = '';
+
+    if (this.props.heading) {
+      header = <ColumnHeader icon={this.props.icon} type={this.props.heading} onClick={this.handleHeaderClick} />;
+    }
+
     return (
       <div style={{ width: '380px', flex: '0 0 auto', background: '#282c37', margin: '10px', marginRight: '0', display: 'flex', flexDirection: 'column' }}>
-        <ColumnHeader icon={this.props.icon} type={this.props.type} onClick={this.handleHeaderClick} />
-        <StatusListContainer type={this.props.type} />
+        {header}
+        {this.props.children}
       </div>
     );
   }
diff --git a/app/assets/javascripts/components/components/columns_area.jsx b/app/assets/javascripts/components/components/columns_area.jsx
index 720f3143b..7708b3273 100644
--- a/app/assets/javascripts/components/components/columns_area.jsx
+++ b/app/assets/javascripts/components/components/columns_area.jsx
@@ -1,4 +1,3 @@
-import Column          from './column';
 import PureRenderMixin from 'react-addons-pure-render-mixin';
 
 const ColumnsArea = React.createClass({
@@ -8,8 +7,7 @@ const ColumnsArea = React.createClass({
   render () {
     return (
       <div style={{ display: 'flex', flexDirection: 'row', flex: '1' }}>
-        <Column icon='home' type='home' />
-        <Column icon='at' type='mentions' />
+        {this.props.children}
       </div>
     );
   }
diff --git a/app/assets/javascripts/components/components/frontend.jsx b/app/assets/javascripts/components/components/frontend.jsx
index c227bcc1f..8774d2506 100644
--- a/app/assets/javascripts/components/components/frontend.jsx
+++ b/app/assets/javascripts/components/components/frontend.jsx
@@ -1,8 +1,10 @@
 import ColumnsArea          from './columns_area';
+import Column               from './column';
 import Drawer               from './drawer';
 import ComposeFormContainer from '../containers/compose_form_container';
 import FollowFormContainer  from '../containers/follow_form_container';
 import UploadFormContainer  from '../containers/upload_form_container';
+import StatusListContainer  from '../containers/status_list_container';
 import PureRenderMixin      from 'react-addons-pure-render-mixin';
 
 const Frontend = React.createClass({
@@ -21,7 +23,15 @@ const Frontend = React.createClass({
           <FollowFormContainer />
         </Drawer>
 
-        <ColumnsArea />
+        <ColumnsArea>
+          <Column icon='home' heading='Home'>
+            <StatusListContainer type='home' />
+          </Column>
+
+          <Column icon='at' heading='Mentions'>
+            <StatusListContainer type='mentions' />
+          </Column>
+        </ColumnsArea>
       </div>
     );
   }
diff --git a/app/assets/javascripts/components/containers/root.jsx b/app/assets/javascripts/components/containers/root.jsx
index ed53aee80..eb031bdd4 100644
--- a/app/assets/javascripts/components/containers/root.jsx
+++ b/app/assets/javascripts/components/containers/root.jsx
@@ -4,8 +4,12 @@ import Frontend                                             from '../components/
 import { setTimeline, updateTimeline, deleteFromTimelines } from '../actions/timelines';
 import { setAccessToken }                                   from '../actions/meta';
 import PureRenderMixin                                      from 'react-addons-pure-render-mixin';
+import { Router, Route, createMemoryHistory }               from 'react-router';
+import AccountRoute                                         from '../routes/account_route';
+import StatusRoute                                          from '../routes/status_route';
 
-const store = configureStore();
+const store   = configureStore();
+const history = createMemoryHistory();
 
 const Root = React.createClass({
 
@@ -45,7 +49,12 @@ const Root = React.createClass({
   render () {
     return (
       <Provider store={store}>
-        <Frontend />
+        <Router history={history}>
+          <Route path="/" component={Frontend}>
+            <Route path="/accounts/:account_id" component={AccountRoute} />
+            <Route path="/statuses/:status_id" component={StatusRoute} />
+          </Route>
+        </Router>
       </Provider>
     );
   }
diff --git a/app/assets/javascripts/components/routes/account_route.jsx b/app/assets/javascripts/components/routes/account_route.jsx
new file mode 100644
index 000000000..830621ed8
--- /dev/null
+++ b/app/assets/javascripts/components/routes/account_route.jsx
@@ -0,0 +1,13 @@
+const AccountRoute = React.createClass({
+
+  render() {
+    return (
+      <div>
+        {this.props.params.account_id}
+      </div>
+    )
+  }
+
+});
+
+export default AccountRoute;
diff --git a/app/assets/javascripts/components/routes/status_route.jsx b/app/assets/javascripts/components/routes/status_route.jsx
new file mode 100644
index 000000000..358157f1e
--- /dev/null
+++ b/app/assets/javascripts/components/routes/status_route.jsx
@@ -0,0 +1,13 @@
+const StatusRoute = React.createClass({
+
+  render() {
+    return (
+      <div>
+        {this.props.params.status_id}
+      </div>
+    )
+  }
+
+});
+
+export default StatusRoute;