Skip to content

Commit 47e4852

Browse files
justin808justin808
authored
Merge pull request shakacode#277 from shakacode/shared-redux-store
Moving header to React with shared store
2 parents ec43d8e + 0ecedf2 commit 47e4852

28 files changed

+279
-87
lines changed

‎app/assets/javascripts/application_non_webpack.js

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
11
// All webpack assets in development will be loaded via webpack dev server
22

33
// turbolinks comes from npm and is listed in webpack.client.base.config.js
4-
5-
//= require rails_startup

‎app/assets/javascripts/rails_startup.js

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎app/controllers/pages_controller.rb

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
class PagesController < ApplicationController
2+
include ReactOnRails::Controller
23
before_action :set_comments
34

45
def index
56
# NOTE: The below notes apply if you want to set the value of the props in the controller, as
6-
# compared to he view. However, it's more convenient to use Jbuilder from the view. See
7+
# compared to the view. However, it's more convenient to use Jbuilder from the view. See
78
# app/views/pages/index.html.erb:20
89
#
910
# <%= react_component('App', props: render(template: "/comments/index.json.jbuilder"),
@@ -20,10 +21,15 @@ def index
2021
# respond_to do |format|
2122
# format.html
2223
# end
24+
25+
redux_store("routerCommentsStore", props: comments_json_string)
26+
render_html
2327
end
2428

2529
# Declaring no_router and simple to indicate we have views for them
2630
def no_router
31+
redux_store("commentsStore", props: comments_json_string)
32+
render_html
2733
end
2834

2935
def simple
@@ -34,4 +40,15 @@ def simple
3440
def set_comments
3541
@comments = Comment.all.order("id DESC")
3642
end
43+
44+
def comments_json_string
45+
render_to_string(template: "/comments/index.json.jbuilder",
46+
locals: { comments: Comment.all }, format: :json)
47+
end
48+
49+
def render_html
50+
respond_to do |format|
51+
format.html
52+
end
53+
end
3754
end

‎app/views/layouts/application.html.erb

Lines changed: 5 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -20,36 +20,16 @@
2020
<%= csrf_meta_tags %>
2121
</head>
2222
<body>
23-
<nav class="navbar navbar-default" role="navigation">
24-
<div class="container">
25-
<div class="navbar-header">
26-
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
27-
<span class="sr-only">Toggle navigation</span>
28-
<span class="icon-bar"></span>
29-
<span class="icon-bar"></span>
30-
<span class="icon-bar"></span>
31-
</button>
32-
<a class="navbar-brand" href="http://www.shakacode.com">ShakaCode</a>
33-
</div>
3423

35-
<!-- Collect the nav links, forms, and other content for toggling -->
36-
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
37-
<ul class="nav navbar-nav">
38-
<li class="active"><%= link_to "React/Redux/Router Demo", root_path %></li>
39-
<li><%= link_to "React/Redux", no_router_path %></li>
40-
<li><%= link_to "Simple React", simple_path %></li>
41-
<li><%= link_to "Classic Rails", comments_path %></li>
42-
<li><%= link_to "Source on Github", "https://github.com/shakacode/react-webpack-rails-tutorial" %></li>
43-
<li><%= link_to "Tutorial Article", "http://www.railsonmaui.com/blog/2014/10/03/integrating-webpack-and-the-es6-transpiler-into-an-existing-rails-project/" %></li>
44-
<li><%= link_to "Forum Discussion", "http://forum.shakacode.com/t/fast-rich-client-rails-development-with-webpack-and-the-es6-transpiler/82/22" %></li>
45-
</ul>
46-
</div><!-- /.navbar-collapse -->
47-
</div><!-- /.container-fluid -->
48-
</nav>
24+
<%= react_component "NavigationBarApp" %>
4925

5026
<div class="container">
5127
<%= yield %>
5228
</div>
5329

30+
<!-- This is a placeholder for ReactOnRails to know where to render the store props for
31+
client side hydration -->
32+
<%= redux_store_hydration_data %>
33+
5434
</body>
5535
</html>

‎app/views/pages/index.html.erb

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,5 +9,5 @@
99
</h3>
1010
<%= render "header" %>
1111

12-
<%= react_component('RouterApp', props: render(template: "/comments/index.json.jbuilder"),
13-
prerender: true, raise_on_prerender_error: true, id: "RouterApp-react-component-0") %>
12+
<!--Note, pre-rendering set in /config/initializers/react_on_rails.rb -->
13+
<%= react_component('RouterApp', id: "RouterApp-react-component-0") %>

‎app/views/pages/no_router.html.erb

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,5 @@
22
<a href="https://github.com/shakacode/react_on_rails">react_on_rails gem</a>)</h2>
33
<%= render "header" %>
44

5-
<%= react_component('App', props: render(template: "/comments/index.json.jbuilder"),
6-
prerender: true) %>
5+
<!--Note, pre-rendering set in /config/initializers/react_on_rails.rb -->
6+
<%= react_component('App') %>

‎app/views/pages/simple.html.erb

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,4 +9,5 @@
99
</ul>
1010
<hr/>
1111

12+
<!-- This component is super simple! So no redux, no prerendering. -->
1213
<%= react_component('SimpleCommentScreen', props: {}, prerender: false) %>

‎client/app/bundles/comments/components/CommentScreen/CommentScreen.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ export default class CommentScreen extends BaseComponent {
3232
{this._renderNotification()}
3333
<div>
3434
<CommentBox
35-
pollInterval={10000}
35+
pollInterval={60000}
3636
data={data}
3737
actions={actions}
3838
ajaxCounter={data.get('ajaxCounter')}

‎client/app/bundles/comments/components/NavigationBar/CommentsCount.jsx

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import React, {PropTypes} from 'react';
2+
3+
const href = 'https://github.com/shakacode/react_on_rails/blob/master/README.md#multiple-react-' +
4+
'components-on-a-page-with-one-store';
5+
const CommentsCount = (props) => (
6+
<li>
7+
<a id='js-comment-count' href={href}>
8+
Comments: {props.commentsCount}
9+
</a>
10+
</li>
11+
);
12+
13+
CommentsCount.propTypes = {
14+
commentsCount: PropTypes.number.isRequired,
15+
};
16+
17+
export default CommentsCount;

‎client/app/bundles/comments/components/NavigationBar/NavigationBar.jsx

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
import React, {PropTypes} from 'react';
2+
import ReactOnRails from 'react-on-rails';
3+
import classNames from 'classnames';
4+
import CommentsCount from './CommentsCount';
5+
import * as paths from '../../constants/paths';
6+
7+
const NavigationBar = (props) => {
8+
const { commentsCount, pathname } = props;
9+
10+
return (
11+
<nav className="navbar navbar-default" role="navigation">
12+
<div className="container">
13+
<div className="navbar-header">
14+
<button
15+
type="button"
16+
className="navbar-toggle"
17+
data-toggle="collapse"
18+
data-target="#bs-example-navbar-collapse-1"
19+
>
20+
<span className="sr-only">Toggle navigation</span>
21+
<span className="icon-bar"/>
22+
<span className="icon-bar"/>
23+
<span className="icon-bar"/>
24+
</button>
25+
<a className="navbar-brand" href="http://www.shakacode.com">ShakaCode</a>
26+
</div>
27+
<div className="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
28+
<ul className="nav navbar-nav">
29+
<li className={classNames({ active: (pathname === paths.ROUTER_PATH) })}>
30+
<a href={paths.ROUTER_PATH}>React Router Demo</a>
31+
</li>
32+
<li className={classNames({ active: (pathname === paths.NO_ROUTER_PATH) })}>
33+
<a href={paths.NO_ROUTER_PATH}>React Demo</a>
34+
</li>
35+
<li className={classNames({ active: (pathname === paths.SIMPLE_REACT_PATH) })}>
36+
<a href={paths.SIMPLE_REACT_PATH}>Simple React</a>
37+
</li>
38+
<li className={classNames({ active: (pathname === paths.RAILS_PATH) })}>
39+
<a href={paths.RAILS_PATH}>Classic Rails</a>
40+
</li>
41+
<li>
42+
<a href={
43+
'https://github.com/' +
44+
'shakacode/react-webpack-rails-tutorial'
45+
}>
46+
Source on Github
47+
</a>
48+
</li>
49+
<li>
50+
<a href={
51+
'http://www.railsonmaui.com/' +
52+
'blog/2014/10/03/integrating' +
53+
'-webpack-and-the-es6-transpiler' +
54+
'-into-an-existing-rails-project/'
55+
}>Tutorials</a>
56+
</li>
57+
<li>
58+
<a href={
59+
'http://forum.shakacode.com/' +
60+
't/fast-rich-client-rails-development' +
61+
'-with-webpack-and-the-es6-transpiler/82/22'
62+
}>Forum</a>
63+
</li>
64+
{commentsCount && CommentsCount({ commentsCount })}
65+
</ul>
66+
</div>
67+
</div>
68+
</nav>
69+
);
70+
};
71+
72+
NavigationBar.propTypes = {
73+
commentsCount: PropTypes.number,
74+
pathname: PropTypes.string.isRequired,
75+
};
76+
77+
export default NavigationBar;

0 commit comments

Comments
 (0)