add style for actor tiles

render actors got from backend
backend test code to get actors

src/elements/Popups/AddActorPopup/AddActorPopup.js

@@ -0,0 +1,102 @@
+import PopupBase from '../PopupBase';
+import React from 'react';
+import ActorTile from '../../ActorTile/ActorTile';
+import style from './AddActorPopup.module.css';
+import {NewActorPopupContent} from '../NewActorPopup/NewActorPopup';
+
+/**
+ * Popup for Adding a new Actor to a Video
+ */
+class AddActorPopup extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            contentDefault: true,
+            actors: undefined
+        };
+
+        this.tileClickHandler = this.tileClickHandler.bind(this);
+    }
+
+    render() {
+        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={() => {this.setState({contentDefault: false});}}>Create new Actor</button>}>
+                    {this.resolvePage()}
+                </PopupBase>
+            </>
+        );
+    }
+
+    componentDidMount() {
+        // fetch the available actors
+        this.loadActors();
+    }
+
+    /**
+     * selector for current showing popup page
+     * @returns {JSX.Element}
+     */
+    resolvePage() {
+        if (this.state.contentDefault) return (this.getContent());
+        else return (<NewActorPopupContent onHide={() => {
+            this.loadActors();
+            this.setState({contentDefault: true});
+        }}/>);
+    }
+
+    /**
+     * returns content for the newActor popup
+     * @returns {JSX.Element}
+     */
+    getContent() {
+        if (this.state.actors) {
+            return (<div>
+                {this.state.actors.map((el) => (<ActorTile actor={el} onClick={this.tileClickHandler}/>))}
+            </div>);
+        } else {
+            return (<div>somekind of loading</div>);
+        }
+    }
+
+    /**
+     * event handling for ActorTile Click
+     */
+    tileClickHandler(actorid) {
+        // fetch the available actors
+        const req = new FormData();
+        req.append('action', 'addActorToVideo');
+        req.append('actorid', actorid);
+        req.append('videoid', this.props.movie_id);
+
+        fetch('/api/actor.php', {method: 'POST', body: req})
+            .then((response) => response.json()
+                .then((result) => {
+                    if (result.result === 'success') {
+                        // return back to player page
+                        this.props.onHide();
+                    } else {
+                        console.error('an error occured while fetching actors');
+                        console.error(result);
+                    }
+                }));
+    }
+
+    loadActors() {
+        const req = new FormData();
+        req.append('action', 'getAllActors');
+
+        fetch('/api/actor.php', {method: 'POST', body: req})
+            .then((response) => response.json()
+                .then((result) => {
+                    this.setState({actors: result});
+                }));
+    }
+}
+
+export default AddActorPopup;

src/elements/Popups/AddActorPopup/AddActorPopup.module.css

@@ -0,0 +1,11 @@
+.newactorbutton {
+    border-radius: 5px;
+    border-width: 0;
+    color: white;
+    margin-right: 15px;
+    margin-top: 12px;
+    padding: 6px;
+    background-color: green;
+    width: 140px;
+    width: 140px;
+}

src/elements/Popups/AddActorPopup/AddActorPopup.test.js

@@ -0,0 +1,19 @@
+import {shallow} from 'enzyme';
+import React from 'react';
+import AddActorPopup from './AddActorPopup';
+
+describe('<AddActorPopup/>', function () {
+    it('renders without crashing ', function () {
+        const wrapper = shallow(<AddActorPopup/>);
+        wrapper.unmount();
+    });
+
+    // it('simulate change to other page', function () {
+    //     const wrapper = shallow(<AddActorPopup/>);
+    //
+    //     console.log(wrapper.find('PopupBase').dive().debug());
+    //
+    //
+    //     console.log(wrapper.debug());
+    // });
+});