Split rendering sidebar & app

src/newsreader/js/pages/homepage/App.js

@@ -10,10 +10,6 @@ import PostModal from './components/PostModal.js';
 import Messages from '../../components/Messages.js';
 
 class App extends React.Component {
-  componentDidMount() {
-    this.props.fetchCategories();
-  }
-
   // TODO: render sidebar separate from main component
   render() {
     return (
@@ -70,8 +66,4 @@ const mapStateToProps = state => {
   return { error, post: state.selected.post };
 };
 
-const mapDispatchToProps = dispatch => ({
-  fetchCategories: () => dispatch(fetchCategories()),
-});
-
-export default connect(mapStateToProps, mapDispatchToProps)(App);
+export default connect(mapStateToProps)(App);

src/newsreader/js/pages/homepage/components/sidebar/Sidebar.js

@@ -3,6 +3,7 @@ import { connect } from 'react-redux';
 
 import { filterCategories, filterRules } from './filters.js';
 
+import { fetchCategories } from '../../actions/categories';
 import { CATEGORY_TYPE, RULE_TYPE } from '../../constants.js';
 import LoadingIndicator from '../../../../components/LoadingIndicator.js';
 import CategoryItem from './CategoryItem.js';
@@ -11,6 +12,10 @@ import ReadButton from './ReadButton.js';
 
 // TODO: show empty category message
 class Sidebar extends React.Component {
+  componentDidMount() {
+    this.props.fetchCategories();
+  }
+
   render() {
     const categoryItems = this.props.categories.items.map(category => {
       const rules = this.props.rules.items.filter(rule => {
@@ -54,4 +59,8 @@ const mapStateToProps = state => ({
   selected: state.selected,
 });
 
-export default connect(mapStateToProps)(Sidebar);
+const mapDispatchToProps = dispatch => ({
+  fetchCategories: () => dispatch(fetchCategories()),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(Sidebar);

src/newsreader/js/pages/homepage/index.js

@@ -5,18 +5,29 @@ import { Provider } from 'react-redux';
 import configureStore from './configureStore.js';
 
 import App from './App.js';
+import Sidebar from './components/sidebar/Sidebar.js';
 
-const page = document.getElementById('homepage--page');
+const homepageBody = document.getElementById('homepage--page');
+const containers = [...homepageBody.children].filter(element => element.matches('.main'));
+const sidebars = document.getElementsByClassName('sidebar');
+const store = configureStore();
 
-if (page) {
-  const store = configureStore();
+[...sidebars].forEach(sidebar => {
+  const sidebarMount = (
+    <Provider store={store}>
+      <Sidebar />
+    </Provider>
+  );
 
+  ReactDOM.render(sidebarMount, sidebar);
+});
+
+[...containers].forEach(container => {
   const settings = JSON.parse(document.getElementById('homepageSettings').textContent);
   const { feedUrl, subredditUrl, timelineUrl, categoriesUrl } = settings;
 
   const app = (
     <Provider store={store}>
-      {/* TODO: split App into Main & Sidebar mounts */}
       <App
         feedUrl={feedUrl.substring(1, feedUrl.length - 3)}
         subredditUrl={subredditUrl.substring(1, subredditUrl.length - 3)}
@@ -28,5 +39,5 @@ if (page) {
     </Provider>
   );
 
-  ReactDOM.render(app, page);
-}
+  ReactDOM.render(app, container);
+});

src/newsreader/news/core/templates/news/core/views/homepage.html

@@ -1,10 +1,10 @@
 {% extends "base.html" %}
 {% load static %}
 
-{% block page_class %}homepage--page{% endblock %}
+{% block page_id %}id="homepage--page"{% endblock %}
 
 {% block sidebar %}
-  <div className="sidebar"></div>
+  <div class="sidebar"></div>
 {% endblock %}
 
 {% block scripts %}

src/newsreader/scss/components/body/_body.scss

@@ -5,6 +5,7 @@
   font-family: Rubik, sans-serif;
   font-size: $font-size;
 
+  // TODO add grid area names
   display: grid;
   grid-template-columns: 1fr 3fr;
   grid-gap: 20px;

src/newsreader/scss/components/main/_main.scss

@@ -1,7 +1,8 @@
 .main {
+  grid-column: 2;
+  grid-row: 2;
+
   display: flex;
   flex-direction: column;
   align-items: center;
-
-  margin: 20px 0;
 }

src/newsreader/scss/pages/homepage/index.scss

@@ -1,10 +1,9 @@
 #homepage--page {
-    grid-column: 2;
-    grid-row: 2;
-
+    & .main {
         display: flex;
         flex-direction: row;
         align-items: initial;
 
         background-color: initial;
+    }
 }

src/newsreader/templates/base.html

@@ -10,7 +10,7 @@
     {% endblock %}
   </head>
 
-  <body class="body {% block page_class %}{% endblock %}">
+  <body {% block page_id %}{% endblock %} class="body">
     <nav class="nav">
       <ol>
         {% if request.user.is_authenticated %}