A little backstory:
Today I found myself revisiting a project I call ReadThat (aka a Reddit clone) and realized I had only transferred half of the programs state into Redux. I thought it to be a wonderful idea to complete the transfer and move everything I could up into the redux store. I had previously moved most of the state up and predominantly needed to focus on moving my individual vote count rendering and voting functions into the vote actions and reducers. Integrating a vote count function into the initial render was not that hard and making it reactive took adding a new variable to the state store but was fairly straight forward as well. Then came rehashing the sort/filter by vote count functionality. Seemed easy but I had one large issue, sorting the votecount hash.
The vote count hash is intentionally bare bones as I only want to associate the net vote-totals with each post id to be able to display the totals on each post. So my hash is a collection of post ids as keys and the vote count total as the values. As I tried to use classical array sort methods on the hash I quickly realized my naivete and resorted to google for more information. The MDN documentation touches on how to sort an array of hashes but doesn't touch on straight hashes. After some more struggle I struck gold in a stack overflow post from 3 years 10 months ago and ran with it so not my idea but something I found quite useful.
My adapted sort function looks something like this:
filterPosts = async () => {
const { selectedPosts, posts, countedVotes} = this.props
let keys = Object.keys(countedVotes)
keys.sort((a, b) => {return countedVotes[a] - countedVotes[b]})
let filteredPosts = keys.map(key => {
return {[key]: countedVotes[key]}
})
}
Not too crazy eh?
How it works:
"Tl:dr"
It basically converts the hashes keys' into an array and then sorts that array by using each key to access the values in the original hash and comparing them. Then it recreates the original hash in sorted order by working down the now sorted array of hash keys and grabbing each key value pair from the original hash in the order they are arranged within the array.
A little more in-depth
The first line de-structures the properties being passed down to the component for ease of use. The second line utilizes built in class methods to grab all the keys from the vote count hash and save them in an array. The next line utilizes the sort function to organize the new hash-key array in order of how many votes are recorded for each key in the original vote count hash. Finally a new hash is created by mapping through the now organized hash-key array and creating an object for each key by grabbing its associated value from the original hash. And Voila a sorted Hash! Now to reorganize users feeds according to this new hash and my Redux store will be up to date.
Thank you for Reading and more next week! Maybe more exciting too :P
Top comments (0)