I'm struggling to find any guidance on how to implement a date sorting feature using isotope-layout in my Next.js project. Here's the progress I've made so far. The dates are sorting, but it's happening alphabetically. I need assistance with writing this piece of code:
date: function ($elem) { return Date.parse($elem.find('.date').text()); }const KeyOutcomes = (props) => {
const isotope = useRef()
const [sortKey, setSortKey] = useState('date')
// Setting up an Isotope object with configurations
useEffect(() => {
isotope.current = new Isotope('.news', {
itemSelector: '.newsInner',
layoutMode: 'fitRows',
getSortData: {
header: '.header',
date: '.date',
},
})
// Cleaning up
return () => isotope.current.destroy()
}, [])
// Handling changes in sort key
useEffect(() => {
isotope.current.arrange({ sortBy: `${sortKey}` })
}, [sortKey])
const handleSortKeyChange = (key) => () => setSortKey(key)
return (
<div className="container">
<div className="row">
<div className="col-12">
<div className="sortAndFilter">
<ul className="sortFilter">
<li>Sort By:</li>
<li
onClick={handleSortKeyChange('header')}
>
Header
</li>
<li
onClick={handleSortKeyChange('date')}
>
Date
</li>
</ul>
</div>
<div className="news">
<div className="newsInner vege">
<div className="newsText two">
<h3 className="header">V News Header</h3>
<p className="date">02/05/2020</p>
</div>
</div>
<div className="newsInner one">
<div className="newsText">
<h3 className="header">D News Header</h3>
<p className="date">26/05/2020</p>
</div>
</div>
<div className="newsInner one">
<div className="newsText">
<h3 className="header">G News Header</h3>
<p className="date">10/12/2021</p>
</div>
</div>
</div>
</div>
</div>
</div>
)
}