pedro-otero / crews Goto Github PK

Builds to dev env in Netlify are failing, always. The error message contained something about not being able to resolve progress/progress so it may have been introduced in #15. The build command locally works just fine.

When viewing an album and then clicking a track, if it's not in state, it's loaded using the Spotify endpoint. This brings the full track. A simple track is enough ti display it in the TrackDetails component, and all simple tracks of the album are contained in the album.

In the thunk that loads the album, if succeded, all tracks of the album must be set into state using the setTrack action. This way:

• User sees the data faster
• No additional data is consumed because of an extra API call
• Calls to the API are saved up

Do not remove the load track thunk

Both TrackContainer and AlbumContainer have duplicate code. Their componentDidMount and componentWillUnmount are the same. Consider an HOC for them.

Ignore .stories.js files from code coverage

Introduce with #31

Track

Album

Read artists, albums and tracks from user library. #19 is necessary for this.

Currently, as a result of changes when adding router and redux and refactoring other components, the EmptyPlayback component displyas before it is actually certain that there is no track being played.

This could be fixed in the CurrentPlayback component, by reading whether playbackInfo in the state (mapStateToProps func) is 'LOADING' and show a LoadingCircle then.

1. Use styled-components to solve the following issues:

• Pass a size prop to Cover to be used both as width and height.
• Produce the background of Banner (because the image itself is variable).

2. Also, scope all the styles (except globals) to avoid clashing. One alternative might be point 3 here but CRA will only support it in 2.0 (facebook/create-react-app#2285)

#16 should be addressed first so changes to the component can be viewed easily.

Initialize globally enzyme and the tests adapter globally
Make sure tests can be run individually, as a whole and with coverage

Currently many components are requiring complex structures such as album, artist, and so on. Because of that:

• These complex structures have to be built correctly in order to write stories and tests.
• The components are coupled to Spotify's current data structure for such entities.
• Reusability of the components is compromised.
• Redundant data is being passed. Example: Both a simple and full track (see model) contain the artist name. In a component that requires artist and track, that info is duplicated.

Example:
Cover requires an album. But all it needs is an image url. Make it require just that.

Such refactorings will likely affect all the components that require them and the refactored component's tests. Tackle one component at a time. As in per PR.

Current components that need the refactor:

• Album
• Cover
• Credits
• Current Playback
• Track Details
• Track Item

The ones not included here either don't need it or are already built this way. Also, components may use so many properties of the same object that the actual object may make more sense than a very long list of properties.

Allow the Spotify module to function like a throttled queue, much like the Discogs API is used by Crews-BE.

• The throttle time should me parameterizable as a REACT_APP_ env variable.
• The queue has to intercept error 429 and add the delay in the Retry-After header to the next request.

If app has never been run, a welcome component should show so and instruct the user to login with their Spotify account. Also, once in, they should be able to log out. After logging out they should see the welcome component.

Upgrade storybook to 4.0.0-alpha-X, as of alpha-3, there is support for a mobile layout.

State must hold only the exact info needed to display the tracks and albums. Currently, all info as it's coming from Spotify is being stored in state.

Tracks and albums should be kept apart and albums should only contain the ids of their tracks.

Mention stories in Readme

Currently root is in charge of triggering the actions that start searches inthe backend for albums and tracks. When such components unmount, they're unsubscribing from the all observables started.

Change the place for dispatching the actions to its corresponding component.

Create Artist Work component that acts as the header for track and album pages.

Desktop

Mobile

Properties:

• title: The name of the work, such as either the track or album title.
• artist: Name of the artist.
• background: URL of the blurred image in the background (the one in a Banner component).
• image: URL of the image to the left.
• year: Year of the work.

Should also accept children to be accomodated below the work title as shown in the images

Check network tab on the browser dev tools when logging in

Probably a component lifecycle issue

Since the app is ejected from CRA, change here for something appropiate.

Add stories for every component. At least one per component.

This app does not pass the PWA audits performed by Lighthouse

Some components have an inner CSS class they use plus another one coming from props. Join them with classNames.

• Cover
• Banner

Likely introduced with #15

Just commit again

Errors when any of the loads from Spotify fail are not being shown anymore

Show a retry button in EmptyPlayback component so request of current playback can be retried without reloading or hittin back. Please note than when reloading app state is lost.

When logging out, don't reload location. Redirect to / instead. If user were viewing a track, is that UR they're going to be directed to when logging out.