Removed tracks and re-adding tracks

client/src/Playlist-Editor/Chat/ChatMessage.tsx

@@ -69,11 +69,15 @@ export const SituatedChatMessage = ({
         {new Date(chatEvent.timestamp).toLocaleString()}
       </time>
     </div>
-    { chatEvent.action &&
+    { chatEvent.action !== 'comment' &&
       <p style={actionStyle}>
         { chatEvent.action === 'add'
         ? 'Added this track'
-        : 'Removed this track'
+        : chatEvent.action === 'remove'
+        ? 'Removed this track'
+        : chatEvent.action === 're-add'
+        ? 'Re-added this track'
+        : 'Error occurred'
         }
       </p>
     }

client/src/Playlist-Editor/Chat/MessageEditor.tsx

@@ -52,11 +52,13 @@ type UserAction = State['userAction']
 
 
 const iconOfAction = (action: UserAction) =>
-  action === 'add'
+  action === 'add' || action === 're-add'
   ? faPlusCircle
   : action === 'remove'
   ? faMinusCircle
-  : faPaperPlane
+  : action === 'view'
+  ? faPaperPlane
+  : null
 
 
 
@@ -66,7 +68,7 @@ export const SituatedMessageEditor = ({
   onSubmit,
   onCancel,
 }: {
-  action: UserAction, //'add' | 'remove' | 'view'
+  action: UserAction,
   onSubmit: (message: string) => Promise<boolean>,
   onCancel: () => void,
 }) => {
@@ -94,12 +96,16 @@ export const SituatedMessageEditor = ({
     ? 'Add'
     : action === 'remove'
     ? 'Remove'
+    : action === 're-add'
+    ? 'Re-add'
     : 'Post' // send? submit? comment?
 
   const placeholderText = action === 'add'
     ? 'Explain why you want to add this track... (optional)'
     : action === 'remove'
     ? 'Explain why you want to remove this track... (optional)'
+    : action === 're-add'
+    ? 'Explain why you want to add this track back... (optional)'
     : 'Comment on this track...'
 
   return <>

client/src/Playlist-Editor/Chat/SituatedChat.tsx

@@ -4,8 +4,8 @@ import { classes } from '../../styles'
 import * as styles from '../playlistTableRowStyles'
 import { State } from '../modificationReducer'
 import { SituatedMessageEditor } from './MessageEditor'
-import { PlaylistTrackObject } from '../../shared/apiTypes'
 import { SituatedChatMessage } from './ChatMessage'
+import { SituatedChatEvent } from '../../shared/dbTypes'
 
 
 const chatStyle = {
@@ -16,13 +16,13 @@ const chatStyle = {
 
 
 export const SituatedChat = ({
-  track,
+  chat,
   action,
   onSubmit,
   onCancel,
 }: {
-  track: PlaylistTrackObject,
-  action: State['userAction'], //'add' | 'remove' | 'view'
+  chat: SituatedChatEvent[],
+  action: State['userAction'],
   onSubmit: (message: string) => Promise<boolean>,
   onCancel: () => void,
 }) => {
@@ -35,7 +35,7 @@ export const SituatedChat = ({
     </div>
     <div style={chatStyle}>
       <div style={classes.column}>
-        { track.chat.map((chatEvent, index) =>
+        { chat.map((chatEvent, index) =>
           <SituatedChatMessage chatEvent={chatEvent} key={index} />
         ) }
       </div>

client/src/Playlist-Editor/DraftAdditionSongRow.tsx

@@ -12,6 +12,7 @@ import { PlaylistTrackObject, PostTrackRequest } from '../shared/apiTypes'
 import { handleApiError } from '../api'
 import { postWrapper } from '../fetchWrapper'
 import { useParams } from 'react-router'
+import { asType } from '../util'
 
 
 /**
@@ -28,12 +29,9 @@ export const DraftAdditionSongRow = ({
   const track: PlaylistTrackObject = {
     ...trackData,
     chat: [],
-    removed: false,
     addedBy: 'You', // supposed to be an id, idk whether to use user's id
   }
 
-  const artistNames = track.artists.map(artist => artist.name).join(', ')
-
   const { setModificationState, loadPlaylist } = useContext(playlistContext)
   const { id: playlistId } = useParams()
 
@@ -42,10 +40,10 @@ export const DraftAdditionSongRow = ({
   const onSubmit = async (message: string) => {
     const response = await postWrapper(
       `/api/playlists/${playlistId}/tracks`,
-      {
+      asType<PostTrackRequest>({
         message,
         trackId: track.id
-      } as PostTrackRequest,
+      }),
     )
     handleApiError(response)
 
@@ -80,8 +78,8 @@ export const DraftAdditionSongRow = ({
     <div style={styles.rowStyle}>
       <div style={styles.expandCollapseButtonStyle}></div>
       <div style={styles.titleStyle}>{track.name}</div>
-      <div style={styles.artistStyle}>{artistNames}</div>
-      <div style={styles.albumStyle}>{track.album.name}</div>
+      <div style={styles.artistStyle}>{track.artists}</div>
+      <div style={styles.albumStyle}>{track.album}</div>
       <div style={styles.addedByStyle}>{track.addedBy}</div>
       <div style={styles.rightButtonWrapperStyle}>
         <button
@@ -94,7 +92,7 @@ export const DraftAdditionSongRow = ({
       </div>
     </div>
     <SituatedChat
-      track={track}
+      chat={track.chat}
       action={'add'}
       onSubmit={onSubmit}
       onCancel={onCancel}

client/src/Playlist-Editor/PlaylistEditor.tsx

@@ -8,14 +8,15 @@ import { classes, colors } from '../styles'
 import { SavedSongRow } from './SavedSongRow'
 import { DraftAdditionSongRow } from './DraftAdditionSongRow'
 // import { TableHeader } from './TableHeader'
-import { PlaylistTableHeader } from './PlaylistTableHeader'
+import { PlaylistTableHeader, RemovedTracksHeader } from './PlaylistTableHeader'
 import { PlaylistInfo } from './PlaylistInfo'
 import { SearchPanel } from './SearchPanel'
 import { initialState } from './modificationReducer'
 import { playlistContext } from './playlistContext'
 import { SeparateChat } from './Chat/SeparateChat'
 import { GetPlaylistIdResponse } from '../shared/apiTypes'
 import { handleApiError } from '../api'
+import { RemovedTrackRow } from './RemovedTrackRow'
 
 
 const usePlaylistData = (playlistId: string) => {
@@ -78,6 +79,7 @@ const usePlaylistData = (playlistId: string) => {
 
 
 
+const padding = '2.0rem'
 
 const searchTabStyle = {
   flex: 0.2,
@@ -95,12 +97,23 @@ const playlistTableStyle = {
 }
 const tHeadStyle = {
   background: colors.grayscale.gray,
-  padding: '2.0rem 2.0rem 0',
+  padding: `${padding} ${padding} 0`,
   position: 'sticky',
   top: 0,
 } as const
 const songsStyle = {
-  padding: '0 2.0rem 2.0rem',
+  padding: `0 ${padding}`,
+}
+const removedHeaderStyle = {
+  padding: `4.0rem ${padding} 0`,
+}
+const removedHeadingStyle = {
+  ...classes.text,
+  ...classes.bold,
+  fontSize: '2.4rem',
+}
+const bottomSpaceStyle: CSSProperties = {
+  minHeight: '5.0rem',
 }
 const separateChatStyle = {
   flex: 1,
@@ -157,6 +170,18 @@ export const PlaylistEditor = ({
                 <DraftAdditionSongRow trackData={modificationState.trackData} />
               }
             </div>
+            { playlist.data.removedTracks.length && <>
+              <div style={removedHeaderStyle}>
+                <h3 style={removedHeadingStyle}>Removed Tracks</h3>
+                <RemovedTracksHeader />
+              </div>
+              <div style={songsStyle}>
+                { playlist.data.removedTracks.map(track =>
+                  <RemovedTrackRow track={track} key={track.id} />
+                )}
+              </div>
+            </>}
+            <div style={bottomSpaceStyle} />
           </> }
         </div>
         { false && <SeparateChat

client/src/Playlist-Editor/PlaylistInfo.tsx

@@ -30,13 +30,6 @@ const titleStyle: CSSProperties = {
   ...classes.bold,
   fontSize: '3.8rem',
 }
-const subtitleStyle = {
-  ...classes.text,
-  color: colors.grayscale.lightText,
-}
-const ownerStyle = {
-  color: colors.grayscale.white,
-}
 const followersStyle = {
   ...classes.text,
   color: colors.grayscale.lightText,
@@ -57,25 +50,19 @@ export const PlaylistInfo = ({
 
   return <div style={containerStyle}>
     <img
-      src={playlist.images[0].url}
+      src={playlist.image}
       alt={playlist.name}
       style={imageStyle}
     />
     <div style={middleContainerStyle}>
       <h2 style={titleStyle}>{playlist.name}</h2>
-      <p style={subtitleStyle}>
-        Created by{' '}
-        <span style={ownerStyle}>
-          {playlist.owner.display_name}
-        </span>
+      <p style={followersStyle}>
+        <span style={followersCountStyle}>
+          {playlist.followers}
+        </span>{' '}
+        Follower{playlist.followers !== 1 && 's'}
       </p>
     </div>
-    <span style={followersStyle}>
-      <span style={followersCountStyle}>
-        {playlist.followers.total}
-      </span>{' '}
-      Follower{playlist.followers.total !== 1 && 's'}
-    </span>
   </div>
 }
 

client/src/Playlist-Editor/PlaylistTableHeader.tsx

@@ -28,3 +28,22 @@ export const PlaylistTableHeader = () => {
   </div>
 }
 
+export const RemovedTracksHeader = () => {
+  return <div style={styles.rowStyle}>
+    <div style={styles.expandCollapseButtonStyle}></div>
+    <div style={styles.titleStyle}>
+      Title
+    </div>
+    <div style={styles.artistStyle}>
+      Artist
+    </div>
+    <div style={styles.albumStyle}>
+      Album
+    </div>
+    <div style={styles.addedByStyle}>
+      Removed by
+    </div>
+    <div style={styles.rightButtonWrapperStyle}></div>
+  </div>
+}
+