add a delete button to delete a video

api/src/handlers/Video.php

@@ -219,5 +219,18 @@ class Video extends RequestBase {
                 $this->commitMessage('{"result":"' . $this->conn->error . '"}');
             }
         });
+
+        $this->addActionHandler("deleteVideo", function () {
+            $movieid = $_POST['movieid'];
+
+            // delete video entry and corresponding tag infos
+            $query = "DELETE FROM videos WHERE movie_id=$movieid";
+
+            if ($this->conn->query($query) === TRUE) {
+                $this->commitMessage('{"result":"success"}');
+            } else {
+                $this->commitMessage('{"result":"' . $this->conn->error . '"}');
+            }
+        });
     }
 }

database.sql

@@ -27,6 +27,7 @@ create table if not exists video_tags
         foreign key (tag_id) references tags (tag_id),
     constraint video_tags_videos_movie_id_fk
         foreign key (video_id) references videos (movie_id)
+            on delete cascade
 );
 
 create table settings

src/pages/Player/Player.js

@@ -141,9 +141,8 @@ class Player extends React.Component {
                         <div>not loaded yet</div>}
                     <div className={style.videoactions}>
                         <button className='btn btn-primary' onClick={() => this.likebtn()}>Like this Video!</button>
-                        <button className='btn btn-info' onClick={() => this.setState({popupvisible: true})}>Give this
-                            Video a Tag
-                        </button>
+                        <button className='btn btn-info' onClick={() => this.setState({popupvisible: true})}>Give this Video a Tag</button>
+                        <button className='btn btn-danger' onClick={() =>{this.deleteVideo()}}>Delete Video</button>
                         {this.state.popupvisible ?
                             <AddTagPopup show={this.state.popupvisible}
                                          onHide={() => {
@@ -225,6 +224,27 @@ class Player extends React.Component {
     closebtn() {
         this.props.viewbinding.returnToLastElement();
     }
+
+    /**
+     * 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
+                        this.props.viewbinding.returnToLastElement();
+                    } else {
+                        console.error("an error occured while liking");
+                        console.error(result);
+                    }
+                }));
+    }
 }
 
 export default Player;

src/pages/Player/Player.test.js

@@ -69,13 +69,31 @@ describe('<Player/>', function () {
 
     it('show tag popup', function () {
         const wrapper = shallow(<Player/>);
-
         expect(wrapper.find("AddTagPopup")).toHaveLength(0);
-        wrapper.find('.videoactions').find("button").last().simulate('click');
+        // todo dynamic button find without index
+        wrapper.find('.videoactions').find("button").at(1).simulate('click');
         // addtagpopup should be showing now
         expect(wrapper.find("AddTagPopup")).toHaveLength(1);
     });
 
+    it('test delete button', done => {
+        const wrapper = shallow(<Player viewbinding={{
+            returnToLastElement: jest.fn()
+        }}/>);
+        global.fetch = prepareFetchApi({result: "success"});
+
+        wrapper.find('.videoactions').find("button").at(2).simulate('click');
+
+        process.nextTick(() => {
+            // refetch is called so fetch called 3 times
+            expect(global.fetch).toHaveBeenCalledTimes(1);
+            expect(wrapper.instance().props.viewbinding.returnToLastElement).toHaveBeenCalledTimes(1);
+
+            global.fetch.mockClear();
+            done();
+        });
+    });
+
     it('hide click ', function () {
         const wrapper = shallow(<Player/>);
         const func = jest.fn();