dalerasrorov / componofy

A web app that allows Spotify users combine personal and public playlists together to either create a new one or merge selected playlist songs with an existing playlist. Also, you can reorder your personal playlist tracks with drag and drop and update playlist cover images..

Hi there 👋

• 🔭 I’m currently working on NGC
• 🌱 I’m currently learning Next.js
• 🤔 I’m looking for help with data vis and javascript

componofy's Issues

Separate session management into its own module

Separate code that deals with Yar session management, such as setting and getting session, into an individual module to make it make code more flexible and Yar module testable (Mocha for testing).

Organize actions

Organize their actions into their own files just like reducers.

Create propType for the redux state "user"

Create a separate PropType element for the global redux store object user.

Set "load more" button to loading state on playlists fetch

To make sure that the user doesn't click "Load more" multiple times and causes multiple requests, we would need to set the status of the button to disabled when the redux store property of public playlists reducer is set to true.

isFetching == true ? disableLoadMore : enableLoadMore

Create shareable Form component

Create a shareable Form component that can be used for merging playlists with an existing playlist or merging playlists into a new one.

Create log out route in server

Create a log out route in server.js:

• Path: /logout
• Type: GET
• Clears session
• Gives date the user was last signed in

Fix proptype bug

PropType bug:
bundle.js:141887 Warning: Failed prop type: The prop `myPlaylists.playlists[15].images[0].height` is marked as required in `MyPlaylists`, but its value is `null`. in MyPlaylists (created by withStyles(MyPlaylists)) in withStyles(MyPlaylists) (created by Route) in Route (created by withRouter(withStyles(MyPlaylists))) in withRouter(withStyles(MyPlaylists)) (created by Connect(withRouter(withStyles(MyPlaylists)))) in Connect(withRouter(withStyles(MyPlaylists))) (created by Route) in Route (at index.js:37) in div (created by Grid) in Grid (created by GridWrapper) in GridWrapper (created by withStyles(GridWrapper)) in withStyles(GridWrapper) (at index.js:36) in div (created by Grid) in Grid (created by GridWrapper) in GridWrapper (created by withStyles(GridWrapper)) in withStyles(GridWrapper) (at index.js:27) in Main (created by withStyles(Main)) in withStyles(Main) (at PrivateRoute.js:25) in Route (at PrivateRoute.js:22) in PrivateRoute (created by Route) in Route (created by withRouter(PrivateRoute)) in withRouter(PrivateRoute) (created by Connect(withRouter(PrivateRoute))) in Connect(withRouter(PrivateRoute)) (at App.js:27) in Switch (at App.js:25) in MuiThemeProvider (created by MuiThemeProviderWrapper) in MuiThemeProviderWrapper (at App.js:24) in App (at index.js:40) in Router (created by ConnectedRouter) in ConnectedRouter (at index.js:39) in Provider (at index.js:38)

Add and complete CONTRIBUTING guide

Some stuff was already added in 1c3ce67 CONTRIBUTING.md, needs more information on how to add new actions, reducers, props, and endpoints in the API.

Create a common prop called Playlist

Create a common prop called Playlist with shape of the formatted playlist. The passed object should have a formatted shape which will be done by the util function.

Allow user to upload more than 100 tracks

If user adds more than 100 tracks, recursive calls to Spotify API should be made since it accepts 100 tracks per request to add tracks.

Connect Redux component tree to react redux router

Use this https://github.com/reactjs/react-router-redux react plugin for connecting routes to redux store.

Add ability to switch themes

Possible solutions:

• Added theme to redux store and change based on user's choice

Add Preview Play button to the Track component

Use Material UI Icons and wrap a IconButton around it to create the component in components/Track..

Implement Track component

When a user clicks on a playlist, it should show the list of tracks that belongs to that playlist.

Track component:

• Contains a check mark on the left
  • If checkmark is checked, the track should be added to the final list
  • If checkmark is unchecked, the track should be removed from the final list
• Contains a ButtonContainer component to the right that
  • Contains preview button if preview_url passed from the API has a value
  • Contains view page button that points to the track's page
• Contains an Info component on the left that shows:
  • Image (track/album/artist cover)
  • Track name
  • Artist name
  • Album name

Separate different types of reducers into their own files

Currently all reducers (2 so far) are in src/reducers/index.js file. What we need to do is to create one file for each reducer (such as user.js for the user state or myplaylists.js for user playlists state) in src/reducers directory, import them in reducers/index.js file and export it from that index file. This change should not impact the way reducers are imported from files that need any of the reducers included.

Prevent Settings menu to cause scroll removal

Look here: https://material-ui-next.com/demos/menus/#menulist-composition

Transfer the getPlaylistTracks API call to redux as "tracks" property to MyPlaylists

Currently the state of the playlist tracks is not in the redux store. It's better if it's stored in the MyPlaylsits's playlist new property tracks.

Create a "collapse" feature and add it to Options button in Toolbar

This feature will close the expanded tracks of all playlists in the page where the "Options" is at.

Change footer to Toolbar component and place existing options there

The footer as a button is not a great idea. Footer needs to be a set of components each of which makes a specific action.

Create Track propType

Create propType for the track object structure given from the API.

Set up Circle CI automation for tests

This should be done after we will finish setting up Jest and will write tests. This should run all types of tests (integration, unit, functional), and output the status of the build based on the result. We will add more steps on deployment to it once we get there as well.

Show Chip component if the track is popular

If track is popular (i.e., popularity > 0.90), then show Popular chip tag below the track and artist info.

https://material-ui-next.com/demos/chips/

Create onToggle event that opens up Playlist's tracks

Create a new toggle event that is triggered when the user clicks on a playlist.

Add MIT License

Created a redux state for application errors

• Redux state that will contain a set of errors
• The set of errors will be passed from the redux state to the application UI as Snackbar components.
• Position: bottom left.
• If there are multiple errors, follow queue data structure.

Add number of remaining playlists within in the list

In the load more button, add a small number tag (surrounded by the circle or something, maybe fab button from Material UI) that displays the number of playlists from the list of playlists has not been shown yet.

Upgrade dependencies dev and etc

The Material-UI library is currently out of date, so are other important packages. Should be upgraded and new badge that indicates that the libraries are up-to-date should be added to README.

Create a button that will help user scroll up fast

Create a button and a functionality that is active when the user scrolls below the playlist header. Should be disabled if the user is at the top of the playlist list.

Create Playlist component

Create Playlist component

• Accordion-like component that contains list of Track components
• Should have a check mark to the left.
  • If this check mark is selected, then mark all the Track components inside of it. That means that all tracks should be included in the final merged list of tracks.
• Track component contains control such as add/remove/preview/etc.

Make "load more" button occupy less space in Flex

Currently the button occupies too much space in mobile devices.

Create cookie isAuthenticated in server

Create isAuthenticated key with boolean added to cookie or session variable.

Make application configurable for Heroku app

Add configurations that would allow remote host to be able to render everything properly along with NodeJS server as a SPA.

When user clicks on load more, scroll to bottom

When the user clicks on load more button, scroll to the bottom of the page.

Connect Tabs component to Redux routes

Make Tabs component items use Redux push method to point to different routes of the app.

Move Settings redux actions to the root playlists page

Needs to be done to make Settings component customizable.

Improve loader and counter UI

Currently the counter is not properly styled. Also, if there is no items to load, then don't show the loader.

Add an option to the playlist to search same category playlists

In Playlist component, add a new action/reducer/ability to search for playlists of the same category in /public route. The endpoint that will help one achieve this API method would be used:

http://michaelthelin.se/spotify-web-api-node/#getPlaylistsForCategory

Add ability to merge playlists into another playlist

Allow the user to choose between:

• creating a new playlist out of the merged set of selected playlists
• add to the existing playlist the merged playlists set of songs

The option should be given when user clicks on Componofy. Make the Componofy button accept the CustomMenu component.

Create end-to-end flow for getting track API data

This is needed when to fetch the tracks when the user clicks on a playlist.

Set up Jest testing framework

Set up jest for unit testing React components. Here is useful link to get started.

Move dev stuff to devDependencies

Some of the modules like enzyme and redux-logger are not needed to run the app. Move those to devDependencies

Create scrolling pagination

Create a scroll-like pagination for each playlist.

Set up Mocha and write first unit tests for the server

Set up Mocha in the app and create first unit test that checks Spotify API authentication for example.

Create a PropType object for the Redux global state

Create global state for user, myPlaylists, and router.

Create getTrack() endpoint

Create an endpoint for a specific track for more information about it /api/track/:id. In the future, the plan is to have set of requests placed in the redux store.

Create a sketch for Track component

Track component is a major component of the app and needs a good planning/design, so will make design before implementing the component.

Create authentication actions for Redux store

• Create new state called isAuthenticated (type: Boolean, defaultValue: False)
• Create new action for that state SET_AS_AUTHENTICATED that will be used in MyPlaylists component's componentDidMount lifecycle method. In this method, make an api call to /auth route in the server that returns back a status whether the user is authenticated.

Migrate app to the latest version of React libraries

• React
• Material UI
• React Waypoint

Create an endpoint for uploading playlist image cover

The new endpoint for uploading playlist cover images was announced. Create an endpoint and a redux action to upload an image.