use eslint to lint project

drop code quality job
2021-03-14 14:51:53 +00:00
parent ba2704b285
commit 1fc67365f0
42 changed files with 1614 additions and 843 deletions
--- a/src/elements/Popups/AddActorPopup/AddActorPopup.test.js
+++ b/src/elements/Popups/AddActorPopup/AddActorPopup.test.js
@ -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'});

--- a/src/elements/Popups/AddActorPopup/AddActorPopup.tsx
+++ b/src/elements/Popups/AddActorPopup/AddActorPopup.tsx
@ -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});
        });
    }
--- a/src/elements/Popups/AddTagPopup/AddTagPopup.tsx
+++ b/src/elements/Popups/AddTagPopup/AddTagPopup.tsx
@ -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>
        );
    }
--- a/src/elements/Popups/NewActorPopup/NewActorPopup.tsx
+++ b/src/elements/Popups/NewActorPopup/NewActorPopup.tsx
@ -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') {
--- a/src/elements/Popups/NewTagPopup/NewTagPopup.tsx
+++ b/src/elements/Popups/NewTagPopup/NewTagPopup.tsx
@ -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>
        );
    }
--- a/src/elements/Popups/NoBackendConnectionPopup/NoBackendConnectionPopup.tsx
+++ b/src/elements/Popups/NoBackendConnectionPopup/NoBackendConnectionPopup.tsx
@ -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>
    );
 }
--- a/src/elements/Popups/PopupBase.tsx
+++ b/src/elements/Popups/PopupBase.tsx
@ -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 {
--- a/src/elements/Popups/SubmitPopup/SubmitPopup.tsx
+++ b/src/elements/Popups/SubmitPopup/SubmitPopup.tsx
@ -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>
    );
-
 }