import React, {Component} from 'react'
import {BrowserRouter as Router, Route} from 'react-router-dom'
import PropTypes from 'prop-types'

import {IntlProvider, addLocaleData} from 'react-intl'
import en from 'react-intl/locale-data/en'
import zh from 'react-intl/locale-data/zh'
import enMessages from "./languages/en";
import zhMessages from "./languages/zh";

import Header from './components/layout/Header'
import Footer from './components/layout/Footer'
import Home from './components/Home'

import Ledger from './components/Ledger'
import Ledgers from './components/Ledgers'
import Transaction from './components/Transaction'
import Transactions from './components/Transactions'
import Account from './components/Account'
import Accounts from './components/Accounts'
import Anchors from './components/Anchors'

import {networks} from './lib/Stellar'

import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css'

addLocaleData([
  ...en,
  ...zh
])

const locale = localStorage.getItem("lang") || navigator.language || "en"
const network = localStorage.getItem("network") || "public"

const getMessages = locale => {
  switch (locale) {
    case "zh":
      return zhMessages
    default:
      return enMessages
  }
}

class App extends Component {
  state = {
    lang: locale,
    network: network,
    server: networks[network].initFunc()
  }

  languageSwitcher = locale => {
    localStorage.setItem("lang", locale)
    this.setState({lang: locale})
  }

  networkSwitcher = selectedNetwork => {
    console.log(`NETWORK change: ${this.state.network} to ${selectedNetwork}`)
    localStorage.setItem("network", selectedNetwork)
    const server = networks[selectedNetwork].initFunc()
    this.setState({
      network: selectedNetwork,
      server: server
    }, () => window.location.reload(true))
  }

  getChildContext() {
    return {server: this.state.server}
  }

  render() {
    return (
      <IntlProvider
        key={this.state.lang}
        locale={this.state.lang}
        messages={getMessages(this.state.lang)}>
        <Router>
          <div className="App">
            <Header network={this.state.network} networkSwitcher={this.networkSwitcher}/>
            <div id="main-content">
              <Route exact path="/" component={Home}/>
              <Route path="/ledgers" component={Ledgers}/>
              <Route path="/ledger/:id" component={Ledger}/>
              <Route path="/txs" component={Transactions}/>
              <Route path="/tx/:id" component={Transaction}/>
              <Route path="/accounts" component={Accounts}/>
              <Route path="/account/:id" component={Account}/>
              <Route path="/anchors" component={Anchors}/>
            </div>
            <Footer/>
          </div>
        </Router>
      </IntlProvider>
    );
  }
}

App.childContextTypes = {
  server: PropTypes.object
}

export default App

@@ -70,16 +70,24 @@
 r, Route
+, Switch
 %7D from '
@@ -104,16 +104,58 @@
 er-dom'%0A
+import %7BGrid, Row%7D from 'react-bootstrap'%0A
 import P
@@ -1274,16 +1274,187 @@
 %0A  %7D%0A%7D%0A%0A
+class NoMatch extends Component %7B%0A  render() %7B%0A    return (%0A      %3CGrid%3E%0A        %3CRow%3E%0A          %3Ch3%3EOops, nothing here ...%3C/h3%3E%0A        %3C/Row%3E%0A      %3C/Grid%3E%0A    )%0A  %7D%0A%7D%0A%0A
 class Ap
@@ -2435,16 +2435,41 @@
 ntent%22%3E%0A
+              %3CSwitch%3E%0A  
         
@@ -2511,24 +2511,26 @@
 nt=%7BHome%7D/%3E%0A
+  
             
@@ -2582,32 +2582,34 @@
 %3E%0A              
+  
 %3CRoute path=%22/le
@@ -2635,24 +2635,26 @@
 =%7BLedger%7D/%3E%0A
+  
             
@@ -2707,32 +2707,34 @@
 %3E%0A              
+  
 %3CRoute path=%22/tx
@@ -2771,32 +2771,34 @@
 %3E%0A              
+ 
+ 
 %3CRoute path=%22/ac
@@ -2824,24 +2824,26 @@
 Accounts%7D/%3E%0A
+  
             
@@ -2899,32 +2899,34 @@
 %3E%0A              
+ 
+ 
 %3CRoute path=%22/an
@@ -2950,24 +2950,93 @@
 %7BAnchors%7D/%3E%0A
+                %3CRoute component=%7BNoMatch%7D/%3E%0A              %3C/Switch%3E%0A
             

add a 'route not found' route NoMatch