add initial fetch of generalsettings on appstart to get password support and mediacentername

src/App.js

@@ -11,37 +11,62 @@ import CategoryPage from "./pages/CategoryPage/CategoryPage";
 class App extends React.Component {
     constructor(props, context) {
         super(props, context);
-        this.state = {page: "default"};
+        this.state = {
+            page: "default",
+            generalSettingsLoaded: false,
+            passwordsupport: null
+        };
 
         // bind this to the method for being able to call methods such as this.setstate
         this.changeRootElement = this.changeRootElement.bind(this);
         this.returnToLastElement = this.returnToLastElement.bind(this);
     }
 
+    generaldata = {};
+
+    componentDidMount() {
+        const updateRequest = new FormData();
+        updateRequest.append('action', 'loadInitialData');
+
+        fetch('/api/Settings.php', {method: 'POST', body: updateRequest})
+            .then((response) => response.json()
+                .then((result) => {
+                    this.generaldata = {
+                        videopath: result.video_path,
+                        tvshowpath: result.episode_path,
+                        mediacentername: result.mediacenter_name
+                    };
+
+                    this.setState({
+                        generalSettingsLoaded: true,
+                        passwordsupport: result.passwordEnabled
+                    });
+                }));
+    }
+
     newElement = null;
 
+    constructViewBinding(){
+        return {
+            changeRootElement: this.changeRootElement,
+            returnToLastElement: this.returnToLastElement,
+            generalsettings: this.generaldata
+        };
+    }
+
     MainBody() {
         let page;
         if (this.state.page === "default") {
-            page = <HomePage viewbinding={{
-                changeRootElement: this.changeRootElement,
-                returnToLastElement: this.returnToLastElement
-            }}/>;
+            page = <HomePage viewbinding={this.constructViewBinding()}/>;
             this.mypage = page;
         } else if (this.state.page === "random") {
-            page = <RandomPage viewbinding={{
-                changeRootElement: this.changeRootElement,
-                returnToLastElement: this.returnToLastElement
-            }}/>;
+            page = <RandomPage viewbinding={this.constructViewBinding()}/>;
             this.mypage = page;
         } else if (this.state.page === "settings") {
             page = <SettingsPage/>;
             this.mypage = page;
         } else if (this.state.page === "categories") {
-            page = <CategoryPage viewbinding={{
-                changeRootElement: this.changeRootElement,
-                returnToLastElement: this.returnToLastElement
-            }}/>;
+            page = <CategoryPage viewbinding={this.constructViewBinding()}/>;
             this.mypage = page;
         } else if (this.state.page === "video") {
             // show videoelement if neccessary
@@ -90,7 +115,7 @@ class App extends React.Component {
                         </li>
                     </ul>
                 </nav>
-                {this.MainBody()}
+                {this.state.generalSettingsLoaded ? this.MainBody() : "loading"}
             </div>
         );
     }

src/App.test.js

@@ -20,6 +20,7 @@ describe('<App/>', function () {
 
     it('simulate video view change ', function () {
         const wrapper = shallow(<App/>);
+        wrapper.setState({generalSettingsLoaded: true}); // simulate fetch to have already finisheed
 
         wrapper.instance().changeRootElement(<div id='testit'></div>);
 
@@ -28,6 +29,7 @@ describe('<App/>', function () {
 
     it('test hide video again', function () {
         const wrapper = shallow(<App/>);
+        wrapper.setState({generalSettingsLoaded: true}); // simulate fetch to have already finisheed
 
         wrapper.instance().changeRootElement(<div id='testit'></div>);
 
@@ -40,6 +42,7 @@ describe('<App/>', function () {
 
     it('test fallback to last loaded page', function () {
         const wrapper = shallow(<App/>);
+        wrapper.setState({generalSettingsLoaded: true}); // simulate fetch to have already finisheed
 
         wrapper.find(".nav-link").findWhere(t => t.text() === "Random Video" && t.type() === "div").simulate("click");
 
@@ -54,6 +57,8 @@ describe('<App/>', function () {
 
     it('test home click', function () {
         const wrapper = shallow(<App/>);
+        wrapper.setState({generalSettingsLoaded: true}); // simulate fetch to have already finisheed
+
         wrapper.setState({page: "wrongvalue"});
         expect(wrapper.find("HomePage")).toHaveLength(0);
         wrapper.find(".nav-link").findWhere(t => t.text() === "Home" && t.type() === "div").simulate("click");
@@ -62,6 +67,7 @@ describe('<App/>', function () {
 
     it('test category click', function () {
         const wrapper = shallow(<App/>);
+        wrapper.setState({generalSettingsLoaded: true}); // simulate fetch to have already finisheed
 
         expect(wrapper.find("CategoryPage")).toHaveLength(0);
         wrapper.find(".nav-link").findWhere(t => t.text() === "Categories" && t.type() === "div").simulate("click");
@@ -70,6 +76,7 @@ describe('<App/>', function () {
 
     it('test settings click', function () {
         const wrapper = shallow(<App/>);
+        wrapper.setState({generalSettingsLoaded: true}); // simulate fetch to have already finisheed
 
         expect(wrapper.find("SettingsPage")).toHaveLength(0);
         wrapper.find(".nav-link").findWhere(t => t.text() === "Settings" && t.type() === "div").simulate("click");