Victorjspinto assignment =) #58
Open
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…that can be accessed from any down component to then control the current music on the playlist
…es + we can reuse then in some cases
…calls caching like a breeze
victorjspinto
commented
Jul 1, 2024
| <button className={styles.addToPlaylist + ` ${styles.addToPlaylist}-${track.id}`} onClick={() => setIsMenuVisible(true)}> | ||
| {/* context menu */} | ||
| {isMenuVisible && (<div className={`${styles.playlistSelector} ${isMenuVisible ? styles.playlistSelectorVisible : ''}`}> | ||
| <form onSubmit={onSubmitNewPlaylist}> |
There was a problem hiding this comment.
Simple as possible, I would love to have more proper validations / etc...
victorjspinto
commented
Jul 1, 2024
|
|
||
| useEffect(() => { | ||
| const onClick = (e) => { | ||
| if (e.target.closest(`.${styles.addToPlaylist}-${track.id}`)) return |
There was a problem hiding this comment.
Simple way to implement a context menu, so it opens when we click in the + icon and closes if we click anywhere outside.
I created this className with the track.id because if all tracks have the same addToPlaylist class in their buttons, clicking in the + in another track did not close the previous one.
victorjspinto
commented
Jul 1, 2024
|
|
||
| if (playlist.tracks.length === 1) { | ||
| // delete playlist | ||
| return await deletePlaylistApiCall(playlist.id) |
There was a problem hiding this comment.
if I remove the last track of a playlist, I delete the playlist intead
victorjspinto
commented
Jul 1, 2024
| const useTracks = () => { | ||
| const [tracks, setTracks] = useState([]); | ||
|
|
||
| useEffect(() => { |
There was a problem hiding this comment.
TODO: I could also use react-query here (again, time constraints)
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Here is the small prototype of the Playlist feature 🌟 .
I tried to do this in the simplest way possible and without many new libraries or user cases to keep it simple and also due to the time available.
I hope you enjoy it!
Here are some highlights
Hooks for Playlist and Tracks main operations
I implemented a few react hooks that provide mostly the operations required in the front end. That way, we keep the front end simple and reuse logic/rules across different components.
Favorites and Playlists
Just using a low-hanging-fruit and implementing 2 features with a single backend endpoint. So I provide both Playlist and Favorites (favorites are only one click away, so maybe users will use it more often/be more used to it).
Adding react-query
React queries allow me to create simple API calls and allow me to avoid duplicate calls to the service endpoints. This is pretty useful when used together with the hooks mentioned previously. That way I don't need to create a single component with all state/dependencies just to avoid extra API calls. This also allows us to avoid the issue of prop drilling.
React context for the global player
I refactored the player so now we have a single state manager for the Player (what's currently playing and actions to play/stop the playlist). That way, both Tracks and Playlists pages can command the player using the available hooks
Backend
This was a good exercise to learn more about Python. My main experiences are NodeJS, Java, and more recently GoLang. What I would love to explore more are:
Hope it's a good starting point for discussions =)