From 720c218a1196c9cd3abcd41647673aea99a88292 Mon Sep 17 00:00:00 2001
From: Lukas Heiligenbrunner <lukas.heiligenbrunner@gmail.com>
Date: Wed, 8 Jul 2020 00:14:08 +0200
Subject: [PATCH] moved all css files to module files to seperate into
 namespaces and prevent name overlaps

---
 package.json                                  |  2 +-
 src/elements/PageTitle/PageTitle.js           |  8 +++---
 .../{PageTitle.css => PageTitle.module.css}   |  0
 src/elements/Preview/Preview.js               | 18 ++++++-------
 .../{Preview.css => Preview.module.css}       |  0
 src/elements/SideBar/SideBar.js               | 20 ++++++++++++--
 .../{SideBar.css => SideBar.module.css}       |  0
 src/elements/Tag/Tag.js                       |  4 +--
 src/elements/Tag/{Tag.css => Tag.module.css}  |  0
 src/elements/VideoContainer/VideoContainer.js |  3 ++-
 .../VideoContainer/VideoContainer.module.css  |  4 +++
 src/pages/CategoryPage/CategoryPage.js        |  7 ++---
 src/pages/HomePage/HomePage.js                | 26 +++++++++----------
 .../{HomePage.css => HomePage.module.css}     |  5 ----
 src/pages/Player/Player.js                    | 22 +++++++---------
 .../Player/{Player.css => Player.module.css}  | 11 --------
 src/pages/RandomPage/RandomPage.js            | 10 +++----
 .../{RandomPage.css => RandomPage.module.css} |  0
 18 files changed, 72 insertions(+), 68 deletions(-)
 rename src/elements/PageTitle/{PageTitle.css => PageTitle.module.css} (100%)
 rename src/elements/Preview/{Preview.css => Preview.module.css} (100%)
 rename src/elements/SideBar/{SideBar.css => SideBar.module.css} (100%)
 rename src/elements/Tag/{Tag.css => Tag.module.css} (100%)
 create mode 100644 src/elements/VideoContainer/VideoContainer.module.css
 rename src/pages/HomePage/{HomePage.css => HomePage.module.css} (67%)
 rename src/pages/Player/{Player.css => Player.module.css} (63%)
 rename src/pages/RandomPage/{RandomPage.css => RandomPage.module.css} (100%)

diff --git a/package.json b/package.json
index e2c5e69..c13873a 100644
--- a/package.json
+++ b/package.json
@@ -27,7 +27,7 @@
       "text-summary"
     ]
   },
-  "proxy": "http://192.168.0.248",
+  "proxy": "http://192.168.0.42",
   "homepage": "/",
   "eslintConfig": {
     "extends": "react-app"
diff --git a/src/elements/PageTitle/PageTitle.js b/src/elements/PageTitle/PageTitle.js
index b7ef224..cce4ec9 100644
--- a/src/elements/PageTitle/PageTitle.js
+++ b/src/elements/PageTitle/PageTitle.js
@@ -1,5 +1,5 @@
 import React from "react";
-import "./PageTitle.css"
+import style from "./PageTitle.module.css"
 
 class PageTitle extends React.Component {
     constructor(props) {
@@ -11,9 +11,9 @@ class PageTitle extends React.Component {
 
     render() {
         return (
-            <div className='pageheader'>
-                <span className='pageheadertitle'>{this.props.title}</span>
-                <span className='pageheadersubtitle'>{this.props.subtitle}</span>
+            <div className={style.pageheader}>
+                <span className={style.pageheadertitle}>{this.props.title}</span>
+                <span className={style.pageheadersubtitle}>{this.props.subtitle}</span>
                 <>
                     {this.props.children}
                 </>
diff --git a/src/elements/PageTitle/PageTitle.css b/src/elements/PageTitle/PageTitle.module.css
similarity index 100%
rename from src/elements/PageTitle/PageTitle.css
rename to src/elements/PageTitle/PageTitle.module.css
diff --git a/src/elements/Preview/Preview.js b/src/elements/Preview/Preview.js
index c3a6810..03bbf9b 100644
--- a/src/elements/Preview/Preview.js
+++ b/src/elements/Preview/Preview.js
@@ -1,5 +1,5 @@
 import React from "react";
-import "./Preview.css";
+import style from "./Preview.module.css";
 import Player from "../../pages/Player/Player";
 import {Spinner} from "react-bootstrap";
 
@@ -38,17 +38,17 @@ class Preview extends React.Component {
 
     render() {
         return (
-            <div className='videopreview' onClick={() => this.itemClick()}>
-                <div className='previewtitle'>{this.state.name}</div>
-                <div className='previewpic'>
+            <div className={style.videopreview} onClick={() => this.itemClick()}>
+                <div className={style.previewtitle}>{this.state.name}</div>
+                <div className={style.previewpic}>
                     {this.state.previewpicture != null ?
-                        <img className='previewimage'
+                        <img className={style.previewimage}
                              src={this.state.previewpicture}
                              alt='Pic loading.'/> :
-                        <span className='loadAnimation'><Spinner animation="border"/></span>}
+                        <span className={style.loadAnimation}><Spinner animation="border"/></span>}
 
                 </div>
-                <div className='previewbottom'>
+                <div className={style.previewbottom}>
 
                 </div>
             </div>
@@ -68,8 +68,8 @@ class Preview extends React.Component {
 export class TagPreview extends React.Component {
     render() {
         return (
-            <div className='videopreview tagpreview' onClick={() => this.itemClick()}>
-                <div className='tagpreviewtitle'>
+            <div className={style.videopreview + ' ' + style.tagpreview} onClick={() => this.itemClick()}>
+                <div className={style.tagpreviewtitle}>
                     {this.props.name}
                 </div>
             </div>
diff --git a/src/elements/Preview/Preview.css b/src/elements/Preview/Preview.module.css
similarity index 100%
rename from src/elements/Preview/Preview.css
rename to src/elements/Preview/Preview.module.css
diff --git a/src/elements/SideBar/SideBar.js b/src/elements/SideBar/SideBar.js
index 9899adf..9375f33 100644
--- a/src/elements/SideBar/SideBar.js
+++ b/src/elements/SideBar/SideBar.js
@@ -1,12 +1,28 @@
 import React from "react";
-import "./SideBar.css"
+import style from "./SideBar.module.css"
 
 class SideBar extends React.Component {
     render() {
-        return (<div className='sideinfo'>
+        return (<div className={style.sideinfo}>
             {this.props.children}
         </div>);
     }
 }
 
+export class SideBarTitle extends React.Component {
+    render() {
+        return (
+            <div className={style.sidebartitle}>{this.props.children}</div>
+        );
+    }
+}
+
+export class SideBarItem extends React.Component {
+    render() {
+        return (
+            <div className={style.sidebarinfo}>{this.props.children}</div>
+        );
+    }
+}
+
 export default SideBar;
diff --git a/src/elements/SideBar/SideBar.css b/src/elements/SideBar/SideBar.module.css
similarity index 100%
rename from src/elements/SideBar/SideBar.css
rename to src/elements/SideBar/SideBar.module.css
diff --git a/src/elements/Tag/Tag.js b/src/elements/Tag/Tag.js
index db6a6b5..d4885da 100644
--- a/src/elements/Tag/Tag.js
+++ b/src/elements/Tag/Tag.js
@@ -1,12 +1,12 @@
 import React from "react";
 
-import "./Tag.css"
+import styles from "./Tag.module.css"
 import CategoryPage from "../../pages/CategoryPage/CategoryPage";
 
 class Tag extends React.Component {
     render() {
         return (
-            <button className='tagbtn' onClick={() => this.TagClick()}
+            <button className={styles.tagbtn} onClick={() => this.TagClick()}
                     data-testid="Test-Tag">{this.props.children}</button>
         );
     }
diff --git a/src/elements/Tag/Tag.css b/src/elements/Tag/Tag.module.css
similarity index 100%
rename from src/elements/Tag/Tag.css
rename to src/elements/Tag/Tag.module.css
diff --git a/src/elements/VideoContainer/VideoContainer.js b/src/elements/VideoContainer/VideoContainer.js
index 66dee33..49b820c 100644
--- a/src/elements/VideoContainer/VideoContainer.js
+++ b/src/elements/VideoContainer/VideoContainer.js
@@ -1,5 +1,6 @@
 import React from "react";
 import Preview from "../Preview/Preview";
+import style from "./VideoContainer.module.css"
 
 class VideoContainer extends React.Component {
     constructor(props, context) {
@@ -24,7 +25,7 @@ class VideoContainer extends React.Component {
 
     render() {
         return (
-            <div className='maincontent'>
+            <div className={style.maincontent}>
                 {this.state.loadeditems.map(elem => (
                     <Preview
                         key={elem.movie_id}
diff --git a/src/elements/VideoContainer/VideoContainer.module.css b/src/elements/VideoContainer/VideoContainer.module.css
new file mode 100644
index 0000000..972756a
--- /dev/null
+++ b/src/elements/VideoContainer/VideoContainer.module.css
@@ -0,0 +1,4 @@
+.maincontent {
+    float: left;
+    width: 70%;
+}
\ No newline at end of file
diff --git a/src/pages/CategoryPage/CategoryPage.js b/src/pages/CategoryPage/CategoryPage.js
index 59d37f8..8ca56d1 100644
--- a/src/pages/CategoryPage/CategoryPage.js
+++ b/src/pages/CategoryPage/CategoryPage.js
@@ -1,6 +1,7 @@
 import React from "react";
-import SideBar from "../../elements/SideBar/SideBar";
+import SideBar, {SideBarTitle} from "../../elements/SideBar/SideBar";
 import Tag from "../../elements/Tag/Tag";
+import videocontainerstyle from "../../elements/VideoContainer/VideoContainer.module.css"
 
 import {TagPreview} from "../../elements/Preview/Preview";
 import NewTagPopup from "../../elements/NewTagPopup/NewTagPopup";
@@ -34,7 +35,7 @@ class CategoryPage extends React.Component {
                     subtitle={!this.state.selected ? this.state.loadedtags.length + " different Tags" : this.state.selected}/>
 
                 <SideBar>
-                    <div className='sidebartitle'>Default Tags:</div>
+                    <SideBarTitle>Default Tags:</SideBarTitle>
                     <Tag viewbinding={{
                         changeRootElement: (e) => {
                             this.loadTag(e.props.category)
@@ -72,7 +73,7 @@ class CategoryPage extends React.Component {
                                 onClick={this.loadCategoryPageDefault}>Back
                         </button>
                     </> :
-                    <div className='maincontent'>
+                    <div className={videocontainerstyle.maincontent}>
                         {this.state.loadedtags ?
                             this.state.loadedtags.map((m) => (
                                 <TagPreview
diff --git a/src/pages/HomePage/HomePage.js b/src/pages/HomePage/HomePage.js
index d95a511..9b1f056 100644
--- a/src/pages/HomePage/HomePage.js
+++ b/src/pages/HomePage/HomePage.js
@@ -1,9 +1,9 @@
 import React from "react";
-import SideBar from "../../elements/SideBar/SideBar";
+import SideBar, {SideBarTitle, SideBarItem} from "../../elements/SideBar/SideBar";
 import Tag from "../../elements/Tag/Tag";
 import VideoContainer from "../../elements/VideoContainer/VideoContainer";
 
-import "./HomePage.css"
+import style from "./HomePage.module.css"
 import PageTitle from "../../elements/PageTitle/PageTitle";
 
 class HomePage extends React.Component {
@@ -120,11 +120,11 @@ class HomePage extends React.Component {
 
     render() {
         return (
-            <div>
+            <>
                 <PageTitle
                     title='Home Page'
                     subtitle={this.state.tag + " Videos - " + this.state.selectionnr}>
-                    <form className="form-inline searchform" onSubmit={(e) => {
+                    <form className={"form-inline " + style.searchform} onSubmit={(e) => {
                         e.preventDefault();
                         this.searchVideos(this.keyword);
                     }}>
@@ -137,15 +137,15 @@ class HomePage extends React.Component {
                     </form>
                 </PageTitle>
                 <SideBar>
-                    <div className='sidebartitle'>Infos:</div>
+                    <SideBarTitle>Infos:</SideBarTitle>
                     <hr/>
-                    <div className='sidebarinfo'><b>{this.state.sideinfo.videonr}</b> Videos Total!</div>
-                    <div className='sidebarinfo'><b>{this.state.sideinfo.fullhdvideonr}</b> FULL-HD Videos!</div>
-                    <div className='sidebarinfo'><b>{this.state.sideinfo.hdvideonr}</b> HD Videos!</div>
-                    <div className='sidebarinfo'><b>{this.state.sideinfo.sdvideonr}</b> SD Videos!</div>
-                    <div className='sidebarinfo'><b>{this.state.sideinfo.tagnr}</b> different Tags!</div>
+                    <SideBarItem><b>{this.state.sideinfo.videonr}</b> Videos Total!</SideBarItem>
+                    <SideBarItem><b>{this.state.sideinfo.fullhdvideonr}</b> FULL-HD Videos!</SideBarItem>
+                    <SideBarItem><b>{this.state.sideinfo.hdvideonr}</b> HD Videos!</SideBarItem>
+                    <SideBarItem><b>{this.state.sideinfo.sdvideonr}</b> SD Videos!</SideBarItem>
+                    <SideBarItem><b>{this.state.sideinfo.tagnr}</b> different Tags!</SideBarItem>
                     <hr/>
-                    <div className='sidebartitle'>Default Tags:</div>
+                    <SideBarTitle>Default Tags:</SideBarTitle>
                     <Tag viewbinding={this.props.viewbinding}>All</Tag>
                     <Tag viewbinding={this.props.viewbinding}>FullHd</Tag>
                     <Tag viewbinding={this.props.viewbinding}>LowQuality</Tag>
@@ -156,11 +156,11 @@ class HomePage extends React.Component {
                         data={this.state.data}
                         viewbinding={this.props.viewbinding}/> :
                     <div>No Data found!</div>}
-                <div className='rightinfo'>
+                <div className={style.rightinfo}>
 
                 </div>
 
-            </div>
+            </>
         );
     }
 }
diff --git a/src/pages/HomePage/HomePage.css b/src/pages/HomePage/HomePage.module.css
similarity index 67%
rename from src/pages/HomePage/HomePage.css
rename to src/pages/HomePage/HomePage.module.css
index 1b4b6a5..977257e 100644
--- a/src/pages/HomePage/HomePage.css
+++ b/src/pages/HomePage/HomePage.module.css
@@ -1,8 +1,3 @@
-.maincontent {
-    float: left;
-    width: 70%;
-}
-
 .rightinfo {
     float: left;
     width: 10%;
diff --git a/src/pages/Player/Player.js b/src/pages/Player/Player.js
index 1883160..c486804 100644
--- a/src/pages/Player/Player.js
+++ b/src/pages/Player/Player.js
@@ -1,7 +1,7 @@
 import React from "react";
-import "./Player.css"
+import style from "./Player.module.css"
 import {PlyrComponent} from 'plyr-react';
-import SideBar from "../../elements/SideBar/SideBar";
+import SideBar, {SideBarTitle, SideBarItem} from "../../elements/SideBar/SideBar";
 import Tag from "../../elements/Tag/Tag";
 import AddTagPopup from "../../elements/AddTagPopup/AddTagPopup";
 import PageTitle from "../../elements/PageTitle/PageTitle";
@@ -52,17 +52,15 @@ class Player extends React.Component {
                     subtitle={this.state.movie_name}/>
 
                 <SideBar>
-                    <div className='sidebartitle'>Infos:</div>
+                    <SideBarTitle>Infos:</SideBarTitle>
                     <hr/>
-                    <div className='sidebarinfo'><b>{this.state.likes}</b> Likes!</div>
+                    <SideBarItem><b>{this.state.likes}</b> Likes!</SideBarItem>
                     {this.state.quality !== 0 ?
-                        <div className='sidebarinfo'><b>{this.state.quality}p</b> Quality!
-                        </div> : null}
+                        <SideBarItem><b>{this.state.quality}p</b> Quality!</SideBarItem> : null}
                     {this.state.length !== 0 ?
-                        <div className='sidebarinfo'><b>{Math.round(this.state.length / 60)}</b> Minutes of length!
-                        </div> : null}
+                        <SideBarItem><b>{Math.round(this.state.length / 60)}</b> Minutes of length!</SideBarItem>: null}
                     <hr/>
-                    <div className='sidebartitle'>Tags:</div>
+                    <SideBarTitle>Tags:</SideBarTitle>
                     {this.state.tags.map((m) => (
                         <Tag
                             key={m.tag_name}
@@ -70,14 +68,14 @@ class Player extends React.Component {
                     ))}
                 </SideBar>
 
-                <div className="videowrapper">
+                <div className={style.videowrapper}>
                     {/* video component is added here */}
                     {this.state.sources ? <PlyrComponent
                             className='myvideo'
                             sources={this.state.sources}
                             options={this.options}/> :
                         <div>not loaded yet</div>}
-                    <div className='videoactions'>
+                    <div className={style.videoactions}>
                         <button className='btn btn-primary' onClick={() => this.likebtn()}>Like this Video!</button>
                         <button className='btn btn-info' onClick={() => this.setState({popupvisible: true})}>Give this
                             Video a Tag
@@ -94,7 +92,7 @@ class Player extends React.Component {
 
                     </div>
                 </div>
-                <button className="closebutton" onClick={() => this.closebtn()}>Close</button>
+                <button className={style.closebutton} onClick={() => this.closebtn()}>Close</button>
             </div>
         );
     }
diff --git a/src/pages/Player/Player.css b/src/pages/Player/Player.module.css
similarity index 63%
rename from src/pages/Player/Player.css
rename to src/pages/Player/Player.module.css
index 134cefd..a313388 100644
--- a/src/pages/Player/Player.css
+++ b/src/pages/Player/Player.module.css
@@ -8,17 +8,6 @@
     margin-left: 25px;
 }
 
-.likefield {
-    margin-top: 15px;
-    margin-left: 15px;
-    margin-right: 15px;
-    height: 30px;
-    background-color: #9e5353;
-    border-radius: 10px;
-    text-align: center;
-    color: white;
-}
-
 .videowrapper {
     margin-left: 20px;
     display: block;
diff --git a/src/pages/RandomPage/RandomPage.js b/src/pages/RandomPage/RandomPage.js
index 3261aa5..9420dad 100644
--- a/src/pages/RandomPage/RandomPage.js
+++ b/src/pages/RandomPage/RandomPage.js
@@ -1,7 +1,7 @@
 import React from "react";
 import Preview from "../../elements/Preview/Preview";
-import "./RandomPage.css"
-import SideBar from "../../elements/SideBar/SideBar";
+import style from "./RandomPage.module.css"
+import SideBar, {SideBarTitle} from "../../elements/SideBar/SideBar";
 import Tag from "../../elements/Tag/Tag";
 import PageTitle from "../../elements/PageTitle/PageTitle";
 
@@ -27,7 +27,7 @@ class RandomPage extends React.Component {
                     subtitle='4pc'/>
 
                 <SideBar>
-                    <div className='sidebartitle'>Visible Tags:</div>
+                    <SideBarTitle>Visible Tags:</SideBarTitle>
                     {this.state.tags.map((m) => (
                         <Tag
                             key={m.tag_name}
@@ -43,8 +43,8 @@ class RandomPage extends React.Component {
                             movie_id={elem.movie_id}
                             viewbinding={this.props.viewbinding}/>
                     ))}
-                    <div className='Shufflebutton'>
-                        <button onClick={() => this.shuffleclick()} className='btnshuffle'>Shuffle</button>
+                    <div className={style.Shufflebutton}>
+                        <button onClick={() => this.shuffleclick()} className={style.btnshuffle}>Shuffle</button>
                     </div>
                 </div>
             </div>
diff --git a/src/pages/RandomPage/RandomPage.css b/src/pages/RandomPage/RandomPage.module.css
similarity index 100%
rename from src/pages/RandomPage/RandomPage.css
rename to src/pages/RandomPage/RandomPage.module.css