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