diff --git a/client/src/App.tsx b/client/src/App.tsx index 97a261a..ba27f1d 100644 --- a/client/src/App.tsx +++ b/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(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[]|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 ; +} + +function SongList() { + const [songs, setSongs] = useState([]); + + 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 + + {songs.map((song: any) => { + return ; + })} + + ; +} + function App() { const [songs, setSongs] = useState([]); const [artists, setArtists] = useState([]); @@ -132,14 +194,17 @@ function App() { loadingSong: true }; + const [appBarActiveTab, setAppBarActiveTab] = React.useState(AppBarActiveTab.Songs); + return (
- + - - - - + {/* + + + */} + {(appBarActiveTab === AppBarActiveTab.Songs) && } diff --git a/client/src/components/AppBar.tsx b/client/src/components/AppBar.tsx index 25d665b..c173a64 100644 --- a/client/src/components/AppBar.tsx +++ b/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() { />
+ { props.onActiveTabChange(idx); }}> + + + ); diff --git a/client/src/components/EditSongDialog.tsx b/client/src/components/EditSongDialog.tsx index 7b2b837..70a60aa 100644 --- a/client/src/components/EditSongDialog.tsx +++ b/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 { diff --git a/scripts/gpm_retrieve/gpm_retrieve.py b/scripts/gpm_retrieve/gpm_retrieve.py index c10f9bb..17f7892 100755 --- a/scripts/gpm_retrieve/gpm_retrieve.py +++ b/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}") diff --git a/server/app.ts b/server/app.ts index 851a499..61a78f9 100644 --- a/server/app.ts +++ b/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'; diff --git a/server/config/config.json b/server/config/config.json index 7fe5af7..6b6e7d2 100644 --- a/server/config/config.json +++ b/server/config/config.json @@ -1,8 +1,6 @@ { "development": { - "username": "root", - "password": null, - "database": "database_development", + "storage": "db_dev.sqlite3", "dialect": "sqlite" }, "test": { diff --git a/server/endpoints/SongDetailsEndpointHandler.ts b/server/endpoints/SongDetailsEndpointHandler.ts index 5ada517..0fa5c69 100644 --- a/server/endpoints/SongDetailsEndpointHandler.ts +++ b/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); })