Fixed music brainz lookup

Author: jzongker

src/plans/songs/SongsPage.tsx

@@ -32,9 +32,9 @@ export const SongsPage = () => {
       const s: SongInterface = { name: songDetail.title, dateAdded: new Date() };
       const songs = await ApiHelper.post("/songs", [s], "ContentApi");
       const a: ArrangementInterface = { songId: songs[0].id, songDetailId: songDetail.id, name: "(Default)", lyrics: "" };
-      await ApiHelper.post("/arrangements", [a], "ContentApi");
+      const arrangements = await ApiHelper.post("/arrangements", [a], "ContentApi");
       if (songDetail.keySignature) {
-        const key: ArrangementKeyInterface = { arrangementId: a.id, keySignature: songDetail.keySignature, shortDescription: "Default" };
+        const key: ArrangementKeyInterface = { arrangementId: arrangements[0].id, keySignature: songDetail.keySignature, shortDescription: "Default" };
         await ApiHelper.post("/arrangementKeys", [key], "ContentApi");
       }
       selectedSong = songs[0];

src/plans/songs/components/SongDetailLinksEdit.tsx

@@ -2,10 +2,10 @@ import React, { useEffect } from "react";
 import { ApiHelper, DisplayBox, InputBox, SmallButton } from "@churchapps/apphelper";
 import { SongDetailLinkInterface } from "../../../helpers";
 import { FormControl, InputLabel, MenuItem, Select, SelectChangeEvent, Table, TableBody, TableCell, TableHead, TableRow, TextField } from "@mui/material";
-import { Api } from "@mui/icons-material";
 
 interface Props {
   songDetailId: string;
+  reload: () => void;
 }
 
 export const SongDetailLinksEdit = (props: Props) => {
@@ -74,6 +74,7 @@ export const SongDetailLinksEdit = (props: Props) => {
     ApiHelper.post("/songDetailLinks", [l], "ContentApi").then(() => {
       loadData();
       setEditLink(null);
+      if (l.service === "MusicBrainz") props.reload();
     });
   }
 

src/plans/songs/components/SongDetails.tsx

@@ -62,7 +62,7 @@ export const SongDetails = (props: Props) => {
     setEditMode(false);
   }
 
-  if (editMode) return <SongDetailsEdit songDetail={props.songDetail} onCancel={() => { setEditMode(false) }} onSave={handleSave} />
+  if (editMode) return <SongDetailsEdit songDetail={props.songDetail} onCancel={() => { setEditMode(false) }} onSave={handleSave} reload={props.reload} />
 
   return (<DisplayBox headerText={props.songDetail?.title} headerIcon="album" editFunction={() => { setEditMode(true) }}>
     <img src={props.songDetail?.thumbnail} alt={props.songDetail?.title} style={{ display: "block", marginLeft: "auto", marginRight: "auto" }} onError={handleImageError} />

src/plans/songs/components/SongDetailsEdit.tsx

@@ -1,12 +1,13 @@
 import React, { useEffect } from "react";
-import { ApiHelper, DateHelper, DisplayBox, InputBox } from "@churchapps/apphelper";
-import { SongDetailInterface, SongDetailLinkInterface } from "../../../helpers";
-import { Table, TableBody, TableCell, TableRow, TextField } from "@mui/material";
+import { ApiHelper, DateHelper, InputBox } from "@churchapps/apphelper";
+import { SongDetailInterface } from "../../../helpers";
+import { TextField } from "@mui/material";
 import { SongDetailLinksEdit } from "./SongDetailLinksEdit";
 
 interface Props {
   songDetail: SongDetailInterface;
   onSave: (songDetail: SongDetailInterface) => void;
+  reload: () => void;
   onCancel: () => void;
 }
 
@@ -45,6 +46,6 @@ export const SongDetailsEdit = (props: Props) => {
       <TextField label="Key" name="keySignature" value={songDetail?.keySignature} placeholder="C#" onChange={handleChange} fullWidth size="small" />
       <TextField type="number" label="Seconds" name="seconds" value={songDetail?.seconds} onChange={handleChange} fullWidth size="small" />
     </InputBox>
-    <SongDetailLinksEdit songDetailId={songDetail?.id} />
+    <SongDetailLinksEdit songDetailId={songDetail?.id} reload={props.reload} />
   </>);
 }