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

use eslint to lint project

Browse Source 
drop code quality job
This commit is contained in:
Lukas Heiligenbrunner
2021-03-14 14:51:53 +00:00
parent ba2704b285
commit 1fc67365f0
42 changed files with 1614 additions and 843 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/elements/ActorTile/ActorTile.tsx
View File

@@ -5,13 +5,13 @@ import React from 'react';
import {Link} from 'react-router-dom';
import {ActorType} from '../../types/VideoTypes';
interface props {
interface Props {
actor: ActorType;
onClick?: (actor: ActorType) => void
onClick?: (actor: ActorType) => void;
}
class ActorTile extends React.Component<props> {
constructor(props: props) {
class ActorTile extends React.Component<Props> {
constructor(props: Props) {
super(props);
this.state = {};
@@ -21,12 +21,7 @@ class ActorTile extends React.Component<props> {
if (this.props.onClick) {
return this.renderActorTile(this.props.onClick);
} else {
return (
<Link to={{pathname: '/actors/' + this.props.actor.ActorId}}>
{this.renderActorTile(() => {
})}
</Link>
);
return <Link to={{pathname: '/actors/' + this.props.actor.ActorId}}>{this.renderActorTile(() => {})}</Link>;
}
}
@@ -34,9 +29,19 @@ class ActorTile extends React.Component<props> {
return (
<div className={style.actortile} onClick={(): void => customclickhandler(this.props.actor)}>
<div className={style.actortile_thumbnail}>
{this.props.actor.Thumbnail === '' ? <FontAwesomeIcon style={{
lineHeight: '130px'
}} icon={faUser} size='5x'/> : 'dfdf' /* todo render picture provided here! */}
{
this.props.actor.Thumbnail === '' ? (
<FontAwesomeIcon
style={{
lineHeight: '130px'
}}
icon={faUser}
size='5x'
/>
) : (
'dfdf'
) /* todo render picture provided here! */
}
</div>
<div className={style.actortile_name}>{this.props.actor.Name}</div>
</div>

98
src/elements/FilterButton/FilterButton.tsx
View File

@@ -1,12 +1,12 @@
import React from "react";
import style from "../Popups/AddActorPopup/AddActorPopup.module.css";
import {Button} from "../GPElements/Button";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {faFilter, faTimes} from "@fortawesome/free-solid-svg-icons";
import {addKeyHandler, removeKeyHandler} from "../../utils/ShortkeyHandler";
import React from 'react';
import style from '../Popups/AddActorPopup/AddActorPopup.module.css';
import {Button} from '../GPElements/Button';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import {faFilter, faTimes} from '@fortawesome/free-solid-svg-icons';
import {addKeyHandler, removeKeyHandler} from '../../utils/ShortkeyHandler';
interface props {
onFilterChange: (filter: string) => void
interface Props {
onFilterChange: (filter: string) => void;
}
interface state {
@@ -14,18 +14,17 @@ interface state {
filter: string;
}
class FilterButton extends React.Component<props, state> {
class FilterButton extends React.Component<Props, state> {
// filterfield anchor, needed to focus after filter btn click
private filterfield: HTMLInputElement | null | undefined;
constructor(props: props) {
constructor(props: Props) {
super(props);
this.state = {
filtervisible: false,
filter: ''
}
};
this.keypress = this.keypress.bind(this);
this.enableFilterField = this.enableFilterField.bind(this);
@@ -43,34 +42,57 @@ class FilterButton extends React.Component<props, state> {
if (this.state.filtervisible) {
return (
<>
<input className={'form-control mr-sm-2 ' + style.searchinput}
type='text' placeholder='Filter' value={this.state.filter}
onChange={(e): void => {
this.props.onFilterChange(e.target.value);
this.setState({filter: e.target.value});
}}
ref={(input): void => {
this.filterfield = input;
}}/>
<Button title={<FontAwesomeIcon style={{
verticalAlign: 'middle',
lineHeight: '130px'
}} icon={faTimes} size='1x'/>} color={{backgroundColor: 'red'}} onClick={(): void => {
this.setState({filter: '', filtervisible: false});
}}/>
<input
className={'form-control mr-sm-2 ' + style.searchinput}
type='text'
placeholder='Filter'
value={this.state.filter}
onChange={(e): void => {
this.props.onFilterChange(e.target.value);
this.setState({filter: e.target.value});
}}
ref={(input): void => {
this.filterfield = input;
}}
/>
<Button
title={
<FontAwesomeIcon
style={{
verticalAlign: 'middle',
lineHeight: '130px'
}}
icon={faTimes}
size='1x'
/>
}
color={{backgroundColor: 'red'}}
onClick={(): void => {
this.setState({filter: '', filtervisible: false});
}}
/>
</>
);
} else {
return (<Button
title={<span>Filter <FontAwesomeIcon
style={{
verticalAlign: 'middle',
lineHeight: '130px'
}}
icon={faFilter}
size='1x'/></span>}
color={{backgroundColor: 'cornflowerblue', color: 'white'}}
onClick={this.enableFilterField}/>)
return (
<Button
title={
<span>
Filter{' '}
<FontAwesomeIcon
style={{
verticalAlign: 'middle',
lineHeight: '130px'
}}
icon={faFilter}
size='1x'
/>
</span>
}
color={{backgroundColor: 'cornflowerblue', color: 'white'}}
onClick={this.enableFilterField}
/>
);
}
}
@@ -96,4 +118,4 @@ class FilterButton extends React.Component<props, state> {
}
}
export default FilterButton;
export default FilterButton;

44
src/elements/InfoHeaderItem/InfoHeaderItem.tsx
View File

@@ -5,11 +5,11 @@ 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
onClick?: () => void;
backColor: string;
icon: IconDefinition;
text: string | number;
subtext: string | number;
}
/**
@@ -18,23 +18,35 @@ interface props {
class InfoHeaderItem extends React.Component<props> {
render(): JSX.Element {
return (
<div onClick={(): void => {
// call clicklistener if defined
if (this.props.onClick != null) this.props.onClick();
}} className={style.infoheaderitem} style={{backgroundColor: this.props.backColor}}>
<div
onClick={(): void => {
// call clicklistener if defined
if (this.props.onClick != null) {
this.props.onClick();
}
}}
className={style.infoheaderitem}
style={{backgroundColor: this.props.backColor}}>
<div className={style.icon}>
<FontAwesomeIcon style={{
verticalAlign: 'middle',
lineHeight: '130px'
}} icon={this.props.icon} size='5x'/>
<FontAwesomeIcon
style={{
verticalAlign: 'middle',
lineHeight: '130px'
}}
icon={this.props.icon}
size='5x'
/>
</div>
{this.props.text !== null && this.props.text !== undefined ?
{this.props.text !== null && this.props.text !== undefined ? (
<>
<div className={style.maintext}>{this.props.text}</div>
<div className={style.subtext}>{this.props.subtext}</div>
</>
: <span className={style.loadAnimation}><Spinner animation='border'/></span>
}
) : (
<span className={style.loadAnimation}>
<Spinner animation='border' />
</span>
)}
</div>
);
}

8
src/elements/PageTitle/PageTitle.tsx
View File

@@ -17,10 +17,8 @@ class PageTitle extends React.Component<props> {
<div className={style.pageheader + ' ' + themeStyle.backgroundcolor}>
<span className={style.pageheadertitle + ' ' + themeStyle.textcolor}>{this.props.title}</span>
<span className={style.pageheadersubtitle + ' ' + themeStyle.textcolor}>{this.props.subtitle}</span>
<>
{this.props.children}
</>
<Line/>
<>{this.props.children}</>
<Line />
</div>
);
}
@@ -35,7 +33,7 @@ export class Line extends React.Component {
const themeStyle = GlobalInfos.getThemeStyle();
return (
<>
<hr className={themeStyle.hrcolor}/>
<hr className={themeStyle.hrcolor} />
</>
);
}

2
src/elements/Popups/AddActorPopup/AddActorPopup.test.js
View File

@@ -40,7 +40,7 @@ describe('<AddActorPopup/>', function () {
it('simulate actortile click', function () {
const func = jest.fn();
const wrapper = shallow(<AddActorPopup onHide={() => {func();}} movie_id={1}/>);
const wrapper = shallow(<AddActorPopup onHide={() => {func();}} movieId={1}/>);
global.callAPIMock({result: 'success'});

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

@@ -6,11 +6,11 @@ import {NewActorPopupContent} from '../NewActorPopup/NewActorPopup';
import {APINode, callAPI} from '../../../utils/Api';
import {ActorType} from '../../../types/VideoTypes';
import {GeneralSuccess} from '../../../types/GeneralTypes';
import FilterButton from "../../FilterButton/FilterButton";
import FilterButton from '../../FilterButton/FilterButton';
interface props {
interface Props {
onHide: () => void;
movie_id: number;
movieId: number;
}
interface state {
@@ -22,11 +22,11 @@ interface state {
/**
* Popup for Adding a new Actor to a Video
*/
class AddActorPopup extends React.Component<props, state> {
class AddActorPopup extends React.Component<Props, state> {
// filterfield anchor, needed to focus after filter btn click
private filterfield: HTMLInputElement | null | undefined;
constructor(props: props) {
constructor(props: Props) {
super(props);
this.state = {
@@ -48,12 +48,19 @@ class AddActorPopup extends React.Component<props, state> {
return (
<>
{/* todo render actor tiles here and add search field*/}
<PopupBase title='Add new Actor to Video' onHide={this.props.onHide} banner={
<button
className={style.newactorbutton}
onClick={(): void => {
this.setState({contentDefault: false});
}}>Create new Actor</button>} ParentSubmit={this.parentSubmit}>
<PopupBase
title='Add new Actor to Video'
onHide={this.props.onHide}
banner={
<button
className={style.newactorbutton}
onClick={(): void => {
this.setState({contentDefault: false});
}}>
Create new Actor
</button>
}
ParentSubmit={this.parentSubmit}>
{this.resolvePage()}
</PopupBase>
</>
@@ -65,11 +72,18 @@ class AddActorPopup extends React.Component<props, state> {
* @returns {JSX.Element}
*/
resolvePage(): JSX.Element {
if (this.state.contentDefault) return (this.getContent());
else return (<NewActorPopupContent onHide={(): void => {
this.loadActors();
this.setState({contentDefault: true});
}}/>);
if (this.state.contentDefault) {
return this.getContent();
} else {
return (
<NewActorPopupContent
onHide={(): void => {
this.loadActors();
this.setState({contentDefault: true});
}}
/>
);
}
}
/**
@@ -81,15 +95,19 @@ class AddActorPopup extends React.Component<props, state> {
return (
<>
<div className={style.searchbar}>
<FilterButton onFilterChange={(filter): void => {
this.setState({filter: filter})
}}/>
<FilterButton
onFilterChange={(filter): void => {
this.setState({filter: filter});
}}
/>
</div>
{this.state.actors.filter(this.filterSearch).map((el) => (<ActorTile actor={el} onClick={this.tileClickHandler}/>))}
{this.state.actors.filter(this.filterSearch).map((el) => (
<ActorTile actor={el} onClick={this.tileClickHandler} />
))}
</>
);
} else {
return (<div>somekind of loading</div>);
return <div>somekind of loading</div>;
}
}
@@ -98,25 +116,29 @@ class AddActorPopup extends React.Component<props, state> {
*/
tileClickHandler(actor: ActorType): void {
// fetch the available actors
callAPI<GeneralSuccess>(APINode.Actor, {
action: 'addActorToVideo',
ActorId: actor.ActorId,
MovieId: this.props.movie_id
}, result => {
if (result.result === 'success') {
// return back to player page
this.props.onHide();
} else {
console.error('an error occured while fetching actors: ' + result);
callAPI<GeneralSuccess>(
APINode.Actor,
{
action: 'addActorToVideo',
ActorId: actor.ActorId,
MovieId: this.props.movieId
},
(result) => {
if (result.result === 'success') {
// return back to player page
this.props.onHide();
} else {
console.error('an error occured while fetching actors: ' + result);
}
}
});
);
}
/**
* load the actors from backend and set state
*/
loadActors(): void {
callAPI<ActorType[]>(APINode.Actor, {action: 'getAllActors'}, result => {
callAPI<ActorType[]>(APINode.Actor, {action: 'getAllActors'}, (result) => {
this.setState({actors: result});
});
}

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

@@ -3,10 +3,10 @@ import Tag from '../../Tag/Tag';
import PopupBase from '../PopupBase';
import {APINode, callAPI} from '../../../utils/Api';
import {TagType} from '../../../types/VideoTypes';
import FilterButton from "../../FilterButton/FilterButton";
import styles from './AddTagPopup.module.css'
import FilterButton from '../../FilterButton/FilterButton';
import styles from './AddTagPopup.module.css';
interface props {
interface Props {
onHide: () => void;
submit: (tagId: number, tagName: string) => void;
}
@@ -19,8 +19,8 @@ interface state {
/**
* component creates overlay to add a new tag to a video
*/
class AddTagPopup extends React.Component<props, state> {
constructor(props: props) {
class AddTagPopup extends React.Component<Props, state> {
constructor(props: Props) {
super(props);
this.state = {items: [], filter: ''};
@@ -42,13 +42,11 @@ class AddTagPopup extends React.Component<props, state> {
return (
<PopupBase title='Add a Tag to this Video:' onHide={this.props.onHide} ParentSubmit={this.parentSubmit}>
<div className={styles.actionbar}>
<FilterButton onFilterChange={(filter): void => this.setState({filter: filter})}/>
<FilterButton onFilterChange={(filter): void => this.setState({filter: filter})} />
</div>
{this.state.items ?
this.state.items.filter(this.tagFilter).map((i) => (
<Tag tagInfo={i}
onclick={(): void => this.onItemClick(i)}/>
)) : null}
{this.state.items
? this.state.items.filter(this.tagFilter).map((i) => <Tag tagInfo={i} onclick={(): void => this.onItemClick(i)} />)
: null}
</PopupBase>
);
}

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

@@ -15,7 +15,7 @@ class NewActorPopup extends React.Component<NewActorPopupProps> {
render(): JSX.Element {
return (
<PopupBase title='Add new Tag' onHide={this.props.onHide} height='200px' width='400px'>
<NewActorPopupContent onHide={this.props.onHide}/>
<NewActorPopupContent onHide={this.props.onHide} />
</PopupBase>
);
}
@@ -28,10 +28,17 @@ export class NewActorPopupContent extends React.Component<NewActorPopupProps> {
return (
<>
<div>
<input type='text' placeholder='Actor Name' onChange={(v): void => {
this.value = v.target.value;
}}/></div>
<button className={style.savebtn} onClick={(): void => this.storeselection()}>Save</button>
<input
type='text'
placeholder='Actor Name'
onChange={(v): void => {
this.value = v.target.value;
}}
/>
</div>
<button className={style.savebtn} onClick={(): void => this.storeselection()}>
Save
</button>
</>
);
}
@@ -41,7 +48,9 @@ export class NewActorPopupContent extends React.Component<NewActorPopupProps> {
*/
storeselection(): void {
// check if user typed in name
if (this.value === '' || this.value === undefined) return;
if (this.value === '' || this.value === undefined) {
return;
}
callAPI(APINode.Actor, {action: 'createActor', actorname: this.value}, (result: GeneralSuccess) => {
if (result.result !== 'success') {

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

@@ -5,7 +5,7 @@ import {APINode, callAPI} from '../../../utils/Api';
import {GeneralSuccess} from '../../../types/GeneralTypes';
interface props {
onHide: () => void
onHide: () => void;
}
/**
@@ -16,11 +16,24 @@ class NewTagPopup extends React.Component<props> {
render(): JSX.Element {
return (
<PopupBase title='Add new Tag' onHide={this.props.onHide} height='200px' width='400px' ParentSubmit={(): void => this.storeselection()}>
<div><input type='text' placeholder='Tagname' onChange={(v): void => {
this.value = v.target.value;
}}/></div>
<button className={style.savebtn} onClick={(): void => this.storeselection()}>Save</button>
<PopupBase
title='Add new Tag'
onHide={this.props.onHide}
height='200px'
width='400px'
ParentSubmit={(): void => this.storeselection()}>
<div>
<input
type='text'
placeholder='Tagname'
onChange={(v): void => {
this.value = v.target.value;
}}
/>
</div>
<button className={style.savebtn} onClick={(): void => this.storeselection()}>
Save
</button>
</PopupBase>
);
}

17
src/elements/Popups/NoBackendConnectionPopup/NoBackendConnectionPopup.tsx
View File

@@ -4,17 +4,24 @@ import style from '../NewActorPopup/NewActorPopup.module.css';
import {setCustomBackendDomain} from '../../../utils/Api';
interface NBCProps {
onHide: (_: void) => void
onHide: (_: void) => void;
}
export function NoBackendConnectionPopup(props: NBCProps): JSX.Element {
return (
<PopupBase title='No connection to backend API!' onHide={props.onHide} height='200px' width='600px'>
<div>
<input type='text' placeholder='http://192.168.0.2' onChange={(v): void => {
setCustomBackendDomain(v.target.value);
}}/></div>
<button className={style.savebtn} onClick={(): void => props.onHide()}>Refresh</button>
<input
type='text'
placeholder='http://192.168.0.2'
onChange={(v): void => {
setCustomBackendDomain(v.target.value);
}}
/>
</div>
<button className={style.savebtn} onClick={(): void => props.onHide()}>
Refresh
</button>
</PopupBase>
);
}

44
src/elements/Popups/PopupBase.tsx
View File

@@ -4,7 +4,7 @@ import {Line} from '../PageTitle/PageTitle';
import React, {RefObject} from 'react';
import {addKeyHandler, removeKeyHandler} from '../../utils/ShortkeyHandler';
interface props {
interface Props {
width?: string;
height?: string;
banner?: JSX.Element;
@@ -16,11 +16,11 @@ interface props {
/**
* wrapper class for generic types of popups
*/
class PopupBase extends React.Component<props> {
class PopupBase extends React.Component<Props> {
private wrapperRef: RefObject<HTMLDivElement>;
private framedimensions: { minHeight: string | undefined; width: string | undefined; height: string | undefined };
private framedimensions: {minHeight: string | undefined; width: string | undefined; height: string | undefined};
constructor(props: props) {
constructor(props: Props) {
super(props);
this.state = {items: []};
@@ -32,9 +32,9 @@ class PopupBase extends React.Component<props> {
// parse style props
this.framedimensions = {
width: (this.props.width ? this.props.width : undefined),
height: (this.props.height ? this.props.height : undefined),
minHeight: (this.props.height ? this.props.height : undefined)
width: this.props.width ? this.props.width : undefined,
height: this.props.height ? this.props.height : undefined,
minHeight: this.props.height ? this.props.height : undefined
};
}
@@ -63,10 +63,8 @@ class PopupBase extends React.Component<props> {
<div className={style.banner}>{this.props.banner}</div>
</div>
<Line/>
<div className={style.content}>
{this.props.children}
</div>
<Line />
<div className={style.content}>{this.props.children}</div>
</div>
);
}
@@ -90,7 +88,9 @@ class PopupBase extends React.Component<props> {
this.props.onHide();
} else if (event.key === 'Enter') {
// call a parentsubmit if defined
if (this.props.ParentSubmit) this.props.ParentSubmit();
if (this.props.ParentSubmit) {
this.props.ParentSubmit();
}
}
}
@@ -98,15 +98,19 @@ class PopupBase extends React.Component<props> {
* make the element drag and droppable
*/
dragElement(): void {
let xOld = 0, yOld = 0;
let xOld = 0,
yOld = 0;
const elmnt = this.wrapperRef.current;
if (elmnt === null) return;
if (elmnt.firstChild === null) return;
if (elmnt === null) {
return;
}
if (elmnt.firstChild === null) {
return;
}
(elmnt.firstChild as HTMLDivElement).onmousedown = dragMouseDown;
function dragMouseDown(e: MouseEvent): void {
e.preventDefault();
// get the mouse cursor position at startup:
@@ -125,9 +129,11 @@ class PopupBase extends React.Component<props> {
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';
if (elmnt === null) {
return;
}
elmnt.style.top = elmnt.offsetTop - dy + 'px';
elmnt.style.left = elmnt.offsetLeft - dx + 'px';
}
function closeDragElement(): void {

9
src/elements/Popups/SubmitPopup/SubmitPopup.tsx
View File

@@ -2,17 +2,16 @@ import React from 'react';
import PopupBase from '../PopupBase';
import {Button} from '../../GPElements/Button';
interface props {
interface Props {
onHide: (_: void) => void;
submit: (_: void) => void;
}
export default function SubmitPopup(props: props): JSX.Element {
export default function SubmitPopup(props: Props): JSX.Element {
return (
<PopupBase title='Are you sure?' onHide={props.onHide} height='160px' width='300px'>
<Button title='Submit' color={{backgroundColor: 'green'}} onClick={(): void => props.submit()}/>
<Button title='Cancel' color={{backgroundColor: 'red'}} onClick={(): void => props.onHide()}/>
<Button title='Submit' color={{backgroundColor: 'green'}} onClick={(): void => props.submit()} />
<Button title='Cancel' color={{backgroundColor: 'red'}} onClick={(): void => props.onHide()} />
</PopupBase>
);
}

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

@@ -7,7 +7,7 @@ import {APINode, callAPIPlain} from '../../utils/Api';
interface PreviewProps {
name: string;
movie_id: number;
movieId: number;
}
interface PreviewState {
@@ -28,7 +28,7 @@ class Preview extends React.Component<PreviewProps, PreviewState> {
}
componentDidMount(): void {
callAPIPlain(APINode.Video, {action: 'readThumbnail', movieid: this.props.movie_id}, (result) => {
callAPIPlain(APINode.Video, {action: 'readThumbnail', movieid: this.props.movieId}, (result) => {
this.setState({
previewpicture: result
});
@@ -38,23 +38,21 @@ class Preview extends React.Component<PreviewProps, PreviewState> {
render(): JSX.Element {
const themeStyle = GlobalInfos.getThemeStyle();
return (
<Link to={'/player/' + this.props.movie_id}>
<Link to={'/player/' + this.props.movieId}>
<div className={style.videopreview + ' ' + themeStyle.secbackground + ' ' + themeStyle.preview}>
<div className={style.previewtitle + ' ' + themeStyle.lighttextcolor}>{this.props.name}</div>
<div className={style.previewpic}>
{this.state.previewpicture !== null ?
<img className={style.previewimage}
src={this.state.previewpicture}
alt='Pic loading.'/> :
<span className={style.loadAnimation}><Spinner animation='border'/></span>}
</div>
<div className={style.previewbottom}>
{this.state.previewpicture !== null ? (
<img className={style.previewimage} src={this.state.previewpicture} alt='Pic loading.' />
) : (
<span className={style.loadAnimation}>
<Spinner animation='border' />
</span>
)}
</div>
<div className={style.previewbottom} />
</div>
</Link>
);
}
}
@@ -62,15 +60,12 @@ class Preview extends React.Component<PreviewProps, PreviewState> {
/**
* Component for a Tag-name tile (used in category page)
*/
export class TagPreview extends React.Component<{ name: string }> {
export class TagPreview extends React.Component<{name: string}> {
render(): JSX.Element {
const themeStyle = GlobalInfos.getThemeStyle();
return (
<div
className={style.videopreview + ' ' + style.tagpreview + ' ' + themeStyle.secbackground + ' ' + themeStyle.preview}>
<div className={style.tagpreviewtitle + ' ' + themeStyle.lighttextcolor}>
{this.props.name}
</div>
<div className={style.videopreview + ' ' + style.tagpreview + ' ' + themeStyle.secbackground + ' ' + themeStyle.preview}>
<div className={style.tagpreviewtitle + ' ' + themeStyle.lighttextcolor}>{this.props.name}</div>
</div>
);
}

6
src/elements/Preview/Previw.test.js
View File

@@ -5,7 +5,7 @@ import Preview, {TagPreview} from './Preview';
describe('<Preview/>', function () {
it('renders without crashing ', function () {
const wrapper = shallow(<Preview movie_id={1}/>);
const wrapper = shallow(<Preview movieId={1}/>);
wrapper.unmount();
});
@@ -17,7 +17,7 @@ describe('<Preview/>', function () {
});
global.fetch = jest.fn().mockImplementation(() => mockFetchPromise);
const wrapper = shallow(<Preview name='test' movie_id={1}/>);
const wrapper = shallow(<Preview name='test' movieId={1}/>);
// now called 1 times
expect(global.fetch).toHaveBeenCalledTimes(1);
@@ -35,7 +35,7 @@ describe('<Preview/>', function () {
});
it('spinner loads correctly', function () {
const wrapper = shallow(<Preview movie_id={1}/>);
const wrapper = shallow(<Preview movieId={1}/>);
// expect load animation to be visible
expect(wrapper.find('.loadAnimation')).toHaveLength(1);

22
src/elements/SideBar/SideBar.tsx
View File

@@ -13,11 +13,16 @@ interface SideBarProps {
class SideBar extends React.Component<SideBarProps> {
render(): JSX.Element {
const themeStyle = GlobalInfos.getThemeStyle();
const classnn = style.sideinfogeometry + ' ' + (this.props.hiddenFrame === undefined ? style.sideinfo + ' ' + themeStyle.secbackground : '');
const classnn =
style.sideinfogeometry +
' ' +
(this.props.hiddenFrame === undefined ? style.sideinfo + ' ' + themeStyle.secbackground : '');
return (<div className={classnn} style={{width: this.props.width}}>
{this.props.children}
</div>);
return (
<div className={classnn} style={{width: this.props.width}}>
{this.props.children}
</div>
);
}
}
@@ -27,9 +32,7 @@ class SideBar extends React.Component<SideBarProps> {
export class SideBarTitle extends React.Component {
render(): JSX.Element {
const themeStyle = GlobalInfos.getThemeStyle();
return (
<div className={style.sidebartitle + ' ' + themeStyle.subtextcolor}>{this.props.children}</div>
);
return <div className={style.sidebartitle + ' ' + themeStyle.subtextcolor}>{this.props.children}</div>;
}
}
@@ -40,8 +43,9 @@ export class SideBarItem extends React.Component {
render(): JSX.Element {
const themeStyle = GlobalInfos.getThemeStyle();
return (
<div
className={style.sidebarinfo + ' ' + themeStyle.thirdbackground + ' ' + themeStyle.lighttextcolor}>{this.props.children}</div>
<div className={style.sidebarinfo + ' ' + themeStyle.thirdbackground + ' ' + themeStyle.lighttextcolor}>
{this.props.children}
</div>
);
}
}

15
src/elements/Tag/Tag.tsx
View File

@@ -5,8 +5,8 @@ import {Link} from 'react-router-dom';
import {TagType} from '../../types/VideoTypes';
interface props {
onclick?: (_: string) => void
tagInfo: TagType
onclick?: (_: string) => void;
tagInfo: TagType;
}
/**
@@ -17,18 +17,15 @@ class Tag extends React.Component<props> {
if (this.props.onclick) {
return this.renderButton();
} else {
return (
<Link to={'/categories/' + this.props.tagInfo.TagId}>
{this.renderButton()}
</Link>
);
return <Link to={'/categories/' + this.props.tagInfo.TagId}>{this.renderButton()}</Link>;
}
}
renderButton(): JSX.Element {
return (
<button className={styles.tagbtn} onClick={(): void => this.TagClick()}
data-testid='Test-Tag'>{this.props.tagInfo.TagName}</button>
<button className={styles.tagbtn} onClick={(): void => this.TagClick()} data-testid='Test-Tag'>
{this.props.tagInfo.TagName}
</button>
);
}

24
src/elements/VideoContainer/VideoContainer.tsx
View File

@@ -3,8 +3,8 @@ import Preview from '../Preview/Preview';
import style from './VideoContainer.module.css';
import {VideoTypes} from '../../types/ApiTypes';
interface props {
data: VideoTypes.VideoUnloadedType[]
interface Props {
data: VideoTypes.VideoUnloadedType[];
}
interface state {
@@ -16,11 +16,11 @@ interface state {
* A videocontainer storing lots of Preview elements
* includes scroll handling and loading of preview infos
*/
class VideoContainer extends React.Component<props, state> {
class VideoContainer extends React.Component<Props, state> {
// stores current index of loaded elements
loadindex: number = 0;
constructor(props: props) {
constructor(props: Props) {
super(props);
this.state = {
@@ -38,15 +38,11 @@ class VideoContainer extends React.Component<props, state> {
render(): JSX.Element {
return (
<div className={style.maincontent}>
{this.state.loadeditems.map(elem => (
<Preview
key={elem.MovieId}
name={elem.MovieName}
movie_id={elem.MovieId}/>
{this.state.loadeditems.map((elem) => (
<Preview key={elem.MovieId} name={elem.MovieName} movieId={elem.MovieId} />
))}
{/*todo css for no items to show*/}
{this.state.loadeditems.length === 0 ?
'no items to show!' : null}
{this.state.loadeditems.length === 0 ? 'no items to show!' : null}
{this.props.children}
</div>
);
@@ -73,13 +69,9 @@ class VideoContainer extends React.Component<props, state> {
}
this.setState({
loadeditems: [
...this.state.loadeditems,
...ret
]
loadeditems: [...this.state.loadeditems, ...ret]
});
this.loadindex += nr;
}