From e09c6f94dfd99dca3ff972581a6761d9a71d25e3 Mon Sep 17 00:00:00 2001 From: Kyle Shanks Date: Thu, 13 Oct 2022 18:03:25 -0400 Subject: [PATCH] Update new tables to allow drag to add to playlist (#2134) --- .../web/src/components/dragndrop/Draggable.js | 8 ++++--- .../web/src/components/dragndrop/Droppable.js | 7 +++--- packages/web/src/components/table/Table.tsx | 18 ++++++++++----- .../components/tracks-table/TracksTable.tsx | 1 + .../pages/saved-page/SavedPageProvider.tsx | 22 ++++++------------- packages/web/src/store/dragndrop/actions.js | 5 +++-- packages/web/src/store/dragndrop/reducer.js | 5 ++++- packages/web/src/store/dragndrop/types.ts | 1 + 8 files changed, 37 insertions(+), 30 deletions(-) diff --git a/packages/web/src/components/dragndrop/Draggable.js b/packages/web/src/components/dragndrop/Draggable.js index d1e8b8ab32..26066d7fe9 100644 --- a/packages/web/src/components/dragndrop/Draggable.js +++ b/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()) }) diff --git a/packages/web/src/components/dragndrop/Droppable.js b/packages/web/src/components/dragndrop/Droppable.js index 6d17b1b987..e5f4390972 100644 --- a/packages/web/src/components/dragndrop/Droppable.js +++ b/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, diff --git a/packages/web/src/components/table/Table.tsx b/packages/web/src/components/table/Table.tsx index 0023eecbcf..3fa84ec85e 100644 --- a/packages/web/src/components/table/Table.tsx +++ b/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']} > - + {renderTableRow( row, key, @@ -403,7 +411,7 @@ export const Table = ({ ) }, - [onDragEnd, renderTableRow] + [isTracksTable, onDragEnd, renderTableRow] ) const renderRow = useCallback( diff --git a/packages/web/src/components/tracks-table/TracksTable.tsx b/packages/web/src/components/tracks-table/TracksTable.tsx index 2c907ceb41..18747e5cc4 100644 --- a/packages/web/src/components/tracks-table/TracksTable.tsx +++ b/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} diff --git a/packages/web/src/pages/saved-page/SavedPageProvider.tsx b/packages/web/src/pages/saved-page/SavedPageProvider.tsx index 8250df465c..fb5eac486e 100644 --- a/packages/web/src/pages/saved-page/SavedPageProvider.tsx +++ b/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 { } 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 { 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 { 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, diff --git a/packages/web/src/store/dragndrop/actions.js b/packages/web/src/store/dragndrop/actions.js index 4e312c4ea6..623ed4a468 100644 --- a/packages/web/src/store/dragndrop/actions.js +++ b/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 = () => ({ diff --git a/packages/web/src/store/dragndrop/reducer.js b/packages/web/src/store/dragndrop/reducer.js index 18e11d88e2..ca046a016f 100644 --- a/packages/web/src/store/dragndrop/reducer.js +++ b/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 } } diff --git a/packages/web/src/store/dragndrop/types.ts b/packages/web/src/store/dragndrop/types.ts index 177a22c338..92e3decfce 100644 --- a/packages/web/src/store/dragndrop/types.ts +++ b/packages/web/src/store/dragndrop/types.ts @@ -4,4 +4,5 @@ export interface DragNDropState { dragging: boolean kind: Kind id: ID + index: number }