Refactored App component from index.tsx

src/app.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import {ChartView} from './chart_view';
+import {Route, RouteComponentProps, Switch} from 'react-router-dom';
+import {Intro} from './intro';
+import {TopBar} from './top_bar';
+
+export class App extends React.Component<{}, {}> {
+  chartViewRef?: ChartView;
+
+  render() {
+    return (
+      <div className="root">
+        <Route
+          component={(props: RouteComponentProps) => (
+            <TopBar
+              {...props}
+              onPrint={() => this.chartViewRef && this.chartViewRef.print()}
+              onDownloadSvg={() =>
+                this.chartViewRef && this.chartViewRef.downloadSvg()
+              }
+              onDownloadPng={() =>
+                this.chartViewRef && this.chartViewRef.downloadPng()
+              }
+            />
+          )}
+        />
+        <Switch>
+          <Route exact path="/" component={Intro} />
+          <Route
+            exact
+            path="/view"
+            component={(props: RouteComponentProps) => (
+              <ChartView {...props} ref={(ref) => (this.chartViewRef = ref!)} />
+            )}
+          />
+        </Switch>
+      </div>
+    );
+  }
+}

src/index.tsx

@@ -4,17 +4,10 @@ import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import messages_pl from './translations/pl.json';
 import {addLocaleData} from 'react-intl';
+import {App} from './app';
 import {detect} from 'detect-browser';
-import {ChartView} from './chart_view';
+import {HashRouter as Router} from 'react-router-dom';
-import {
-  HashRouter as Router,
-  Route,
-  RouteComponentProps,
-  Switch,
-} from 'react-router-dom';
 import {IntlProvider} from 'react-intl';
-import {Intro} from './intro';
-import {TopBar} from './top_bar';
 import './index.css';
 import 'semantic-ui-css/semantic.min.css';
 
@@ -27,8 +20,6 @@ const language = navigator.language && navigator.language.split(/[-_]/)[0];
 
 const browser = detect();
 
-let chartViewRef: ChartView | null = null;
-
 if (browser && browser.name === 'ie') {
   ReactDOM.render(
     <p>
@@ -41,28 +32,7 @@ if (browser && browser.name === 'ie') {
   ReactDOM.render(
     <IntlProvider locale={language} messages={messages[language]}>
       <Router>
-        <div className="root">
+        <App />
-          <Route
-            component={(props: RouteComponentProps) => (
-              <TopBar
-                {...props}
-                onPrint={() => chartViewRef && chartViewRef.print()}
-                onDownloadSvg={() => chartViewRef && chartViewRef.downloadSvg()}
-                onDownloadPng={() => chartViewRef && chartViewRef.downloadPng()}
-              />
-            )}
-          />
-          <Switch>
-            <Route exact path="/" component={Intro} />
-            <Route
-              exact
-              path="/view"
-              component={(props: RouteComponentProps) => (
-                <ChartView {...props} ref={(ref) => (chartViewRef = ref)} />
-              )}
-            />
-          </Switch>
-        </div>
       </Router>
     </IntlProvider>,
     document.querySelector('#root'),