Conversation
|
@eudes is attempting to deploy a commit to the reesvarney's projects Team on Vercel. A member of the Team first needs to authorize it. |
|
Hi there, thanks for the contribution! This looks very promising, I'll try and review it some time over this weekend. No worries about the layout though, the CSS I used for the filters was quick and rough in the first place, so I'll probably do a general update for that anyway. |
reesvarney
left a comment
reesvarney
left a comment
There was a problem hiding this comment.
A few suggestions here but looks good mostly :)
If you can address my comments then I'll be happy to merge once I am able to verify that the docker container works for me locally.
| const selectAllTracks = () => { | ||
| let tracks = Object.keys(staticData.tracks); | ||
| localStorage.setItem("filters", JSON.stringify(tracks)) | ||
| loadFilters({ track: tracks}) | ||
| } | ||
|
|
||
| const selectNoneTracks = () => { | ||
| localStorage.setItem("filters", "{}") | ||
| loadFilters({ track: [] }) | ||
| } |
There was a problem hiding this comment.
I think this needs a rework, setting the localstorage will overwrite all other filters as well. What you'd probably want to do is something like (but not exactly):
if(none) {
// Empty for no tracks
filterData.track = [];
} else if(all) {
// All tracks
filterData.track = Object.keys(staticData.tracks);
}
setFilterData(filterData);Then the useEffect will handle updating the localstorage and updating the servers. (So loadFilters should not be called from anywhere else, I don't mind still separating it out as a function though.)
| <span key="track.none" className={styles.filter_button} onClick={selectNoneTracks}>NONE</span> | ||
| </span>, | ||
| ...Object.keys(staticData.tracks).map(id => { | ||
| const track = {id,...staticData.tracks[id]}; |
There was a problem hiding this comment.
So I'm not that worried about styling however this list may be too large that you cannot close the filter menu on mobile for example. I don't mind doing this part myself but if you fancy a challenge, feel free to try and make it scrollable :)
| const staticData = {tracks}; | ||
|
|
||
| export default staticData; No newline at end of file |
There was a problem hiding this comment.
Probably more readable if this is just a named export as tracks. Then you can use
import {tracks} from "$utils/staticData";2 participants
Hiya!
I found your project recently and would have loved it to have a track filter, so I added it :)
My front-end foo is a bit rusty, and my react is terrible, so feel free to propose changes.
Particularly, the long list of track filters looks quite bad [1], but I'm not sure how to make it a nice scrollable list.
Also, since I was there, I added a docker-compose config to be able to run it self-hosted.
[1]
