PLT-7 client side infra

web/react/pages/channel.jsx

@@ -5,6 +5,7 @@ import ChannelView from '../components/channel_view.jsx';
 import ChannelLoader from '../components/channel_loader.jsx';
 import ErrorBar from '../components/error_bar.jsx';
 import ErrorStore from '../stores/error_store.jsx';
+import * as Client from '../utils/client.jsx';
 
 import GetTeamInviteLinkModal from '../components/get_team_invite_link_modal.jsx';
 import RenameChannelModal from '../components/rename_channel_modal.jsx';
@@ -26,13 +27,79 @@ import * as EventHelpers from '../dispatcher/event_helpers.jsx';
 
 import Constants from '../utils/constants.jsx';
 
+var IntlProvider = ReactIntl.IntlProvider;
+
+class Root extends React.Component {
+    constructor() {
+        super();
+        this.state = {
+            translations: null,
+            loaded: false
+        };
+    }
+
+    static propTypes() {
+        return {
+            map: React.PropTypes.object.isRequired
+        };
+    }
+
+    componentWillMount() {
+        Client.getTranslations(
+            this.props.map.Locale,
+            (data) => {
+                this.setState({
+                    translations: data,
+                    loaded: true
+                });
+            },
+            () => {
+                this.setState({
+                    loaded: true
+                });
+            }
+        );
+    }
+
+    render() {
+        if (!this.state.loaded) {
+            return <div></div>;
+        }
+
+        return (
+            <IntlProvider
+                locale={this.props.map.Locale}
+                messages={this.state.translations}
+            >
+                <div className='channel-view'>
+                    <ChannelLoader/>
+                    <ErrorBar/>
+                    <ChannelView/>
+
+                    <GetTeamInviteLinkModal />
+                    <InviteMemberModal />
+                    <ImportThemeModal />
+                    <TeamSettingsModal />
+                    <RenameChannelModal />
+                    <MoreChannelsModal />
+                    <EditPostModal />
+                    <DeletePostModal />
+                    <PostDeletedModal />
+                    <RemovedFromChannelModal />
+                    <RegisterAppModal />
+                </div>
+            </IntlProvider>
+        );
+    }
+}
+
 function onPreferenceChange() {
     const selectedFont = PreferenceStore.get(Constants.Preferences.CATEGORY_DISPLAY_SETTINGS, 'selected_font', Constants.DEFAULT_FONT);
     Utils.applyFont(selectedFont);
     PreferenceStore.removeChangeListener(onPreferenceChange);
 }
 
-function setupChannelPage(props, team, channel) {
+global.window.setup_channel_page = function setup(props, team, channel) {
     if (props.PostId === '') {
         EventHelpers.emitChannelClickEvent(channel);
     } else {
@@ -42,84 +109,13 @@ function setupChannelPage(props, team, channel) {
     PreferenceStore.addChangeListener(onPreferenceChange);
     AsyncClient.getAllPreferences();
 
-    // ChannelLoader must be rendered first
     ReactDOM.render(
-        <ChannelLoader/>,
+        <Root map={props} />,
-        document.getElementById('channel_loader')
-    );
-
-    ReactDOM.render(
-        <ErrorBar/>,
-        document.getElementById('error_bar')
-    );
-
-    ReactDOM.render(
-        <ChannelView/>,
         document.getElementById('channel_view')
     );
 
-    //
-    // Modals
-    //
-    ReactDOM.render(
-        <GetTeamInviteLinkModal />,
-        document.getElementById('get_team_invite_link_modal')
-    );
-
-    ReactDOM.render(
-        <InviteMemberModal />,
-        document.getElementById('invite_member_modal')
-    );
-
-    ReactDOM.render(
-        <ImportThemeModal />,
-        document.getElementById('import_theme_modal')
-    );
-
-    ReactDOM.render(
-        <TeamSettingsModal />,
-        document.getElementById('team_settings_modal')
-    );
-
-    ReactDOM.render(
-        <RenameChannelModal />,
-        document.getElementById('rename_channel_modal')
-    );
-
-    ReactDOM.render(
-        <MoreChannelsModal />,
-        document.getElementById('more_channels_modal')
-    );
-
-    ReactDOM.render(
-        <EditPostModal />,
-        document.getElementById('edit_post_modal')
-    );
-
-    ReactDOM.render(
-        <DeletePostModal />,
-        document.getElementById('delete_post_modal')
-    );
-
-    ReactDOM.render(
-        <PostDeletedModal />,
-        document.getElementById('post_deleted_modal')
-    );
-
-    ReactDOM.render(
-        <RemovedFromChannelModal />,
-        document.getElementById('removed_from_channel_modal')
-    );
-
-    ReactDOM.render(
-        <RegisterAppModal />,
-        document.getElementById('register_app_modal')
-    );
-
     if (global.window.mm_config.SendEmailNotifications === 'false') {
         ErrorStore.storeLastError({message: 'Preview Mode: Email notifications have not been configured'});
         ErrorStore.emitChange();
     }
-}
+};
-
-global.window.setup_channel_page = setupChannelPage;

web/templates/channel.html

@@ -4,25 +4,7 @@
 <html>
 {{template "head" . }}
 <body>
-  <div id="error_bar"></div>
+  <div id="channel_view" class='channel-view'></div>
-  <div id="channel_view" class="channel-view"></div>
-  <div id="channel_loader"></div>
-  <div id="post_mention_tab"></div>
-  <div id="reply_mention_tab"></div>
-  <div id="edit_mention_tab"></div>
-  <div id="get_team_invite_link_modal"></div>
-  <div id="import_theme_modal"></div>
-  <div id="team_settings_modal"></div>
-  <div id="invite_member_modal"></div>
-  <div id="rename_channel_modal"></div>
-  <div id="edit_post_modal"></div>
-  <div id="delete_post_modal"></div>
-  <div id="more_channels_modal"></div>
-  <div id="post_deleted_modal"></div>
-  <div id="channel_notifications_modal"></div>
-  <div id="team_members_modal"></div>
-  <div id="removed_from_channel_modal"></div>
-  <div id="register_app_modal"></div>
 <script>
 window.setup_channel_page({{ .Props }}, {{ .Team }}, {{ .Channel }}, {{ .User }});
   $('body').tooltip( {selector: '[data-toggle=tooltip]'} );