From 4fefb473d5d7f5c845c282b98c9f935b40b8a269 Mon Sep 17 00:00:00 2001
From: Phill Pover <phill@anatid.net>
Date: Mon, 7 Apr 2025 07:33:35 +0100
Subject: [PATCH] Added fetch cache and revalidations

---
 frontend/src/app/actions.tsx         | 42 +++++++++++++++++++++++++---
 frontend/src/app/album/[id]/page.tsx | 12 +++++---
 frontend/src/app/album/page.tsx      | 13 ++++++---
 3 files changed, 55 insertions(+), 12 deletions(-)

diff --git a/frontend/src/app/actions.tsx b/frontend/src/app/actions.tsx
index d240984..8b2258b 100644
--- a/frontend/src/app/actions.tsx
+++ b/frontend/src/app/actions.tsx
@@ -1,9 +1,31 @@
 'use server'
 
+import { revalidateTag } from 'next/cache'
+
+export async function revalidateAlbums() {
+  revalidateTag('albums')
+}
+
+export async function revalidateAlbum() {
+  revalidateTag('album')
+}
+
+export async function revalidateSongs() {
+  revalidateTag('songs')
+}
+
+export async function revalidateSong() {
+  revalidateTag('song')
+}
+
 export async function getAlbums() {
   return fetch('https://api.anatid.net/album', {
     method: "GET",
-    headers: { "Content-Type": "application/json" }
+    headers: { "Content-Type": "application/json" },
+    next: {
+      revalidate: 300,
+      tags: ['albums']
+    }
   }).then(response => {
     if (response.ok) {
       return response.json();
@@ -17,7 +39,11 @@ export async function getAlbums() {
 export async function getAlbum(id: number) {
   return fetch(`https://api.anatid.net/album/${id}`, {
     method: "GET",
-    headers: { "Content-Type": "application/json" }
+    headers: { "Content-Type": "application/json" },
+    next: {
+      revalidate: 300,
+      tags: ['album']
+    }
   }).then(response => {
     if (response.ok) {
       return response.json();
@@ -95,7 +121,11 @@ export async function deleteAlbum(id: number) {
 export async function getSongs() {
   return fetch("https://api.anatid.net/song/", {
     method: "GET",
-    headers: { "Content-Type": "application/json" }
+    headers: { "Content-Type": "application/json" },
+    next: {
+      revalidate: 300,
+      tags: ['songs']
+    }
   }).then(response => {
     if (response.ok) {
       return response.json();
@@ -109,7 +139,11 @@ export async function getSongs() {
 export async function getSong(id: number) {
   return fetch(`https://api.anatid.net/song/${id}`, {
     method: "GET",
-    headers: { "Content-Type": "application/json" }
+    headers: { "Content-Type": "application/json" },
+    next: {
+      revalidate: 300,
+      tags: ['song']
+    }
   }).then(response => {
     if (response.ok) {
       return response.json();
diff --git a/frontend/src/app/album/[id]/page.tsx b/frontend/src/app/album/[id]/page.tsx
index dbd13f9..0c71849 100644
--- a/frontend/src/app/album/[id]/page.tsx
+++ b/frontend/src/app/album/[id]/page.tsx
@@ -5,7 +5,7 @@ import { useParams } from 'next/navigation'
 import { Album } from '@/entities/album.entity';
 import { Song } from '@/entities/song.entity';
 import { TimeUtils } from '@/utils/time.util';
-import { createSong, deleteSong, getAlbum, getSong, updateSong } from '@/app/actions';
+import { createSong, deleteSong, getAlbum, getSong, updateSong, revalidateAlbum } from '@/app/actions';
 import Button from 'react-bootstrap/Button';
 import Modal from 'react-bootstrap/Modal';
 import { IconButton } from '@mui/material';
@@ -29,6 +29,7 @@ export default function Page() {
   useEffect(() => {
     async function fetchAlbum(albumId: string) {
       try {
+        revalidateAlbum();
         const data = await getAlbum(parseInt(albumId));
         setAlbum(data);
       } catch (error) {
@@ -49,6 +50,7 @@ export default function Page() {
       } else {
         await updateSong(formData);
       }
+      revalidateAlbum();
       const data = await getAlbum(parseInt(albumId));
       setAlbum(data);
     } catch (error) {
@@ -83,6 +85,7 @@ export default function Page() {
       } catch (error) {
         console.error(`Error getting song with ID ${songId}:`, error);
       }
+      revalidateAlbum();
       const data = await getAlbum(parseInt(albumId));
       setAlbum(data);
     } else {
@@ -98,6 +101,7 @@ export default function Page() {
       } catch (error) {
         console.error(`Error deleting song with ID ${songId}:`, error);
       }
+      revalidateAlbum();
       const data = await getAlbum(parseInt(albumId));
       setAlbum(data);
     } else {
@@ -116,7 +120,7 @@ export default function Page() {
         <em>({album.genre})</em>
       </div>
       <IconButton aria-label="Add Album" size="large" onClick={handleCreate}>
-        <AddCircleOutline fontSize="inherit" color="success"/>
+        <AddCircleOutline fontSize="large" color="success"/>
       </IconButton>
       <table className="u-full-width">
         <thead>
@@ -135,10 +139,10 @@ export default function Page() {
             <td>{TimeUtils.fancyTimeFormat(song.duration)}</td>
             <td>
               <IconButton aria-label="Edit Song" size="small" song-id={song.id.toString()} onClick={handleEdit}>
-                <Edit fontSize="inherit" color="success"/>
+                <Edit fontSize="large" color="success"/>
               </IconButton>
               <IconButton aria-label="Delete Song" size="small" song-id={song.id.toString()} onClick={handleDelete}>
-                <Delete fontSize="inherit" color="error"/>
+                <Delete fontSize="large" color="error"/>
               </IconButton>
             </td>
           </tr>
diff --git a/frontend/src/app/album/page.tsx b/frontend/src/app/album/page.tsx
index b54feec..054cc8a 100644
--- a/frontend/src/app/album/page.tsx
+++ b/frontend/src/app/album/page.tsx
@@ -3,7 +3,7 @@
 import { FormEvent, MouseEvent, useState, useEffect } from 'react';
 import Link from 'next/link';
 import { Album } from '@/entities/album.entity';
-import { createAlbum, deleteAlbum, getAlbum, getAlbums, updateAlbum } from '@/app/actions';
+import { createAlbum, deleteAlbum, getAlbum, getAlbums, updateAlbum, revalidateAlbums } from '@/app/actions';
 import Button from 'react-bootstrap/Button';
 import Modal from 'react-bootstrap/Modal';
 import { IconButton } from '@mui/material';
@@ -24,6 +24,7 @@ export default function Page() {
   useEffect(() => {
     async function fetchAlbums() {
       try {
+        revalidateAlbums();
         const data = await getAlbums();
         setAlbums(data);
       } catch (error) {
@@ -44,6 +45,8 @@ export default function Page() {
       } else {
         await updateAlbum(formData);
       }
+      revalidateAlbums();
+      revalidateAlbums();
       const data = await getAlbums();
       setAlbums(data);
     } catch (error) {
@@ -76,6 +79,7 @@ export default function Page() {
       } catch (error) {
         console.error(`Error getting album with ID ${id}:`, error);
       }
+      revalidateAlbums();
       const data = await getAlbums();
       setAlbums(data);
     } else {
@@ -91,6 +95,7 @@ export default function Page() {
       } catch (error) {
         console.error(`Error deleting album with ID ${id}:`, error);
       }
+      revalidateAlbums();
       const data = await getAlbums();
       setAlbums(data);
     } else {
@@ -104,7 +109,7 @@ export default function Page() {
     <>
     <div className="container">
       <IconButton aria-label="Add Album" size="large" onClick={handleCreate}>
-        <AddCircleOutline fontSize="inherit" color="success"/>
+        <AddCircleOutline fontSize="large" color="success"/>
       </IconButton>
       <table className="u-full-width">
         <thead>
@@ -133,10 +138,10 @@ export default function Page() {
             </td>
             <td>
               <IconButton aria-label="Edit Album" size="small" album-id={album.id.toString()} onClick={handleEdit}>
-                <Edit fontSize="inherit" color="success"/>
+                <Edit fontSize="large" color="success"/>
               </IconButton>
               <IconButton aria-label="Delete Album" size="small" album-id={album.id.toString()} onClick={handleDelete}>
-                <Delete fontSize="inherit" color="error"/>
+                <Delete fontSize="large" color="error"/>
               </IconButton>
             </td>
           </tr>