lukas/OpenMediaCenter
1
0
Fork 0
Code Issues 8 Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'api_call_enum' into 'master'

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

See merge request lukas/openmediacenter!33
This commit is contained in:
Lukas Heiligenbrunner
2021-01-29 22:15:17 +00:00
parent e825f94028 b6ab359a37
commit 46aeda73d8
21 changed files with 70 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/App.tsx
View File

@@ -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);

26
src/elements/Popups/AddActorPopup/AddActorPopup.tsx
View File

@@ -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

4
src/elements/Popups/AddTagPopup/AddTagPopup.tsx
View File

@@ -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
});

4
src/elements/Popups/NewActorPopup/NewActorPopup.tsx
View File

@@ -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);

4
src/elements/Popups/NewTagPopup/NewTagPopup.tsx
View File

@@ -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);

3
src/elements/Popups/PopupBase.test.js
View File

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

6
src/elements/Popups/SubmitPopup/SubmitPopup.test.js
View File

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

4
src/elements/Preview/Preview.tsx
View File

@@ -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
});

4
src/pages/ActorOverviewPage/ActorOverviewPage.tsx
View File

@@ -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});
});
}

4
src/pages/ActorPage/ActorPage.tsx
View File

@@ -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) => {

6
src/pages/CategoryPage/CategoryView.tsx
View File

@@ -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

4
src/pages/CategoryPage/TagView.tsx
View File

@@ -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});
});
}

6
src/pages/HomePage/HomePage.tsx
View File

@@ -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'],

4
src/pages/HomePage/SearchHandling.tsx
View File

@@ -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
});

12
src/pages/Player/Player.tsx
View File

@@ -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});
});
}

1
src/pages/RandomPage/RandomPage.test.js
View File

@@ -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 () {

4
src/pages/RandomPage/RandomPage.tsx
View File

@@ -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,

6
src/pages/SettingsPage/GeneralSettings.tsx
View File

@@ -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,

8
src/pages/SettingsPage/MovieSettings.tsx
View File

@@ -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!']
});

14
src/utils/Api.ts
View File

@@ -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'
}

2
src/utils/ShortkeyHandler.ts
View File

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