Update new tables to allow drag to add to playlist (#2134)

packages/web/src/components/dragndrop/Draggable.js

@@ -17,6 +17,7 @@ const Draggable = (props) => {
     kind,
     link,
     id,
+    index,
     isOwner,
     drag,
     drop,
@@ -30,7 +31,7 @@ const Draggable = (props) => {
 
   useEffect(() => {
     const dragStart = (e) => {
-      drag(kind, id, isOwner)
+      drag(kind, id, isOwner, index)
 
       const dt = e.dataTransfer
       dt.effectAllowed = 'copy'
@@ -68,7 +69,7 @@ const Draggable = (props) => {
       draggableRef.current.addEventListener('dragstart', dragStart, false)
       draggableRef.current.addEventListener('dragend', dragEnd, false)
     }
-  }, [drag, drop, id, kind, link, text, isOwner, onDrag, onDrop])
+  }, [drag, drop, id, kind, link, text, isOwner, onDrag, onDrop, index])
 
   const refFunc = (ref) => {
     draggableRef.current = ref
@@ -112,6 +113,7 @@ Draggable.propTypes = {
     'playlist-folder'
   ]),
   id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), // One of trackId, collectionId, userId
+  index: PropTypes.number,
   children: PropTypes.element,
   onDrag: PropTypes.func,
   onDrop: PropTypes.func
@@ -125,7 +127,7 @@ Draggable.defaultProps = {
 
 const mapStateToProps = (state, props) => ({})
 const mapDispatchToProps = (dispatch) => ({
-  drag: (kind, id, isOwner) => dispatch(drag(kind, id, isOwner)),
+  drag: (kind, id, isOwner, index) => dispatch(drag(kind, id, isOwner, index)),
   drop: () => dispatch(drop())
 })
 

packages/web/src/components/dragndrop/Droppable.js

@@ -39,10 +39,9 @@ const Droppable = (props) => {
     if (props.stopPropogationOnDrop) {
       e.stopPropagation()
     }
-    const id = props.dragging.id
-    const kind = props.dragging.kind
+    const { id, index, kind } = props.dragging
     if (id) {
-      props.onDrop(id, kind)
+      props.onDrop(id, kind, index)
     }
     setHovered(false)
   }
@@ -100,7 +99,7 @@ Droppable.propTypes = {
 }
 
 Droppable.defaultProps = {
-  onDrop: (id, kind) => {},
+  onDrop: (id, kind, index) => {},
   acceptedKinds: ['track', 'album', 'playlist', 'library-playlist'],
   disabled: false,
   stopPropogationOnDrop: false,

packages/web/src/components/table/Table.tsx

@@ -77,6 +77,7 @@ type TableProps = {
   getRowClassName?: (rowIndex: number) => string
   isPaginated?: boolean
   isReorderable?: boolean
+  isTracksTable?: boolean
   isVirtualized?: boolean
   loading?: boolean
   onClickRow?: (e: any, rowInfo: any, index: number) => void
@@ -103,6 +104,7 @@ export const Table = ({
   getRowClassName,
   isPaginated = false,
   isReorderable = false,
+  isTracksTable = false,
   isVirtualized = false,
   loading = false,
   onClickRow,
@@ -386,13 +388,19 @@ export const Table = ({
           key={row.index}
           className={styles.droppable}
           hoverClassName={styles.droppableHover}
-          onDrop={(id: ID | string, draggingKind: string) => {
-            onDragEnd({ source: Number(id), destination: row.index })
+          onDrop={(id: ID | string, draggingKind: string, index: number) => {
+            onDragEnd({ source: index, destination: row.index })
           }}
           stopPropogationOnDrop={true}
-          acceptedKinds={['table-row']}
+          acceptedKinds={['track', 'table-row']}
         >
-          <Draggable id={row.id} text={row.original.title} kind='table-row'>
+          <Draggable
+            id={isTracksTable ? row.original.track_id : row.id}
+            index={row.id}
+            text={row.original.title}
+            isOwner
+            kind={isTracksTable ? 'track' : 'table-row'}
+          >
             {renderTableRow(
               row,
               key,
@@ -403,7 +411,7 @@ export const Table = ({
         </Droppable>
       )
     },
-    [onDragEnd, renderTableRow]
+    [isTracksTable, onDragEnd, renderTableRow]
   )
 
   const renderRow = useCallback(

packages/web/src/components/tracks-table/TracksTable.tsx

@@ -540,6 +540,7 @@ export const TracksTable = ({
       getRowClassName={getRowClassName}
       isPaginated={isPaginated}
       isReorderable={isReorderable}
+      isTracksTable
       isVirtualized={isVirtualized}
       loading={loading}
       onClickRow={handleClickRow}

packages/web/src/pages/saved-page/SavedPageProvider.tsx

@@ -22,8 +22,7 @@ import {
   SavedPageCollection,
   tracksSocialActions as socialActions,
   playerSelectors,
-  queueSelectors,
-  FeatureFlags
+  queueSelectors
 } from '@audius/common'
 import { push as pushRoute } from 'connected-react-router'
 import { debounce, isEqual } from 'lodash'
@@ -32,7 +31,6 @@ import { withRouter, RouteComponentProps } from 'react-router-dom'
 import { Dispatch } from 'redux'
 
 import { TrackEvent, make } from 'common/store/analytics/actions'
-import { getFeatureEnabled } from 'services/remote-config/featureFlagHelpers'
 import { AppState } from 'store/types'
 import { isMobile } from 'utils/clientUtil'
 import { profilePage } from 'utils/route'
@@ -95,14 +93,11 @@ class SavedPage extends PureComponent<SavedPageProps, SavedPageState> {
   }
 
   handleFetchSavedTracks = debounce(() => {
-    const isNewTablesEnabled = getFeatureEnabled(FeatureFlags.NEW_TABLES)
-    if (isNewTablesEnabled) {
-      this.props.fetchSavedTracks(
-        this.state.filterText,
-        this.state.sortMethod,
-        this.state.sortDirection
-      )
-    }
+    this.props.fetchSavedTracks(
+      this.state.filterText,
+      this.state.sortMethod,
+      this.state.sortDirection
+    )
   }, 300)
 
   handleFetchMoreSavedTracks = (offset: number, limit: number) => {
@@ -414,7 +409,6 @@ class SavedPage extends PureComponent<SavedPageProps, SavedPageState> {
   render() {
     const isQueued = this.isQueued()
     const playingUid = this.getPlayingUid()
-    const isNewTablesEnabled = getFeatureEnabled(FeatureFlags.NEW_TABLES)
 
     const childProps = {
       title: messages.title,
@@ -455,9 +449,7 @@ class SavedPage extends PureComponent<SavedPageProps, SavedPageState> {
       onFilterChange: this.onFilterChange,
       onSortChange: this.onSortChange,
       formatMetadata: this.formatMetadata,
-      getFilteredData: isNewTablesEnabled
-        ? this.getFormattedData
-        : this.getFilteredData,
+      getFilteredData: this.getFormattedData,
       onPlay: this.onPlay,
       onSortTracks: this.onSortTracks,
       onChangeTab: this.onChangeTab,

packages/web/src/store/dragndrop/actions.js

@@ -1,11 +1,12 @@
 export const DRAG = 'DRAGNDROP/DRAG'
 export const DROP = 'DRAGNDROP/DROP'
 
-export const drag = (kind, id, isOwner) => ({
+export const drag = (kind, id, isOwner, index) => ({
   type: DRAG,
   kind,
   id,
-  isOwner
+  isOwner,
+  index
 })
 
 export const drop = () => ({

packages/web/src/store/dragndrop/reducer.js

@@ -4,7 +4,8 @@ const initialState = {
   dragging: false,
   isOwner: false,
   kind: null,
-  id: null
+  id: null,
+  index: null
 }
 
 const actionsMap = {
@@ -14,6 +15,7 @@ const actionsMap = {
       dragging: true,
       kind: action.kind,
       id: action.id,
+      index: action.index ?? null,
       isOwner: action.isOwner
     }
   },
@@ -23,6 +25,7 @@ const actionsMap = {
       dragging: false,
       kind: null,
       id: null,
+      index: null,
       isOwner: false
     }
   }

packages/web/src/store/dragndrop/types.ts

@@ -4,4 +4,5 @@ export interface DragNDropState {
   dragging: boolean
   kind: Kind
   id: ID
+  index: number
 }