Add more export data

README.md

@@ -33,12 +33,33 @@ Track data is exported in [CSV](http://en.wikipedia.org/wiki/Comma-separated_val
 - Artist Name
 - Album URI
 - Album Name
+- Album Release Date
 - Disc Number
 - Track Number
 - Track Duration (ms)
+- Explicit?
+- Popularity
 - Added By
 - Added At
 
+Additionally, by clicking on the cog and selecting "Include artists data", the following fields will be added:
+
+- Artist Genres
+
+And by selecting "Include audio features data":
+
+- Danceability
+- Energy
+- Key
+- Loudness
+- Mode
+- Speechiness
+- Acousticness
+- Instrumentalness
+- Liveness
+- Valence
+- Tempo
+- Time Signature
 
 ## Development
 

src/App.scss

@@ -45,7 +45,6 @@ h1 a:hover { color: black; text-decoration: none; }
 #playlistsHeader {
   display: flex;
   flex-direction: row-reverse;
-  gap: 20px;
 
   .progress {
     flex-grow: 1;
@@ -57,7 +56,7 @@ h1 a:hover { color: black; text-decoration: none; }
       text-align: left;
 
       // Transitioning when resetting looks weird
-      &[aria-valuenow="1"] {
+      &[aria-valuenow="0"] {
         transition: none;
       }
     }

src/components/ConfigDropdown.scss

@@ -0,0 +1,38 @@
+.dropdown-toggle::after {
+  display: none;
+}
+
+.dropdown-menu {
+  box-shadow: 1px 1px 4px 0px rgba(0,0,0,0.2);
+}
+
+.dropdown-item {
+  &:active, &:hover {
+    color: black;
+    background: none;
+  }
+
+  label {
+    display: block;
+    cursor: pointer;
+  }
+}
+
+.dropdown {
+  button {
+    padding: 0;
+    margin: 0 20px;
+    height: 31px;
+    color: #dee2e6;
+
+    &:hover {
+      color: silver;
+    }
+  }
+
+  &.show {
+    button {
+      color: #5cb85c;
+    }
+  }
+}

src/components/ConfigDropdown.tsx

@@ -0,0 +1,54 @@
+import './ConfigDropdown.scss'
+
+import React from "react"
+import { Dropdown, Form } from "react-bootstrap"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+
+type ConfigDropdownProps = {
+  onConfigChanged: (config: any) => void
+}
+
+class ConfigDropdown extends React.Component<ConfigDropdownProps> {
+  private includeArtistsDataCheck = React.createRef<HTMLInputElement>()
+  private includeAudioFeaturesDataCheck = React.createRef<HTMLInputElement>()
+
+  handleCheckClick = (event: React.MouseEvent) => {
+    event.stopPropagation()
+
+    if ((event.target as HTMLElement).nodeName === "INPUT") {
+      this.props.onConfigChanged({
+        includeArtistsData: this.includeArtistsDataCheck.current?.checked || false,
+        includeAudioFeaturesData: this.includeAudioFeaturesDataCheck.current?.checked || false
+      })
+    }
+  }
+
+  render() {
+    return (
+      <Dropdown>
+        <Dropdown.Toggle variant="link">
+          <FontAwesomeIcon icon={['fas', 'cog']} size="lg" />
+        </Dropdown.Toggle>
+        <Dropdown.Menu align="right">
+          <Dropdown.Item onClickCapture={this.handleCheckClick} as="div">
+            <Form.Check
+              id="config-include-artists-data"
+              type="switch"
+              label="Include artists data"
+              ref={this.includeArtistsDataCheck}
+            />
+          </Dropdown.Item>
+          <Dropdown.Item onClickCapture={this.handleCheckClick} as="div">
+            <Form.Check
+              id="config-include-audio-features-data"
+              type="switch"
+              label="Include audio features data"
+              ref={this.includeAudioFeaturesDataCheck}/>
+          </Dropdown.Item>
+        </Dropdown.Menu>
+      </Dropdown>
+    )
+  }
+}
+
+export default ConfigDropdown

src/components/PlaylistExporter.tsx

@@ -2,6 +2,8 @@ import { saveAs } from "file-saver"
 
 import TracksData from "components/tracks_data/TracksData"
 import TracksBaseData from "components/tracks_data/TracksBaseData"
+import TracksArtistsData from "components/tracks_data/TracksArtistsData"
+import TracksAudioFeaturesData from "components/tracks_data/TracksAudioFeaturesData"
 
 class TracksCsvFile {
   playlist: any
@@ -49,10 +51,12 @@ class TracksCsvFile {
 class PlaylistExporter {
   accessToken: string
   playlist: any
+  config: any
 
-  constructor(accessToken: string, playlist: any) {
+  constructor(accessToken: string, playlist: any, config: any) {
     this.accessToken = accessToken
     this.playlist = playlist
+    this.config = config
   }
 
   async export() {
@@ -67,6 +71,17 @@ class PlaylistExporter {
     const tracksBaseData = new TracksBaseData(this.accessToken, this.playlist)
 
     await tracksCsvFile.addData(tracksBaseData)
+    const tracks = await tracksBaseData.tracks()
+
+    if (this.config.includeArtistsData) {
+      const tracksArtistsData = new TracksArtistsData(this.accessToken, tracks)
+      await tracksCsvFile.addData(tracksArtistsData)
+    }
+
+    if (this.config.includeAudioFeaturesData) {
+      const tracksAudioFeaturesData = new TracksAudioFeaturesData(this.accessToken, tracks)
+      await tracksCsvFile.addData(tracksAudioFeaturesData)
+    }
 
     tracksBaseData.tracks()
 

src/components/PlaylistRow.jsx

@@ -7,7 +7,11 @@ import PlaylistExporter from "./PlaylistExporter"
 
 class PlaylistRow extends React.Component {
   exportPlaylist = () => {
-    (new PlaylistExporter(this.props.accessToken, this.props.playlist)).export().catch(apiCallErrorHandler)
+    (new PlaylistExporter(
+      this.props.accessToken,
+      this.props.playlist,
+      this.props.config
+    )).export().catch(apiCallErrorHandler)
   }
 
   renderTickCross(condition) {

src/components/PlaylistTable.jsx

@@ -1,6 +1,7 @@
 import React from "react"
 import { ProgressBar } from "react-bootstrap"
 
+import ConfigDropdown from "./ConfigDropdown"
 import PlaylistRow from "./PlaylistRow"
 import Paginator from "./Paginator"
 import PlaylistsExporter from "./PlaylistsExporter"
@@ -20,6 +21,18 @@ class PlaylistTable extends React.Component {
       show: false,
       label: "",
       value: 0
+    },
+    config: {
+      includeArtistsData: false,
+      includeAudioFeaturesData: false
+    }
+  }
+
+  constructor(props) {
+    super(props)
+
+    if (props.config) {
+      this.state.config = props.config
     }
   }
 
@@ -114,6 +127,10 @@ class PlaylistTable extends React.Component {
     })
   }
 
+  handleConfigChanged = (config) => {
+    this.setState({ config: config })
+  }
+
   componentDidMount() {
     this.loadPlaylists(this.props.url);
   }
@@ -126,6 +143,7 @@ class PlaylistTable extends React.Component {
         <div id="playlists">
           <div id="playlistsHeader">
             <Paginator nextURL={this.state.nextURL} prevURL={this.state.prevURL} loadPlaylists={this.loadPlaylists}/>
+            <ConfigDropdown onConfigChanged={this.handleConfigChanged} />
             {this.state.progressBar.show && progressBar}
           </div>
           <table className="table table-hover table-sm">
@@ -144,13 +162,19 @@ class PlaylistTable extends React.Component {
                     onExportedPlaylistsCountChanged={this.handleExportedPlaylistsCountChanged}
                     playlistCount={this.state.playlistCount}
                     likedSongs={this.state.likedSongs}
+                    config={this.state.config}
                   />
                 </th>
               </tr>
             </thead>
             <tbody>
               {this.state.playlists.map((playlist, i) => {
-                return <PlaylistRow playlist={playlist} key={playlist.id} accessToken={this.props.accessToken}/>
+                return <PlaylistRow
+                  playlist={playlist}
+                  key={playlist.id}
+                  accessToken={this.props.accessToken}
+                  config={this.state.config}
+                />
               })}
             </tbody>
           </table>

src/components/PlaylistTable.test.jsx

@@ -75,7 +75,6 @@ describe("single playlist exporting", () => {
     fireEvent.click(linkElement)
 
     await waitFor(() => {
-      expect(handlerCalled).toHaveBeenCalledTimes(4)
       expect(handlerCalled.mock.calls).toEqual([ // Ensure API call order and no duplicates
         [ 'https://api.spotify.com/v1/me' ],
         [ 'https://api.spotify.com/v1/users/watsonbox/playlists' ],
@@ -87,8 +86,88 @@ describe("single playlist exporting", () => {
       expect(saveAsMock).toHaveBeenCalledWith(
         {
           content: [
-            '"Track URI","Track Name","Artist URI","Artist Name","Album URI","Album Name","Disc Number","Track Number","Track Duration (ms)","Added By","Added At"\n' +
-            '"spotify:track:1GrLfs4TEvAZ86HVzXHchS","Crying","spotify:artist:4TXdHyuAOl3rAOFmZ6MeKz","Six by Seven","spotify:album:4iwv7b8gDPKztLkKCbWyhi","Best of Six By Seven","1","3","198093","","2020-07-19T09:24:39Z"\n'
+            '"Track URI","Track Name","Artist URI","Artist Name","Album URI","Album Name","Album Release Date","Disc Number","Track Number","Track Duration (ms)","Explicit","Popularity","Added By","Added At"\n' +
+            '"spotify:track:1GrLfs4TEvAZ86HVzXHchS","Crying","spotify:artist:4TXdHyuAOl3rAOFmZ6MeKz","Six by Seven","spotify:album:4iwv7b8gDPKztLkKCbWyhi","Best of Six By Seven","2017-02-17","1","3","198093","false","2","","2020-07-19T09:24:39Z"\n'
+          ],
+          options: { type: 'text/csv;charset=utf-8' }
+        },
+        'liked.csv',
+        true
+      )
+    })
+  })
+
+  test("including additional artist data", async () => {
+    const saveAsMock = jest.spyOn(FileSaver, "saveAs")
+    saveAsMock.mockImplementation(jest.fn())
+
+    render(<PlaylistTable accessToken="TEST_ACCESS_TOKEN" config={{ includeArtistsData: true }} />);
+
+    await waitFor(() => {
+      expect(screen.getByText(/Export All/)).toBeInTheDocument()
+    })
+
+    const linkElement = screen.getAllByText("Export")[0]
+
+    expect(linkElement).toBeInTheDocument()
+
+    fireEvent.click(linkElement)
+
+    await waitFor(() => {
+      expect(handlerCalled.mock.calls).toEqual([ // Ensure API call order and no duplicates
+        [ 'https://api.spotify.com/v1/me' ],
+        [ 'https://api.spotify.com/v1/users/watsonbox/playlists' ],
+        [ 'https://api.spotify.com/v1/users/watsonbox/tracks' ],
+        [ 'https://api.spotify.com/v1/me/tracks?offset=0&limit=20' ],
+        [ 'https://api.spotify.com/v1/artists?ids=4TXdHyuAOl3rAOFmZ6MeKz' ]
+      ])
+
+      expect(saveAsMock).toHaveBeenCalledTimes(1)
+      expect(saveAsMock).toHaveBeenCalledWith(
+        {
+          content: [
+            '"Track URI","Track Name","Artist URI","Artist Name","Album URI","Album Name","Album Release Date","Disc Number","Track Number","Track Duration (ms)","Explicit","Popularity","Added By","Added At","Artist Genres"\n' +
+            '"spotify:track:1GrLfs4TEvAZ86HVzXHchS","Crying","spotify:artist:4TXdHyuAOl3rAOFmZ6MeKz","Six by Seven","spotify:album:4iwv7b8gDPKztLkKCbWyhi","Best of Six By Seven","2017-02-17","1","3","198093","false","2","","2020-07-19T09:24:39Z","nottingham indie"\n'
+          ],
+          options: { type: 'text/csv;charset=utf-8' }
+        },
+        'liked.csv',
+        true
+      )
+    })
+  })
+
+  test("including additional audio features data", async () => {
+    const saveAsMock = jest.spyOn(FileSaver, "saveAs")
+    saveAsMock.mockImplementation(jest.fn())
+
+    render(<PlaylistTable accessToken="TEST_ACCESS_TOKEN" config={{ includeAudioFeaturesData: true }} />);
+
+    await waitFor(() => {
+      expect(screen.getByText(/Export All/)).toBeInTheDocument()
+    })
+
+    const linkElement = screen.getAllByText("Export")[0]
+
+    expect(linkElement).toBeInTheDocument()
+
+    fireEvent.click(linkElement)
+
+    await waitFor(() => {
+      expect(handlerCalled.mock.calls).toEqual([ // Ensure API call order and no duplicates
+        [ 'https://api.spotify.com/v1/me' ],
+        [ 'https://api.spotify.com/v1/users/watsonbox/playlists' ],
+        [ 'https://api.spotify.com/v1/users/watsonbox/tracks' ],
+        [ 'https://api.spotify.com/v1/me/tracks?offset=0&limit=20' ],
+        [ 'https://api.spotify.com/v1/audio-features?ids=1GrLfs4TEvAZ86HVzXHchS' ]
+      ])
+
+      expect(saveAsMock).toHaveBeenCalledTimes(1)
+      expect(saveAsMock).toHaveBeenCalledWith(
+        {
+          content: [
+            '"Track URI","Track Name","Artist URI","Artist Name","Album URI","Album Name","Album Release Date","Disc Number","Track Number","Track Duration (ms)","Explicit","Popularity","Added By","Added At","Danceability","Energy","Key","Loudness","Mode","Speechiness","Acousticness","Instrumentalness","Liveness","Valence","Tempo","Time Signature"\n' +
+            '"spotify:track:1GrLfs4TEvAZ86HVzXHchS","Crying","spotify:artist:4TXdHyuAOl3rAOFmZ6MeKz","Six by Seven","spotify:album:4iwv7b8gDPKztLkKCbWyhi","Best of Six By Seven","2017-02-17","1","3","198093","false","2","","2020-07-19T09:24:39Z","0.416","0.971","0","-5.55","1","0.0575","0.00104","0.0391","0.44","0.19","131.988","4"\n'
           ],
           options: { type: 'text/csv;charset=utf-8' }
         },
@@ -121,7 +200,7 @@ describe("single playlist exporting", () => {
       expect(saveAsMock).toHaveBeenCalledWith(
         {
           content: [
-            '"Track URI","Track Name","Artist URI","Artist Name","Album URI","Album Name","Disc Number","Track Number","Track Duration (ms)","Added By","Added At"\n'
+            '"Track URI","Track Name","Artist URI","Artist Name","Album URI","Album Name","Album Release Date","Disc Number","Track Number","Track Duration (ms)","Explicit","Popularity","Added By","Added At"\n'
           ],
           options: { type: 'text/csv;charset=utf-8' }
         },
@@ -156,14 +235,14 @@ test("exporting of all playlists", async () => {
     expect(jsZipFileMock).toHaveBeenCalledTimes(2)
     expect(jsZipFileMock).toHaveBeenCalledWith(
       "liked.csv",
-      '"Track URI","Track Name","Artist URI","Artist Name","Album URI","Album Name","Disc Number","Track Number","Track Duration (ms)","Added By","Added At"\n' +
-      '"spotify:track:1GrLfs4TEvAZ86HVzXHchS","Crying","spotify:artist:4TXdHyuAOl3rAOFmZ6MeKz","Six by Seven","spotify:album:4iwv7b8gDPKztLkKCbWyhi","Best of Six By Seven","1","3","198093","","2020-07-19T09:24:39Z"\n'
+      '"Track URI","Track Name","Artist URI","Artist Name","Album URI","Album Name","Album Release Date","Disc Number","Track Number","Track Duration (ms)","Explicit","Popularity","Added By","Added At"\n' +
+      '"spotify:track:1GrLfs4TEvAZ86HVzXHchS","Crying","spotify:artist:4TXdHyuAOl3rAOFmZ6MeKz","Six by Seven","spotify:album:4iwv7b8gDPKztLkKCbWyhi","Best of Six By Seven","2017-02-17","1","3","198093","false","2","","2020-07-19T09:24:39Z"\n'
     )
     expect(jsZipFileMock).toHaveBeenCalledWith(
       "ghostpoet_–_peanut_butter_blues_and_melancholy_jam.csv",
-      '"Track URI","Track Name","Artist URI","Artist Name","Album URI","Album Name","Disc Number","Track Number","Track Duration (ms)","Added By","Added At"\n' +
-      '"spotify:track:7ATyvp3TmYBmGW7YuC8DJ3","One Twos / Run Run Run","spotify:artist:69lEbRQRe29JdyLrewNAvD","Ghostpoet","spotify:album:6jiLkuSnhzDvzsHJlweoGh","Peanut Butter Blues and Melancholy Jam","1","1","241346","spotify:user:watsonbox","2020-11-03T15:19:04Z"\n' +
-      '"spotify:track:0FNanBLvmFEDyD75Whjj52","Us Against Whatever Ever","spotify:artist:69lEbRQRe29JdyLrewNAvD","Ghostpoet","spotify:album:6jiLkuSnhzDvzsHJlweoGh","Peanut Butter Blues and Melancholy Jam","1","2","269346","spotify:user:watsonbox","2020-11-03T15:19:04Z"\n'
+      '"Track URI","Track Name","Artist URI","Artist Name","Album URI","Album Name","Album Release Date","Disc Number","Track Number","Track Duration (ms)","Explicit","Popularity","Added By","Added At"\n' +
+      '"spotify:track:7ATyvp3TmYBmGW7YuC8DJ3","One Twos / Run Run Run","spotify:artist:69lEbRQRe29JdyLrewNAvD","Ghostpoet","spotify:album:6jiLkuSnhzDvzsHJlweoGh","Peanut Butter Blues and Melancholy Jam","2011","1","1","241346","false","22","spotify:user:watsonbox","2020-11-03T15:19:04Z"\n' +
+      '"spotify:track:0FNanBLvmFEDyD75Whjj52","Us Against Whatever Ever","spotify:artist:69lEbRQRe29JdyLrewNAvD","Ghostpoet","spotify:album:6jiLkuSnhzDvzsHJlweoGh","Peanut Butter Blues and Melancholy Jam","2011","1","2","269346","false","36","spotify:user:watsonbox","2020-11-03T15:19:04Z"\n'
     )
   })