From a17b76ac75f506f5da6fe8adf9c36632b60d4226 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Sat, 26 Sep 2020 14:56:02 +0200 Subject: refactor to use app-rooted js imports --- frontend/app/views/page/page.container.js | 95 +++++++++++++++++++++++++++++++ 1 file changed, 95 insertions(+) create mode 100644 frontend/app/views/page/page.container.js (limited to 'frontend/app/views/page/page.container.js') diff --git a/frontend/app/views/page/page.container.js b/frontend/app/views/page/page.container.js new file mode 100644 index 0000000..dc85f5e --- /dev/null +++ b/frontend/app/views/page/page.container.js @@ -0,0 +1,95 @@ +import React, { Component } from 'react' +import { Route } from 'react-router-dom' +import { bindActionCreators } from 'redux' +import { connect } from 'react-redux' + +import './page.css' +import './cursors.css' + +import actions from 'app/actions' +import { Loader } from 'app/common' + +import * as graphActions from '../graph/graph.actions' +import * as pageActions from './page.actions' + +import PageEdit from '../graph/components/page.edit' +import TileNew from './components/tile.new' +import TileEdit from './components/tile.edit' +import TileList from './components/tile.list' + +import PageHeader from './components/page.header' +import PageEditor from './components/page.editor' + +class PageContainer extends Component { + componentDidMount() { + if (this.shouldShowPage()) this.load() + } + componentDidUpdate(prevProps) { + if (this.shouldLoadPage(prevProps)) this.load() + } + shouldShowPage() { + const { graph_name, page_name } = this.props.match.params + // console.log(graph_name, page_name) + return (graph_name && page_name && graph_name !== 'index') + } + shouldLoadPage(prevProps) { + const { page, location } = this.props + const { key } = location + if (key === prevProps.location.key) return false + if (!this.shouldShowPage()) return false + return (page.show.name === prevProps.page.show.name) + } + load() { + actions.site.setSiteTitle("loading " + this.props.match.params.page_name + "...") + this.props.pageActions.showGraphAndPageIfUnloaded(this.props.match.params) + .then(data => { + actions.site.setSiteTitle(data.res.title) + if (!data.res.tiles.length) { + this.props.pageActions.showAddTileForm() + } else { + this.props.pageActions.hideAddTileForm() + } + }) + } + render() { + if (!this.shouldShowPage()) return null + if (!this.props.page.show.res || this.props.page.show.loading) { + return ( +
+ +
+
+ +
+
+
+ ) + } + return ( +
+ +
+ +
+ {this.props.graph.editor.editingPage && } + {this.props.page.editor.addingTile && } + {this.props.page.editor.editingTile && } + {this.props.page.editor.tileList && } +
+
+
+ ) + } +} + +const mapStateToProps = state => ({ + graph: state.graph, + page: state.page, +}) + +const mapDispatchToProps = dispatch => ({ + graphActions: bindActionCreators({ ...graphActions }, dispatch), + pageActions: bindActionCreators({ ...pageActions }, dispatch), +}) + +export default connect(mapStateToProps, mapDispatchToProps)(PageContainer) -- cgit v1.2.3-70-g09d2