From e71f262b792a60045166098bc3e9dcc355f745c2 Mon Sep 17 00:00:00 2001 From: lukas Date: Mon, 20 Sep 2021 12:20:22 +0200 Subject: [PATCH] new features context to render features correctly on change --- src/App.tsx | 46 ++++--------------- src/index.tsx | 5 +- .../AuthenticationPage/AuthenticationPage.tsx | 4 +- src/pages/Player/Player.tsx | 5 +- src/pages/SettingsPage/SettingsPage.tsx | 8 ++-- src/pages/TVShowPage/TVShowPage.tsx | 2 +- src/utils/Api.ts | 9 +--- src/utils/GlobalInfos.ts | 22 +-------- src/utils/context/FeatureContext.tsx | 32 +++++++++++++ src/utils/context/LoginContextProvider.tsx | 17 ++++--- 10 files changed, 67 insertions(+), 83 deletions(-) create mode 100644 src/utils/context/FeatureContext.tsx diff --git a/src/App.tsx b/src/App.tsx index af62270..3ca0d47 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, {useContext} from 'react'; import HomePage from './pages/HomePage/HomePage'; import RandomPage from './pages/RandomPage/RandomPage'; import GlobalInfos from './utils/GlobalInfos'; @@ -18,6 +18,7 @@ import AuthenticationPage from './pages/AuthenticationPage/AuthenticationPage'; import TVShowPage from './pages/TVShowPage/TVShowPage'; import TVPlayer from './pages/TVShowPage/TVPlayer'; import {LoginContextProvider} from './utils/context/LoginContextProvider'; +import {FeatureContext} from './utils/context/FeatureContext'; interface state { mediacentername: string; @@ -48,13 +49,7 @@ class App extends React.Component<{}, state> { - { - // this.setState({password: false}); - // reinit general infos - // this.initialAPICall(); - }} - /> + {this.navBar()} @@ -63,32 +58,10 @@ class App extends React.Component<{}, state> { ); - - // if (this.state.password === true) { - // // render authentication page if auth is neccessary - // return ( - // { - // this.setState({password: false}); - // // reinit general infos - // this.initialAPICall(); - // }} - // /> - // ); - // } else if (this.state.password === false) { - // return ( - // - //
- // {this.navBar()} - // {this.routing()} - //
- // - // ); - // } else { - // return <>still loading...; - // } } + static contextType = FeatureContext; + /** * render the top navigation bar */ @@ -115,7 +88,7 @@ class App extends React.Component<{}, state> { Categories - {GlobalInfos.isTVShowEnabled() ? ( + {this.context.TVShowEnabled ? ( { const MyRouter = (): JSX.Element => { const match = useRouteMatch(); + const features = useContext(FeatureContext); return ( @@ -159,13 +133,13 @@ const MyRouter = (): JSX.Element => { - {GlobalInfos.isTVShowEnabled() ? ( - + {features.TVShowEnabled ? ( + ) : null} - {GlobalInfos.isTVShowEnabled() ? ( + {features.TVShowEnabled ? ( diff --git a/src/index.tsx b/src/index.tsx index 04468c1..985ebbf 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -2,6 +2,7 @@ import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import {BrowserRouter} from 'react-router-dom'; +import {FeatureContextProvider} from './utils/context/FeatureContext'; // don't allow console logs within production env global.console.log = process.env.NODE_ENV !== 'development' ? (_: string | number | boolean): void => {} : global.console.log; @@ -9,7 +10,9 @@ global.console.log = process.env.NODE_ENV !== 'development' ? (_: string | numbe ReactDOM.render( - + + + , document.getElementById('root') diff --git a/src/pages/AuthenticationPage/AuthenticationPage.tsx b/src/pages/AuthenticationPage/AuthenticationPage.tsx index 2b53d16..8227eaa 100644 --- a/src/pages/AuthenticationPage/AuthenticationPage.tsx +++ b/src/pages/AuthenticationPage/AuthenticationPage.tsx @@ -13,9 +13,7 @@ interface state { wrongPWDInfo: boolean; } -interface Props { - onSuccessLogin: () => void; -} +interface Props {} class AuthenticationPage extends React.Component { constructor(props: Props) { diff --git a/src/pages/Player/Player.tsx b/src/pages/Player/Player.tsx index d777d84..768eece 100644 --- a/src/pages/Player/Player.tsx +++ b/src/pages/Player/Player.tsx @@ -22,6 +22,7 @@ import {Button} from '../../elements/GPElements/Button'; import {VideoTypes} from '../../types/ApiTypes'; import GlobalInfos from '../../utils/GlobalInfos'; import {ButtonPopup} from '../../elements/Popups/ButtonPopup/ButtonPopup'; +import {FeatureContext} from '../../utils/context/FeatureContext'; interface Props extends RouteComponentProps<{id: string}> {} @@ -65,6 +66,8 @@ export class Player extends React.Component { this.quickAddTag = this.quickAddTag.bind(this); } + static contextType = FeatureContext; + componentDidMount(): void { // initial fetch of current movie data this.fetchMovieData(); @@ -205,7 +208,7 @@ export class Player extends React.Component { } renderDeletePopup(): JSX.Element { - if (GlobalInfos.isVideoFulldeleteable()) { + if (this.context.VideosFullyDeleteable) { return ( this.setState({deletepopupvisible: false})} diff --git a/src/pages/SettingsPage/SettingsPage.tsx b/src/pages/SettingsPage/SettingsPage.tsx index 4d7efd0..e6aa9d2 100644 --- a/src/pages/SettingsPage/SettingsPage.tsx +++ b/src/pages/SettingsPage/SettingsPage.tsx @@ -1,9 +1,10 @@ -import React from 'react'; +import React, {useContext} from 'react'; import MovieSettings from './MovieSettings'; import GeneralSettings from './GeneralSettings'; import style from './SettingsPage.module.css'; import GlobalInfos from '../../utils/GlobalInfos'; import {NavLink, Redirect, Route, Switch, useRouteMatch} from 'react-router-dom'; +import {FeatureContext} from '../../utils/context/FeatureContext'; /** * The Settingspage handles all kinds of settings for the mediacenter @@ -12,6 +13,7 @@ import {NavLink, Redirect, Route, Switch, useRouteMatch} from 'react-router-dom' const SettingsPage = (): JSX.Element => { const themestyle = GlobalInfos.getThemeStyle(); const match = useRouteMatch(); + const features = useContext(FeatureContext); return (
@@ -23,7 +25,7 @@ const SettingsPage = (): JSX.Element => {
Movies
 - {GlobalInfos.isTVShowEnabled() ? ( + {features.TVShowEnabled ? (
TV Shows
 @@ -37,7 +39,7 @@ const SettingsPage = (): JSX.Element => { - {GlobalInfos.isTVShowEnabled() ? ( + {features.TVShowEnabled ? ( diff --git a/src/pages/TVShowPage/TVShowPage.tsx b/src/pages/TVShowPage/TVShowPage.tsx index eee8d71..2465ca1 100644 --- a/src/pages/TVShowPage/TVShowPage.tsx +++ b/src/pages/TVShowPage/TVShowPage.tsx @@ -72,7 +72,7 @@ export default function (): JSX.Element { return ( - + diff --git a/src/utils/Api.ts b/src/utils/Api.ts index cf3a0a6..1f30e16 100644 --- a/src/utils/Api.ts +++ b/src/utils/Api.ts @@ -1,4 +1,3 @@ -import GlobalInfos from './GlobalInfos'; import {cookie} from './context/Cookie'; const APIPREFIX: string = '/api/'; @@ -84,13 +83,7 @@ function generalAPICall( } } else if (response.status === 400) { // Bad Request --> invalid token - console.log('loading Password page.'); - // load password page - if (GlobalInfos.loadPasswordPage) { - GlobalInfos.loadPasswordPage(() => { - callAPI(apinode, fd, callback, errorcallback); - }); - } + console.log('bad request todo sth here'); } else { console.log('Error: ' + response.statusText); if (errorcallback) { diff --git a/src/utils/GlobalInfos.ts b/src/utils/GlobalInfos.ts index 170a479..70f7495 100644 --- a/src/utils/GlobalInfos.ts +++ b/src/utils/GlobalInfos.ts @@ -49,6 +49,7 @@ class StaticInfos { /** * set the current videopath * @param vidpath videopath with beginning and ending slash + * @param tvshowpath */ setVideoPaths(vidpath: string, tvshowpath: string): void { this.videopath = vidpath; @@ -68,27 +69,6 @@ class StaticInfos { getTVShowPath(): string { return this.tvshowpath; } - - /** - * load the Password page manually - */ - loadPasswordPage: ((callback?: () => void) => void) | undefined = undefined; - - setTVShowsEnabled(TVShowEnabled: boolean): void { - this.TVShowsEnabled = TVShowEnabled; - } - - isTVShowEnabled(): boolean { - return this.TVShowsEnabled; - } - - setFullDeleteEnabled(FullDeleteEnabled: boolean): void { - this.fullDeleteable = FullDeleteEnabled; - } - - isVideoFulldeleteable(): boolean { - return this.fullDeleteable; - } } export default new StaticInfos(); diff --git a/src/utils/context/FeatureContext.tsx b/src/utils/context/FeatureContext.tsx new file mode 100644 index 0000000..88c084a --- /dev/null +++ b/src/utils/context/FeatureContext.tsx @@ -0,0 +1,32 @@ +import React, {FunctionComponent, useState} from 'react'; + +export interface FeatureContextType { + setTVShowEnabled: (enabled: boolean) => void; + TVShowEnabled: boolean; + setVideosFullyDeleteable: (fullyDeletable: boolean) => void; + VideosFullyDeleteable: boolean; +} + +/** + * A global context providing a way to interact with user login states + */ +export const FeatureContext = React.createContext({ + setTVShowEnabled: (_) => {}, + TVShowEnabled: false, + setVideosFullyDeleteable: (_) => {}, + VideosFullyDeleteable: false +}); + +export const FeatureContextProvider: FunctionComponent = (props): JSX.Element => { + const [tvshowenabled, settvshowenabled] = useState(false); + const [fullydeletablevids, setfullydeleteable] = useState(false); + + const value: FeatureContextType = { + VideosFullyDeleteable: fullydeletablevids, + TVShowEnabled: tvshowenabled, + setTVShowEnabled: (e) => settvshowenabled(e), + setVideosFullyDeleteable: (e) => setfullydeleteable(e) + }; + + return {props.children}; +}; diff --git a/src/utils/context/LoginContextProvider.tsx b/src/utils/context/LoginContextProvider.tsx index 144441b..1c5d418 100644 --- a/src/utils/context/LoginContextProvider.tsx +++ b/src/utils/context/LoginContextProvider.tsx @@ -5,18 +5,21 @@ import {cookie} from './Cookie'; import {APINode, callAPI} from '../Api'; import {SettingsTypes} from '../../types/ApiTypes'; import GlobalInfos from '../GlobalInfos'; +import {FeatureContext} from './FeatureContext'; export const LoginContextProvider: FunctionComponent = (props): JSX.Element => { let initialLoginState = LoginState.LoggedIn; let initialUserPerm = LoginPerm.User; + const features = useContext(FeatureContext); + const t = cookie.Load(); // we are already logged in so we can set the token and redirect to dashboard if (t !== null) { initialLoginState = LoginState.LoggedIn; } - const initialAPICall = (): void => { + useEffect(() => { // this is the first api call so if it fails we know there is no connection to backend callAPI( APINode.Settings, @@ -27,9 +30,9 @@ export const LoginContextProvider: FunctionComponent = (props): JSX.Element => { GlobalInfos.setVideoPaths(result.VideoPath, result.TVShowPath); - GlobalInfos.setTVShowsEnabled(result.TVShowEnabled); - GlobalInfos.setFullDeleteEnabled(result.FullDeleteEnabled); - // + features.setTVShowEnabled(result.TVShowEnabled); + features.setVideosFullyDeleteable(result.FullDeleteEnabled); + // this.setState({ // mediacentername: result.MediacenterName // }); @@ -42,11 +45,7 @@ export const LoginContextProvider: FunctionComponent = (props): JSX.Element => { setLoginState(LoginState.LoggedOut); } ); - }; - - useEffect(() => { - initialAPICall(); - }, []); + }, [features]); const [loginState, setLoginState] = useState(initialLoginState); const [permission, setPermission] = useState(initialUserPerm);