Got song import working again. Nice song list in GUI.

client/src/App.tsx

@@ -1,14 +1,14 @@
 import React, { useState, useEffect } from 'react';
 
-import { Box, Button, Paper } from '@material-ui/core';
+import { Button, Paper } from '@material-ui/core';
 
 import * as serverApi from './api';
 import EditSongDialog, { SongProperties } from './components/EditSongDialog';
 import EditArtistDialog, { ArtistProperties } from './components/EditArtistDialog';
-import AppBar from './components/AppBar';
+import AppBar, { ActiveTab as AppBarActiveTab } from './components/AppBar';
 import ItemList from './components/ItemList';
 import ItemListItem from './components/ItemListItem';
-import { SongDisplayItem, LoadingSongDisplayItem } from './types/DisplayItem';
+import { SongDisplayItem, LoadingSongDisplayItem, DisplayItem } from './types/DisplayItem';
 
 interface SongEntry {
 
@@ -19,6 +19,68 @@ interface ArtistEntry {
   id: Number,
 }
 
+interface SongItemProps {
+  id: Number,
+}
+
+function SongItem(props: SongItemProps) {
+  const [songDisplayItem, setSongDisplayItem] = React.useState<SongDisplayItem | undefined>(undefined);
+
+  const updateSong = async () => {
+    const response:any = await fetch(serverApi.SongDetailsEndpoint.replace(':id', props.id.toString()));
+    const json:any = await response.json();
+    const title:String|undefined = json.title;
+    const artistIds:Number[]|undefined = json.artistIds;
+    const artistNamesPromises:Promise<String>[]|undefined = artistIds && artistIds.map((id:Number) => {
+      return fetch(serverApi.ArtistDetailsEndpoint.replace(':id', id.toString()))
+      .then((response:any) => response.json())
+      .then((json:any) => json.name);
+    });
+    const artistNames:String[]|undefined = artistNamesPromises && await Promise.all(artistNamesPromises);
+
+    return {
+      title: title ? title : "Unknown",
+      artistNames: artistNames ? artistNames : []
+    };
+  };
+
+  useEffect(() => {
+    updateSong().then((song:SongDisplayItem) => { setSongDisplayItem(song); });
+  }, []);
+
+  return <ItemListItem item={songDisplayItem ? songDisplayItem : {
+    loadingSong: true
+  }} />;
+}
+
+function SongList() {
+  const [songs, setSongs] = useState<Number[]>([]);
+
+  React.useEffect(() => {
+    const request: serverApi.QuerySongsRequest = {
+      query: {}
+    }
+    const requestOpts = {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(request)
+    };
+    fetch(serverApi.QuerySongsEndpoint, requestOpts)
+      .then((response: any) => response.json())
+      .then((json: any) => {
+        'ids' in json && setSongs(json.ids);
+      });
+  }, []);
+
+  return <Paper>
+    <ItemList>
+      {songs.map((song: any) => {
+        return <SongItem id={song} />;
+      })}
+    </ItemList>
+  </Paper>;
+}
+
 function App() {
   const [songs, setSongs] = useState<SongEntry[]>([]);
   const [artists, setArtists] = useState<ArtistEntry[]>([]);
@@ -132,14 +194,17 @@ function App() {
     loadingSong: true
   };
 
+  const [appBarActiveTab, setAppBarActiveTab] = React.useState(AppBarActiveTab.Songs);
+
   return (
     <div style={{ maxWidth: '100%' }}>
-      <AppBar />
+      <AppBar activeTab={appBarActiveTab} onActiveTabChange={setAppBarActiveTab} />
       <Paper>
-        <ItemList items={[testSong, testLoadingSong]}>
-          <ItemListItem item={testSong}/>
-          <ItemListItem item={testLoadingSong}/>
-        </ItemList>
+        {/* <ItemList items={[testSong, testLoadingSong]}>
+          <ItemListItem item={testSong} />
+          <ItemListItem item={testLoadingSong} />
+        </ItemList> */}
+        {(appBarActiveTab === AppBarActiveTab.Songs) && <SongList />}
       </Paper>
       <Button variant="contained" onClick={openCreateSongDialog}>Create Song</Button>
       <Button variant="contained" onClick={openCreateArtistDialog}>Create Artist</Button>

client/src/components/AppBar.tsx

@@ -7,6 +7,8 @@ import InputBase from '@material-ui/core/InputBase';
 import { createStyles, fade, Theme, makeStyles } from '@material-ui/core/styles';
 import MenuIcon from '@material-ui/icons/Menu';
 import SearchIcon from '@material-ui/icons/Search';
+import Tabs from '@material-ui/core/Tabs';
+import Tab from '@material-ui/core/Tab';
 
 const useStyles = makeStyles((theme: Theme) =>
     createStyles({
@@ -65,7 +67,17 @@ const useStyles = makeStyles((theme: Theme) =>
     }),
 );
 
-export default function AppBar() {
+export enum ActiveTab {
+    Songs = 0,
+    Artists = 1,
+}
+
+export interface IProps {
+    activeTab: ActiveTab,
+    onActiveTabChange: (tab:ActiveTab) => void
+}
+
+export default function AppBar(props: IProps) {
     const classes = useStyles();
 
     return (
@@ -95,6 +107,10 @@ export default function AppBar() {
                         />
                     </div>
                 </Toolbar>
+                <Tabs value={props.activeTab} onChange={(evt:any, idx:any) => { props.onActiveTabChange(idx); }}>
+                    <Tab label="Songs"/>
+                    <Tab label="Artists"/>
+                </Tabs>
             </MuiAppBar>
         </div>
     );

client/src/components/EditSongDialog.tsx

@@ -64,7 +64,6 @@ export default function EditSongDialog(props: IProps) {
                     options={props.artists}
                     getOptionLabel={(option) => option.name as string}
                     onChange={(event, newValue) => {
-                        console.log("Change: ", newValue)
                         if(newValue) {
                             onArtistChange(newValue.id);
                         } else {

scripts/gpm_retrieve/gpm_retrieve.py

@@ -25,7 +25,7 @@ def transferLibrary(gpm_api, mudbase_api):
     # Create artists and store their mudbase Ids
     artistMudbaseIds = []
     for artist in artists:
-        response = requests.post(mudbase_api + '/artist/create', data = {
+        response = requests.post(mudbase_api + '/artist', data = {
             'name': artist
         }).json()
         print(f"Created artist \"{artist}\", response: {response}")
@@ -34,9 +34,9 @@ def transferLibrary(gpm_api, mudbase_api):
     # Create songs
     for song in songs:
         artistMudbaseId = artistMudbaseIds[ artists.index(song['artist']) ]
-        response = requests.post(mudbase_api + '/song/create', data = {
+        response = requests.post(mudbase_api + '/song', json = {
             'title': song['title'],
-            'artistId': artistMudbaseId
+            'artistIds': [ artistMudbaseId ]
         }).json()
         print(f"Created song \"{song['title']}\" with artist ID {artistMudbaseId}, response: {response}")
 

server/app.ts

@@ -1,5 +1,4 @@
 const bodyParser = require('body-parser');
-const models = require('./models');
 import * as api from '../client/src/api';
 
 import { CreateSongEndpointHandler } from './endpoints/CreateSongEndpointHandler';

server/config/config.json

@@ -1,8 +1,6 @@
 {
   "development": {
-    "username": "root",
-    "password": null,
-    "database": "database_development",
+    "storage": "db_dev.sqlite3",
     "dialect": "sqlite"
   },
   "test": {

server/endpoints/SongDetailsEndpointHandler.ts

@@ -28,8 +28,8 @@ export const SongDetailsEndpointHandler: EndpointHandler = async (req: any, res:
             let song = songs[0];
             const response: api.SongDetailsResponse = {
                 title: song.title,
-                artistIds: song.ArtistIds,
-                albumIds: song.AlbumIds
+                artistIds: song.Artists.map((artist:any) => artist.id),
+                albumIds: song.Albums.map((album:any) => album.id),
             }
             res.send(response);
         })