add new search field to search for videos by keyword

src/pages/HomePage/HomePage.css

@@ -7,3 +7,8 @@
     float: left;
     width: 10%;
 }
+
+.searchform{
+    margin-top: 25px;
+    float: right;
+}

src/pages/HomePage/HomePage.js

@@ -24,6 +24,9 @@ class HomePage extends React.Component {
         };
     }
 
+    /** keyword variable needed temporary store search keyword */
+    keyword = "";
+
     componentDidMount() {
         // initial get of all videos
         this.fetchVideoData("all");
@@ -86,12 +89,52 @@ class HomePage extends React.Component {
             });
     }
 
+    /**
+     * search for a keyword in db and update previews
+     *
+     * @param keyword The keyword to search for
+     */
+    searchVideos(keyword) {
+        console.log("search called");
+
+        const updateRequest = new FormData();
+        updateRequest.append('action', 'getSearchKeyWord');
+        updateRequest.append('keyword', keyword);
+
+        // fetch all videos available
+        fetch('/api/videoload.php', {method: 'POST', body: updateRequest})
+            .then((response) => response.json()
+                .then((result) => {
+                    this.setState({
+                        data: []
+                    });
+                    this.setState({
+                        data: result,
+                        selectionnr: result.length
+                    });
+                }))
+            .catch(() => {
+                console.log("no connection to backend");
+            });
+    }
+
     render() {
         return (
             <div>
                 <div className='pageheader'>
                     <span className='pageheadertitle'>Home Page</span>
                     <span className='pageheadersubtitle'>{this.state.tag} Videos - {this.state.selectionnr}</span>
+                    <form className="form-inline searchform" action="#">
+                        <input data-testid='searchtextfield' className="form-control mr-sm-2"
+                               type="text" placeholder="Search"
+                               onChange={(e) => {
+                                   this.keyword = e.target.value
+                               }}/>
+                        <button data-testid='searchbtnsubmit' className="btn btn-success" type="submit" onClick={() => {
+                            this.searchVideos(this.keyword)
+                        }}>Search
+                        </button>
+                    </form>
                     <hr/>
                 </div>
                 <SideBar>

src/pages/HomePage/HomePage.test.js

@@ -1,6 +1,7 @@
 import {shallow} from "enzyme";
 import React from "react";
 import HomePage from "./HomePage";
+import VideoContainer from "../../elements/VideoContainer/VideoContainer";
 
 function prepareFetchApi(response) {
     const mockJsonPromise = Promise.resolve(response);
@@ -55,4 +56,21 @@ describe('<HomePage/>', function () {
 
         expect(wrapper.find(".pageheadersubtitle").text()).toBe("testtag Videos - 42");
     });
+
+    it('test search field', done => {
+        global.fetch = prepareFetchApi([{},{}]);
+
+        const wrapper = shallow(<HomePage/>);
+
+        wrapper.find('[data-testid="searchtextfield"]').simulate('change', { target: { value: 'testvalue' } });
+        wrapper.find('[data-testid="searchbtnsubmit"]').simulate("click");
+
+        process.nextTick(() => {
+            // state to be set correctly with response
+            expect(wrapper.state().selectionnr).toBe(2);
+
+            global.fetch.mockClear();
+            done();
+        });
+    });
 });