1 files changed, 21 insertions, 37 deletions

diff --git a/frontend/src/views/App.js b/frontend/src/views/App.js
index 8bd5e46..fb4454c 100644
--- a/frontend/src/views/App.js
+++ b/frontend/src/views/App.js
@@ -1,62 +1,46 @@
 import React, {Component} from 'react';
+import './App.scss';
 import Header from "./Header";
-import MainPane from "./MainPane";
+import MainPane from "../components/panels/MainPane";
 import Footer from "./Footer";
 import {BrowserRouter as Router} from "react-router-dom";
-import Services from "./Services";
 import Filters from "./Filters";
-import Config from "./Config";
+import backend from "../backend";
+import ConfigurationPane from "../components/panels/ConfigurationPane";
 
 class App extends Component {
 
     constructor(props) {
         super(props);
-        this.state = {
-            servicesWindowOpen: false,
-            filterWindowOpen: false,
-            configWindowOpen: false,
-            configDone: false
-        };
-
-		fetch('/api/services')
-		.then(response => {
-			if( response.status === 503){
-				this.setState({configWindowOpen: true});
-			} else if (response.status === 200){
-				this.setState({configDone: true});
-			}
-		});
 
+        this.state = {};
+    }
 
+    componentDidMount() {
+        backend.get("/api/services").then(_ => this.setState({configured: true}));
     }
 
     render() {
         let modal;
-        if (this.state.servicesWindowOpen) {
-            modal = <Services onHide={() => this.setState({servicesWindowOpen: false})}/>;
-        }
-        if (this.state.filterWindowOpen) {
+        if (this.state.filterWindowOpen && this.state.configured) {
             modal = <Filters onHide={() => this.setState({filterWindowOpen: false})}/>;
         }
-        if (this.state.configWindowOpen) {
-            modal = <Config onHide={() => this.setState({configWindowOpen: false})}
-						onDone={() => this.setState({configDone: true})}/>;
-        }
 
         return (
-            <div className="app">
+            <div className="main">
                 <Router>
-                    <Header onOpenServices={() => this.setState({servicesWindowOpen: true})}
-                            onOpenFilters={() => this.setState({filterWindowOpen: true})}
-                            onOpenConfig={() => this.setState({configWindowOpen: true})} 
-                            onOpenUpload={() => this.setState({uploadWindowOpen: true})} 
-							onConfigDone={this.state.configDone}
-					/>
-                    <MainPane />
-                    {modal}
-                    <Footer/>
+                    <div className="main-header">
+                        <Header onOpenFilters={() => this.setState({filterWindowOpen: true})} />
+                    </div>
+                    <div className="main-content">
+                        {this.state.configured ? <MainPane /> :
+                            <ConfigurationPane onConfigured={() => this.setState({configured: true})} />}
+                        {modal}
+                    </div>
+                    <div className="main-footer">
+                        {this.state.configured && <Footer/>}
+                    </div>
                 </Router>
-
             </div>
         );
     }