Split rendering sidebar & app

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

@@ -5,20 +5,15 @@ import { isEqual } from 'lodash';
 
 import { fetchCategories } from './actions/categories';
 
-import Sidebar from './components/sidebar/Sidebar.js';
 import PostList from './components/postlist/PostList.js';
 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 (
       <>
-        <Sidebar />
         <PostList
           feedUrl={this.props.feedUrl}
           subredditUrl={this.props.subredditUrl}
@@ -41,6 +36,7 @@ class App extends React.Component {
           />
         )}
 
+        {/* TODO: check this styling */}
         {this.props.error && (
           <Messages messages={[{ type: 'error', text: this.props.error.message }]} />
         )}
@@ -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

@@ -1,9 +1,9 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import { isEqual } from 'lodash';
 
 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';
@@ -12,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 => {
@@ -33,7 +37,7 @@ class Sidebar extends React.Component {
       [CATEGORY_TYPE, RULE_TYPE].includes(this.props.selected.item.type);
 
     return (
-      <div className="sidebar">
+      <>
         {(this.props.categories.isFetching || this.props.rules.isFetching) && (
           <LoadingIndicator />
         )}
@@ -44,7 +48,7 @@ class Sidebar extends React.Component {
         </ul>
 
         {showReadButton && <ReadButton />}
-      </div>
+      </>
     );
   }
 }
@@ -55,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,12 +5,24 @@ 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');
-
-if (page) {
+const homepageBody = document.getElementById('homepage--page');
+const containers = [...homepageBody.children].filter(element => element.matches('.main'));
+const sidebars = document.getElementsByClassName('sidebar');
 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;
 
@@ -27,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,9 +1,11 @@
 {% extends "base.html" %}
 {% load static %}
 
-{% block content %}
-  <main id="homepage--page" class="main"></main>
-{% endblock content %}
+{% block page_id %}id="homepage--page"{% endblock %}
+
+{% block sidebar %}
+  <div class="sidebar"></div>
+{% endblock %}
 
 {% block scripts %}
   {{ homepageSettings|json_script:"homepageSettings" }}

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

@@ -4,6 +4,11 @@
 
   font-family: Rubik, sans-serif;
   font-size: $font-size;
+
+  // TODO add grid area names
+  display: grid;
+  grid-template-columns: 1fr 3fr;
+  grid-gap: 20px;
 }
 
 body {
@@ -14,5 +19,4 @@ body {
     padding: 0;
     box-sizing: border-box;
   }
-
 }

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/components/navbar/_navbar.scss

@@ -1,4 +1,7 @@
 .nav {
+  grid-column: 1 /3;
+  grid-row: 1;
+
   display: flex;
   justify-content: center;
   align-items: center;
@@ -6,9 +9,6 @@
   padding: 10px 0;
   width: 100%;
 
-  position: sticky;
-  top: 0;
-
   background-color: var(--lightest-accent-color);
 
   ol {

src/newsreader/scss/components/sidebar/_sidebar.scss

@@ -1,13 +1,10 @@
 .sidebar {
+  grid-column: 1;
+  grid-row: 2;
+
   display: flex;
   flex-direction: column;
   align-items: center;
-  align-self: start;
-
-  position: sticky;
-  top: 50px;
-
-  width: 20%;
 
   &__nav {
     width: 100%;
@@ -15,7 +12,6 @@
     overflow: auto;
 
     list-style: none;
-
   }
 
   &__container {

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

@@ -1,9 +1,9 @@
 #homepage--page {
+    & .main {
         display: flex;
         flex-direction: row;
         align-items: initial;
-    width: 100%;
 
-    margin: 20px 0 0 0;
         background-color: initial;
     }
+}

src/newsreader/templates/base.html

@@ -10,7 +10,7 @@
     {% endblock %}
   </head>
 
-  <body class="body">
+  <body {% block page_id %}{% endblock %} class="body">
     <nav class="nav">
       <ol>
         {% if request.user.is_authenticated %}
@@ -41,7 +41,11 @@
       </ul>
     {% endif %}
 
+    {% block sidebar %}{% endblock %}
+
+    <main class="main">
       {% block content %}{% endblock content %}
+    </main>
   </body>
 
   {% block scripts %}