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

build electron app

Browse Source 
implement new fetch api calls
use typescript
This commit is contained in:
Lukas Heiligenbrunner
2020-12-17 20:53:22 +00:00
parent c049aa345c
commit 7d696122fa
43 changed files with 804 additions and 500 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/pages/ActorPage/ActorPage.js
View File

@ -5,6 +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';
class ActorPage extends React.Component {
constructor(props) {
@ -40,17 +41,10 @@ class ActorPage extends React.Component {
*/
getActorInfo() {
// todo 2020-12-4: fetch to db
const req = new FormData();
req.append('action', 'getActorInfo');
req.append('actorid', this.props.actor.actor_id);
fetch('/api/actor.php', {method: 'POST', body: req})
.then((response) => response.json()
.then((result) => {
console.log(result);
this.setState({data: result.videos ? result.videos : []});
}));
callAPI('actor.php', {action: 'getActorInfo', actorid: this.props.actor.actor_id}, result => {
console.log(result);
this.setState({data: result.videos ? result.videos : []});
});
}
}

39
src/pages/CategoryPage/CategoryPage.js
View File

@ -7,6 +7,7 @@ import {TagPreview} from '../../elements/Preview/Preview';
import NewTagPopup from '../../elements/Popups/NewTagPopup/NewTagPopup';
import PageTitle, {Line} from '../../elements/PageTitle/PageTitle';
import VideoContainer from '../../elements/VideoContainer/VideoContainer';
import {callAPI} from '../../utils/Api';
/**
* Component for Category Page
@ -111,24 +112,11 @@ class CategoryPage extends React.Component {
* @param tag tagname
*/
fetchVideoData(tag) {
console.log(tag);
const updateRequest = new FormData();
updateRequest.append('action', 'getMovies');
updateRequest.append('tag', tag);
console.log('fetching data');
// fetch all videos available
fetch('/api/video.php', {method: 'POST', body: updateRequest})
.then((response) => response.json()
.then((result) => {
this.videodata = result;
this.setState({selected: null}); // needed to trigger the state reload correctly
this.setState({selected: tag});
}))
.catch(() => {
console.log('no connection to backend');
});
callAPI('video.php', {action: 'getMovies', tag: tag}, result => {
this.videodata = result;
this.setState({selected: null}); // needed to trigger the state reload correctly
this.setState({selected: tag});
});
}
/**
@ -143,18 +131,9 @@ class CategoryPage extends React.Component {
* load all available tags from db.
*/
loadTags() {
const updateRequest = new FormData();
updateRequest.append('action', 'getAllTags');
// fetch all videos available
fetch('/api/tags.php', {method: 'POST', body: updateRequest})
.then((response) => response.json()
.then((result) => {
this.setState({loadedtags: result});
}))
.catch(() => {
console.log('no connection to backend');
});
callAPI('tags.php', {action: 'getAllTags'}, result => {
this.setState({loadedtags: result});
});
}
}

21
src/pages/CategoryPage/CategoryPage.test.js
View File

@ -24,27 +24,6 @@ describe('<CategoryPage/>', function () {
});
});
it('test errored fetch call', done => {
global.fetch = global.prepareFetchApi({});
let message;
global.console.log = jest.fn((m) => {
message = m;
});
shallow(<CategoryPage/>);
expect(global.fetch).toHaveBeenCalledTimes(1);
process.nextTick(() => {
//callback to close window should have called
expect(message).toBe('no connection to backend');
global.fetch.mockClear();
done();
});
});
it('test new tag popup', function () {
const wrapper = shallow(<CategoryPage/>);

88
src/pages/HomePage/HomePage.js
View File

@ -5,6 +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';
/**
* The home page component showing on the initial pageload
@ -43,54 +44,33 @@ class HomePage extends React.Component {
* @param tag tag to fetch videos
*/
fetchVideoData(tag) {
const updateRequest = new FormData();
updateRequest.append('action', 'getMovies');
updateRequest.append('tag', tag);
console.log('fetching data from' + tag);
// fetch all videos available
fetch('/api/video.php', {method: 'POST', body: updateRequest})
.then((response) => response.json()
.then((result) => {
this.setState({
data: []
});
this.setState({
data: result,
selectionnr: result.length,
tag: tag + ' Videos'
});
}))
.catch(() => {
console.log('no connection to backend');
callAPI('video.php', {action: 'getMovies', tag: tag}, (result) => {
this.setState({
data: []
});
this.setState({
data: result,
selectionnr: result.length,
tag: tag + ' Videos'
});
});
}
/**
* fetch the necessary data for left info box
*/
fetchStartData() {
const updateRequest = new FormData();
updateRequest.append('action', 'getStartData');
// fetch all videos available
fetch('/api/video.php', {method: 'POST', body: updateRequest})
.then((response) => response.json()
.then((result) => {
this.setState({
sideinfo: {
videonr: result['total'],
fullhdvideonr: result['fullhd'],
hdvideonr: result['hd'],
sdvideonr: result['sd'],
tagnr: result['tags']
}
});
}))
.catch(() => {
console.log('no connection to backend');
callAPI('video.php', {action: 'getStartData'}, (result) => {
this.setState({
sideinfo: {
videonr: result['total'],
fullhdvideonr: result['fullhd'],
hdvideonr: result['hd'],
sdvideonr: result['sd'],
tagnr: result['tags']
}
});
});
}
/**
@ -101,26 +81,16 @@ class HomePage extends React.Component {
searchVideos(keyword) {
console.log('search called');
const updateRequest = new FormData();
updateRequest.append('action', 'getSearchKeyWord');
updateRequest.append('keyword', keyword);
// fetch all videos available
fetch('/api/video.php', {method: 'POST', body: updateRequest})
.then((response) => response.json()
.then((result) => {
this.setState({
data: []
});
this.setState({
data: result,
selectionnr: result.length,
tag: 'Search result: ' + keyword
});
}))
.catch(() => {
console.log('no connection to backend');
callAPI('video.php', {action: 'getSearchKeyWord', keyword: keyword}, (result) => {
this.setState({
data: []
});
this.setState({
data: result,
selectionnr: result.length,
tag: 'Search result: ' + keyword
});
});
}
render() {

190
src/pages/Player/Player.js
View File

@ -1,7 +1,7 @@
import React from 'react';
import style from './Player.module.css';
import plyrstyle from 'plyr-react/dist/plyr.css'
import plyrstyle from 'plyr-react/dist/plyr.css';
import {Plyr} from 'plyr-react';
import SideBar, {SideBarItem, SideBarTitle} from '../../elements/SideBar/SideBar';
@ -12,7 +12,8 @@ import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import {faPlusCircle} from '@fortawesome/free-solid-svg-icons';
import AddActorPopup from '../../elements/Popups/AddActorPopup/AddActorPopup';
import ActorTile from '../../elements/ActorTile/ActorTile';
import GlobalInfos from '../../GlobalInfos';
import GlobalInfos from '../../utils/GlobalInfos';
import {callAPI, getBackendDomain} from '../../utils/Api';
/**
@ -67,47 +68,40 @@ class Player extends React.Component {
* @param tagName name of tag to add
*/
quickAddTag(tagId, tagName) {
const updateRequest = new FormData();
updateRequest.append('action', 'addTag');
updateRequest.append('id', tagId);
updateRequest.append('movieid', this.props.movie_id);
callAPI('tags.php', {action: 'addTag', id: tagId, movieid: this.props.movie_id}, (result) => {
if (result.result !== 'success') {
console.error('error occured while writing to db -- todo error handling');
console.error(result.result);
} else {
// check if tag has already been added
const tagIndex = this.state.tags.map(function (e) {
return e.tag_name;
}).indexOf(tagName);
fetch('/api/tags.php', {method: 'POST', body: updateRequest})
.then((response) => response.json()
.then((result) => {
if (result.result !== 'success') {
console.error('error occured while writing to db -- todo error handling');
console.error(result.result);
// only add tag if it isn't already there
if (tagIndex === -1) {
// update tags if successful
let array = [...this.state.suggesttag]; // make a separate copy of the array (because of setState)
const quickaddindex = this.state.suggesttag.map(function (e) {
return e.tag_id;
}).indexOf(tagId);
// check if tag is available in quickadds
if (quickaddindex !== -1) {
array.splice(quickaddindex, 1);
this.setState({
tags: [...this.state.tags, {tag_name: tagName}],
suggesttag: array
});
} else {
// check if tag has already been added
const tagIndex = this.state.tags.map(function (e) {
return e.tag_name;
}).indexOf(tagName);
// only add tag if it isn't already there
if (tagIndex === -1) {
// update tags if successful
let array = [...this.state.suggesttag]; // make a separate copy of the array (because of setState)
const quickaddindex = this.state.suggesttag.map(function (e) {
return e.tag_id;
}).indexOf(tagId);
// check if tag is available in quickadds
if (quickaddindex !== -1) {
array.splice(quickaddindex, 1);
this.setState({
tags: [...this.state.tags, {tag_name: tagName}],
suggesttag: array
});
} else {
this.setState({
tags: [...this.state.tags, {tag_name: tagName}]
});
}
}
this.setState({
tags: [...this.state.tags, {tag_name: tagName}]
});
}
}));
}
}
});
}
/**
@ -179,7 +173,7 @@ class Player extends React.Component {
<div className={style.videowrapper}>
{/* video component is added here */}
{this.state.sources ? <Plyr
style={plyrstyle}
style={plyrstyle}
source={this.state.sources}
options={this.options}/> :
<div>not loaded yet</div>}
@ -227,36 +221,30 @@ class Player extends React.Component {
* fetch all the required infos of a video from backend
*/
fetchMovieData() {
const updateRequest = new FormData();
updateRequest.append('action', 'loadVideo');
updateRequest.append('movieid', this.props.movie_id);
fetch('/api/video.php', {method: 'POST', body: updateRequest})
.then((response) => response.json())
.then((result) => {
this.setState({
sources: {
type: 'video',
sources: [
{
src: result.movie_url,
type: 'video/mp4',
size: 1080
}
],
poster: result.thumbnail
},
movie_id: result.movie_id,
movie_name: result.movie_name,
likes: result.likes,
quality: result.quality,
length: result.length,
tags: result.tags,
suggesttag: result.suggesttag,
actors: result.actors
});
console.log(this.state);
callAPI('video.php', {action: 'loadVideo', movieid: this.props.movie_id}, result => {
this.setState({
sources: {
type: 'video',
sources: [
{
src: getBackendDomain() + result.movie_url,
type: 'video/mp4',
size: 1080
}
],
poster: result.thumbnail
},
movie_id: result.movie_id,
movie_name: result.movie_name,
likes: result.likes,
quality: result.quality,
length: result.length,
tags: result.tags,
suggesttag: result.suggesttag,
actors: result.actors
});
console.log(this.state);
});
}
@ -264,21 +252,15 @@ class Player extends React.Component {
* click handler for the like btn
*/
likebtn() {
const updateRequest = new FormData();
updateRequest.append('action', 'addLike');
updateRequest.append('movieid', this.props.movie_id);
fetch('/api/video.php', {method: 'POST', body: updateRequest})
.then((response) => response.json()
.then((result) => {
if (result.result === 'success') {
// likes +1 --> avoid reload of all data
this.setState({likes: this.state.likes + 1});
} else {
console.error('an error occured while liking');
console.error(result);
}
}));
callAPI('video.php', {action: 'addLike', movieid: this.props.movie_id}, result => {
if (result.result === 'success') {
// likes +1 --> avoid reload of all data
this.setState({likes: this.state.likes + 1});
} else {
console.error('an error occured while liking');
console.error(result);
}
});
}
/**
@ -293,21 +275,15 @@ class Player extends React.Component {
* delete the current video and return to last page
*/
deleteVideo() {
const updateRequest = new FormData();
updateRequest.append('action', 'deleteVideo');
updateRequest.append('movieid', this.props.movie_id);
fetch('/api/video.php', {method: 'POST', body: updateRequest})
.then((response) => response.json()
.then((result) => {
if (result.result === 'success') {
// return to last element if successful
GlobalInfos.getViewBinding().returnToLastElement();
} else {
console.error('an error occured while liking');
console.error(result);
}
}));
callAPI('video.php', {action: 'deleteVideo', movieid: this.props.movie_id}, result => {
if (result.result === 'success') {
// return to last element if successful
GlobalInfos.getViewBinding().returnToLastElement();
} else {
console.error('an error occured while liking');
console.error(result);
}
});
}
/**
@ -318,17 +294,9 @@ class Player extends React.Component {
}
refetchActors() {
const req = new FormData();
req.append('action', 'getActorsOfVideo');
req.append('videoid', this.props.movie_id);
console.log('refrething actors');
fetch('/api/actor.php', {method: 'POST', body: req})
.then((response) => response.json()
.then((result) => {
this.setState({actors: result});
}));
callAPI('actor.php', {action: 'getActorsOfVideo', videoid: this.props.movie_id}, result => {
this.setState({actors: result});
});
}
}

77
src/pages/Player/Player.test.js
View File

@ -1,6 +1,7 @@
import {shallow} from 'enzyme';
import React from 'react';
import Player from './Player';
import {callAPI} from '../../utils/Api';
describe('<Player/>', function () {
it('renders without crashing ', function () {
@ -81,7 +82,7 @@ describe('<Player/>', function () {
const wrapper = shallow(<Player/>);
const func = jest.fn();
prepareViewBinding(func)
prepareViewBinding(func);
global.fetch = prepareFetchApi({result: 'success'});
@ -163,6 +164,58 @@ describe('<Player/>', function () {
});
});
it('showspopups correctly', function () {
const wrapper = shallow(<Player/>);
wrapper.setState({popupvisible: true}, () => {
// is the AddTagpopu rendered?
expect(wrapper.find('AddTagPopup')).toHaveLength(1);
wrapper.setState({popupvisible: false, actorpopupvisible: true}, () => {
// actorpopup rendred and tagpopup hidden?
expect(wrapper.find('AddTagPopup')).toHaveLength(0);
expect(wrapper.find('AddActorPopup')).toHaveLength(1);
});
});
});
it('quickadd tag correctly', function () {
const wrapper = shallow(<Player/>);
global.callAPIMock({result: 'success'});
wrapper.setState({suggesttag: [{tag_name: 'test', tag_id: 1}]}, () => {
// mock funtion should have not been called
expect(callAPI).toBeCalledTimes(0);
wrapper.find('Tag').findWhere(p => p.text() === 'test').parent().dive().simulate('click');
// mock function should have been called once
expect(callAPI).toBeCalledTimes(1);
// expect tag added to video tags
expect(wrapper.state().tags).toMatchObject([{tag_name: 'test'}]);
// expect tag to be removed from tag suggestions
expect(wrapper.state().suggesttag).toHaveLength(0);
});
});
it('test adding of already existing tag', function () {
const wrapper = shallow(<Player/>);
global.callAPIMock({result: 'success'});
wrapper.setState({suggesttag: [{tag_name: 'test', tag_id: 1}], tags: [{tag_name: 'test', tag_id: 1}]}, () => {
// mock funtion should have not been called
expect(callAPI).toBeCalledTimes(0);
wrapper.find('Tag').findWhere(p => p.text() === 'test').last().parent().dive().simulate('click');
// mock function should have been called once
expect(callAPI).toBeCalledTimes(1);
// there should not been added a duplicate of tag so object stays same...
expect(wrapper.state().tags).toMatchObject([{tag_name: 'test'}]);
// the suggestion tag shouldn't be removed (this can't actually happen in rl
// because backennd doesn't give dupliacate suggestiontags)
expect(wrapper.state().suggesttag).toHaveLength(1);
});
});
function generatetag() {
const wrapper = shallow(<Player/>);
@ -178,4 +231,26 @@ describe('<Player/>', function () {
return wrapper;
}
it('test addactor popup showing', function () {
const wrapper = shallow(<Player/>);
expect(wrapper.find('AddActorPopup')).toHaveLength(0);
wrapper.instance().addActor();
// check if popup is visible
expect(wrapper.find('AddActorPopup')).toHaveLength(1);
});
it('test hiding of addactor popup', function () {
const wrapper = shallow(<Player/>);
wrapper.instance().addActor();
expect(wrapper.find('AddActorPopup')).toHaveLength(1);
wrapper.find('AddActorPopup').props().onHide();
expect(wrapper.find('AddActorPopup')).toHaveLength(0);
});
});

25
src/pages/RandomPage/RandomPage.js
View File

@ -4,6 +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';
/**
* Randompage shuffles random viedeopreviews and provides a shuffle btn
@ -61,25 +62,15 @@ class RandomPage extends React.Component {
* @param nr number of videos to load
*/
loadShuffledvideos(nr) {
const updateRequest = new FormData();
updateRequest.append('action', 'getRandomMovies');
updateRequest.append('number', nr);
callAPI('video.php', {action: 'getRandomMovies', number: nr}, result => {
console.log(result);
// fetch all videos available
fetch('/api/video.php', {method: 'POST', body: updateRequest})
.then((response) => response.json()
.then((result) => {
console.log(result);
this.setState({videos: []}); // needed to trigger rerender of main videoview
this.setState({
videos: result.rows,
tags: result.tags
});
}))
.catch(() => {
console.log('no connection to backend');
this.setState({videos: []}); // needed to trigger rerender of main videoview
this.setState({
videos: result.rows,
tags: result.tags
});
});
}
}

101
src/pages/SettingsPage/GeneralSettings.js
View File

@ -1,11 +1,12 @@
import React from 'react';
import {Button, Col, Form} from 'react-bootstrap';
import style from './GeneralSettings.module.css';
import GlobalInfos from '../../GlobalInfos';
import GlobalInfos from '../../utils/GlobalInfos';
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';
/**
* Component for Generalsettings tag on Settingspage
@ -18,6 +19,7 @@ class GeneralSettings extends React.Component {
this.state = {
passwordsupport: false,
tmdbsupport: null,
customapi: false,
videopath: '',
tvshowpath: '',
@ -77,6 +79,31 @@ class GeneralSettings extends React.Component {
</Form.Group>
</Form.Row>
<Form.Check
type='switch'
id='custom-switch-api'
label='Use custom API url'
checked={this.state.customapi}
onChange={() => {
if (this.state.customapi) {
setCustomBackendDomain('');
}
this.setState({customapi: !this.state.customapi});
}}
/>
{this.state.customapi ?
<Form.Group className={style.customapiform} data-testid='apipath'>
<Form.Label>API Backend url</Form.Label>
<Form.Control type='text' placeholder='https://127.0.0.1'
value={this.state.apipath}
onChange={(e) => {
this.setState({apipath: e.target.value});
setCustomBackendDomain(e.target.value);
}}/>
</Form.Group> : null}
<Form.Check
type='switch'
id='custom-switch'
@ -142,54 +169,44 @@ class GeneralSettings extends React.Component {
* inital load of already specified settings from backend
*/
loadSettings() {
const updateRequest = new FormData();
updateRequest.append('action', 'loadGeneralSettings');
callAPI('settings.php', {action: 'loadGeneralSettings'}, (result) => {
this.setState({
videopath: result.video_path,
tvshowpath: result.episode_path,
mediacentername: result.mediacenter_name,
password: result.password,
passwordsupport: result.passwordEnabled,
tmdbsupport: result.TMDB_grabbing,
fetch('/api/settings.php', {method: 'POST', body: updateRequest})
.then((response) => response.json()
.then((result) => {
console.log(result);
this.setState({
videopath: result.video_path,
tvshowpath: result.episode_path,
mediacentername: result.mediacenter_name,
password: result.password,
passwordsupport: result.passwordEnabled,
tmdbsupport: result.TMDB_grabbing,
videonr: result.videonr,
dbsize: result.dbsize,
difftagnr: result.difftagnr,
tagsadded: result.tagsadded
});
}));
videonr: result.videonr,
dbsize: result.dbsize,
difftagnr: result.difftagnr,
tagsadded: result.tagsadded
});
});
}
/**
* save the selected and typed settings to the backend
*/
saveSettings() {
const updateRequest = new FormData();
updateRequest.append('action', 'saveGeneralSettings');
updateRequest.append('password', this.state.passwordsupport ? this.state.password : '-1');
updateRequest.append('videopath', this.state.videopath);
updateRequest.append('tvshowpath', this.state.tvshowpath);
updateRequest.append('mediacentername', this.state.mediacentername);
updateRequest.append('tmdbsupport', this.state.tmdbsupport);
updateRequest.append('darkmodeenabled', GlobalInfos.isDarkTheme().toString());
fetch('/api/settings.php', {method: 'POST', body: updateRequest})
.then((response) => response.json()
.then((result) => {
if (result.success) {
console.log('successfully saved settings');
// todo 2020-07-10: popup success
} else {
console.log('failed to save settings');
// todo 2020-07-10: popup error
}
}));
callAPI('settings.php', {
action: 'saveGeneralSettings',
password: this.state.passwordsupport ? this.state.password : '-1',
videopath: this.state.videopath,
tvshowpath: this.state.tvshowpath,
mediacentername: this.state.mediacentername,
tmdbsupport: this.state.tmdbsupport,
darkmodeenabled: GlobalInfos.isDarkTheme().toString()
}, (result) => {
if (result.success) {
console.log('successfully saved settings');
// todo 2020-07-10: popup success
} else {
console.log('failed to save settings');
// todo 2020-07-10: popup error
}
});
}
}

5
src/pages/SettingsPage/GeneralSettings.module.css
View File

@ -8,6 +8,11 @@
width: 40%;
}
.customapiform{
margin-top: 15px;
width: 40%;
}
.infoheader {
display: flex;
flex-wrap: wrap;

2
src/pages/SettingsPage/GeneralSettings.test.js
View File

@ -1,7 +1,7 @@
import {shallow} from 'enzyme';
import React from 'react';
import GeneralSettings from './GeneralSettings';
import GlobalInfos from '../../GlobalInfos';
import GlobalInfos from '../../utils/GlobalInfos';
describe('<GeneralSettings/>', function () {
it('renders without crashing ', function () {

83
src/pages/SettingsPage/MovieSettings.js
View File

@ -1,5 +1,6 @@
import React from 'react';
import style from './MovieSettings.module.css';
import {callAPI} from '../../utils/Api';
/**
* Component for MovieSettings on Settingspage
@ -50,23 +51,17 @@ class MovieSettings extends React.Component {
this.setState({startbtnDisabled: true});
console.log('starting');
const request = new FormData();
request.append('action', 'startReindex');
// fetch all videos available
fetch('/api/settings.php', {method: 'POST', body: request})
.then((response) => response.json()
.then((result) => {
console.log(result);
if (result.success) {
console.log('started successfully');
} else {
console.log('error, reindex already running');
this.setState({startbtnDisabled: true});
}
}))
.catch(() => {
console.log('no connection to backend');
});
callAPI('settings.php', {action: 'startReindex'}, (result) => {
console.log(result);
if (result.success) {
console.log('started successfully');
} else {
console.log('error, reindex already running');
this.setState({startbtnDisabled: true});
}
});
if (this.myinterval) {
clearInterval(this.myinterval);
}
@ -77,49 +72,33 @@ class MovieSettings extends React.Component {
* This interval function reloads the current status of reindexing from backend
*/
updateStatus = () => {
const request = new FormData();
request.append('action', 'getStatusMessage');
callAPI('settings.php', {action: 'getStatusMessage'}, (result) => {
if (result.contentAvailable === true) {
console.log(result);
// todo 2020-07-4: scroll to bottom of div here
this.setState({
// insert a string for each line
text: [...result.message.split('\n'),
...this.state.text]
});
} else {
// clear refresh interval if no content available
clearInterval(this.myinterval);
fetch('/api/settings.php', {method: 'POST', body: request})
.then((response) => response.json()
.then((result) => {
if (result.contentAvailable === true) {
console.log(result);
// todo 2020-07-4: scroll to bottom of div here
this.setState({
// insert a string for each line
text: [...result.message.split('\n'),
...this.state.text]
});
} else {
// clear refresh interval if no content available
clearInterval(this.myinterval);
this.setState({startbtnDisabled: false});
}
}))
.catch(() => {
console.log('no connection to backend');
});
this.setState({startbtnDisabled: false});
}
});
};
/**
* send request to cleanup db gravity
*/
cleanupGravity() {
const request = new FormData();
request.append('action', 'cleanupGravity');
fetch('/api/settings.php', {method: 'POST', body: request})
.then((response) => response.text()
.then((result) => {
this.setState({
text: ['successfully cleaned up gravity!']
});
}))
.catch(() => {
console.log('no connection to backend');
callAPI('settings.php', {action: 'cleanupGravity'}, (result) => {
this.setState({
text: ['successfully cleaned up gravity!']
});
});
}
}

14
src/pages/SettingsPage/SettingsPage.js → src/pages/SettingsPage/SettingsPage.tsx
View File

@ -2,14 +2,18 @@ import React from 'react';
import MovieSettings from './MovieSettings';
import GeneralSettings from './GeneralSettings';
import style from './SettingsPage.module.css';
import GlobalInfos from '../../GlobalInfos';
import GlobalInfos from '../../utils/GlobalInfos';
type SettingsPageState = {
currentpage: string
}
/**
* The Settingspage handles all kinds of settings for the mediacenter
* and is basically a wrapper for child-tabs
*/
class SettingsPage extends React.Component {
constructor(props, context) {
class SettingsPage extends React.Component<{}, SettingsPageState> {
constructor(props: Readonly<{}> | {}, context?: any) {
super(props, context);
this.state = {
@ -21,7 +25,7 @@ class SettingsPage extends React.Component {
* load the selected tab
* @returns {JSX.Element|string} the jsx element of the selected tab
*/
getContent() {
getContent(): JSX.Element | string {
switch (this.state.currentpage) {
case 'general':
return <GeneralSettings/>;
@ -34,7 +38,7 @@ class SettingsPage extends React.Component {
}
}
render() {
render() : JSX.Element {
const themestyle = GlobalInfos.getThemeStyle();
return (
<div>