use css modules

add a mediacenter-name field
use state for reindex-btn greyout

src/pages/SettingsPage/GeneralSettings.css

@@ -1,3 +0,0 @@
-.GeneralForm {
-    width: 60%;
-}

src/pages/SettingsPage/GeneralSettings.js

@@ -1,6 +1,6 @@
 import React from "react";
 import {Form, Col, Button} from "react-bootstrap";
-import "./GeneralSettings.css"
+import style from "./GeneralSettings.module.css"
 
 class GeneralSettings extends React.Component {
     constructor(props) {
@@ -28,7 +28,7 @@ class GeneralSettings extends React.Component {
     render() {
         return (
             <>
-                <div className='GeneralForm'>
+                <div className={style.GeneralForm}>
                     <Form onSubmit={(e) => {
                         e.preventDefault();
                         this.saveSettings();
@@ -61,6 +61,10 @@ class GeneralSettings extends React.Component {
                             </Form.Group> : null
                         }
 
+                        <Form.Group className={style.mediacenternameform} controlId="passwordfield">
+                            <Form.Label>The name of the Mediacenter</Form.Label>
+                            <Form.Control type="text" placeholder="Mediacentername"/>
+                        </Form.Group>
 
                         <Button variant="primary" type="submit">
                             Submit
@@ -83,4 +87,4 @@ class GeneralSettings extends React.Component {
     }
 }
 
-export default GeneralSettings;
+export default GeneralSettings;

src/pages/SettingsPage/GeneralSettings.module.css

@@ -0,0 +1,8 @@
+.GeneralForm {
+    width: 60%;
+}
+
+.mediacenternameform{
+    margin-top: 25px;
+    width: 40%;
+}

src/pages/SettingsPage/MovieSettings.js

@@ -1,15 +1,14 @@
 import React from "react";
-import "./MovieSettings.css"
+import style from "./MovieSettings.module.css"
 
 class MovieSettings extends React.Component {
     constructor(props) {
         super(props);
 
         this.state = {
-            text: []
+            text: [],
+            startbtnDisabled: false
         };
-
-        this.startbtn = React.createRef();
     }
 
     componentDidMount() {
@@ -26,11 +25,11 @@ class MovieSettings extends React.Component {
     render() {
         return (
             <>
-                <button ref={this.startbtn} className='reindexbtn btn btn-success' onClick={() => {
+                <button disabled={this.state.startbtnDisabled} className='reindexbtn btn btn-success' onClick={() => {
                     this.startReindex()
                 }}>Reindex Movies
                 </button>
-                <div className='indextextarea'>{this.state.text.map(m => (
+                <div className={style.indextextarea}>{this.state.text.map(m => (
                     <div className='textarea-element'>{m}</div>
                 ))}</div>
             </>
@@ -41,8 +40,7 @@ class MovieSettings extends React.Component {
         // clear output text before start
         this.setState({text: []});
 
-        const btn = this.startbtn.current;
+        this.setState({startbtnDisabled: true});
-        btn.disabled = true;
 
         console.log("starting");
         const updateRequest = new FormData();
@@ -60,7 +58,6 @@ class MovieSettings extends React.Component {
             clearInterval(this.myinterval);
         }
         this.myinterval = setInterval(this.updateStatus, 1000);
-        console.log("sent");
     }
 
     updateStatus = () => {
@@ -80,8 +77,7 @@ class MovieSettings extends React.Component {
                         // clear refresh interval if no content available
                         clearInterval(this.myinterval);
 
-                        const btn = this.startbtn.current;
+                        this.setState({startbtnDisabled: false});
-                        btn.disabled = false;
                     }
                 }))
             .catch(() => {
@@ -90,4 +86,4 @@ class MovieSettings extends React.Component {
     };
 }
 
-export default MovieSettings;
+export default MovieSettings;

src/pages/SettingsPage/MovieSettings.module.css

@@ -10,4 +10,4 @@
     width: 50%;
     background-color: #c2c2c2;
     border-radius: 5px;
-}
+}

src/pages/SettingsPage/SettingsPage.js

@@ -1,7 +1,7 @@
 import React from "react";
 import MovieSettings from "./MovieSettings";
 import GeneralSettings from "./GeneralSettings";
-import "./SettingsPage.css"
+import style from "./SettingsPage.module.css"
 
 
 class SettingsPage extends React.Component {
@@ -29,19 +29,19 @@ class SettingsPage extends React.Component {
     render() {
         return (
             <div>
-                <div className='SettingsSidebar'>
+                <div className={style.SettingsSidebar}>
-                    <div className='SettingsSidebarTitle'>Settings</div>
+                    <div className={style.SettingsSidebarTitle}>Settings</div>
                     <div onClick={() => this.setState({currentpage: "general"})}
-                         className='SettingSidebarElement'>General
+                         className={style.SettingSidebarElement}>General
                     </div>
                     <div onClick={() => this.setState({currentpage: "movies"})}
-                         className='SettingSidebarElement'>Movies
+                         className={style.SettingSidebarElement}>Movies
                     </div>
                     <div onClick={() => this.setState({currentpage: "tv"})}
-                         className='SettingSidebarElement'>TV Shows
+                         className={style.SettingSidebarElement}>TV Shows
                     </div>
                 </div>
-                <div className='SettingsContent'>
+                <div className={style.SettingsContent}>
                     {this.getContent()}
                 </div>
             </div>