tabris/music-collection
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Reworking actions
All checks were successful
Music Collection CI Workflow / test (./backend) (push) Successful in 22s
Details
Music Collection CI Workflow / test (./frontend) (push) Successful in 27s
Details
Music Collection CI Workflow / build-and-push-images (./backend/Dockerfile, git.anatid.net/tabris/msuic-collection-backend, ./backend) (push) Successful in 49s
Details
Music Collection CI Workflow / build-and-push-images (./frontend/Dockerfile, git.anatid.net/tabris/music-collection-frontend, ./frontend) (push) Successful in 1m45s
Details
Music Collection CI Workflow / deploy (push) Successful in 23s
Details

Browse Source
This commit is contained in:
Phill Pover 2025-04-06 21:43:03 +01:00
parent 7259fda77c
commit b078afc2af
2 changed files with 19 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
frontend/src/app/actions.tsx
View File

@ -1,11 +1,11 @@
'use server' 'use server'
export async function getAlbums() { export async function getAlbums() {
return await fetch('https://api.anatid.net/album'); return fetch('https://api.anatid.net/album');
} }
export async function getAlbum(id: number) { export async function getAlbum(id: number) {
return await fetch(`https://api.anatid.net/album/${id}`, { return fetch(`https://api.anatid.net/album/${id}`, {
method: "GET", method: "GET",
headers: { "Content-Type": "application/json" }, headers: { "Content-Type": "application/json" },
}); });
@ -15,7 +15,7 @@ export async function createAlbum(formData: FormData) {
const title = formData.get('title'); const title = formData.get('title');
const artist = formData.get('artist'); const artist = formData.get('artist');
const genre = formData.get('genre'); const genre = formData.get('genre');
return await fetch("https://api.anatid.net/album", { return fetch("https://api.anatid.net/album", {
method: "POST", method: "POST",
headers: { "Content-Type": "application/json" }, headers: { "Content-Type": "application/json" },
body: JSON.stringify({ body: JSON.stringify({
@ -31,7 +31,7 @@ export async function updateAlbum(formData: FormData) {
const title = formData.get('title'); const title = formData.get('title');
const artist = formData.get('artist'); const artist = formData.get('artist');
const genre = formData.get('genre'); const genre = formData.get('genre');
return await fetch("https://api.anatid.net/album", { return fetch("https://api.anatid.net/album", {
method: "PUT", method: "PUT",
headers: { "Content-Type": "application/json" }, headers: { "Content-Type": "application/json" },
body: JSON.stringify({ body: JSON.stringify({
@ -45,7 +45,7 @@ export async function updateAlbum(formData: FormData) {
export async function deleteAlbum(formData: FormData) { export async function deleteAlbum(formData: FormData) {
const id = formData.get('id'); const id = formData.get('id');
return await fetch("https://api.anatid.net/album", { return fetch("https://api.anatid.net/album", {
method: "DELETE", method: "DELETE",
headers: { "Content-Type": "application/json" }, headers: { "Content-Type": "application/json" },
body: JSON.stringify({ body: JSON.stringify({
@ -55,11 +55,11 @@ export async function deleteAlbum(formData: FormData) {
} }
export async function getSongs() { export async function getSongs() {
return await fetch("https://api.anatid.net/song/"); return fetch("https://api.anatid.net/song/");
} }
export async function getSong(id: number) { export async function getSong(id: number) {
return await fetch(`https://api.anatid.net/song/${id}`, { return fetch(`https://api.anatid.net/song/${id}`, {
method: "GET", method: "GET",
headers: { "Content-Type": "application/json" }, headers: { "Content-Type": "application/json" },
}); });
@ -69,7 +69,7 @@ export async function createSong(formData: FormData) {
const albumId = formData.get('album-id'); const albumId = formData.get('album-id');
const title = formData.get('title'); const title = formData.get('title');
const duration = formData.get('duration'); const duration = formData.get('duration');
return await fetch("https://api.anatid.net/song", { return fetch("https://api.anatid.net/song", {
method: "POST", method: "POST",
headers: { "Content-Type": "application/json" }, headers: { "Content-Type": "application/json" },
body: JSON.stringify({ body: JSON.stringify({
@ -85,7 +85,7 @@ export async function updateSong(formData: FormData) {
const albumId = formData.get('album-id'); const albumId = formData.get('album-id');
const title = formData.get('title'); const title = formData.get('title');
const duration = formData.get('duration'); const duration = formData.get('duration');
return await fetch("https://api.anatid.net/song", { return fetch("https://api.anatid.net/song", {
method: "PUT", method: "PUT",
headers: { "Content-Type": "application/json" }, headers: { "Content-Type": "application/json" },
body: JSON.stringify({ body: JSON.stringify({
@ -99,7 +99,7 @@ export async function updateSong(formData: FormData) {
export async function deleteSong(formData: FormData) { export async function deleteSong(formData: FormData) {
const id = formData.get('id'); const id = formData.get('id');
return await fetch("https://api.anatid.net/song", { return fetch("https://api.anatid.net/song", {
method: "DELETE", method: "DELETE",
headers: { "Content-Type": "application/json" }, headers: { "Content-Type": "application/json" },
body: JSON.stringify({ body: JSON.stringify({

15
frontend/src/app/album/page.tsx
View File

@ -3,7 +3,7 @@
import { FormEvent, MouseEvent, useState, useEffect } from 'react'; import { FormEvent, MouseEvent, useState, useEffect } from 'react';
import Link from 'next/link'; import Link from 'next/link';
import { Album } from '@/entities/album.entity'; import { Album } from '@/entities/album.entity';
import { createAlbum, getAlbum, updateAlbum } from '@/app/actions'; import { createAlbum, getAlbum, getAlbums, updateAlbum } from '@/app/actions';
import Button from 'react-bootstrap/Button'; import Button from 'react-bootstrap/Button';
import Modal from 'react-bootstrap/Modal'; import Modal from 'react-bootstrap/Modal';
import { IconButton } from '@mui/material'; import { IconButton } from '@mui/material';
@ -18,11 +18,12 @@ export default function Page() {
const [formAlbumTitle, setFormAlbumTitle] = useState(""); const [formAlbumTitle, setFormAlbumTitle] = useState("");
const [formAlbumArtist, setFormAlbumArtist] = useState(""); const [formAlbumArtist, setFormAlbumArtist] = useState("");
const [formAlbumGenre, setFormAlbumGenre] = useState(""); const [formAlbumGenre, setFormAlbumGenre] = useState("");
const [formModalTitle, setFormModalTitle] = useState("Add Album");
useEffect(() => { useEffect(() => {
async function fetchAlbums() { async function fetchAlbums() {
try { try {
const response = await fetch('https://api.anatid.net/album'); const response = await getAlbums();
const data = await response.json(); const data = await response.json();
setAlbums(data); setAlbums(data);
} catch (error) { } catch (error) {
@ -53,6 +54,7 @@ export default function Page() {
} }
const handleCreate = async () => { const handleCreate = async () => {
setFormModalTitle("Add Album");
setFormAlbumId(""); setFormAlbumId("");
setFormAlbumTitle(""); setFormAlbumTitle("");
setFormAlbumArtist(""); setFormAlbumArtist("");
@ -61,11 +63,12 @@ export default function Page() {
} }
const handleEdit = async (event: MouseEvent<HTMLElement>) => { const handleEdit = async (event: MouseEvent<HTMLElement>) => {
const id = event.currentTarget.getAttribute('id'); const id = event.currentTarget.getAttribute('album-id');
if (id) { if (id) {
try { try {
const response = await getAlbum(parseInt(id)); const response = await getAlbum(parseInt(id));
const data = await response.json(); const data = await response.json();
setFormModalTitle("Edit Album");
setFormAlbumId(data.id) setFormAlbumId(data.id)
setFormAlbumTitle(data.title); setFormAlbumTitle(data.title);
setFormAlbumArtist(data.artist); setFormAlbumArtist(data.artist);
@ -113,10 +116,10 @@ export default function Page() {
{album.genre} {album.genre}
</td> </td>
<td> <td>
<IconButton aria-label="Edit Album" size="small" id={album.id.toString()} onClick={handleEdit}> <IconButton aria-label="Edit Album" size="small" album-id={album.id.toString()} onClick={handleEdit}>
<Edit fontSize="inherit" color="success"/> <Edit fontSize="inherit" color="success"/>
</IconButton> </IconButton>
<IconButton aria-label="Delete Album" size="small" id={album.id.toString()} onClick={handleEdit}> <IconButton aria-label="Delete Album" size="small" album-id={album.id.toString()} onClick={handleEdit}>
<Delete fontSize="inherit" color="success"/> <Delete fontSize="inherit" color="success"/>
</IconButton> </IconButton>
</td> </td>
@ -134,7 +137,7 @@ export default function Page() {
keyboard={false} keyboard={false}
> >
<Modal.Header closeButton> <Modal.Header closeButton>
<Modal.Title>Create Album</Modal.Title> <Modal.Title>{formModalTitle}</Modal.Title>
</Modal.Header> </Modal.Header>
<Modal.Body> <Modal.Body>
<div> <div>