From 75ae0d7d8bce230d8259676a8128c2fabeb099ce Mon Sep 17 00:00:00 2001
From: lukas <lukas.heiligenbrunner@gmail.com>
Date: Wed, 8 Jul 2020 19:33:23 +0200
Subject: [PATCH] use css modules add a mediacenter-name field use state for
 reindex-btn greyout

---
 src/pages/SettingsPage/GeneralSettings.css    |  3 ---
 src/pages/SettingsPage/GeneralSettings.js     | 10 +++++++---
 .../SettingsPage/GeneralSettings.module.css   |  8 ++++++++
 src/pages/SettingsPage/MovieSettings.js       | 20 ++++++++-----------
 ...eSettings.css => MovieSettings.module.css} |  2 +-
 src/pages/SettingsPage/SettingsPage.js        | 14 ++++++-------
 ...ttingsPage.css => SettingsPage.module.css} |  0
 7 files changed, 31 insertions(+), 26 deletions(-)
 delete mode 100644 src/pages/SettingsPage/GeneralSettings.css
 create mode 100644 src/pages/SettingsPage/GeneralSettings.module.css
 rename src/pages/SettingsPage/{MovieSettings.css => MovieSettings.module.css} (99%)
 rename src/pages/SettingsPage/{SettingsPage.css => SettingsPage.module.css} (100%)

diff --git a/src/pages/SettingsPage/GeneralSettings.css b/src/pages/SettingsPage/GeneralSettings.css
deleted file mode 100644
index 2d3d496..0000000
--- a/src/pages/SettingsPage/GeneralSettings.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.GeneralForm {
-    width: 60%;
-}
\ No newline at end of file
diff --git a/src/pages/SettingsPage/GeneralSettings.js b/src/pages/SettingsPage/GeneralSettings.js
index 978fa59..7e1d914 100644
--- a/src/pages/SettingsPage/GeneralSettings.js
+++ b/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;
\ No newline at end of file
+export default GeneralSettings;
diff --git a/src/pages/SettingsPage/GeneralSettings.module.css b/src/pages/SettingsPage/GeneralSettings.module.css
new file mode 100644
index 0000000..b6c8eb3
--- /dev/null
+++ b/src/pages/SettingsPage/GeneralSettings.module.css
@@ -0,0 +1,8 @@
+.GeneralForm {
+    width: 60%;
+}
+
+.mediacenternameform{
+    margin-top: 25px;
+    width: 40%;
+}
diff --git a/src/pages/SettingsPage/MovieSettings.js b/src/pages/SettingsPage/MovieSettings.js
index 76d0e1c..f563ec0 100644
--- a/src/pages/SettingsPage/MovieSettings.js
+++ b/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;
-        btn.disabled = true;
+        this.setState({startbtnDisabled: 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;
-                        btn.disabled = false;
+                        this.setState({startbtnDisabled: false});
                     }
                 }))
             .catch(() => {
@@ -90,4 +86,4 @@ class MovieSettings extends React.Component {
     };
 }
 
-export default MovieSettings;
\ No newline at end of file
+export default MovieSettings;
diff --git a/src/pages/SettingsPage/MovieSettings.css b/src/pages/SettingsPage/MovieSettings.module.css
similarity index 99%
rename from src/pages/SettingsPage/MovieSettings.css
rename to src/pages/SettingsPage/MovieSettings.module.css
index 6265fbf..4551e8d 100644
--- a/src/pages/SettingsPage/MovieSettings.css
+++ b/src/pages/SettingsPage/MovieSettings.module.css
@@ -10,4 +10,4 @@
     width: 50%;
     background-color: #c2c2c2;
     border-radius: 5px;
-}
\ No newline at end of file
+}
diff --git a/src/pages/SettingsPage/SettingsPage.js b/src/pages/SettingsPage/SettingsPage.js
index f3543a0..d93954b 100644
--- a/src/pages/SettingsPage/SettingsPage.js
+++ b/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='SettingsSidebarTitle'>Settings</div>
+                <div className={style.SettingsSidebar}>
+                    <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>
diff --git a/src/pages/SettingsPage/SettingsPage.css b/src/pages/SettingsPage/SettingsPage.module.css
similarity index 100%
rename from src/pages/SettingsPage/SettingsPage.css
rename to src/pages/SettingsPage/SettingsPage.module.css