I'm calling an API that display games data in React. The API itself offers a way of sorting its data and filtering it by category, console, etc. I know how to call the API itself to display its content in my index page. But if I want to offer the user the chance to sort that data in the way the API offers myself to do so, how should I proceed? I'm using AXIOS, by the way. Here's the code.
const App = () => {
const [games, setGames] = useState([]);
const options = {
method: 'GET',
url: 'example.com/api/games',
headers: {
'x-host': 'example.com',
'x-key': 'xxx'
}
};
const getGames = () => {
axios.request(options)
.then((response) => {
const games = response.data;
setGames(games);
})
.catch((error) => {
console.error(error);
});
}
useEffect(()=>{
getGames();
},[])
return (
<div className="container">
{
games.map((game)=>{
const {id, title, platform, publisher, thumbnail} = game;
return (
<div key={id} className="item">
<img src={thumbnail}/>
<h1>{title}</h1>
<h2>{platform}</h2>
<h3>{publisher}</h3>
</div>
)
})
}
</div>
In the API page, the way it is specified to request a sorting or filtering of the API information is by changing the URL and adding headers. For example
var options = {
method: 'GET',
url: 'https://example.com/api/games/filters',
params: {platform: 'browser', category: 'mmorpg', 'sort-by': 'release-date'},
headers: {
'x-host': 'example.com',
'x-key': 'xxx'
}
};
So basically, how should I display this different forms of calling the API data in my own page? should I write different functions each time? I'm obviously a starter in this so my apologies if it is a silly question.
Make the platform, category, sortBy, releaseDate some sort of state variable that can be switched by the user via a button/input, then do this...
const getGames = () => {
const params = {
platform, category, 'sort-by': sortBy, 'release-date': releaseDate
}
axios.request({...options, params})
.then((response) => {
const games = response.data;
setGames(games);
})
.catch((error) => {
console.error(error);
});
}
I would so something like this:
const [games, setGames] = useState([]);
// I'll only use sortBy for the example but it will be the same for other params
const [sortBy, setSortBy] = useState("");
// Make this an async function that receives the options as a parameter
const getGames = async (opt) => {
// optional await, you can still use promises if you want
try {
const response = await axios.request(opt);
setGames(response.data);
} catch (err) {
console.error(error);
}
}
useEffect(()=>{
// Pass the options const you created to this effect that will only run when the component mounts
getGames(options);
},[])
Now create a select button to attach the sortBy state and another useEffect to watch for state changes for that value:
useEffect(()=>{
// Here you will add the other params if necessary
if (sortBy) {
getGames({...options, params: { sortBy } });
}
// Update the dependency array for each param you add.
},[sortBy])
const handleChange = (event) => {
setSortBy(event.target.value);
}
return (
{/* rest of your jsx */}
<select value={sortBy} onChange={handleChange}>
<option value="">None</option>
<option value="title">Title</option>
<option value="platform">Platform</option>
<option value="publisher">Publisher</option>
</select>
)
So basically you can see a working example using the sortBy and assuming the sortBy is a string containing the field where you want to sort by, if you need to pass another value just adapt the sortBy value to have the shape that you need to pass to the API.