From 61a4c9587643d6f8c7f4c468bbf7a1f98b1af055 Mon Sep 17 00:00:00 2001
From: Sander Vocke <sandervocke@gmail.com>
Date: Thu, 24 Sep 2020 09:43:45 +0200
Subject: [PATCH] Add modification to other windows.

---
 client/src/components/windows/AlbumWindow.tsx | 21 ++++++++-
 .../src/components/windows/ArtistWindow.tsx   | 21 ++++++++-
 client/src/components/windows/SongWindow.tsx  |  8 +---
 client/src/components/windows/TagWindow.tsx   | 19 +++++++-
 client/src/lib/saveChanges.tsx                | 44 ++++++++++++++++++-
 5 files changed, 101 insertions(+), 12 deletions(-)

diff --git a/client/src/components/windows/AlbumWindow.tsx b/client/src/components/windows/AlbumWindow.tsx
index e7cdb1c..6cefcb8 100644
--- a/client/src/components/windows/AlbumWindow.tsx
+++ b/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.")
     }
@@ -97,7 +101,7 @@ export default function AlbumWindow(props: IProps) {
 
     // Effect to get the album's songs.
     useEffect(() => {
-        if(props.state.songsOnAlbum) { return; }
+        if (props.state.songsOnAlbum) { return; }
 
         var q: serverApi.QueryRequest = {
             query: {
@@ -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
diff --git a/client/src/components/windows/ArtistWindow.tsx b/client/src/components/windows/ArtistWindow.tsx
index 67dfb70..7b8ed4c 100644
--- a/client/src/components/windows/ArtistWindow.tsx
+++ b/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.")
     }
@@ -97,7 +101,7 @@ export default function ArtistWindow(props: IProps) {
 
     // Effect to get the artist's songs.
     useEffect(() => {
-        if(props.state.songsByArtist) { return; }
+        if (props.state.songsByArtist) { return; }
 
         var q: serverApi.QueryRequest = {
             query: {
@@ -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
diff --git a/client/src/components/windows/SongWindow.tsx b/client/src/components/windows/SongWindow.tsx
index 891f9e0..bf69c84 100644
--- a/client/src/components/windows/SongWindow.tsx
+++ b/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.")
     }
diff --git a/client/src/components/windows/TagWindow.tsx b/client/src/components/windows/TagWindow.tsx
index 5cef726..676aef5 100644
--- a/client/src/components/windows/TagWindow.tsx
+++ b/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
diff --git a/client/src/lib/saveChanges.tsx b/client/src/lib/saveChanges.tsx
index 8411be4..db2205f 100644
--- a/client/src/lib/saveChanges.tsx
+++ b/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' },
@@ -12,4 +12,46 @@ export default async function saveSongChanges(id: number, change: serverApi.Modi
     if(!response.ok) {
         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);
+    }
 }
\ No newline at end of file