Add reordering to new tables for playlists (#1845)

packages/web/src/components/test-table/TestTable.module.css

@@ -84,9 +84,11 @@
 .tableBody {
   display: block;
   overflow: auto;
+  background-color: var(--neutral-light-9);
 }
 
 .tableRow {
+  display: flex;
   position: relative;
   background: var(--white);
   color: var(--neutral);

packages/web/src/components/test-table/TestTable.tsx

@@ -2,6 +2,11 @@ import { useCallback, useEffect, useMemo } from 'react'
 
 import cn from 'classnames'
 import moment from 'moment'
+import {
+  DragDropContext,
+  Draggable as RbdDraggable,
+  Droppable as RbdDroppable
+} from 'react-beautiful-dnd'
 import {
   useTable,
   useSortBy,
@@ -55,7 +60,7 @@ type TestTableProps = {
   loading?: boolean
   maxRowNum?: number
   onClickRow?: (rowInfo: any, index: number) => void
-  onReorder?: () => void
+  onReorder?: (source: number, destination: number) => void
   onSort?: (sortProps: {
     column: { sorter: (a: any, b: any) => number }
     order: string
@@ -211,43 +216,73 @@ export const TestTable = ({
     []
   )
 
-  const renderRow = useCallback(
-    ({ index, key, style }) => {
-      const row = rows[index]
-      prepareRow(row)
+  const renderTableRow = useCallback(
+    (row, key, props, className = '') => {
       return (
         <tr
-          className={cn(styles.tableRow, getRowClassName?.(row.index), {
-            [styles.active]: row.index === activeIndex
-          })}
-          {...row.getRowProps({ style })}
+          className={cn(
+            styles.tableRow,
+            getRowClassName?.(row.index),
+            className,
+            {
+              [styles.active]: row.index === activeIndex
+            }
+          )}
+          {...props}
           key={key}
           onClick={() => onClickRow?.(row, row.index)}
         >
           {row.cells.map(renderCell)}
         </tr>
       )
     },
-    [rows, prepareRow, getRowClassName, activeIndex, renderCell, onClickRow]
+    [activeIndex, getRowClassName, onClickRow, renderCell]
   )
 
-  const renderRows = useCallback(() => {
-    return rows.map((row, i) => {
-      prepareRow(row)
+  const renderDraggableTableRow = useCallback(
+    (row, key, props) => {
       return (
-        <tr
-          className={cn(styles.tableRow, getRowClassName?.(row.index), {
-            [styles.active]: row.index === activeIndex
-          })}
-          {...row.getRowProps()}
-          key={row.id}
-          onClick={() => onClickRow?.(row, row.index)}
+        <RbdDraggable
+          key={`row_${row.id}`}
+          draggableId={row.index.toString()}
+          index={row.index}
         >
-          {row.cells.map(renderCell)}
-        </tr>
+          {(provided, snapshot) => {
+            return renderTableRow(
+              row,
+              key,
+              {
+                ...props,
+                ...provided.draggableProps,
+                ...provided.dragHandleProps,
+                ref: provided.innerRef
+              },
+              snapshot.isDragging ? styles.dragging : ''
+            )
+          }}
+        </RbdDraggable>
       )
+    },
+    [renderTableRow]
+  )
+
+  const renderRow = useCallback(
+    ({ index, key, style }) => {
+      const row = rows[index]
+      prepareRow(row)
+      const render = isReorderable ? renderDraggableTableRow : renderTableRow
+      return render(row, key, { ...row.getRowProps({ style }) })
+    },
+    [rows, prepareRow, isReorderable, renderDraggableTableRow, renderTableRow]
+  )
+
+  const renderRows = useCallback(() => {
+    return rows.map((row, i) => {
+      prepareRow(row)
+      const render = isReorderable ? renderDraggableTableRow : renderTableRow
+      return render(row, row.id, { ...row.getRowProps() })
     })
-  }, [rows, prepareRow, getRowClassName, activeIndex, renderCell, onClickRow])
+  }, [rows, prepareRow, isReorderable, renderDraggableTableRow, renderTableRow])
 
   const renderVirtualizedRows = useCallback(() => {
     return (
@@ -269,6 +304,64 @@ export const TestTable = ({
     )
   }, [maxRowNum, renderRow, rows.length])
 
+  const renderTableBody = useCallback(
+    (props = {}) => {
+      return (
+        <tbody
+          className={styles.tableBody}
+          style={{ maxHeight: (maxRowNum + 0.5) * 44 }}
+          {...getTableBodyProps()}
+          {...props}
+        >
+          {isVirtualized ? renderVirtualizedRows() : renderRows()}
+        </tbody>
+      )
+    },
+    [
+      getTableBodyProps,
+      isVirtualized,
+      maxRowNum,
+      renderRows,
+      renderVirtualizedRows
+    ]
+  )
+
+  const onDragEnd = useCallback(
+    ({ source, destination }) => {
+      if (!source || !destination || !onReorder) {
+        return
+      }
+      if (
+        destination.droppableId === source.droppableId &&
+        destination.index === source.index
+      ) {
+        return
+      }
+
+      onReorder(source.index, destination.index)
+    },
+    [onReorder]
+  )
+
+  const renderDraggableTableBody = useCallback(
+    (props = {}) => {
+      return (
+        <DragDropContext onDragEnd={onDragEnd}>
+          <RbdDroppable droppableId='tracks-table-droppable' type='TABLE'>
+            {(provided) =>
+              renderTableBody({
+                ref: provided.innerRef,
+                ...provided.droppableProps,
+                ...props
+              })
+            }
+          </RbdDroppable>
+        </DragDropContext>
+      )
+    },
+    [onDragEnd, renderTableBody]
+  )
+
   return (
     <div className={cn(styles.tableWrapper, wrapperClassName)}>
       <table
@@ -281,14 +374,10 @@ export const TestTable = ({
         {/* TODO: Need to confirm loading state with design */}
         {loading ? (
           <LoadingSpinner className={styles.loader} />
+        ) : isReorderable ? (
+          renderDraggableTableBody()
         ) : (
-          <tbody
-            className={styles.tableBody}
-            style={{ maxHeight: (maxRowNum + 0.5) * 44 }}
-            {...getTableBodyProps()}
-          >
-            {isVirtualized ? renderVirtualizedRows() : renderRows()}
-          </tbody>
+          renderTableBody()
         )}
       </table>
       {isPaginated ? <p>Render the pagination controls here</p> : null}

packages/web/src/components/test-table/components/OverflowMenuButton.tsx

@@ -21,12 +21,7 @@ type OverflowMenuButtonProps = {
   isOwnerDeactivated?: boolean
   isReposted?: boolean
   onClick?: (e: any) => void
-  onRemove?: (
-    trackId?: number,
-    index?: number,
-    uid?: string,
-    date?: any
-  ) => void
+  onRemove?: (trackId: number, index: number, uid: string, date: number) => void
   removeText?: string
   trackId?: number
   trackPermalink?: string
@@ -50,7 +45,11 @@ export const OverflowMenuButton = (props: OverflowMenuButtonProps) => {
 
   const removeMenuItem = {
     text: removeText,
-    onClick: () => onRemove?.(trackId, index, uid, date?.unix())
+    onClick: () => {
+      if (trackId && index && uid) {
+        onRemove?.(trackId, index, uid, date?.unix())
+      }
+    }
   }
 
   const overflowMenu = {

packages/web/src/components/test-tracks-table/TestTracksTable.tsx

@@ -43,21 +43,30 @@ type TestTracksTableProps = {
   data: any[]
   defaultSorter?: (a: any, b: any) => number
   isVirtualized?: boolean
+  isReorderable?: boolean
   loading?: boolean
   // TODO: Need to add the rows and skeletons when the loadingRowCount is passed
   // loadingRowCount?: number
   maxRowNum?: number
   onClickArtistName?: (track: any) => void
   onClickFavorite?: (track: any) => void
+  onClickRemove?: (
+    track: any,
+    index: number,
+    uid: string,
+    timestamp: number
+  ) => void
   onClickRepost?: (track: any) => void
   onClickRow?: (track: any, index: number) => void
   onClickTrackName?: (track: any) => void
+  onReorderTracks?: (source: number, destination: number) => void
   onSortTracks?: (sortProps: {
     column: { sorter: (a: any, b: any) => number }
     order: string
   }) => void
   playing?: boolean
   playingIndex?: number
+  removeText?: string
   tableClassName?: string
   userId?: number | null
   wrapperClassName?: string
@@ -80,18 +89,22 @@ export const TestTracksTable = ({
   columns = defaultColumns,
   data,
   defaultSorter,
+  isReorderable = false,
   isVirtualized = false,
   loading = false,
   // loadingRowCount = 0,
   maxRowNum = 20,
   onClickArtistName,
   onClickFavorite,
+  onClickRemove,
   onClickRepost,
   onClickRow,
   onClickTrackName,
+  onReorderTracks,
   onSortTracks,
   playing = false,
   playingIndex = -1,
+  removeText,
   tableClassName,
   userId,
   wrapperClassName
@@ -275,8 +288,8 @@ export const TestTracksTable = ({
             e.stopPropagation()
           }}
           isDeleted={deleted}
-          // onRemove={props.onClickRemove}
-          // removeText={props.removeText}
+          onRemove={onClickRemove}
+          removeText={removeText}
           handle={track.handle}
           trackId={track.track_id}
           uid={track.uid}
@@ -293,7 +306,7 @@ export const TestTracksTable = ({
         />
       )
     },
-    [userId]
+    [onClickRemove, removeText, userId]
   )
 
   const renderTrackActions = useCallback(
@@ -447,18 +460,20 @@ export const TestTracksTable = ({
 
   return (
     <TestTable
-      wrapperClassName={wrapperClassName}
-      tableClassName={tableClassName}
-      getRowClassName={getRowClassName}
+      activeIndex={playingIndex}
       columns={tableColumns}
-      maxRowNum={maxRowNum}
       data={data}
+      defaultSorter={defaultSorter}
+      getRowClassName={getRowClassName}
+      isReorderable={isReorderable}
+      isVirtualized={isVirtualized}
       loading={loading}
+      maxRowNum={maxRowNum}
       onClickRow={handleClickRow}
+      onReorder={onReorderTracks}
       onSort={onSortTracks}
-      defaultSorter={defaultSorter}
-      activeIndex={playingIndex}
-      isVirtualized={isVirtualized}
+      tableClassName={tableClassName}
+      wrapperClassName={wrapperClassName}
     />
   )
 }

packages/web/src/pages/collection-page/components/desktop/CollectionPage.tsx

@@ -296,19 +296,19 @@ const CollectionPage = ({
                 onClickFavorite={onClickSave}
                 onClickTrackName={onClickTrackName}
                 onClickArtistName={onClickArtistName}
+                onClickRemove={isOwner ? onClickRemove : undefined}
                 onClickRepost={onClickRepostTrack}
+                onReorderTracks={onReorderTracks}
                 onSortTracks={onSortTracks}
-                // allowReordering={
-                //   userId !== null &&
-                //   userId === playlistOwnerId &&
-                //   allowReordering &&
-                //   !isAlbum
-                // }
-                // onReorderTracks={onReorderTracks}
-                // onClickRemove={isOwner ? onClickRemove : null}
-                // removeText={`${messages.remove} ${
-                //   isAlbum ? messages.type.album : messages.type.playlist
-                // }`}
+                isReorderable={
+                  userId !== null &&
+                  userId === playlistOwnerId &&
+                  allowReordering &&
+                  !isAlbum
+                }
+                removeText={`${messages.remove} ${
+                  isAlbum ? messages.type.album : messages.type.playlist
+                }`}
               />
             ) : (
               <TracksTable