typescriptify Popupbase

focus textfield on filterclick

api/src/handlers/Settings.php

@@ -98,9 +98,9 @@ class Settings extends RequestBase {
                     WHERE 1";
 
             if ($this->conn->query($query) === true) {
-                $this->commitMessage('{"success": true}');
+                $this->commitMessage('{"result": "success"}');
             } else {
-                $this->commitMessage('{"success": true}');
+                $this->commitMessage('{"result": "success"}');
             }
         });
     }
@@ -127,9 +127,9 @@ class Settings extends RequestBase {
                 $cmd = 'php extractvideopreviews.php';
                 exec(sprintf("%s > %s 2>&1 & echo $! >> %s", $cmd, '/dev/zero', '/tmp/openmediacenterpid'));
 
-                $this->commitMessage('{"success": true}');
+                $this->commitMessage('{"result": "success"}');
             } else {
-                $this->commitMessage('{"success": false}');
+                $this->commitMessage('{"result": "success"}');
             }
         });
 

src/App.tsx

@@ -16,6 +16,7 @@ import {BrowserRouter as Router, NavLink, Route, Switch} from 'react-router-dom'
 import Player from './pages/Player/Player';
 import ActorOverviewPage from './pages/ActorOverviewPage/ActorOverviewPage';
 import ActorPage from './pages/ActorPage/ActorPage';
+import {SettingsTypes} from './types/ApiTypes';
 
 interface state {
     generalSettingsLoaded: boolean;
@@ -24,13 +25,6 @@ interface state {
     onapierror: boolean;
 }
 
-interface initialApiCallData {
-    DarkMode: boolean;
-    passwordEnabled: boolean;
-    mediacenter_name: string;
-
-}
-
 /**
  * The main App handles the main tabs and which content to show
  */
@@ -47,7 +41,7 @@ class App extends React.Component<{}, state> {
 
     initialAPICall(): void {
         // this is the first api call so if it fails we know there is no connection to backend
-        callAPI('settings.php', {action: 'loadInitialData'}, (result: initialApiCallData) => {
+        callAPI('settings.php', {action: 'loadInitialData'}, (result: SettingsTypes.initialApiCallData) => {
             // set theme
             GlobalInfos.enableDarkTheme(result.DarkMode);
 

src/api/VideoTypes.ts

@@ -1,31 +0,0 @@
-export interface loadVideoType {
-    movie_url: string
-    thumbnail: string
-    movie_id: number
-    movie_name: string
-    likes: number
-    quality: number
-    length: number
-    tags: TagType[]
-    suggesttag: TagType[]
-    actors: ActorType[]
-}
-
-export interface VideoUnloadedType {
-    movie_id: number;
-    movie_name: string
-}
-
-/**
- * type accepted by Tag component
- */
-export interface TagType {
-    tag_name: string
-    tag_id: number
-}
-
-export interface ActorType {
-    thumbnail: string;
-    name: string;
-    actor_id: number;
-}

src/elements/ActorTile/ActorTile.tsx

@@ -3,7 +3,7 @@ import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import {faUser} from '@fortawesome/free-solid-svg-icons';
 import React from 'react';
 import {Link} from 'react-router-dom';
-import {ActorType} from '../../api/VideoTypes';
+import {ActorType} from '../../types/VideoTypes';
 
 interface props {
     actor: ActorType;

src/elements/InfoHeaderItem/InfoHeaderItem.tsx

@@ -2,14 +2,23 @@ import React from 'react';
 import style from './InfoHeaderItem.module.css';
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import {Spinner} from 'react-bootstrap';
+import {IconDefinition} from '@fortawesome/fontawesome-common-types';
+
+interface props {
+    onClick?: () => void
+    backColor: string
+    icon: IconDefinition
+    text: string | number
+    subtext: string | number
+}
 
 /**
  * a component to display one of the short quickinfo tiles on dashboard
  */
-class InfoHeaderItem extends React.Component {
+class InfoHeaderItem extends React.Component<props> {
-    render() {
+    render(): JSX.Element {
         return (
-            <div onClick={() => {
+            <div onClick={(): void => {
                 // call clicklistener if defined
                 if (this.props.onClick != null) this.props.onClick();
             }} className={style.infoheaderitem} style={{backgroundColor: this.props.backColor}}>

src/elements/Popups/AddActorPopup/AddActorPopup.tsx

@@ -4,8 +4,8 @@ import ActorTile from '../../ActorTile/ActorTile';
 import style from './AddActorPopup.module.css';
 import {NewActorPopupContent} from '../NewActorPopup/NewActorPopup';
 import {callAPI} from '../../../utils/Api';
-import {ActorType} from '../../../api/VideoTypes';
+import {ActorType} from '../../../types/VideoTypes';
-import {GeneralSuccess} from '../../../api/GeneralTypes';
+import {GeneralSuccess} from '../../../types/GeneralTypes';
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import {faFilter, faTimes} from '@fortawesome/free-solid-svg-icons';
 import {Button} from '../../GPElements/Button';
@@ -26,6 +26,9 @@ interface state {
  * Popup for Adding a new Actor to a Video
  */
 class AddActorPopup extends React.Component<props, state> {
+    // filterfield anchor, needed to focus after filter btn click
+    private filterfield: HTMLInputElement | null | undefined;
+
     constructor(props: props) {
         super(props);
 
@@ -89,7 +92,8 @@ class AddActorPopup extends React.Component<props, state> {
                                            type='text' placeholder='Filter' value={this.state.filter}
                                            onChange={(e): void => {
                                                this.setState({filter: e.target.value});
-                                           }}/>
+                                           }}
+                                    ref={(input): void => {this.filterfield = input;}}/>
                                     <Button title={<FontAwesomeIcon style={{
                                         verticalAlign: 'middle',
                                         lineHeight: '130px'
@@ -101,7 +105,10 @@ class AddActorPopup extends React.Component<props, state> {
                                     verticalAlign: 'middle',
                                     lineHeight: '130px'
                                 }} icon={faFilter} size='1x'/></span>} color={{backgroundColor: 'cornflowerblue', color: 'white'}} onClick={(): void => {
-                                    this.setState({filtervisible: true});
+                                    this.setState({filtervisible: true}, () => {
+                                        // focus filterfield after state update
+                                        this.filterfield?.focus();
+                                    });
                                 }}/>
                         }
                     </div>

src/elements/Popups/AddTagPopup/AddTagPopup.tsx

@@ -2,19 +2,31 @@ import React from 'react';
 import Tag from '../../Tag/Tag';
 import PopupBase from '../PopupBase';
 import {callAPI} from '../../../utils/Api';
+import {TagType} from '../../../types/VideoTypes';
+import {GeneralSuccess} from '../../../types/GeneralTypes';
+
+interface props {
+    onHide: () => void;
+    submit: (tagId: number, tagName: string) => void;
+    movie_id: number;
+}
+
+interface state {
+    items: TagType[];
+}
 
 /**
  * component creates overlay to add a new tag to a video
  */
-class AddTagPopup extends React.Component {
+class AddTagPopup extends React.Component<props, state> {
-    constructor(props, context) {
+    constructor(props: props) {
-        super(props, context);
+        super(props);
 
         this.state = {items: []};
     }
 
-    componentDidMount() {
+    componentDidMount(): void {
-        callAPI('tags.php', {action: 'getAllTags'}, (result) => {
+        callAPI('tags.php', {action: 'getAllTags'}, (result: TagType[]) => {
             console.log(result);
             this.setState({
                 items: result
@@ -22,13 +34,13 @@ class AddTagPopup extends React.Component {
         });
     }
 
-    render() {
+    render(): JSX.Element {
         return (
             <PopupBase title='Add a Tag to this Video:' onHide={this.props.onHide}>
                 {this.state.items ?
                     this.state.items.map((i) => (
                         <Tag tagInfo={i}
-                             onclick={() => {
+                             onclick={(): void => {
                                  this.addTag(i.tag_id, i.tag_name);
                              }}/>
                     )) : null}
@@ -41,8 +53,8 @@ class AddTagPopup extends React.Component {
      * @param tagid tag id to add
      * @param tagname tag name to add
      */
-    addTag(tagid, tagname) {
+    addTag(tagid: number, tagname: string): void {
-        callAPI('tags.php', {action: 'addTag', id: tagid, movieid: this.props.movie_id}, result => {
+        callAPI('tags.php', {action: 'addTag', id: tagid, movieid: this.props.movie_id}, (result: GeneralSuccess) => {
             if (result.result !== 'success') {
                 console.log('error occured while writing to db -- todo error handling');
                 console.log(result.result);

src/elements/Popups/NewActorPopup/NewActorPopup.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PopupBase from '../PopupBase';
 import style from './NewActorPopup.module.css';
 import {callAPI} from '../../../utils/Api';
-import {GeneralSuccess} from '../../../api/GeneralTypes';
+import {GeneralSuccess} from '../../../types/GeneralTypes';
 
 interface NewActorPopupProps {
     onHide: () => void;

src/elements/Popups/NewTagPopup/NewTagPopup.tsx

@@ -2,24 +2,25 @@ import React from 'react';
 import PopupBase from '../PopupBase';
 import style from './NewTagPopup.module.css';
 import {callAPI} from '../../../utils/Api';
+import {GeneralSuccess} from '../../../types/GeneralTypes';
+
+interface props {
+    onHide: () => void
+}
 
 /**
  * creates modal overlay to define a new Tag
  */
-class NewTagPopup extends React.Component {
+class NewTagPopup extends React.Component<props> {
-    constructor(props, context) {
+    private value: string = '';
-        super(props, context);
 
-        this.props = props;
+    render(): JSX.Element {
-    }
-
-    render() {
         return (
             <PopupBase title='Add new Tag' onHide={this.props.onHide} height='200px' width='400px'>
-                <div><input type='text' placeholder='Tagname' onChange={(v) => {
+                <div><input type='text' placeholder='Tagname' onChange={(v): void => {
                     this.value = v.target.value;
                 }}/></div>
-                <button className={style.savebtn} onClick={() => this.storeselection()}>Save</button>
+                <button className={style.savebtn} onClick={(): void => this.storeselection()}>Save</button>
             </PopupBase>
         );
     }
@@ -27,8 +28,8 @@ class NewTagPopup extends React.Component {
     /**
      * store the filled in form to the backend
      */
-    storeselection() {
+    storeselection(): void {
-        callAPI('tags.php', {action: 'createTag', tagname: this.value}, result => {
+        callAPI('tags.php', {action: 'createTag', tagname: this.value}, (result: GeneralSuccess) => {
             if (result.result !== 'success') {
                 console.log('error occured while writing to db -- todo error handling');
                 console.log(result.result);

src/elements/Popups/PopupBase.tsx

@@ -1,13 +1,24 @@
 import GlobalInfos from '../../utils/GlobalInfos';
 import style from './PopupBase.module.css';
 import {Line} from '../PageTitle/PageTitle';
-import React from 'react';
+import React, {RefObject} from 'react';
+
+interface props {
+    width?: string;
+    height?: string;
+    banner?: JSX.Element;
+    title: string;
+    onHide: () => void
+}
 
 /**
  * wrapper class for generic types of popups
  */
-class PopupBase extends React.Component {
+class PopupBase extends React.Component<props> {
-    constructor(props) {
+    private wrapperRef: RefObject<HTMLDivElement>;
+    private framedimensions: { minHeight: string | undefined; width: string | undefined; height: string | undefined };
+
+    constructor(props: props) {
         super(props);
 
         this.state = {items: []};
@@ -25,7 +36,7 @@ class PopupBase extends React.Component {
         };
     }
 
-    componentDidMount() {
+    componentDidMount(): void {
         document.addEventListener('mousedown', this.handleClickOutside);
         document.addEventListener('keyup', this.keypress);
 
@@ -35,13 +46,13 @@ class PopupBase extends React.Component {
         }
     }
 
-    componentWillUnmount() {
+    componentWillUnmount(): void {
         // remove the appended listeners
         document.removeEventListener('mousedown', this.handleClickOutside);
         document.removeEventListener('keyup', this.keypress);
     }
 
-    render() {
+    render(): JSX.Element {
         const themeStyle = GlobalInfos.getThemeStyle();
         return (
             <div style={this.framedimensions} className={[style.popup, themeStyle.thirdbackground].join(' ')} ref={this.wrapperRef}>
@@ -61,8 +72,8 @@ class PopupBase extends React.Component {
     /**
      * Alert if clicked on outside of element
      */
-    handleClickOutside(event) {
+    handleClickOutside(event: MouseEvent): void {
-        if (this.wrapperRef && !this.wrapperRef.current.contains(event.target)) {
+        if (this.wrapperRef && this.wrapperRef.current && !this.wrapperRef.current.contains(event.target as Node)) {
             this.props.onHide();
         }
     }
@@ -71,7 +82,7 @@ class PopupBase extends React.Component {
      * key event handling
      * @param event keyevent
      */
-    keypress(event) {
+    keypress(event: KeyboardEvent): void {
         // hide if escape is pressed
         if (event.key === 'Escape') {
             this.props.onHide();
@@ -81,16 +92,17 @@ class PopupBase extends React.Component {
     /**
      * make the element drag and droppable
      */
-    dragElement() {
+    dragElement(): void {
         let xOld = 0, yOld = 0;
 
         const elmnt = this.wrapperRef.current;
         if (elmnt === null) return;
+        if (elmnt.firstChild === null) return;
 
-        elmnt.firstChild.onmousedown = dragMouseDown;
+        (elmnt.firstChild as HTMLDivElement).onmousedown = dragMouseDown;
 
 
-        function dragMouseDown(e) {
+        function dragMouseDown(e: MouseEvent): void {
             e.preventDefault();
             // get the mouse cursor position at startup:
             xOld = e.clientX;
@@ -100,7 +112,7 @@ class PopupBase extends React.Component {
             document.onmousemove = elementDrag;
         }
 
-        function elementDrag(e) {
+        function elementDrag(e: MouseEvent): void {
             e.preventDefault();
             // calculate the new cursor position:
             const dx = xOld - e.clientX;
@@ -108,11 +120,12 @@ class PopupBase extends React.Component {
             xOld = e.clientX;
             yOld = e.clientY;
             // set the element's new position:
+            if (elmnt === null) return;
             elmnt.style.top = (elmnt.offsetTop - dy) + 'px';
             elmnt.style.left = (elmnt.offsetLeft - dx) + 'px';
         }
 
-        function closeDragElement() {
+        function closeDragElement(): void {
             // stop moving when mouse button is released:
             document.onmouseup = null;
             document.onmousemove = null;

src/elements/Preview/Preview.tsx

@@ -5,35 +5,42 @@ import {Link} from 'react-router-dom';
 import GlobalInfos from '../../utils/GlobalInfos';
 import {callAPIPlain} from '../../utils/Api';
 
+interface PreviewProps{
+    name: string;
+    movie_id: number;
+}
+
+interface PreviewState {
+    previewpicture: string | null;
+}
+
 /**
  * Component for single preview tile
  * floating side by side
  */
-class Preview extends React.Component {
+class Preview extends React.Component<PreviewProps, PreviewState> {
-    constructor(props, context) {
+    constructor(props: PreviewProps) {
-        super(props, context);
+        super(props);
 
         this.state = {
-            previewpicture: null,
+            previewpicture: null
-            name: null
         };
     }
 
-    componentDidMount() {
+    componentDidMount(): void {
         callAPIPlain('video.php', {action: 'readThumbnail', movieid: this.props.movie_id}, (result) => {
             this.setState({
-                previewpicture: result,
+                previewpicture: result
-                name: this.props.name
             });
         });
     }
 
-    render() {
+    render(): JSX.Element {
         const themeStyle = GlobalInfos.getThemeStyle();
         return (
             <Link to={'/player/' + this.props.movie_id}>
                 <div className={style.videopreview + ' ' + themeStyle.secbackground + ' ' + themeStyle.preview}>
-                    <div className={style.previewtitle + ' ' + themeStyle.lighttextcolor}>{this.state.name}</div>
+                    <div className={style.previewtitle + ' ' + themeStyle.lighttextcolor}>{this.props.name}</div>
                     <div className={style.previewpic}>
                         {this.state.previewpicture !== null ?
                             <img className={style.previewimage}
@@ -55,8 +62,8 @@ class Preview extends React.Component {
 /**
  * Component for a Tag-name tile (used in category page)
  */
-export class TagPreview extends React.Component {
+export class TagPreview extends React.Component<{name: string}> {
-    render() {
+    render(): JSX.Element {
         const themeStyle = GlobalInfos.getThemeStyle();
         return (
             <div

src/elements/Tag/Tag.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import styles from './Tag.module.css';
 import {Link} from 'react-router-dom';
-import {TagType} from '../../api/VideoTypes';
+import {TagType} from '../../types/VideoTypes';
 
 interface props {
     onclick?: (_: string) => void

src/elements/VideoContainer/VideoContainer.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
 import Preview from '../Preview/Preview';
 import style from './VideoContainer.module.css';
-import {VideoUnloadedType} from '../../api/VideoTypes';
+import {VideoTypes} from '../../types/ApiTypes';
 
 interface props {
-    data: VideoUnloadedType[]
+    data: VideoTypes.VideoUnloadedType[]
 }
 
 interface state {
-    loadeditems: VideoUnloadedType[];
+    loadeditems: VideoTypes.VideoUnloadedType[];
     selectionnr: number;
 }
 

src/index.tsx

@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom';
 import App from './App';
 
 // don't allow console logs within production env
-global.console.log = process.env.NODE_ENV !== 'development' ? (s) => {} : global.console.log;
+global.console.log = process.env.NODE_ENV !== 'development' ? (s: string | number | boolean): void => {} : global.console.log;
 
 ReactDOM.render(
     <React.StrictMode>

src/pages/ActorOverviewPage/ActorOverviewPage.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import {callAPI} from '../../utils/Api';
-import {ActorType} from '../../api/VideoTypes';
+import {ActorType} from '../../types/VideoTypes';
 import ActorTile from '../../elements/ActorTile/ActorTile';
 import PageTitle from '../../elements/PageTitle/PageTitle';
 import SideBar from '../../elements/SideBar/SideBar';

src/pages/ActorPage/ActorPage.tsx

@@ -6,13 +6,14 @@ import {faUser} from '@fortawesome/free-solid-svg-icons';
 import style from './ActorPage.module.css';
 import VideoContainer from '../../elements/VideoContainer/VideoContainer';
 import {callAPI} from '../../utils/Api';
-import {ActorType, VideoUnloadedType} from '../../api/VideoTypes';
+import {ActorType} from '../../types/VideoTypes';
 import {Link, withRouter} from 'react-router-dom';
 import {RouteComponentProps} from 'react-router';
 import {Button} from '../../elements/GPElements/Button';
+import {ActorTypes, VideoTypes} from '../../types/ApiTypes';
 
 interface state {
-    data: VideoUnloadedType[],
+    data: VideoTypes.VideoUnloadedType[],
     actor: ActorType
 }
 
@@ -22,13 +23,6 @@ interface state {
 interface props extends RouteComponentProps<{ id: string }> {
 }
 
-/**
- * result of actor fetch
- */
-interface videofetchresult {
-    videos: VideoUnloadedType[];
-    info: ActorType;
-}
 
 /**
  * info page about a specific actor and a list of all its videos
@@ -75,7 +69,7 @@ export class ActorPage extends React.Component<props, state> {
         callAPI('actor.php', {
             action: 'getActorInfo',
             actorid: this.props.match.params.id
-        }, (result: videofetchresult) => {
+        }, (result: ActorTypes.videofetchresult) => {
             this.setState({
                 data: result.videos ? result.videos : [],
                 actor: result.info

src/pages/CategoryPage/CategoryPage.tsx

@@ -4,7 +4,7 @@ import Tag from '../../elements/Tag/Tag';
 import NewTagPopup from '../../elements/Popups/NewTagPopup/NewTagPopup';
 import PageTitle, {Line} from '../../elements/PageTitle/PageTitle';
 import {Route, Switch} from 'react-router-dom';
-import {DefaultTags} from '../../api/GeneralTypes';
+import {DefaultTags} from '../../types/GeneralTypes';
 import {CategoryViewWR} from './CategoryView';
 import TagView from './TagView';
 
@@ -60,11 +60,10 @@ class CategoryPage extends React.Component<{}, CategoryPageState> {
                 </Switch>
 
                 {this.state.popupvisible ?
-                    <NewTagPopup show={this.state.popupvisible}
+                    <NewTagPopup onHide={(): void => {
-                                 onHide={(): void => {
+                        this.setState({popupvisible: false});
-                                     this.setState({popupvisible: false});
+                        // this.loadTags();
-                                     // this.loadTags();
+                    }}/> :
-                                 }}/> :
                     null
                 }
             </>

src/pages/CategoryPage/CategoryView.tsx

@@ -1,9 +1,9 @@
 import {RouteComponentProps} from 'react-router';
 import React from 'react';
-import {VideoUnloadedType} from '../../api/VideoTypes';
 import VideoContainer from '../../elements/VideoContainer/VideoContainer';
 import {callAPI} from '../../utils/Api';
 import {withRouter} from 'react-router-dom';
+import {VideoTypes} from '../../types/ApiTypes';
 
 interface CategoryViewProps extends RouteComponentProps<{ id: string }> {
     setSubTitle: (title: string) => void
@@ -17,7 +17,7 @@ interface CategoryViewState {
  * plain class (for unit testing only)
  */
 export class CategoryView extends React.Component<CategoryViewProps, CategoryViewState> {
-    private videodata: VideoUnloadedType[] = [];
+    private videodata: VideoTypes.VideoUnloadedType[] = [];
 
     constructor(props: CategoryViewProps) {
         super(props);
@@ -60,7 +60,7 @@ export class CategoryView extends React.Component<CategoryViewProps, CategoryVie
      * @param id tagid
      */
     fetchVideoData(id: number): void {
-        callAPI<VideoUnloadedType[]>('video.php', {action: 'getMovies', tag: id}, result => {
+        callAPI<VideoTypes.VideoUnloadedType[]>('video.php', {action: 'getMovies', tag: id}, result => {
             this.videodata = result;
             this.setState({loaded: true});
             this.props.setSubTitle(this.videodata.length + ' Videos');

src/pages/CategoryPage/TagView.tsx

@@ -1,4 +1,4 @@
-import {TagType} from '../../api/VideoTypes';
+import {TagType} from '../../types/VideoTypes';
 import React from 'react';
 import videocontainerstyle from '../../elements/VideoContainer/VideoContainer.module.css';
 import {Link} from 'react-router-dom';
@@ -32,8 +32,7 @@ class TagView extends React.Component<props, TagViewState> {
                         this.state.loadedtags.map((m) => (
                             <Link to={'/categories/' + m.tag_id}><TagPreview
                                 key={m.tag_id}
-                                name={m.tag_name}
+                                name={m.tag_name}/></Link>
-                                tag_id={m.tag_id}/></Link>
                         )) :
                         'loading'}
                 </div>

src/pages/HomePage/HomePage.tsx

@@ -7,9 +7,9 @@ import style from './HomePage.module.css';
 import PageTitle, {Line} from '../../elements/PageTitle/PageTitle';
 import {callAPI} from '../../utils/Api';
 import {Route, Switch, withRouter} from 'react-router-dom';
-import {VideoUnloadedType} from '../../api/VideoTypes';
 import {RouteComponentProps} from 'react-router';
 import SearchHandling from './SearchHandling';
+import {VideoTypes} from '../../types/ApiTypes';
 
 interface props extends RouteComponentProps {}
 
@@ -22,18 +22,10 @@ interface state {
         tagnr: number
     },
     subtitle: string,
-    data: VideoUnloadedType[],
+    data: VideoTypes.VideoUnloadedType[],
     selectionnr: number
 }
 
-interface startDataData {
-    total: number;
-    fullhd: number;
-    hd: number;
-    sd: number;
-    tags: number;
-}
-
 /**
  * The home page component showing on the initial pageload
  */
@@ -71,7 +63,7 @@ export class HomePage extends React.Component<props, state> {
      * @param tag tag to fetch videos
      */
     fetchVideoData(tag: string): void {
-        callAPI('video.php', {action: 'getMovies', tag: tag}, (result: VideoUnloadedType[]) => {
+        callAPI('video.php', {action: 'getMovies', tag: tag}, (result: VideoTypes.VideoUnloadedType[]) => {
             this.setState({
                 data: []
             });
@@ -87,7 +79,7 @@ export class HomePage extends React.Component<props, state> {
      * fetch the necessary data for left info box
      */
     fetchStartData(): void {
-        callAPI('video.php', {action: 'getStartData'}, (result: startDataData) => {
+        callAPI('video.php', {action: 'getStartData'}, (result: VideoTypes.startDataType) => {
             this.setState({
                 sideinfo: {
                     videonr: result['total'],

src/pages/HomePage/SearchHandling.tsx

@@ -2,10 +2,10 @@ import {RouteComponentProps} from 'react-router';
 import React from 'react';
 import {withRouter} from 'react-router-dom';
 import {callAPI} from '../../utils/Api';
-import {VideoUnloadedType} from '../../api/VideoTypes';
 import VideoContainer from '../../elements/VideoContainer/VideoContainer';
 import PageTitle from '../../elements/PageTitle/PageTitle';
 import SideBar from '../../elements/SideBar/SideBar';
+import {VideoTypes} from '../../types/ApiTypes';
 
 interface params {
     name: string;
@@ -14,7 +14,7 @@ interface params {
 interface props extends RouteComponentProps<params> {}
 
 interface state {
-    data: VideoUnloadedType[];
+    data: VideoTypes.VideoUnloadedType[];
 }
 
 export class SearchHandling extends React.Component<props, state> {
@@ -59,7 +59,7 @@ export class SearchHandling extends React.Component<props, state> {
      * @param keyword The keyword to search for
      */
     searchVideos(keyword: string): void {
-        callAPI('video.php', {action: 'getSearchKeyWord', keyword: keyword}, (result: VideoUnloadedType[]) => {
+        callAPI('video.php', {action: 'getSearchKeyWord', keyword: keyword}, (result: VideoTypes.VideoUnloadedType[]) => {
             this.setState({
                 data: result
             });

src/pages/Player/Player.tsx

@@ -15,10 +15,11 @@ import ActorTile from '../../elements/ActorTile/ActorTile';
 import {withRouter} from 'react-router-dom';
 import {callAPI, getBackendDomain} from '../../utils/Api';
 import {RouteComponentProps} from 'react-router';
-import {GeneralSuccess} from '../../api/GeneralTypes';
+import {GeneralSuccess} from '../../types/GeneralTypes';
-import {ActorType, loadVideoType, TagType} from '../../api/VideoTypes';
+import {ActorType, TagType} from '../../types/VideoTypes';
 import PlyrJS from 'plyr';
 import {Button} from '../../elements/GPElements/Button';
+import {VideoTypes} from '../../types/ApiTypes';
 
 interface myprops extends RouteComponentProps<{ id: string }> {}
 
@@ -239,7 +240,7 @@ export class Player extends React.Component<myprops, mystate> {
      * fetch all the required infos of a video from backend
      */
     fetchMovieData(): void {
-        callAPI('video.php', {action: 'loadVideo', movieid: this.props.match.params.id}, (result: loadVideoType) => {
+        callAPI('video.php', {action: 'loadVideo', movieid: this.props.match.params.id}, (result: VideoTypes.loadVideoType) => {
             this.setState({
                 sources: {
                     type: 'video',

src/pages/RandomPage/RandomPage.tsx

@@ -5,15 +5,16 @@ import Tag from '../../elements/Tag/Tag';
 import PageTitle from '../../elements/PageTitle/PageTitle';
 import VideoContainer from '../../elements/VideoContainer/VideoContainer';
 import {callAPI} from '../../utils/Api';
-import {TagType, VideoUnloadedType} from '../../api/VideoTypes';
+import {TagType} from '../../types/VideoTypes';
+import {VideoTypes} from '../../types/ApiTypes';
 
 interface state {
-    videos: VideoUnloadedType[];
+    videos: VideoTypes.VideoUnloadedType[];
     tags: TagType[];
 }
 
 interface GetRandomMoviesType {
-    rows: VideoUnloadedType[];
+    rows: VideoTypes.VideoUnloadedType[];
     tags: TagType[];
 }
 

src/pages/SettingsPage/GeneralSettings.tsx

@@ -7,37 +7,59 @@ import {faArchive, faBalanceScaleLeft, faRulerVertical} from '@fortawesome/free-
 import {faAddressCard} from '@fortawesome/free-regular-svg-icons';
 import {version} from '../../../package.json';
 import {callAPI, setCustomBackendDomain} from '../../utils/Api';
+import {SettingsTypes} from '../../types/ApiTypes';
+import {GeneralSuccess} from '../../types/GeneralTypes';
+
+interface state {
+    passwordsupport: boolean,
+    tmdbsupport: boolean,
+    customapi: boolean,
+
+    videopath: string,
+    tvshowpath: string,
+    mediacentername: string,
+    password: string,
+    apipath: string,
+
+    videonr: number,
+    dbsize: number,
+    difftagnr: number,
+    tagsadded: number
+}
+
+interface props {}
 
 /**
  * Component for Generalsettings tag on Settingspage
  * handles general settings of mediacenter which concerns to all pages
  */
-class GeneralSettings extends React.Component {
+class GeneralSettings extends React.Component<props, state> {
-    constructor(props) {
+    constructor(props: props) {
         super(props);
 
         this.state = {
             passwordsupport: false,
-            tmdbsupport: null,
+            tmdbsupport: false,
             customapi: false,
 
             videopath: '',
             tvshowpath: '',
             mediacentername: '',
             password: '',
+            apipath: '',
 
-            videonr: null,
+            videonr: 0,
-            dbsize: null,
+            dbsize: 0,
-            difftagnr: null,
+            difftagnr: 0,
-            tagsadded: null
+            tagsadded: 0
         };
     }
 
-    componentDidMount() {
+    componentDidMount(): void {
         this.loadSettings();
     }
 
-    render() {
+    render(): JSX.Element {
         const themeStyle = GlobalInfos.getThemeStyle();
         return (
             <>
@@ -47,7 +69,7 @@ class GeneralSettings extends React.Component {
                                     subtext='Videos in Gravity'
                                     icon={faArchive}/>
                     <InfoHeaderItem backColor='yellow'
-                                    text={this.state.dbsize !== undefined ? this.state.dbsize + ' MB' : undefined}
+                                    text={this.state.dbsize !== undefined ? this.state.dbsize + ' MB' : ''}
                                     subtext='Database size'
                                     icon={faRulerVertical}/>
                     <InfoHeaderItem backColor='green'
@@ -60,7 +82,7 @@ class GeneralSettings extends React.Component {
                                     icon={faBalanceScaleLeft}/>
                 </div>
                 <div className={style.GeneralForm + ' ' + themeStyle.subtextcolor}>
-                    <Form data-testid='mainformsettings' onSubmit={(e) => {
+                    <Form data-testid='mainformsettings' onSubmit={(e): void => {
                         e.preventDefault();
                         this.saveSettings();
                     }}>
@@ -68,14 +90,14 @@ class GeneralSettings extends React.Component {
                             <Form.Group as={Col} data-testid='videpathform'>
                                 <Form.Label>Video Path</Form.Label>
                                 <Form.Control type='text' placeholder='/var/www/html/video' value={this.state.videopath}
-                                              onChange={(ee) => this.setState({videopath: ee.target.value})}/>
+                                              onChange={(ee): void => this.setState({videopath: ee.target.value})}/>
                             </Form.Group>
 
                             <Form.Group as={Col} data-testid='tvshowpath'>
                                 <Form.Label>TV Show Path</Form.Label>
                                 <Form.Control type='text' placeholder='/var/www/html/tvshow'
                                               value={this.state.tvshowpath}
-                                              onChange={(e) => this.setState({tvshowpath: e.target.value})}/>
+                                              onChange={(e): void => this.setState({tvshowpath: e.target.value})}/>
                             </Form.Group>
                         </Form.Row>
 
@@ -84,7 +106,7 @@ class GeneralSettings extends React.Component {
                             id='custom-switch-api'
                             label='Use custom API url'
                             checked={this.state.customapi}
-                            onChange={() => {
+                            onChange={(): void => {
                                 if (this.state.customapi) {
                                     setCustomBackendDomain('');
                                 }
@@ -97,7 +119,7 @@ class GeneralSettings extends React.Component {
                                 <Form.Label>API Backend url</Form.Label>
                                 <Form.Control type='text' placeholder='https://127.0.0.1'
                                               value={this.state.apipath}
-                                              onChange={(e) => {
+                                              onChange={(e): void => {
                                                   this.setState({apipath: e.target.value});
                                                   setCustomBackendDomain(e.target.value);
                                               }}/>
@@ -110,7 +132,7 @@ class GeneralSettings extends React.Component {
                             data-testid='passwordswitch'
                             label='Enable Password support'
                             checked={this.state.passwordsupport}
-                            onChange={() => {
+                            onChange={(): void => {
                                 this.setState({passwordsupport: !this.state.passwordsupport});
                             }}
                         />
@@ -119,7 +141,7 @@ class GeneralSettings extends React.Component {
                             <Form.Group data-testid='passwordfield'>
                                 <Form.Label>Password</Form.Label>
                                 <Form.Control type='password' placeholder='**********' value={this.state.password}
-                                              onChange={(e) => this.setState({password: e.target.value})}/>
+                                              onChange={(e): void => this.setState({password: e.target.value})}/>
                             </Form.Group> : null
                         }
 
@@ -129,7 +151,7 @@ class GeneralSettings extends React.Component {
                             data-testid='tmdb-switch'
                             label='Enable TMDB video grabbing support'
                             checked={this.state.tmdbsupport}
-                            onChange={() => {
+                            onChange={(): void => {
                                 this.setState({tmdbsupport: !this.state.tmdbsupport});
                             }}
                         />
@@ -140,7 +162,7 @@ class GeneralSettings extends React.Component {
                             data-testid='darktheme-switch'
                             label='Enable Dark-Theme'
                             checked={GlobalInfos.isDarkTheme()}
-                            onChange={() => {
+                            onChange={(): void => {
                                 GlobalInfos.enableDarkTheme(!GlobalInfos.isDarkTheme());
                                 this.forceUpdate();
                                 // todo initiate rerender
@@ -150,7 +172,7 @@ class GeneralSettings extends React.Component {
                         <Form.Group className={style.mediacenternameform} data-testid='nameform'>
                             <Form.Label>The name of the Mediacenter</Form.Label>
                             <Form.Control type='text' placeholder='Mediacentername' value={this.state.mediacentername}
-                                          onChange={(e) => this.setState({mediacentername: e.target.value})}/>
+                                          onChange={(e): void => this.setState({mediacentername: e.target.value})}/>
                         </Form.Group>
 
                         <Button variant='primary' type='submit'>
@@ -168,8 +190,8 @@ class GeneralSettings extends React.Component {
     /**
      * inital load of already specified settings from backend
      */
-    loadSettings() {
+    loadSettings(): void {
-        callAPI('settings.php', {action: 'loadGeneralSettings'}, (result) => {
+        callAPI('settings.php', {action: 'loadGeneralSettings'}, (result: SettingsTypes.loadGeneralSettingsType) => {
             this.setState({
                 videopath: result.video_path,
                 tvshowpath: result.episode_path,
@@ -189,7 +211,7 @@ class GeneralSettings extends React.Component {
     /**
      * save the selected and typed settings to the backend
      */
-    saveSettings() {
+    saveSettings(): void {
         callAPI('settings.php', {
             action: 'saveGeneralSettings',
             password: this.state.passwordsupport ? this.state.password : '-1',
@@ -198,8 +220,8 @@ class GeneralSettings extends React.Component {
             mediacentername: this.state.mediacentername,
             tmdbsupport: this.state.tmdbsupport,
             darkmodeenabled: GlobalInfos.isDarkTheme().toString()
-        }, (result) => {
+        }, (result: GeneralSuccess) => {
-            if (result.success) {
+            if (result.result) {
                 console.log('successfully saved settings');
                 // todo 2020-07-10: popup success
             } else {

src/pages/SettingsPage/MovieSettings.tsx

@@ -1,13 +1,24 @@
 import React from 'react';
 import style from './MovieSettings.module.css';
 import {callAPI} from '../../utils/Api';
+import {GeneralSuccess} from '../../types/GeneralTypes';
+import {SettingsTypes} from '../../types/ApiTypes';
+
+interface state {
+    text: string[]
+    startbtnDisabled: boolean
+}
+
+interface props {}
 
 /**
  * Component for MovieSettings on Settingspage
  * handles settings concerning to movies in general
  */
-class MovieSettings extends React.Component {
+class MovieSettings extends React.Component<props, state> {
-    constructor(props) {
+    myinterval: number = -1;
+
+    constructor(props: props) {
         super(props);
 
         this.state = {
@@ -16,23 +27,24 @@ class MovieSettings extends React.Component {
         };
     }
 
-    componentDidMount() {
+    componentDidMount(): void {
-        this.myinterval = setInterval(this.updateStatus, 1000);
+        this.myinterval = window.setInterval(this.updateStatus, 1000);
     }
 
-    componentWillUnmount() {
+    componentWillUnmount(): void {
-        clearInterval(this.myinterval);
+        if (this.myinterval !== -1)
+            clearInterval(this.myinterval);
     }
 
-    render() {
+    render(): JSX.Element {
         return (
             <>
                 <button disabled={this.state.startbtnDisabled}
                         className='btn btn-success'
-                        onClick={() => {this.startReindex();}}>Reindex Movie
+                        onClick={(): void => {this.startReindex();}}>Reindex Movie
                 </button>
                 <button className='btn btn-warning'
-                        onClick={() => {this.cleanupGravity();}}>Cleanup Gravity
+                        onClick={(): void => {this.cleanupGravity();}}>Cleanup Gravity
                 </button>
                 <div className={style.indextextarea}>{this.state.text.map(m => (
                     <div className='textarea-element'>{m}</div>
@@ -44,7 +56,7 @@ class MovieSettings extends React.Component {
     /**
      * starts the reindex process of the videos in the specified folder
      */
-    startReindex() {
+    startReindex(): void {
         // clear output text before start
         this.setState({text: []});
 
@@ -52,9 +64,9 @@ class MovieSettings extends React.Component {
 
         console.log('starting');
 
-        callAPI('settings.php', {action: 'startReindex'}, (result) => {
+        callAPI('settings.php', {action: 'startReindex'}, (result: GeneralSuccess): void => {
             console.log(result);
-            if (result.success) {
+            if (result.result === 'success') {
                 console.log('started successfully');
             } else {
                 console.log('error, reindex already running');
@@ -62,17 +74,17 @@ class MovieSettings extends React.Component {
             }
         });
 
-        if (this.myinterval) {
+        if (this.myinterval !== -1) {
             clearInterval(this.myinterval);
         }
-        this.myinterval = setInterval(this.updateStatus, 1000);
+        this.myinterval = window.setInterval(this.updateStatus, 1000);
     }
 
     /**
      * This interval function reloads the current status of reindexing from backend
      */
-    updateStatus = () => {
+    updateStatus = (): void => {
-        callAPI('settings.php', {action: 'getStatusMessage'}, (result) => {
+        callAPI('settings.php', {action: 'getStatusMessage'}, (result: SettingsTypes.getStatusMessageType) => {
             if (result.contentAvailable === true) {
                 console.log(result);
                 // todo 2020-07-4: scroll to bottom of div here
@@ -93,7 +105,7 @@ class MovieSettings extends React.Component {
     /**
      * send request to cleanup db gravity
      */
-    cleanupGravity() {
+    cleanupGravity(): void {
         callAPI('settings.php', {action: 'cleanupGravity'}, (result) => {
             this.setState({
                 text: ['successfully cleaned up gravity!']

src/types/ApiTypes.ts

@@ -0,0 +1,66 @@
+import {ActorType, TagType} from './VideoTypes';
+
+export namespace VideoTypes{
+    export interface loadVideoType {
+        movie_url: string
+        thumbnail: string
+        movie_id: number
+        movie_name: string
+        likes: number
+        quality: number
+        length: number
+        tags: TagType[]
+        suggesttag: TagType[]
+        actors: ActorType[]
+    }
+
+    export interface startDataType{
+        total: number;
+        fullhd: number;
+        hd: number;
+        sd: number;
+        tags: number;
+    }
+
+    export interface VideoUnloadedType {
+        movie_id: number;
+        movie_name: string
+    }
+}
+
+export namespace SettingsTypes{
+    export interface initialApiCallData {
+        DarkMode: boolean;
+        passwordEnabled: boolean;
+        mediacenter_name: string;
+    }
+
+    export interface loadGeneralSettingsType{
+        video_path: string,
+        episode_path: string,
+        mediacenter_name: string,
+        password: string,
+        passwordEnabled: boolean,
+        TMDB_grabbing: boolean,
+
+        videonr: number,
+        dbsize: number,
+        difftagnr: number,
+        tagsadded: number
+    }
+
+    export interface getStatusMessageType{
+        contentAvailable: boolean;
+        message: string;
+    }
+}
+
+export namespace ActorTypes{
+    /**
+     * result of actor fetch
+     */
+    export interface videofetchresult {
+        videos: VideoTypes.VideoUnloadedType[];
+        info: ActorType;
+    }
+}

src/types/VideoTypes.ts

@@ -0,0 +1,15 @@
+
+
+/**
+ * type accepted by Tag component
+ */
+export interface TagType {
+    tag_name: string
+    tag_id: number
+}
+
+export interface ActorType {
+    thumbnail: string;
+    name: string;
+    actor_id: number;
+}

src/utils/Api.ts

@@ -40,7 +40,7 @@ function getAPIDomain(): string {
 interface ApiBaseRequest {
     action: string | number,
 
-    [_: string]: string | number
+    [_: string]: string | number | boolean
 }
 
 /**