Skip to content

GitLab

S
scratch-www
Commit faabc63e authored by Ray Schamp's avatar Ray Schamp
Browse files
Options

Move component structure to one tree 

Instead of inserting `Navigation` and `Footer` into every `render`ed component, just compose them in the views with a new `Page` component.
parent cb81ae55
Hide whitespace changes
Inline Side-by-side
Showing with 40 additions and 36 deletions
server/template.html
View file @ faabc63e
......@@ -41,9 +41,7 @@
</head>
<body>
<div id="navigation"></div>
<div id="view"></div>
<div id="footer"></div>
<div id="app"></div>
<!-- Scripts -->
<script src="/js/lib/react{{min}}.js"></script>
......
src/components/page/page.jsx 0 → 100644
View file @ faabc63e
var React = require('react');
var Navigation = require('../navigation/navigation.jsx');
var Footer = require('../footer/footer.jsx');
var Page = React.createClass({
type: 'Page',
render: function () {
return (
<div className="page">
<div id="navigation">
<Navigation />
</div>
<div id="view">
{this.props.children}
</div>
<div id="footer">
<Footer />
</div>
</div>
);
}
});
module.exports = Page;
src/lib/render.jsx
View file @ faabc63e
var ReactDOM = require('react-dom');
var ReactIntl = require('./intl.jsx');
var IntlProvider = ReactIntl.IntlProvider;
var IntlProvider = require('./intl.jsx').IntlProvider;
require('../main.scss');
var Navigation = require('../components/navigation/navigation.jsx');
var Footer = require('../components/footer/footer.jsx');
var render = function (jsx, element) {
// Get locale and messages from global namespace (see "init.js")
......@@ -21,37 +18,14 @@ var render = function (jsx, element) {
}
var messages = window._messages[locale];
// Render nav and footer for page.
var nav = ReactDOM.render(
<IntlProvider locale={locale} messages={messages}>
<Navigation />
</IntlProvider>,
document.getElementById('navigation')
);
var footer = ReactDOM.render(
<IntlProvider locale={locale} messages={messages}>
<Footer />
</IntlProvider>,
document.getElementById('footer')
);
// Provide list of rendered components
window._renderedComponents = window._renderedComponents || [];
window._renderedComponents.push(nav);
window._renderedComponents.push(footer);
// Render view component
var component = ReactDOM.render(
ReactDOM.render(
<IntlProvider locale={locale} messages={messages}>
{jsx}
</IntlProvider>,
element
);
window._renderedComponents.push(component);
};
module.exports = render;
src/views/about/about.jsx
View file @ faabc63e
......@@ -3,6 +3,8 @@ var FormattedHTMLMessage = require('react-intl').FormattedHTMLMessage;
var FormattedMessage = require('react-intl').FormattedMessage;
var render = require('../../lib/render.jsx');
var Page = require('../../components/page/page.jsx');
require('./about.scss');
var About = React.createClass({
......@@ -109,4 +111,4 @@ var About = React.createClass({
}
});
render(<About />, document.getElementById('view'));
render(<Page><About /></Page>, document.getElementById('app'));
src/views/components/components.jsx
View file @ faabc63e
......@@ -2,6 +2,7 @@ var React = require('react');
var render = require('../../lib/render.jsx');
var Activity = require('../../components/activity/activity.jsx');
var Page = require('../../components/page/page.jsx');
var Box = require('../../components/box/box.jsx');
var Button = require('../../components/forms/button.jsx');
var Carousel = require('../../components/carousel/carousel.jsx');
......@@ -44,4 +45,4 @@ var Components = React.createClass({
}
});
render(<Components />, document.getElementById('view'));
render(<Page><Components /></Page>, document.getElementById('app'));
src/views/credits/credits.jsx
View file @ faabc63e
var React = require('react');
var render = require('../../lib/render.jsx');
var Page = require('../../components/page/page.jsx');
require('./credits.scss');
var Credits = React.createClass({
......@@ -299,4 +301,4 @@ var Credits = React.createClass({
}
});
render(<Credits />, document.getElementById('view'));
render(<Page><Credits /></Page>, document.getElementById('app'));
src/views/hoc/hoc.jsx
View file @ faabc63e
......@@ -4,6 +4,7 @@ var FormattedMessage = require('react-intl').FormattedMessage;
var React = require('react');
var render = require('../../lib/render.jsx');
var Page = require('../../components/page/page.jsx');
var Button = require('../../components/forms/button.jsx');
var Box = require('../../components/box/box.jsx');
var SubNavigation = require('../../components/subnavigation/subnavigation.jsx');
......@@ -405,4 +406,4 @@ var Hoc = React.createClass({
}
});
render(<Hoc />, document.getElementById('view'));
render(<Page><Hoc /></Page>, document.getElementById('app'));
src/views/splash/splash.jsx
View file @ faabc63e
......@@ -15,6 +15,7 @@ var Carousel = require('../../components/carousel/carousel.jsx');
var Intro = require('../../components/intro/intro.jsx');
var Modal = require('../../components/modal/modal.jsx');
var News = require('../../components/news/news.jsx');
var Page = require('../../components/page/page.jsx');
var Welcome = require('../../components/welcome/welcome.jsx');
require('./splash.scss');
......@@ -411,4 +412,4 @@ var Splash = injectIntl(React.createClass({
}
}));
render(<Splash />, document.getElementById('view'));
render(<Page><Splash /></Page>, document.getElementById('app'));
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment