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 %} - +