Hellow Everyone!
I am experiencing a small (big) annoying issue :D
The system on our marketplace is not able to fetch certain products but successfully manages to get others.
-> https://www.feralhorses.co.uk/artworks/i-belong-to-you (works)
-> https://www.feralhorses.co.uk/artworks/parallel-expressions (doesn't work)
import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import * as authActions from '../actions/authActions';
import * as lotActions from '../actions/lotActions';
import { requestCurrentLot } from '../utils/crudHelpers';
import { logActions, createLog } from '../utils/logHelpers';
import { checkToken } from '../utils/authHelpers';
import SingleArtworkPrimary from './SingleArtworkPrimary';
import SingleArtworkSecondary from './SingleArtworkSecondary';
import {
requestArtworkByName,
requestSingleArtworkGeneral,
requestArtworks
} from '../utils/crudHelpers';
class SingleArtworkContainer extends Component {
constructor(props) {
super(props);
this.getSingleArtwork = this.getSingleArtwork.bind(this);
this.requestArtistPrimaryArtworks = this.requestArtistPrimaryArtworks.bind(this);
this.readUrl = this.readUrl.bind(this);
this.state = {
singleArtwork: null,
artistArtworks: []
};
}
componentDidMount() {
if (checkToken()) {
document.body.classList.add('is-auth');
}
this.getSingleArtwork(this.readUrl());
}
readUrl() {
const browserPath = window.location.pathname;
return browserPath.split('/')[2];
}
getSingleArtwork(artworkTitle) {
requestSingleArtworkGeneral(artworkTitle)
.then((response) => {
if(response.data.result){
const { artwork } = response.data;
if (artwork.status === 2) {
this.requestArtistPrimaryArtworks(artwork.primary_lot_id, artwork.artist.pretty_url);
}
this.setState({
singleArtwork: artwork
});
if(checkToken()) {
createLog(logActions.primaryMarketArtwork, `Artwork: ${artwork.artwork_id}-${artwork.artwork_title} by ${artwork.artist_name}`);
}
} else {
authActions.forwardUserTo('/not-found');
}
})
.catch((err) => {
console.log(err);
});
}
requestArtistPrimaryArtworks(lot_id, prettyUrl) {
requestArtworks(1, lot_id, 3, {artist_pretty_url: prettyUrl})
.then((response) => {
response.data.primary_lot_artworks.map((artwork, key) => {
this.state.artistArtworks.push(artwork);
});
this.setState({
isLoading: false
});
})
.catch((err) => {
console.log(err);
});
}
render() {
if(this.state.singleArtwork === null) {
return (
<div style={{ minHeight: '95vh' }}>
<h3>Loading</h3>
</div>
);
} else if (this.state.singleArtwork.status === 2) {
return (
<div>
<SingleArtworkPrimary
artwork={this.state.singleArtwork}
artistArtworks={this.state.artistArtworks}
/>
</div>
);
} else {
return (
<div>
<SingleArtworkSecondary
artwork={this.state.singleArtwork}
/>
</div>
);
}
}
}
const mapStateToProps = (state, ownProps) => ({
lot: state.lots.lot
});
const mapDispatchToProps = (dispatch) => ({
actions: {
lotActions: bindActionCreators(lotActions, dispatch)
}
});
SingleArtworkContainer.propTypes = {
artwork: PropTypes.object,
from: PropTypes.string,
lot: PropTypes.object
};
export default connect(mapStateToProps, mapDispatchToProps)(SingleArtworkContainer);
`
My first catch error is what consoles it out
What is the expected behavior?
Given that this is exactly the same code I am honestly surprised by the fact that I get a React error as the code behind the two pages is literally the same :(
Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
All browsers
React 15.3.0 (but also happens in our UAT machine with react 16.8)
Top comments (0)