Send initial state in a <script type="application/json"> tag (#1806)

diff --git a/app/assets/javascripts/components/containers/mastodon.jsx b/app/assets/javascripts/components/containers/mastodon.jsx
index f1038bbe799f23810a296bd84fff7a18b2811435..a771d12696d2ef1164143c2b6c7d049fd8d974af 100644 (file)
--- a/app/assets/javascripts/components/containers/mastodon.jsx
+++ b/app/assets/javascripts/components/containers/mastodon.jsx
@@ -61,8 +61,8 @@ import { hydrateStore } from '../actions/store';
 import createStream from '../stream';
 
 const store = configureStore();
-
-store.dispatch(hydrateStore(window.INITIAL_STATE));
+const initialState = JSON.parse(document.getElementById("initial-state").textContent);
+store.dispatch(hydrateStore(initialState));
 
 const browserHistory = useRouterHistory(createBrowserHistory)({
   basename: '/web'
@@ -95,9 +95,10 @@ const Mastodon = React.createClass({
 
   componentDidMount() {
     const { locale }  = this.props;
+    const streamingAPIBaseURL = store.getState().getIn(['meta', 'streaming_api_base_url']);
     const accessToken = store.getState().getIn(['meta', 'access_token']);
 
-    this.subscription = createStream(accessToken, 'user', {
+    this.subscription = createStream(streamingAPIBaseURL, accessToken, 'user', {
 
       connected () {
         store.dispatch(connectTimeline('home'));

diff --git a/app/assets/javascripts/components/features/community_timeline/index.jsx b/app/assets/javascripts/components/features/community_timeline/index.jsx
index acfc30b655a9bfa6b670d101b8c887fff5811d9a..f7bc94d99ea7b676a60efb3136f082e1e49174e3 100644 (file)
--- a/app/assets/javascripts/components/features/community_timeline/index.jsx
+++ b/app/assets/javascripts/components/features/community_timeline/index.jsx
@@ -19,6 +19,7 @@ const messages = defineMessages({
 
 const mapStateToProps = state => ({
   hasUnread: state.getIn(['timelines', 'community', 'unread']) > 0,
+  streamingAPIBaseURL: state.getIn(['meta', 'streaming_api_base_url']),
   accessToken: state.getIn(['meta', 'access_token'])
 });
 
@@ -29,6 +30,7 @@ const CommunityTimeline = React.createClass({
   propTypes: {
     dispatch: React.PropTypes.func.isRequired,
     intl: React.PropTypes.object.isRequired,
+    streamingAPIBaseURL: React.PropTypes.string.isRequired,
     accessToken: React.PropTypes.string.isRequired,
     hasUnread: React.PropTypes.bool
   },
@@ -36,7 +38,7 @@ const CommunityTimeline = React.createClass({
   mixins: [PureRenderMixin],
 
   componentDidMount () {
-    const { dispatch, accessToken } = this.props;
+    const { dispatch, streamingAPIBaseURL, accessToken } = this.props;
 
     dispatch(refreshTimeline('community'));
 
@@ -44,7 +46,7 @@ const CommunityTimeline = React.createClass({
       return;
     }
 
-    subscription = createStream(accessToken, 'public:local', {
+    subscription = createStream(streamingAPIBaseURL, accessToken, 'public:local', {
 
       connected () {
         dispatch(connectTimeline('community'));

diff --git a/app/assets/javascripts/components/features/hashtag_timeline/index.jsx b/app/assets/javascripts/components/features/hashtag_timeline/index.jsx
index 7fb4133363a86c6e47ed6476d19d13348d246e03..08d5f7f5b4ece1a37e864475df45f161609c7c29 100644 (file)
--- a/app/assets/javascripts/components/features/hashtag_timeline/index.jsx
+++ b/app/assets/javascripts/components/features/hashtag_timeline/index.jsx
@@ -13,6 +13,7 @@ import createStream from '../../stream';
 
 const mapStateToProps = state => ({
   hasUnread: state.getIn(['timelines', 'tag', 'unread']) > 0,
+  streamingAPIBaseURL: state.getIn(['meta', 'streaming_api_base_url']),
   accessToken: state.getIn(['meta', 'access_token'])
 });
 
@@ -21,6 +22,7 @@ const HashtagTimeline = React.createClass({
   propTypes: {
     params: React.PropTypes.object.isRequired,
     dispatch: React.PropTypes.func.isRequired,
+    streamingAPIBaseURL: React.PropTypes.string.isRequired,
     accessToken: React.PropTypes.string.isRequired,
     hasUnread: React.PropTypes.bool
   },
@@ -28,9 +30,9 @@ const HashtagTimeline = React.createClass({
   mixins: [PureRenderMixin],
 
   _subscribe (dispatch, id) {
-    const { accessToken } = this.props;
+    const { streamingAPIBaseURL, accessToken } = this.props;
 
-    this.subscription = createStream(accessToken, `hashtag&tag=${id}`, {
+    this.subscription = createStream(streamingAPIBaseURL, accessToken, `hashtag&tag=${id}`, {
 
       received (data) {
         switch(data.event) {

diff --git a/app/assets/javascripts/components/features/public_timeline/index.jsx b/app/assets/javascripts/components/features/public_timeline/index.jsx
index a7ac95ab44b236e908db04cfc0fc163cc0b5fc50..d5fa168f551bb7fe6d1a3114664a4cd6902e2588 100644 (file)
--- a/app/assets/javascripts/components/features/public_timeline/index.jsx
+++ b/app/assets/javascripts/components/features/public_timeline/index.jsx
@@ -19,6 +19,7 @@ const messages = defineMessages({
 
 const mapStateToProps = state => ({
   hasUnread: state.getIn(['timelines', 'public', 'unread']) > 0,
+  streamingAPIBaseURL: state.getIn(['meta', 'streaming_api_base_url']),
   accessToken: state.getIn(['meta', 'access_token'])
 });
 
@@ -29,6 +30,7 @@ const PublicTimeline = React.createClass({
   propTypes: {
     dispatch: React.PropTypes.func.isRequired,
     intl: React.PropTypes.object.isRequired,
+    streamingAPIBaseURL: React.PropTypes.string.isRequired,
     accessToken: React.PropTypes.string.isRequired,
     hasUnread: React.PropTypes.bool
   },
@@ -36,7 +38,7 @@ const PublicTimeline = React.createClass({
   mixins: [PureRenderMixin],
 
   componentDidMount () {
-    const { dispatch, accessToken } = this.props;
+    const { dispatch, streamingAPIBaseURL, accessToken } = this.props;
 
     dispatch(refreshTimeline('public'));
 
@@ -44,7 +46,7 @@ const PublicTimeline = React.createClass({
       return;
     }
 
-    subscription = createStream(accessToken, 'public', {
+    subscription = createStream(streamingAPIBaseURL, accessToken, 'public', {
 
       connected () {
         dispatch(connectTimeline('public'));

diff --git a/app/assets/javascripts/components/reducers/meta.jsx b/app/assets/javascripts/components/reducers/meta.jsx
index cd4b313d53115cd95dd8cee4bb2fa68e63e37c01..acf6d4be11bd46d3b19fd13aee3a3368db7b5739 100644 (file)
--- a/app/assets/javascripts/components/reducers/meta.jsx
+++ b/app/assets/javascripts/components/reducers/meta.jsx
@@ -2,6 +2,7 @@ import { STORE_HYDRATE } from '../actions/store';
 import Immutable from 'immutable';
 
 const initialState = Immutable.Map({
+  streaming_api_base_url: null,
   access_token: null,
   me: null
 });

diff --git a/app/assets/javascripts/components/stream.jsx b/app/assets/javascripts/components/stream.jsx
index 392268b23073fcdaa5265bca03090eee997ec056..08da7160718045ae3d9e54853ae89b5b919ea22d 100644 (file)
--- a/app/assets/javascripts/components/stream.jsx
+++ b/app/assets/javascripts/components/stream.jsx
@@ -10,8 +10,8 @@ const createWebSocketURL = (url) => {
   return a.href;
 };
 
-export default function getStream(accessToken, stream, { connected, received, disconnected, reconnected }) {
-  const ws = new WebSocketClient(`${createWebSocketURL(STREAMING_API_BASE_URL)}/api/v1/streaming/?access_token=${accessToken}&stream=${stream}`);
+export default function getStream(streamingAPIBaseURL, accessToken, stream, { connected, received, disconnected, reconnected }) {
+  const ws = new WebSocketClient(`${createWebSocketURL(streamingAPIBaseURL)}/api/v1/streaming/?access_token=${accessToken}&stream=${stream}`);
 
   ws.onopen      = connected;
   ws.onmessage   = e => received(JSON.parse(e.data));

diff --git a/app/controllers/home_controller.rb b/app/controllers/home_controller.rb
index 814b1f758c76fe4ebf5944a6ef9bbf80a894faac..65ac106928f8de2e95f15d465b5bbd618adad12e 100644 (file)
--- a/app/controllers/home_controller.rb
+++ b/app/controllers/home_controller.rb
@@ -4,9 +4,10 @@ class HomeController < ApplicationController
   before_action :authenticate_user!
 
   def index
-    @body_classes = 'app-body'
-    @token        = find_or_create_access_token.token
-    @web_settings = Web::Setting.find_by(user: current_user)&.data || {}
+    @body_classes           = 'app-body'
+    @token                  = find_or_create_access_token.token
+    @web_settings           = Web::Setting.find_by(user: current_user)&.data || {}
+    @streaming_api_base_url = Rails.configuration.x.streaming_api_base_url
   end
 
   private

diff --git a/app/views/home/index.html.haml b/app/views/home/index.html.haml
index 6cb7155767c3d2c55844a9e73708ffb0e6adc052..5b6f5b855264bbd22c83ab8b0a74437a9587643d 100644 (file)
--- a/app/views/home/index.html.haml
+++ b/app/views/home/index.html.haml
@@ -1,7 +1,5 @@
 - content_for :header_tags do
-  :javascript
-    window.STREAMING_API_BASE_URL = '#{Rails.configuration.x.streaming_api_base_url}';
-    window.INITIAL_STATE = #{json_escape(render(file: 'home/initial_state', formats: :json))}
+  %script#initial-state{:type => 'application/json'}!= json_escape(render(file: 'home/initial_state', formats: :json))
 
   = javascript_include_tag 'application', integrity: true
 

diff --git a/app/views/home/initial_state.json.rabl b/app/views/home/initial_state.json.rabl
index caee2bfc73e40e59e9a09633d870a41bf4e08194..9f94e6141df06a7b8961d4c4d901811d15c705ae 100644 (file)
--- a/app/views/home/initial_state.json.rabl
+++ b/app/views/home/initial_state.json.rabl
@@ -2,6 +2,7 @@ object false
 
 node(:meta) do
   {
+    streaming_api_base_url: @streaming_api_base_url,
     access_token: @token,
     locale: I18n.locale,
     me: current_account.id,