Now searchRequest passes a index key to movieObject so that each div object can have a separate key.
This commit is contained in:
@@ -34,7 +34,7 @@ class MovieObject {
|
|||||||
notify.show(this.title + ' requested!', 'success', 3000);
|
notify.show(this.title + ' requested!', 'success', 3000);
|
||||||
}
|
}
|
||||||
|
|
||||||
getElement() {
|
getElement(index) {
|
||||||
// TODO set the poster image async by updating the dom after this is returned
|
// TODO set the poster image async by updating the dom after this is returned
|
||||||
if (this.poster == null || this.poster == undefined) {
|
if (this.poster == null || this.poster == undefined) {
|
||||||
var posterPath = 'https://openclipart.org/image/2400px/svg_to_png/211479/Simple-Image-Not-Found-Icon.png'
|
var posterPath = 'https://openclipart.org/image/2400px/svg_to_png/211479/Simple-Image-Not-Found-Icon.png'
|
||||||
@@ -60,7 +60,7 @@ class MovieObject {
|
|||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div key={index}>
|
||||||
<Notifications />
|
<Notifications />
|
||||||
<div style={movieStyle.resultItem} key={this.id}>
|
<div style={movieStyle.resultItem} key={this.id}>
|
||||||
<MediaQuery minWidth={600}>
|
<MediaQuery minWidth={600}>
|
||||||
|
|||||||
@@ -156,11 +156,11 @@ class SearchRequest extends React.Component {
|
|||||||
.then(responseData => {
|
.then(responseData => {
|
||||||
if (this.state.page === 1) {
|
if (this.state.page === 1) {
|
||||||
this.setState({
|
this.setState({
|
||||||
responseMovieList: responseData.results.map(searchResultItem => this.createMovieObjects(searchResultItem)),
|
responseMovieList: responseData.results.map((searchResultItem, index) => this.createMovieObjects(searchResultItem, index)),
|
||||||
lastApiCallURI: uri // Save the value of the last sucessfull api call
|
lastApiCallURI: uri // Save the value of the last sucessfull api call
|
||||||
})
|
})
|
||||||
} else {
|
} else {
|
||||||
let responseMovieObjects = responseData.results.map(searchResultItem => this.createMovieObjects(searchResultItem));
|
let responseMovieObjects = responseData.results.map((searchResultItem, index) => this.createMovieObjects(searchResultItem, index));
|
||||||
let growingReponseMovieObjectList = this.state.responseMovieList.concat(responseMovieObjects);
|
let growingReponseMovieObjectList = this.state.responseMovieList.concat(responseMovieObjects);
|
||||||
this.setState({
|
this.setState({
|
||||||
responseMovieList: growingReponseMovieObjectList,
|
responseMovieList: growingReponseMovieObjectList,
|
||||||
@@ -202,11 +202,11 @@ class SearchRequest extends React.Component {
|
|||||||
.then(responseData => {
|
.then(responseData => {
|
||||||
if (this.state.page === 1) {
|
if (this.state.page === 1) {
|
||||||
this.setState({
|
this.setState({
|
||||||
responseMovieList: responseData.results.map(searchResultItem => this.createMovieObjects(searchResultItem)),
|
responseMovieList: responseData.results.map((searchResultItem, index) => this.createMovieObjects(searchResultItem, index)),
|
||||||
lastApiCallURI: uri // Save the value of the last sucessfull api call
|
lastApiCallURI: uri // Save the value of the last sucessfull api call
|
||||||
})
|
})
|
||||||
} else {
|
} else {
|
||||||
let responseMovieObjects = responseData.results.map(searchResultItem => this.createMovieObjects(searchResultItem));
|
let responseMovieObjects = responseData.results.map((searchResultItem, index) => this.createMovieObjects(searchResultItem, index));
|
||||||
let growingReponseMovieObjectList = this.state.responseMovieList.concat(responseMovieObjects);
|
let growingReponseMovieObjectList = this.state.responseMovieList.concat(responseMovieObjects);
|
||||||
this.setState({
|
this.setState({
|
||||||
responseMovieList: growingReponseMovieObjectList,
|
responseMovieList: growingReponseMovieObjectList,
|
||||||
@@ -288,9 +288,9 @@ class SearchRequest extends React.Component {
|
|||||||
|
|
||||||
// When called passes the variable to MovieObject and calls it's interal function for
|
// When called passes the variable to MovieObject and calls it's interal function for
|
||||||
// generating the wanted HTML
|
// generating the wanted HTML
|
||||||
createMovieObjects(item) {
|
createMovieObjects(item, index) {
|
||||||
let movie = new MovieObject(item);
|
let movie = new MovieObject(item);
|
||||||
return movie.getElement();
|
return movie.getElement(index);
|
||||||
}
|
}
|
||||||
|
|
||||||
toggleFilter(filterType) {
|
toggleFilter(filterType) {
|
||||||
|
|||||||
Reference in New Issue
Block a user