diff --git a/client/src/components/tables/ResultsTable.tsx b/client/src/components/tables/ResultsTable.tsx index 978a123..cd56e8e 100644 --- a/client/src/components/tables/ResultsTable.tsx +++ b/client/src/components/tables/ResultsTable.tsx @@ -110,6 +110,8 @@ export default function SongTable(props: IProps) { tabLabel: <>{name}, tagId: id, metadata: null, + songGetters: songGetters, + songsWithTag: null, }, tabReducer: newWindowReducer[WindowType.Tag], tabType: WindowType.Tag, diff --git a/client/src/components/windows/AlbumWindow.tsx b/client/src/components/windows/AlbumWindow.tsx index 582b7bc..e7cdb1c 100644 --- a/client/src/components/windows/AlbumWindow.tsx +++ b/client/src/components/windows/AlbumWindow.tsx @@ -1,6 +1,6 @@ import React, { useEffect, useState } from 'react'; -import { Box, Typography, IconButton, Button, CircularProgress } from '@material-ui/core'; -import PersonIcon from '@material-ui/icons/Person'; +import { Box, Typography, IconButton, CircularProgress } from '@material-ui/core'; +import AlbumIcon from '@material-ui/icons/Album'; import * as serverApi from '../../api'; import { WindowState } from './Windows'; import StoreLinkIcon, { whichStore } from '../common/StoreLinkIcon'; @@ -173,7 +173,7 @@ export default function AlbumWindow(props: IProps) { mt={4} width="80%" > - + { getTagMetadata(props.state.tagId) .then((m: TagMetadata) => { - console.log("metadata", m); props.dispatch({ type: TagWindowStateActions.SetMetadata, value: m }); }) - }, [props.state.metadata?.name]); + }, [metadata?.name]); + + // Effect to get the tag's songs. + useEffect(() => { + if (props.state.songsWithTag) { return; } + + var q: serverApi.QueryRequest = { + query: { + prop: serverApi.QueryElemProperty.tagId, + propOperator: serverApi.QueryFilterOp.Eq, + propOperand: props.state.tagId, + }, + offsetsLimits: { + songOffset: 0, + songLimit: 100, + }, + ordering: { + orderBy: { + type: serverApi.OrderByType.Name, + }, + ascending: true, + }, + }; + + const requestOpts = { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify(q), + }; + + (async () => { + const response = await fetch((process.env.REACT_APP_BACKEND || "") + serverApi.QueryEndpoint, requestOpts) + let json: any = await response.json(); + props.dispatch({ + type: TagWindowStateActions.SetSongs, + value: json.songs, + }); + })(); + }, [props.state.songsWithTag]); + + const [editingName, setEditingName] = useState(null); + const name = setEditingName(v)} + onChangeChangedValue={(v: string | null) => { + let newVal: any = { ...pendingChanges }; + if (v) { newVal.name = v } + else { delete newVal.name } + props.dispatch({ + type: TagWindowStateActions.SetPendingChanges, + value: newVal, + }) + }} + /> + const fullName = + {metadata?.fullName.map((n: string, i: number) => { + if (metadata?.fullName && i == metadata?.fullName.length - 1) { + return name; + } else if (i >= (metadata?.fullName.length || 0) - 1) { + return undefined; + } else { + return {n} /  + } + })} + + + const storeLinks = metadata?.storeLinks && metadata?.storeLinks.map((link: string) => { + const store = whichStore(link); + return store && + + + + }); + + const maybeSubmitButton = pendingChanges && Object.keys(pendingChanges).length > 0 && + return - + + + + {metadata && + + {fullName} + + + + {storeLinks} + + + } + + + {maybeSubmitButton} - {metadata && {metadata.name}} + + Songs with this tag in your library: + + {props.state.songsWithTag && } + {!props.state.songsWithTag && } } \ No newline at end of file diff --git a/client/src/components/windows/Windows.tsx b/client/src/components/windows/Windows.tsx index 7460ae0..d5840e5 100644 --- a/client/src/components/windows/Windows.tsx +++ b/client/src/components/windows/Windows.tsx @@ -74,6 +74,8 @@ export const newWindowState = { tagId: 1, metadata: null, pendingChanges: null, + songGetters: songGetters, + songsWithTag: null, } }, } \ No newline at end of file