I recently tried to deploy my first react-app on to the web. The website is about looking up details for a certain pokemon and making your own card if you like.
I use Mozilla as my main browser and everything works pretty good. But when I ask for a pokemon request (GET) on chrome I don't get any results. If I have a look at the network console I get a 301 Error (from disk cache). What does this mean? You can look at my website at:
https://daan.boschmans.mtantwerp.eu/
I deployed my app using the npm run build command.
I added the .htaccess file in the public folder with the proper lines.
GET REQUEST:
export const getPokemonSprites = (name) => {
return fetch(`https://pokeapi.co/api/v2/pokemon-form/${name}`).then((response) => {
if(response.statusText === 'OK') {
return response.json();
}
throw new Error('Network response was not ok.');
})
}
export const getPokemonMoves = (name) => {
return fetch(`https://pokeapi.co/api/v2/pokemon/${name}`).then((response) => {
if(response.statusText === 'OK') {
return response.json();
}
throw new Error('Network response was not ok.');
})
}
This I how I handle the GET call:
getPokeData() {
if (this.state.searchValue && this.state.name !== this.state.searchValue) {
this.setState({ isLoading: true, hasError: false, name: "", sprites: [], moves: [], height: "", weight:"", specials: [], base_experience: "", type: [], stats:[], items: [], });
Promise.all([ getPokemonSprites(this.state.searchValue),getPokemonMoves(this.state.searchValue)])
.then( ([spriteList, pokeDetails]) => {
const sprites = Object.values(spriteList.sprites);
const moves = Object.entries(pokeDetails.moves);
const abilities = Object.entries(pokeDetails.abilities);
const types = Object.entries(pokeDetails.types);
const stats = Object.entries(pokeDetails.stats);
for (const [ , value] of Object.entries(moves)) {
this.state.moves.push(value[1].move.name);
}
for (const [, value] of Object.entries(types)) {
this.state.type.push(value[1].type.name);
}
for (const [, value] of Object.entries(abilities)) {
this.state.specials.push(value[1].ability.name);
}
for (const [, value] of Object.entries(stats)) {
let statsValue = `${value[1].stat.name}: ${value[1].base_stat}`;
this.state.stats.push(statsValue);
}
this.setState({sprites, name: spriteList.name, height: pokeDetails.height, weight: pokeDetails.weight, base_experience: pokeDetails.base_experience })
}).then(() => { this.setState({isLoading: false, searchValue: ""})})
.catch(() => { this.setState({isLoading: false, searchValue: "", hasError: true}) })
}
}
Any tips would be really appreciated
Thanks
