working album navigation and duplicate checks on backend

This commit is contained in:
wisplite
2025-11-22 23:18:53 -06:00
parent 8035be9a60
commit d9bad97a53
9 changed files with 146 additions and 19 deletions
+42 -5
View File
@@ -3,10 +3,14 @@ import AlbumCreateModal from './AlbumCreateModal'
import { useState, useEffect } from 'react'
import { getServerUrl } from '../../hooks/getConstants'
import { useAccount } from '../../contexts/useAccount'
import { useNavigate } from 'react-router-dom'
import { useNotifier } from '../../contexts/useNotifier'
export default function AlbumList({ currentAlbumName }) {
const { getAccessToken } = useAccount()
const [open, setOpen] = useState(false)
const [albums, setAlbums] = useState([])
const navigate = useNavigate()
const { showError } = useNotifier()
const getAlbums = async () => {
console.log('Getting albums in parent', currentAlbumName)
if (currentAlbumName === 'gallery') { // Root album
@@ -20,10 +24,29 @@ export default function AlbumList({ currentAlbumName }) {
}),
})
const data = await response.json()
console.log('Albums', data)
setAlbums(data)
if (data.error) {
setAlbums([])
showError('Failed to get albums')
} else {
setAlbums(data)
}
} else {
setAlbums([])
const response = await fetch(`${getServerUrl()}/api/albums/getAlbumsInParent`, {
method: 'POST',
headers: {
'Authorization': getAccessToken(),
},
body: JSON.stringify({
parentId: currentAlbumName,
}),
})
const data = await response.json()
if (data.error) {
setAlbums([])
showError('Failed to get albums')
} else {
setAlbums(data)
}
}
}
useEffect(() => {
@@ -39,12 +62,26 @@ export default function AlbumList({ currentAlbumName }) {
</div>
<div className="flex flex-row items-center justify-start gap-2 w-full px-6 flex-wrap">
{albums.map((album) => (
<div className="flex flex-row items-center justify-start gap-2 w-1/8 aspect-square border border-[#2B2B2B] rounded-md px-6 py-4">
<div
className="flex flex-row items-center justify-start gap-2 w-1/8 aspect-square border border-[#2B2B2B] rounded-md px-6 py-4 cursor-pointer"
onClick={() => {
// Get current path and append the album's title
const currentPath = window.location.pathname;
// Remove leading and trailing slashes, split to parts
const pathParts = currentPath.replace(/^\/|\/$/g, '').split('/');
// Only append if not already the last part (avoid duplicate navigation)
if (pathParts[pathParts.length - 1] !== album.Title) {
navigate(`${currentPath.replace(/\/$/, '')}/${encodeURIComponent(album.Title)}`);
} else {
navigate(currentPath); // Or optionally do nothing/navigate to self
}
}}
>
<p className="text-white red-hat-mono">{album.Title}</p>
</div>
))}
</div>
<AlbumCreateModal open={open} onOpenChange={setOpen} />
<AlbumCreateModal open={open} onOpenChange={setOpen} parentId={currentAlbumName === 'gallery' ? '' : currentAlbumName} />
</div>
)
}