Merge branch 'api_call_enum' into 'master'

add API node type instead of always use string to define api node

See merge request lukas/openmediacenter!33

src/App.tsx

@@ -9,7 +9,7 @@ import style from './App.module.css';
 
 import SettingsPage from './pages/SettingsPage/SettingsPage';
 import CategoryPage from './pages/CategoryPage/CategoryPage';
-import {callAPI} from './utils/Api';
+import {APINode, callAPI} from './utils/Api';
 import {NoBackendConnectionPopup} from './elements/Popups/NoBackendConnectionPopup/NoBackendConnectionPopup';
 
 import {BrowserRouter as Router, NavLink, Route, Switch} from 'react-router-dom';
@@ -41,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: SettingsTypes.initialApiCallData) => {
+        callAPI(APINode.Settings, {action: 'loadInitialData'}, (result: SettingsTypes.initialApiCallData) => {
             // set theme
             GlobalInfos.enableDarkTheme(result.DarkMode);
 

src/elements/Popups/AddActorPopup/AddActorPopup.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import ActorTile from '../../ActorTile/ActorTile';
 import style from './AddActorPopup.module.css';
 import {NewActorPopupContent} from '../NewActorPopup/NewActorPopup';
-import {callAPI} from '../../../utils/Api';
+import {APINode, callAPI} from '../../../utils/Api';
 import {ActorType} from '../../../types/VideoTypes';
 import {GeneralSuccess} from '../../../types/GeneralTypes';
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
@@ -127,22 +127,12 @@ class AddActorPopup extends React.Component<props, state> {
         }
     }
 
-    /**
-     * enable filterfield and focus into searchbar
-     */
-    private enableFilterField(): void {
-        this.setState({filtervisible: true}, () => {
-            // focus filterfield after state update
-            this.filterfield?.focus();
-        });
-    }
-
     /**
      * event handling for ActorTile Click
      */
     tileClickHandler(actor: ActorType): void {
         // fetch the available actors
-        callAPI<GeneralSuccess>('actor.php', {
+        callAPI<GeneralSuccess>(APINode.Actor, {
             action: 'addActorToVideo',
             actorid: actor.actor_id,
             videoid: this.props.movie_id
@@ -160,11 +150,21 @@ class AddActorPopup extends React.Component<props, state> {
      * load the actors from backend and set state
      */
     loadActors(): void {
-        callAPI<ActorType[]>('actor.php', {action: 'getAllActors'}, result => {
+        callAPI<ActorType[]>(APINode.Actor, {action: 'getAllActors'}, result => {
             this.setState({actors: result});
         });
     }
 
+    /**
+     * enable filterfield and focus into searchbar
+     */
+    private enableFilterField(): void {
+        this.setState({filtervisible: true}, () => {
+            // focus filterfield after state update
+            this.filterfield?.focus();
+        });
+    }
+
     /**
      * filter the actor array for search matches
      * @param actor

src/elements/Popups/AddTagPopup/AddTagPopup.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import Tag from '../../Tag/Tag';
 import PopupBase from '../PopupBase';
-import {callAPI} from '../../../utils/Api';
+import {APINode, callAPI} from '../../../utils/Api';
 import {TagType} from '../../../types/VideoTypes';
 
 interface props {
@@ -25,7 +25,7 @@ class AddTagPopup extends React.Component<props, state> {
     }
 
     componentDidMount(): void {
-        callAPI('tags.php', {action: 'getAllTags'}, (result: TagType[]) => {
+        callAPI(APINode.Tags, {action: 'getAllTags'}, (result: TagType[]) => {
             this.setState({
                 items: result
             });

src/elements/Popups/NewActorPopup/NewActorPopup.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PopupBase from '../PopupBase';
 import style from './NewActorPopup.module.css';
-import {callAPI} from '../../../utils/Api';
+import {APINode, callAPI} from '../../../utils/Api';
 import {GeneralSuccess} from '../../../types/GeneralTypes';
 
 interface NewActorPopupProps {
@@ -43,7 +43,7 @@ export class NewActorPopupContent extends React.Component<NewActorPopupProps> {
         // check if user typed in name
         if (this.value === '' || this.value === undefined) return;
 
-        callAPI('actor.php', {action: 'createActor', actorname: this.value}, (result: GeneralSuccess) => {
+        callAPI(APINode.Actor, {action: 'createActor', actorname: 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/NewTagPopup/NewTagPopup.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PopupBase from '../PopupBase';
 import style from './NewTagPopup.module.css';
-import {callAPI} from '../../../utils/Api';
+import {APINode, callAPI} from '../../../utils/Api';
 import {GeneralSuccess} from '../../../types/GeneralTypes';
 
 interface props {
@@ -29,7 +29,7 @@ class NewTagPopup extends React.Component<props> {
      * store the filled in form to the backend
      */
     storeselection(): void {
-        callAPI('tags.php', {action: 'createTag', tagname: this.value}, (result: GeneralSuccess) => {
+        callAPI(APINode.Tags, {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.test.js

@@ -9,7 +9,8 @@ describe('<PopupBase/>', function () {
     });
 
     let events;
-    function mockKeyPress(){
+
+    function mockKeyPress() {
         events = [];
         document.addEventListener = jest.fn((event, cb) => {
             events[event] = cb;

src/elements/Popups/SubmitPopup/SubmitPopup.test.js

@@ -1,6 +1,6 @@
-import {shallow} from "enzyme";
+import {shallow} from 'enzyme';
-import React from "react";
+import React from 'react';
-import SubmitPopup from "./SubmitPopup";
+import SubmitPopup from './SubmitPopup';
 
 describe('<SubmitPopup/>', function () {
     it('renders without crashing ', function () {

src/elements/Preview/Preview.tsx

@@ -3,7 +3,7 @@ import style from './Preview.module.css';
 import {Spinner} from 'react-bootstrap';
 import {Link} from 'react-router-dom';
 import GlobalInfos from '../../utils/GlobalInfos';
-import {callAPIPlain} from '../../utils/Api';
+import {APINode, callAPIPlain} from '../../utils/Api';
 
 interface PreviewProps {
     name: string;
@@ -28,7 +28,7 @@ class Preview extends React.Component<PreviewProps, PreviewState> {
     }
 
     componentDidMount(): void {
-        callAPIPlain('video.php', {action: 'readThumbnail', movieid: this.props.movie_id}, (result) => {
+        callAPIPlain(APINode.Video, {action: 'readThumbnail', movieid: this.props.movie_id}, (result) => {
             this.setState({
                 previewpicture: result
             });

src/pages/ActorOverviewPage/ActorOverviewPage.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {callAPI} from '../../utils/Api';
+import {APINode, callAPI} from '../../utils/Api';
 import {ActorType} from '../../types/VideoTypes';
 import ActorTile from '../../elements/ActorTile/ActorTile';
 import PageTitle from '../../elements/PageTitle/PageTitle';
@@ -48,7 +48,7 @@ class ActorOverviewPage extends React.Component<props, state> {
     }
 
     fetchAvailableActors(): void {
-        callAPI<ActorType[]>('actor.php', {action: 'getAllActors'}, result => {
+        callAPI<ActorType[]>(APINode.Actor, {action: 'getAllActors'}, result => {
             this.setState({actors: result});
         });
     }

src/pages/ActorPage/ActorPage.tsx

@@ -5,7 +5,7 @@ import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 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 {APINode, callAPI} from '../../utils/Api';
 import {ActorType} from '../../types/VideoTypes';
 import {Link, withRouter} from 'react-router-dom';
 import {RouteComponentProps} from 'react-router';
@@ -66,7 +66,7 @@ export class ActorPage extends React.Component<props, state> {
      * request more actor info from backend
      */
     getActorInfo(): void {
-        callAPI('actor.php', {
+        callAPI(APINode.Actor, {
             action: 'getActorInfo',
             actorid: this.props.match.params.id
         }, (result: ActorTypes.videofetchresult) => {

src/pages/CategoryPage/CategoryView.tsx

@@ -1,7 +1,7 @@
 import {RouteComponentProps} from 'react-router';
 import React from 'react';
 import VideoContainer from '../../elements/VideoContainer/VideoContainer';
-import {callAPI} from '../../utils/Api';
+import {APINode, callAPI} from '../../utils/Api';
 import {withRouter} from 'react-router-dom';
 import {VideoTypes} from '../../types/ApiTypes';
 import PageTitle, {Line} from '../../elements/PageTitle/PageTitle';
@@ -91,7 +91,7 @@ export class CategoryView extends React.Component<CategoryViewProps, CategoryVie
      * @param id tagid
      */
     private fetchVideoData(id: number): void {
-        callAPI<VideoTypes.VideoUnloadedType[]>('video.php', {action: 'getMovies', tag: id}, result => {
+        callAPI<VideoTypes.VideoUnloadedType[]>(APINode.Video, {action: 'getMovies', tag: id}, result => {
             this.videodata = result;
             this.setState({loaded: true});
         });
@@ -101,7 +101,7 @@ export class CategoryView extends React.Component<CategoryViewProps, CategoryVie
      * delete the current tag
      */
     private deleteTag(force: boolean): void {
-        callAPI<GeneralSuccess>('tags.php', {
+        callAPI<GeneralSuccess>(APINode.Tags, {
             action: 'deleteTag',
             tagId: parseInt(this.props.match.params.id),
             force: force

src/pages/CategoryPage/TagView.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import videocontainerstyle from '../../elements/VideoContainer/VideoContainer.module.css';
 import {Link} from 'react-router-dom';
 import {TagPreview} from '../../elements/Preview/Preview';
-import {callAPI} from '../../utils/Api';
+import {APINode, callAPI} from '../../utils/Api';
 import PageTitle, {Line} from '../../elements/PageTitle/PageTitle';
 import SideBar, {SideBarTitle} from '../../elements/SideBar/SideBar';
 import Tag from '../../elements/Tag/Tag';
@@ -69,7 +69,7 @@ class TagView extends React.Component<props, TagViewState> {
      * load all available tags from db.
      */
     loadTags(): void {
-        callAPI<TagType[]>('tags.php', {action: 'getAllTags'}, result => {
+        callAPI<TagType[]>(APINode.Tags, {action: 'getAllTags'}, result => {
             this.setState({loadedtags: result});
         });
     }

src/pages/HomePage/HomePage.tsx

@@ -5,7 +5,7 @@ import VideoContainer from '../../elements/VideoContainer/VideoContainer';
 
 import style from './HomePage.module.css';
 import PageTitle, {Line} from '../../elements/PageTitle/PageTitle';
-import {callAPI} from '../../utils/Api';
+import {APINode, callAPI} from '../../utils/Api';
 import {Route, Switch, withRouter} from 'react-router-dom';
 import {RouteComponentProps} from 'react-router';
 import SearchHandling from './SearchHandling';
@@ -63,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: VideoTypes.VideoUnloadedType[]) => {
+        callAPI(APINode.Video, {action: 'getMovies', tag: tag}, (result: VideoTypes.VideoUnloadedType[]) => {
             this.setState({
                 data: []
             });
@@ -79,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: VideoTypes.startDataType) => {
+        callAPI(APINode.Video, {action: 'getStartData'}, (result: VideoTypes.startDataType) => {
             this.setState({
                 sideinfo: {
                     videonr: result['total'],

src/pages/HomePage/SearchHandling.tsx

@@ -1,7 +1,7 @@
 import {RouteComponentProps} from 'react-router';
 import React from 'react';
 import {withRouter} from 'react-router-dom';
-import {callAPI} from '../../utils/Api';
+import {APINode, callAPI} from '../../utils/Api';
 import VideoContainer from '../../elements/VideoContainer/VideoContainer';
 import PageTitle from '../../elements/PageTitle/PageTitle';
 import SideBar from '../../elements/SideBar/SideBar';
@@ -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: VideoTypes.VideoUnloadedType[]) => {
+        callAPI(APINode.Video, {action: 'getSearchKeyWord', keyword: keyword}, (result: VideoTypes.VideoUnloadedType[]) => {
             this.setState({
                 data: result
             });

src/pages/Player/Player.tsx

@@ -13,7 +13,7 @@ import {faPlusCircle} from '@fortawesome/free-solid-svg-icons';
 import AddActorPopup from '../../elements/Popups/AddActorPopup/AddActorPopup';
 import ActorTile from '../../elements/ActorTile/ActorTile';
 import {withRouter} from 'react-router-dom';
-import {callAPI, getBackendDomain} from '../../utils/Api';
+import {APINode, callAPI, getBackendDomain} from '../../utils/Api';
 import {RouteComponentProps} from 'react-router';
 import {GeneralSuccess} from '../../types/GeneralTypes';
 import {ActorType, TagType} from '../../types/VideoTypes';
@@ -170,7 +170,7 @@ export class Player extends React.Component<myprops, mystate> {
      * @param tagName name of tag to add
      */
     quickAddTag(tagId: number, tagName: string): void {
-        callAPI('tags.php', {
+        callAPI(APINode.Tags, {
             action: 'addTag',
             id: tagId,
             movieid: this.props.match.params.id
@@ -240,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: VideoTypes.loadVideoType) => {
+        callAPI(APINode.Video, {action: 'loadVideo', movieid: this.props.match.params.id}, (result: VideoTypes.loadVideoType) => {
             this.setState({
                 sources: {
                     type: 'video',
@@ -270,7 +270,7 @@ export class Player extends React.Component<myprops, mystate> {
      * click handler for the like btn
      */
     likebtn(): void {
-        callAPI('video.php', {action: 'addLike', movieid: this.props.match.params.id}, (result: GeneralSuccess) => {
+        callAPI(APINode.Video, {action: 'addLike', movieid: this.props.match.params.id}, (result: GeneralSuccess) => {
             if (result.result === 'success') {
                 // likes +1 --> avoid reload of all data
                 this.setState({likes: this.state.likes + 1});
@@ -293,7 +293,7 @@ export class Player extends React.Component<myprops, mystate> {
      * delete the current video and return to last page
      */
     deleteVideo(): void {
-        callAPI('video.php', {action: 'deleteVideo', movieid: this.props.match.params.id}, (result: GeneralSuccess) => {
+        callAPI(APINode.Video, {action: 'deleteVideo', movieid: this.props.match.params.id}, (result: GeneralSuccess) => {
             if (result.result === 'success') {
                 // return to last element if successful
                 this.props.history.goBack();
@@ -315,7 +315,7 @@ export class Player extends React.Component<myprops, mystate> {
      * fetch the available video actors again
      */
     refetchActors(): void {
-        callAPI<ActorType[]>('actor.php', {action: 'getActorsOfVideo', videoid: this.props.match.params.id}, result => {
+        callAPI<ActorType[]>(APINode.Actor, {action: 'getActorsOfVideo', videoid: this.props.match.params.id}, result => {
             this.setState({actors: result});
         });
     }

src/pages/RandomPage/RandomPage.test.js

@@ -2,7 +2,6 @@ import {shallow} from 'enzyme';
 import React from 'react';
 import RandomPage from './RandomPage';
 import {callAPI} from '../../utils/Api';
-import PopupBase from '../../elements/Popups/PopupBase';
 
 describe('<RandomPage/>', function () {
     it('renders without crashing ', function () {

src/pages/RandomPage/RandomPage.tsx

@@ -4,7 +4,7 @@ import SideBar, {SideBarTitle} from '../../elements/SideBar/SideBar';
 import Tag from '../../elements/Tag/Tag';
 import PageTitle from '../../elements/PageTitle/PageTitle';
 import VideoContainer from '../../elements/VideoContainer/VideoContainer';
-import {callAPI} from '../../utils/Api';
+import {APINode, callAPI} from '../../utils/Api';
 import {TagType} from '../../types/VideoTypes';
 import {VideoTypes} from '../../types/ApiTypes';
 import {addKeyHandler, removeKeyHandler} from '../../utils/ShortkeyHandler';
@@ -83,7 +83,7 @@ class RandomPage extends React.Component<{}, state> {
      * @param nr number of videos to load
      */
     loadShuffledvideos(nr: number): void {
-        callAPI<GetRandomMoviesType>('video.php', {action: 'getRandomMovies', number: nr}, result => {
+        callAPI<GetRandomMoviesType>(APINode.Video, {action: 'getRandomMovies', number: nr}, result => {
             this.setState({videos: []}); // needed to trigger rerender of main videoview
             this.setState({
                 videos: result.rows,

src/pages/SettingsPage/GeneralSettings.tsx

@@ -6,7 +6,7 @@ import InfoHeaderItem from '../../elements/InfoHeaderItem/InfoHeaderItem';
 import {faArchive, faBalanceScaleLeft, faRulerVertical} from '@fortawesome/free-solid-svg-icons';
 import {faAddressCard} from '@fortawesome/free-regular-svg-icons';
 import {version} from '../../../package.json';
-import {callAPI, setCustomBackendDomain} from '../../utils/Api';
+import {APINode, callAPI, setCustomBackendDomain} from '../../utils/Api';
 import {SettingsTypes} from '../../types/ApiTypes';
 import {GeneralSuccess} from '../../types/GeneralTypes';
 
@@ -191,7 +191,7 @@ class GeneralSettings extends React.Component<props, state> {
      * inital load of already specified settings from backend
      */
     loadSettings(): void {
-        callAPI('settings.php', {action: 'loadGeneralSettings'}, (result: SettingsTypes.loadGeneralSettingsType) => {
+        callAPI(APINode.Settings, {action: 'loadGeneralSettings'}, (result: SettingsTypes.loadGeneralSettingsType) => {
             this.setState({
                 videopath: result.video_path,
                 tvshowpath: result.episode_path,
@@ -212,7 +212,7 @@ class GeneralSettings extends React.Component<props, state> {
      * save the selected and typed settings to the backend
      */
     saveSettings(): void {
-        callAPI('settings.php', {
+        callAPI(APINode.Settings, {
             action: 'saveGeneralSettings',
             password: this.state.passwordsupport ? this.state.password : '-1',
             videopath: this.state.videopath,

src/pages/SettingsPage/MovieSettings.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import style from './MovieSettings.module.css';
-import {callAPI} from '../../utils/Api';
+import {APINode, callAPI} from '../../utils/Api';
 import {GeneralSuccess} from '../../types/GeneralTypes';
 import {SettingsTypes} from '../../types/ApiTypes';
 
@@ -64,7 +64,7 @@ class MovieSettings extends React.Component<props, state> {
 
         console.log('starting');
 
-        callAPI('settings.php', {action: 'startReindex'}, (result: GeneralSuccess): void => {
+        callAPI(APINode.Settings, {action: 'startReindex'}, (result: GeneralSuccess): void => {
             console.log(result);
             if (result.result === 'success') {
                 console.log('started successfully');
@@ -84,7 +84,7 @@ class MovieSettings extends React.Component<props, state> {
      * This interval function reloads the current status of reindexing from backend
      */
     updateStatus = (): void => {
-        callAPI('settings.php', {action: 'getStatusMessage'}, (result: SettingsTypes.getStatusMessageType) => {
+        callAPI(APINode.Settings, {action: 'getStatusMessage'}, (result: SettingsTypes.getStatusMessageType) => {
             if (result.contentAvailable === true) {
                 console.log(result);
                 // todo 2020-07-4: scroll to bottom of div here
@@ -106,7 +106,7 @@ class MovieSettings extends React.Component<props, state> {
      * send request to cleanup db gravity
      */
     cleanupGravity(): void {
-        callAPI('settings.php', {action: 'cleanupGravity'}, (result) => {
+        callAPI(APINode.Settings, {action: 'cleanupGravity'}, (result) => {
             this.setState({
                 text: ['successfully cleaned up gravity!']
             });

src/utils/Api.ts

@@ -63,7 +63,7 @@ function buildFormData(args: ApiBaseRequest): FormData {
  * @param callback the callback with json reply from backend
  * @param errorcallback a optional callback if an error occured
  */
-export function callAPI<T>(apinode: string, fd: ApiBaseRequest, callback: (_: T) => void, errorcallback: (_: string) => void = (_: string): void => {}): void {
+export function callAPI<T>(apinode: APINode, fd: ApiBaseRequest, callback: (_: T) => void, errorcallback: (_: string) => void = (_: string): void => {}): void {
     fetch(getAPIDomain() + apinode, {method: 'POST', body: buildFormData(fd)})
         .then((response) => response.json()
             .then((result) => {
@@ -77,7 +77,7 @@ export function callAPI<T>(apinode: string, fd: ApiBaseRequest, callback: (_: T)
  * @param fd the object to send to backend
  * @param callback the callback with PLAIN text reply from backend
  */
-export function callAPIPlain(apinode: string, fd: ApiBaseRequest, callback: (_: string) => void): void {
+export function callAPIPlain(apinode: APINode, fd: ApiBaseRequest, callback: (_: string) => void): void {
     fetch(getAPIDomain() + apinode, {method: 'POST', body: buildFormData(fd)})
         .then((response) => response.text()
             .then((result) => {
@@ -85,3 +85,13 @@ export function callAPIPlain(apinode: string, fd: ApiBaseRequest, callback: (_:
             }));
 
 }
+
+/**
+ * API nodes definitions
+ */
+export enum APINode {
+    Settings = 'settings.php',
+    Tags = 'tags.php',
+    Actor = 'actor.php',
+    Video = 'video.php'
+}

src/utils/ShortkeyHandler.ts

@@ -12,4 +12,4 @@ export const addKeyHandler = (handler: (event: KeyboardEvent) => void): void =>
  */
 export const removeKeyHandler = (handler: (event: KeyboardEvent) => void): void => {
     document.removeEventListener('keyup', handler);
-}
+};