diff --git a/src/App.js b/src/App.js index d724803..0bc97e0 100644 --- a/src/App.js +++ b/src/App.js @@ -1,7 +1,7 @@ import React from 'react'; import HomePage from "./pages/HomePage/HomePage"; import RandomPage from "./pages/RandomPage/RandomPage"; -import StaticInfos from "./GlobalInfos"; +import GlobalInfos from "./GlobalInfos"; // include bootstraps css import 'bootstrap/dist/css/bootstrap.min.css'; @@ -33,7 +33,7 @@ class App extends React.Component { .then((response) => response.json() .then((result) => { // set theme - StaticInfos.enableDarkTheme(result.DarkMode); + GlobalInfos.enableDarkTheme(result.DarkMode); this.setState({ generalSettingsLoaded: true, @@ -83,7 +83,7 @@ class App extends React.Component { } render() { - const themeStyle = StaticInfos.getThemeStyle(); + const themeStyle = GlobalInfos.getThemeStyle(); // add the main theme to the page body document.body.className = themeStyle.backgroundcolor; return ( diff --git a/src/GlobalInfos.js b/src/GlobalInfos.js index b1cbf57..af86c41 100644 --- a/src/GlobalInfos.js +++ b/src/GlobalInfos.js @@ -1,7 +1,7 @@ import darktheme from "./AppDarkTheme.module.css"; import lighttheme from "./AppLightTheme.module.css"; -class GlobalInfos { +class StaticInfos { #darktheme = true; isDarkTheme() { @@ -17,7 +17,7 @@ class GlobalInfos { } } -const StaticInfos = new GlobalInfos(); +const GlobalInfos = new StaticInfos(); //Object.freeze(StaticInfos); -export default StaticInfos; +export default GlobalInfos; diff --git a/src/GlobalInfos.test.js b/src/GlobalInfos.test.js new file mode 100644 index 0000000..c87cf85 --- /dev/null +++ b/src/GlobalInfos.test.js @@ -0,0 +1,24 @@ +import React from "react"; +import GlobalInfos from "./GlobalInfos"; + +describe('', function () { + it('always same instance ', function () { + GlobalInfos.enableDarkTheme(true); + + expect(GlobalInfos.isDarkTheme()).toBe(true); + + GlobalInfos.enableDarkTheme(false); + + expect(GlobalInfos.isDarkTheme()).toBe(false); + }); + + it('test default theme', function () { + expect(GlobalInfos.isDarkTheme()).toBe(false); + }); + + it('test receive of stylesheet', function () { + const style = GlobalInfos.getThemeStyle(); + + expect(style.navitem).not.toBeNull(); + }); +}); diff --git a/src/elements/PageTitle/PageTitle.js b/src/elements/PageTitle/PageTitle.js index 9e55b68..a71d946 100644 --- a/src/elements/PageTitle/PageTitle.js +++ b/src/elements/PageTitle/PageTitle.js @@ -1,6 +1,6 @@ import React from "react"; import style from "./PageTitle.module.css" -import StaticInfos from "../../GlobalInfos"; +import GlobalInfos from "../../GlobalInfos"; class PageTitle extends React.Component { constructor(props) { @@ -11,7 +11,7 @@ class PageTitle extends React.Component { } render() { - const themeStyle = StaticInfos.getThemeStyle(); + const themeStyle = GlobalInfos.getThemeStyle(); return (
{this.props.title} @@ -31,7 +31,7 @@ class PageTitle extends React.Component { */ export class Line extends React.Component { render() { - const themeStyle = StaticInfos.getThemeStyle(); + const themeStyle = GlobalInfos.getThemeStyle(); return ( <>
diff --git a/src/elements/Preview/Preview.js b/src/elements/Preview/Preview.js index 7b05016..82cbadf 100644 --- a/src/elements/Preview/Preview.js +++ b/src/elements/Preview/Preview.js @@ -2,7 +2,7 @@ import React from "react"; import style from "./Preview.module.css"; import Player from "../../pages/Player/Player"; import {Spinner} from "react-bootstrap"; -import StaticInfos from "../../GlobalInfos"; +import GlobalInfos from "../../GlobalInfos"; class Preview extends React.Component { constructor(props, context) { @@ -34,7 +34,7 @@ class Preview extends React.Component { } render() { - const themeStyle = StaticInfos.getThemeStyle(); + const themeStyle = GlobalInfos.getThemeStyle(); return (
this.itemClick()}>
{this.state.name}
@@ -65,7 +65,7 @@ class Preview extends React.Component { export class TagPreview extends React.Component { render() { - const themeStyle = StaticInfos.getThemeStyle(); + const themeStyle = GlobalInfos.getThemeStyle(); return (
this.itemClick()}>
diff --git a/src/elements/Preview/Preview.module.css b/src/elements/Preview/Preview.module.css index d8f73f9..a369f71 100644 --- a/src/elements/Preview/Preview.module.css +++ b/src/elements/Preview/Preview.module.css @@ -42,7 +42,6 @@ .videopreview:hover { opacity: 1; - /*box-shadow: rgba(2, 12, 27, 0.7) 0 0 0 5px;*/ transition: all 300ms; } diff --git a/src/elements/SideBar/SideBar.js b/src/elements/SideBar/SideBar.js index 738391c..1b050a8 100644 --- a/src/elements/SideBar/SideBar.js +++ b/src/elements/SideBar/SideBar.js @@ -1,10 +1,10 @@ import React from "react"; import style from "./SideBar.module.css" -import StaticInfos from "../../GlobalInfos"; +import GlobalInfos from "../../GlobalInfos"; class SideBar extends React.Component { render() { - const themeStyle = StaticInfos.getThemeStyle(); + const themeStyle = GlobalInfos.getThemeStyle(); return (
{this.props.children}
); @@ -13,7 +13,7 @@ class SideBar extends React.Component { export class SideBarTitle extends React.Component { render() { - const themeStyle = StaticInfos.getThemeStyle(); + const themeStyle = GlobalInfos.getThemeStyle(); return (
{this.props.children}
); @@ -22,7 +22,7 @@ export class SideBarTitle extends React.Component { export class SideBarItem extends React.Component { render() { - const themeStyle = StaticInfos.getThemeStyle(); + const themeStyle = GlobalInfos.getThemeStyle(); return (
{this.props.children}
); diff --git a/src/pages/SettingsPage/GeneralSettings.js b/src/pages/SettingsPage/GeneralSettings.js index 75eecbc..39f5a26 100644 --- a/src/pages/SettingsPage/GeneralSettings.js +++ b/src/pages/SettingsPage/GeneralSettings.js @@ -1,7 +1,7 @@ import React from "react"; import {Button, Col, Form} from "react-bootstrap"; import style from "./GeneralSettings.module.css" -import StaticInfos from "../../GlobalInfos"; +import GlobalInfos from "../../GlobalInfos"; class GeneralSettings extends React.Component { constructor(props) { @@ -38,7 +38,7 @@ class GeneralSettings extends React.Component { } render() { - const themeStyle = StaticInfos.getThemeStyle(); + const themeStyle = GlobalInfos.getThemeStyle(); return ( <>
@@ -96,9 +96,9 @@ class GeneralSettings extends React.Component { id="custom-switch-3" data-testid='darktheme-switch' label="Enable Dark-Theme" - checked={StaticInfos.isDarkTheme()} + checked={GlobalInfos.isDarkTheme()} onChange={() => { - StaticInfos.enableDarkTheme(!StaticInfos.isDarkTheme()); + GlobalInfos.enableDarkTheme(!GlobalInfos.isDarkTheme()); this.forceUpdate(); // todo initiate rerender }} @@ -128,7 +128,7 @@ class GeneralSettings extends React.Component { updateRequest.append('tvshowpath', this.state.tvshowpath); updateRequest.append('mediacentername', this.state.mediacentername); updateRequest.append("tmdbsupport", this.state.tmdbsupport); - updateRequest.append("darkmodeenabled", StaticInfos.isDarkTheme()); + updateRequest.append("darkmodeenabled", GlobalInfos.isDarkTheme()); fetch('/api/Settings.php', {method: 'POST', body: updateRequest}) .then((response) => response.json() diff --git a/src/pages/SettingsPage/GeneralSettings.test.js b/src/pages/SettingsPage/GeneralSettings.test.js index 89e63bb..6d8ba59 100644 --- a/src/pages/SettingsPage/GeneralSettings.test.js +++ b/src/pages/SettingsPage/GeneralSettings.test.js @@ -1,6 +1,7 @@ import {shallow} from "enzyme"; import React from "react"; import GeneralSettings from "./GeneralSettings"; +import GlobalInfos from "../../GlobalInfos"; function prepareFetchApi(response) { const mockJsonPromise = Promise.resolve(response); @@ -25,6 +26,15 @@ describe('', function () { expect(wrapper.find("[data-testid='passwordfield']")).toHaveLength(1); }); + it('test theme switchbutton', function () { + const wrapper = shallow(); + + GlobalInfos.enableDarkTheme(false); + expect(GlobalInfos.isDarkTheme()).toBe(false); + wrapper.find("[data-testid='darktheme-switch']").simulate("change"); + expect(GlobalInfos.isDarkTheme()).toBe(true); + }); + it('test savesettings', done => { const wrapper = shallow(); diff --git a/src/pages/SettingsPage/SettingsPage.js b/src/pages/SettingsPage/SettingsPage.js index 10ff8be..b663eda 100644 --- a/src/pages/SettingsPage/SettingsPage.js +++ b/src/pages/SettingsPage/SettingsPage.js @@ -2,7 +2,7 @@ import React from "react"; import MovieSettings from "./MovieSettings"; import GeneralSettings from "./GeneralSettings"; import style from "./SettingsPage.module.css" -import StaticInfos from "../../GlobalInfos"; +import GlobalInfos from "../../GlobalInfos"; class SettingsPage extends React.Component { @@ -28,7 +28,7 @@ class SettingsPage extends React.Component { } render() { - const themestyle = StaticInfos.getThemeStyle(); + const themestyle = GlobalInfos.getThemeStyle(); return (