gabehf
/
Koito
mirror of https://github.com/gabehf/Koito.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: set primary artist option for tracks

Browse Source
main
Gabe Farrell 2 weeks ago
parent 383be25bfc
commit fda416fe75
1 changed files with 139 additions and 117 deletions
Show Stats Download Patch File Download Diff File

254
client/app/components/modals/EditModal/EditModal.tsx
Unescape View File

@ -1,5 +1,11 @@
import { useQuery } from "@tanstack/react-query"; import { useQuery } from "@tanstack/react-query";
import { createAlias, deleteAlias, getAliases, setPrimaryAlias, type Alias } from "api/api"; import {
createAlias,
deleteAlias,
getAliases,
setPrimaryAlias,
type Alias,
} from "api/api";
import { Modal } from "../Modal"; import { Modal } from "../Modal";
import { AsyncButton } from "../../AsyncButton"; import { AsyncButton } from "../../AsyncButton";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
@ -8,133 +14,149 @@ import SetVariousArtists from "./SetVariousArtist";
import SetPrimaryArtist from "./SetPrimaryArtist"; import SetPrimaryArtist from "./SetPrimaryArtist";
interface Props { interface Props {
type: string type: string;
id: number id: number;
open: boolean open: boolean;
setOpen: Function setOpen: Function;
} }
export default function EditModal({ open, setOpen, type, id }: Props) { export default function EditModal({ open, setOpen, type, id }: Props) {
const [input, setInput] = useState('') const [input, setInput] = useState("");
const [loading, setLoading ] = useState(false) const [loading, setLoading] = useState(false);
const [err, setError ] = useState<string>() const [err, setError] = useState<string>();
const [displayData, setDisplayData] = useState<Alias[]>([]) const [displayData, setDisplayData] = useState<Alias[]>([]);
const { isPending, isError, data, error } = useQuery({ const { isPending, isError, data, error } = useQuery({
queryKey: [ queryKey: [
'aliases', "aliases",
{ {
type: type, type: type,
id: id id: id,
}, },
], ],
queryFn: ({ queryKey }) => { queryFn: ({ queryKey }) => {
const params = queryKey[1] as { type: string; id: number }; const params = queryKey[1] as { type: string; id: number };
return getAliases(params.type, params.id); return getAliases(params.type, params.id);
}, },
}); });
useEffect(() => {
if (data) {
setDisplayData(data)
}
}, [data])
if (isError) { useEffect(() => {
return ( if (data) {
<p className="error">Error: {error.message}</p> setDisplayData(data);
)
}
if (isPending) {
return (
<p>Loading...</p>
)
} }
}, [data]);
const handleSetPrimary = (alias: string) => { if (isError) {
setError(undefined) return <p className="error">Error: {error.message}</p>;
setLoading(true) }
setPrimaryAlias(type, id, alias) if (isPending) {
.then(r => { return <p>Loading...</p>;
if (r.ok) { }
window.location.reload()
} else {
r.json().then((r) => setError(r.error))
}
})
setLoading(false)
}
const handleNewAlias = () => { const handleSetPrimary = (alias: string) => {
setError(undefined) setError(undefined);
if (input === "") { setLoading(true);
setError("alias must be provided") setPrimaryAlias(type, id, alias).then((r) => {
return if (r.ok) {
} window.location.reload();
setLoading(true) } else {
createAlias(type, id, input) r.json().then((r) => setError(r.error));
.then(r => { }
if (r.ok) { });
setDisplayData([...displayData, {alias: input, source: "Manual", is_primary: false, id: id}]) setLoading(false);
} else { };
r.json().then((r) => setError(r.error))
}
})
setLoading(false)
}
const handleDeleteAlias = (alias: string) => { const handleNewAlias = () => {
setError(undefined) setError(undefined);
setLoading(true) if (input === "") {
deleteAlias(type, id, alias) setError("alias must be provided");
.then(r => { return;
if (r.ok) {
setDisplayData(displayData.filter((v) => v.alias != alias))
} else {
r.json().then((r) => setError(r.error))
}
})
setLoading(false)
} }
setLoading(true);
createAlias(type, id, input).then((r) => {
if (r.ok) {
setDisplayData([
...displayData,
{ alias: input, source: "Manual", is_primary: false, id: id },
]);
} else {
r.json().then((r) => setError(r.error));
}
});
setLoading(false);
};
const handleClose = () => { const handleDeleteAlias = (alias: string) => {
setOpen(false) setError(undefined);
setInput('') setLoading(true);
} deleteAlias(type, id, alias).then((r) => {
if (r.ok) {
setDisplayData(displayData.filter((v) => v.alias != alias));
} else {
r.json().then((r) => setError(r.error));
}
});
setLoading(false);
};
const handleClose = () => {
setOpen(false);
setInput("");
};
return ( return (
<Modal maxW={1000} isOpen={open} onClose={handleClose}> <Modal maxW={1000} isOpen={open} onClose={handleClose}>
<div className="flex flex-col items-start gap-6 w-full"> <div className="flex flex-col items-start gap-6 w-full">
<div className="w-full"> <div className="w-full">
<h2>Alias Manager</h2> <h2>Alias Manager</h2>
<div className="flex flex-col gap-4"> <div className="flex flex-col gap-4">
{displayData.map((v) => ( {displayData.map((v) => (
<div className="flex gap-2"> <div className="flex gap-2">
<div className="bg p-3 rounded-md flex-grow" key={v.alias}>{v.alias} (source: {v.source})</div> <div className="bg p-3 rounded-md flex-grow" key={v.alias}>
<AsyncButton loading={loading} onClick={() => handleSetPrimary(v.alias)} disabled={v.is_primary}>Set Primary</AsyncButton> {v.alias} (source: {v.source})
<AsyncButton loading={loading} onClick={() => handleDeleteAlias(v.alias)} confirm disabled={v.is_primary}><Trash size={16} /></AsyncButton>
</div>
))}
<div className="flex gap-2 w-3/5">
<input
type="text"
placeholder="Add a new alias"
className="mx-auto fg bg rounded-md p-3 flex-grow"
value={input}
onChange={(e) => setInput(e.target.value)}
/>
<AsyncButton loading={loading} onClick={handleNewAlias}>Submit</AsyncButton>
</div>
{err && <p className="error">{err}</p>}
</div>
</div> </div>
{ type.toLowerCase() === "album" && <AsyncButton
<> loading={loading}
<SetVariousArtists id={id} /> onClick={() => handleSetPrimary(v.alias)}
<SetPrimaryArtist id={id} type="album" /> disabled={v.is_primary}
</> >
} Set Primary
</AsyncButton>
<AsyncButton
loading={loading}
onClick={() => handleDeleteAlias(v.alias)}
confirm
disabled={v.is_primary}
>
<Trash size={16} />
</AsyncButton>
</div>
))}
<div className="flex gap-2 w-3/5">
<input
type="text"
placeholder="Add a new alias"
className="mx-auto fg bg rounded-md p-3 flex-grow"
value={input}
onChange={(e) => setInput(e.target.value)}
/>
<AsyncButton loading={loading} onClick={handleNewAlias}>
Submit
</AsyncButton>
</div> </div>
</Modal> {err && <p className="error">{err}</p>}
) </div>
</div>
{type.toLowerCase() === "album" && (
<>
<SetVariousArtists id={id} />
<SetPrimaryArtist id={id} type="album" />
</>
)}
{type.toLowerCase() === "track" && (
<SetPrimaryArtist id={id} type="track" />
)}
</div>
</Modal>
);
} }
Write Preview
Loading…
Cancel
Save