scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2025-02-17 00:21:20 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Move component structure to one tree

Browse source 
Instead of inserting `Navigation` and `Footer` into every `render`ed component, just compose them in the views with a new `Page` component.
This commit is contained in:
Ray Schamp 2016-03-18 10:54:26 -04:00
parent cb81ae550a
commit faabc63e65
8 changed files with 40 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
server/template.html
View file

@ -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>

25
src/components/page/page.jsx Normal file
View file

@ -0,0 +1,25 @@
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;

30
src/lib/render.jsx
View file

@ -1,12 +1,9 @@
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;

4
src/views/about/about.jsx
View file

@ -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'));

3
src/views/components/components.jsx
View file

@ -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'));

4
src/views/credits/credits.jsx
View file

@ -1,6 +1,8 @@
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'));

3
src/views/hoc/hoc.jsx
View file

@ -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'));

3
src/views/splash/splash.jsx
View file

@ -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'));