new settingspage sidebar with general and moviesettings

src/pages/SettingsPage/SettingsPage.js

@@ -1,82 +1,50 @@
 import React from "react";
-import PageTitle from "../../elements/PageTitle/PageTitle";
+import MovieSettings from "./MovieSettings";
+import GeneralSettings from "./GeneralSettings";
+import "./SettingsPage.css"
 
 
 class SettingsPage extends React.Component {
     constructor(props, context) {
         super(props, context);
+
         this.state = {
-            text: []
+            currentpage: "general"
         };
     }
 
-    updateStatus = () => {
-        const updateRequest = new FormData();
-        fetch('/api/extractionData.php', {method: 'POST', body: updateRequest})
-            .then((response) => response.json()
-                .then((result) => {
-                    if (result.contentAvailable === true) {
-                        console.log(result);
-                        this.setState({
-                            text: [...result.message.split("\n"),
-                                ...this.state.text]
-                        });
-                    } else {
-                        clearInterval(this.myinterval);
-                    }
-                }))
-            .catch(() => {
-                console.log("no connection to backend");
-            });
-    };
-
-    componentDidMount() {
-        if (this.myinterval) {
-            clearInterval(this.myinterval);
+    getContent() {
+        switch (this.state.currentpage) {
+            case "general":
+                return <GeneralSettings/>;
+            case "movies":
+                return <MovieSettings/>;
+            default:
+                return "unknown button clicked";
         }
-        this.myinterval = setInterval(this.updateStatus, 1000);
-    }
-
-    componentWillUnmount() {
-        clearInterval(this.myinterval);
     }
 
     render() {
         return (
             <div>
-                <PageTitle
-                    title='Settings Page'
-                    subtitle='todo'/>
-
-                <button className='reindexbtn btn btn-success' onClick={() => {
-                    this.startReindex()
-                }}>Reindex Movies
-                </button>
-                <div className='indextextarea'>{this.state.text.map(m => (
-                    <div className='textarea-element'>{m}</div>
-                ))}</div>
+                <div className='SettingsSidebar'>
+                    <div className='SettingsSidebarTitle'>Settings</div>
+                    <div onClick={() => this.setState({currentpage: "general"})}
+                         className='SettingSidebarElement'>General
+                    </div>
+                    <div onClick={() => this.setState({currentpage: "movies"})}
+                         className='SettingSidebarElement'>Movies
+                    </div>
+                    <div onClick={() => this.setState({currentpage: "tv"})}
+                         className='SettingSidebarElement'>TV Shows
+                    </div>
+                </div>
+                <div className='SettingsContent'>
+                    {this.getContent()}
+                </div>
             </div>
         );
     }
-
-    startReindex() {
-        console.log("starting");
-        const updateRequest = new FormData();
-        // fetch all videos available
-        fetch('/api/extractvideopreviews.php', {method: 'POST', body: updateRequest})
-            .then((response) => response.json()
-                .then((result) => {
-                    console.log("returned");
-                }))
-            .catch(() => {
-                console.log("no connection to backend");
-            });
-        if (this.myinterval) {
-            clearInterval(this.myinterval);
-        }
-        this.myinterval = setInterval(this.updateStatus, 1000);
-        console.log("sent");
-    }
 }
 
 export default SettingsPage;