add new search field to search for videos by keyword

This commit is contained in:
Lukas Heiligenbrunner 2020-06-12 19:48:09 +02:00
parent 8eb62e6b48
commit 0e3fdc454e
4 changed files with 81 additions and 0 deletions

View File

@ -53,6 +53,21 @@ if (isset($_POST['action'])) {
}
echo(json_encode($return));
break;
case "getSearchKeyWord":
$search = $_POST['keyword'];
$query = "SELECT movie_id,movie_name FROM videos
WHERE movie_name LIKE '%$search%'
ORDER BY likes DESC, create_date DESC, movie_name ASC";
$result = $conn->query($query);
$rows = array();
while ($r = mysqli_fetch_assoc($result)) {
array_push($rows, $r);
}
echo(json_encode($rows));
break;
case "loadVideo":
$query = "SELECT movie_name,movie_id,movie_url,thumbnail,poster,likes,quality,length FROM videos WHERE movie_id='" . $_POST['movieid'] . "'";

View File

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

View File

@ -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>

View File

@ -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();
});
});
});