I have a product page sorted by title. Sorting works, everything is fine, but when pagination occurs, new items are loaded without sorting. How to fix it?
const Grid = ({filter, countOnRow, totalCount, products}) => {
const [fetching, setFetching] = useState(true)
const [total, setTotal] = useState(totalCount)
const [startPage, setStartPage] = useState(0)
const [produs, setProdus] = useState([])
const [okay, setOkay] = useState(false)
const [selectedSort, setSelectedSort] = useState('')
useEffect(()=>{
if(fetching){
setProdus([...produs, ...products.slice(startPage,total)])
setStartPage(total)
setTotal(total+total)
setFetching(false )
}
}, [fetching])
useEffect(()=>{
document.addEventListener('scroll', scrollHadnler);
return function(){
document.removeEventListener('scroll', scrollHadnler)
};
}, [])
const scrollHadnler=(e)=>{
if(e.target.documentElement.scrollHeight-(e.target.documentElement.scrollTop+window.innerHeight)<100){
setFetching(true)
}
}
const sortByName = (sort) => {
setSelectedSort(sort)
setProdus([...produs].sort((a,b) => a[sort].localeCompare(b[sort])))
setOkay(!okay)
}
How can I implement the filtering to persist after pagination.