diff --git a/src/newsreader/js/pages/homepage/App.js b/src/newsreader/js/pages/homepage/App.js
index 844f7e1..897bb15 100644
--- a/src/newsreader/js/pages/homepage/App.js
+++ b/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);
diff --git a/src/newsreader/js/pages/homepage/components/sidebar/Sidebar.js b/src/newsreader/js/pages/homepage/components/sidebar/Sidebar.js
index 393ca8c..d4f2ea5 100644
--- a/src/newsreader/js/pages/homepage/components/sidebar/Sidebar.js
+++ b/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);
diff --git a/src/newsreader/js/pages/homepage/index.js b/src/newsreader/js/pages/homepage/index.js
index 7f51d80..4d52dcb 100644
--- a/src/newsreader/js/pages/homepage/index.js
+++ b/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 = (
+
+
+
+ );
+ ReactDOM.render(sidebarMount, sidebar);
+});
+
+[...containers].forEach(container => {
const settings = JSON.parse(document.getElementById('homepageSettings').textContent);
const { feedUrl, subredditUrl, timelineUrl, categoriesUrl } = settings;
const app = (
- {/* TODO: split App into Main & Sidebar mounts */}
);
- ReactDOM.render(app, page);
-}
+ ReactDOM.render(app, container);
+});
diff --git a/src/newsreader/news/core/templates/news/core/views/homepage.html b/src/newsreader/news/core/templates/news/core/views/homepage.html
index 08621b2..2570b51 100644
--- a/src/newsreader/news/core/templates/news/core/views/homepage.html
+++ b/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 %}
-
+
{% endblock %}
{% block scripts %}
diff --git a/src/newsreader/scss/components/body/_body.scss b/src/newsreader/scss/components/body/_body.scss
index 3eb1c26..d6748fa 100644
--- a/src/newsreader/scss/components/body/_body.scss
+++ b/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;
diff --git a/src/newsreader/scss/components/main/_main.scss b/src/newsreader/scss/components/main/_main.scss
index 5d0143f..0e580ad 100644
--- a/src/newsreader/scss/components/main/_main.scss
+++ b/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;
}
diff --git a/src/newsreader/scss/pages/homepage/index.scss b/src/newsreader/scss/pages/homepage/index.scss
index b6eff8b..8dffdf8 100644
--- a/src/newsreader/scss/pages/homepage/index.scss
+++ b/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;
- display: flex;
- flex-direction: row;
- align-items: initial;
-
- background-color: initial;
+ background-color: initial;
+ }
}
diff --git a/src/newsreader/templates/base.html b/src/newsreader/templates/base.html
index 76dee73..5ed7cce 100644
--- a/src/newsreader/templates/base.html
+++ b/src/newsreader/templates/base.html
@@ -10,7 +10,7 @@
{% endblock %}
-
+