Add modification to other windows.

client/src/components/windows/AlbumWindow.tsx

@@ -7,6 +7,7 @@ import StoreLinkIcon, { whichStore } from '../common/StoreLinkIcon';
 import EditableText from '../common/EditableText';
 import SubmitChangesButton from '../common/SubmitChangesButton';
 import SongTable, { SongGetters } from '../tables/ResultsTable';
+import { saveAlbumChanges } from '../../lib/saveChanges';
 var _ = require('lodash');
 
 export type AlbumMetadata = serverApi.AlbumDetails;
@@ -24,6 +25,7 @@ export enum AlbumWindowStateActions {
     SetMetadata = "SetMetadata",
     SetPendingChanges = "SetPendingChanges",
     SetSongs = "SetSongs",
+    Reload = "Reload",
 }
 
 export function AlbumWindowReducer(state: AlbumWindowState, action: any) {
@@ -34,6 +36,8 @@ export function AlbumWindowReducer(state: AlbumWindowState, action: any) {
             return { ...state, pendingChanges: action.value }
         case AlbumWindowStateActions.SetSongs:
             return { ...state, songsOnAlbum: action.value }
+        case AlbumWindowStateActions.Reload:
+            return { ...state, metadata: null, pendingChanges: null, songsOnAlbum: null }
         default:
             throw new Error("Unimplemented AlbumWindow state update.")
     }
@@ -164,8 +168,21 @@ export default function AlbumWindow(props: IProps) {
         </a>
     });
 
+    const [applying, setApplying] = useState(false);
     const maybeSubmitButton = pendingChanges && Object.keys(pendingChanges).length > 0 &&
-        <SubmitChangesButton />
+        <Box>
+            <SubmitChangesButton onClick={() => {
+                setApplying(true);
+                saveAlbumChanges(props.state.albumId, pendingChanges || {})
+                    .then(() => {
+                        setApplying(false);
+                        props.dispatch({
+                            type: AlbumWindowStateActions.Reload
+                        })
+                    })
+            }} />
+            {applying && <CircularProgress />}
+        </Box>
 
     return <Box width="100%" justifyContent="center" display="flex" flexWrap="wrap">
         <Box

client/src/components/windows/ArtistWindow.tsx

@@ -7,6 +7,7 @@ import StoreLinkIcon, { whichStore } from '../common/StoreLinkIcon';
 import EditableText from '../common/EditableText';
 import SubmitChangesButton from '../common/SubmitChangesButton';
 import SongTable, { SongGetters } from '../tables/ResultsTable';
+import { saveArtistChanges } from '../../lib/saveChanges';
 var _ = require('lodash');
 
 export type ArtistMetadata = serverApi.ArtistDetails;
@@ -24,6 +25,7 @@ export enum ArtistWindowStateActions {
     SetMetadata = "SetMetadata",
     SetPendingChanges = "SetPendingChanges",
     SetSongs = "SetSongs",
+    Reload = "Reload",
 }
 
 export function ArtistWindowReducer(state: ArtistWindowState, action: any) {
@@ -34,6 +36,8 @@ export function ArtistWindowReducer(state: ArtistWindowState, action: any) {
             return { ...state, pendingChanges: action.value }
         case ArtistWindowStateActions.SetSongs:
             return { ...state, songsByArtist: action.value }
+        case ArtistWindowStateActions.Reload:
+            return { ...state, metadata: null, pendingChanges: null, songsByArtist: null }
         default:
             throw new Error("Unimplemented ArtistWindow state update.")
     }
@@ -164,8 +168,21 @@ export default function ArtistWindow(props: IProps) {
         </a>
     });
 
+    const [applying, setApplying] = useState(false);
     const maybeSubmitButton = pendingChanges && Object.keys(pendingChanges).length > 0 &&
-        <SubmitChangesButton />
+        <Box>
+            <SubmitChangesButton onClick={() => {
+                setApplying(true);
+                saveArtistChanges(props.state.artistId, pendingChanges || {})
+                    .then(() => {
+                        setApplying(false);
+                        props.dispatch({
+                            type: ArtistWindowStateActions.Reload
+                        })
+                    })
+            }} />
+            {applying && <CircularProgress />}
+        </Box>
 
     return <Box width="100%" justifyContent="center" display="flex" flexWrap="wrap">
         <Box

client/src/components/windows/SongWindow.tsx

@@ -10,7 +10,7 @@ import { AlbumMetadata } from './AlbumWindow';
 import StoreLinkIcon, { whichStore } from '../common/StoreLinkIcon';
 import EditableText from '../common/EditableText';
 import SubmitChangesButton from '../common/SubmitChangesButton';
-import saveSongChanges from '../../lib/saveChanges';
+import { saveSongChanges } from '../../lib/saveChanges';
 
 export type SongMetadata = serverApi.SongDetails;
 export type SongMetadataChanges = serverApi.ModifySongRequest;
@@ -34,11 +34,7 @@ export function SongWindowReducer(state: SongWindowState, action: any) {
         case SongWindowStateActions.SetPendingChanges:
             return { ...state, pendingChanges: action.value }
         case SongWindowStateActions.Reload:
-            return {
-                songId: state.songId,
-                metadata: null,
-                pendingChanges: null,
-            }
+            return { ...state, metadata: null, pendingChanges: null }
         default:
             throw new Error("Unimplemented SongWindow state update.")
     }

client/src/components/windows/TagWindow.tsx

@@ -7,6 +7,7 @@ import StoreLinkIcon, { whichStore } from '../common/StoreLinkIcon';
 import EditableText from '../common/EditableText';
 import SubmitChangesButton from '../common/SubmitChangesButton';
 import SongTable, { SongGetters } from '../tables/ResultsTable';
+import { saveTagChanges } from '../../lib/saveChanges';
 var _ = require('lodash');
 
 export interface FullTagMetadata extends serverApi.TagDetails {
@@ -29,6 +30,7 @@ export enum TagWindowStateActions {
     SetMetadata = "SetMetadata",
     SetPendingChanges = "SetPendingChanges",
     SetSongs = "SetSongs",
+    Reload = "Reload",
 }
 
 export function TagWindowReducer(state: TagWindowState, action: any) {
@@ -39,6 +41,8 @@ export function TagWindowReducer(state: TagWindowState, action: any) {
             return { ...state, pendingChanges: action.value }
         case TagWindowStateActions.SetSongs:
             return { ...state, songsWithTag: action.value }
+        case TagWindowStateActions.Reload:
+            return { ...state, metadata: null, pendingChanges: null, songsWithTag: null }
         default:
             throw new Error("Unimplemented TagWindow state update.")
     }
@@ -191,8 +195,21 @@ export default function TagWindow(props: IProps) {
         </a>
     });
 
+    const [applying, setApplying] = useState(false);
     const maybeSubmitButton = pendingChanges && Object.keys(pendingChanges).length > 0 &&
-        <SubmitChangesButton />
+        <Box>
+            <SubmitChangesButton onClick={() => {
+                setApplying(true);
+                saveTagChanges(props.state.tagId, pendingChanges || {})
+                    .then(() => {
+                        setApplying(false);
+                        props.dispatch({
+                            type: TagWindowStateActions.Reload
+                        })
+                    })
+            }} />
+            {applying && <CircularProgress />}
+        </Box>
 
     return <Box width="100%" justifyContent="center" display="flex" flexWrap="wrap">
         <Box

client/src/lib/saveChanges.tsx

@@ -1,6 +1,6 @@
 import * as serverApi from '../api';
 
-export default async function saveSongChanges(id: number, change: serverApi.ModifySongRequest) {
+export async function saveSongChanges(id: number, change: serverApi.ModifySongRequest) {
     const requestOpts = {
         method: 'PUT',
         headers: { 'Content-Type': 'application/json' },
@@ -13,3 +13,45 @@ export default async function saveSongChanges(id: number, change: serverApi.Modi
         throw new Error("Failed to save song changes: " + response.statusText);
     }
 }
+
+export async function saveTagChanges(id: number, change: serverApi.ModifyTagRequest) {
+    const requestOpts = {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(change),
+    };
+
+    const endpoint = serverApi.ModifyTagEndpoint.replace(":id", id.toString());
+    const response = await fetch((process.env.REACT_APP_BACKEND || "") + endpoint, requestOpts)
+    if(!response.ok) {
+        throw new Error("Failed to save tag changes: " + response.statusText);
+    }
+}
+
+export async function saveArtistChanges(id: number, change: serverApi.ModifyArtistRequest) {
+    const requestOpts = {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(change),
+    };
+
+    const endpoint = serverApi.ModifyArtistEndpoint.replace(":id", id.toString());
+    const response = await fetch((process.env.REACT_APP_BACKEND || "") + endpoint, requestOpts)
+    if(!response.ok) {
+        throw new Error("Failed to save artist changes: " + response.statusText);
+    }
+}
+
+export async function saveAlbumChanges(id: number, change: serverApi.ModifyAlbumRequest) {
+    const requestOpts = {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(change),
+    };
+
+    const endpoint = serverApi.ModifyAlbumEndpoint.replace(":id", id.toString());
+    const response = await fetch((process.env.REACT_APP_BACKEND || "") + endpoint, requestOpts)
+    if(!response.ok) {
+        throw new Error("Failed to save album changes: " + response.statusText);
+    }
+}