wisplite/raster
1
0
Fork 0
mirror of https://github.com/wisplite/raster.git synced 2026-05-01 06:32:44 -05:00
Code Issues Packages Projects Releases Wiki Activity

working album navigation and duplicate checks on backend

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/account/createRoot.jsx
+5 -2
View File
@@ -1,9 +1,11 @@
import { useState } from 'react'
import { getServerUrl } from '../hooks/getConstants'
import { useNavigate } from 'react-router-dom'
import { useNotifier } from '../contexts/useNotifier'
export default function CreateRootUser() {
const navigate = useNavigate()
const { showError, showSuccess } = useNotifier()
const [username, setUsername] = useState('')
const [password, setPassword] = useState('')
const handleCreateRootUser = async () => {
@@ -19,7 +21,7 @@ export default function CreateRootUser() {
})
const data = await response.json()
if (data.error) {
console.error(data.error)
showError(data.error)
} else {
const rootResponse = await fetch(`${getServerUrl()}/api/user/setRootUser`, {
method: 'POST',
@@ -32,9 +34,10 @@ export default function CreateRootUser() {
})
const rootData = await rootResponse.json()
if (rootData.error) {
console.error(rootData.error)
showError(rootData.error)
} else {
navigate('/gallery')
showSuccess('Root user created successfully')
}
}
}
frontend/src/components/NavBar.jsx
+1 -1
View File
@@ -12,7 +12,7 @@ export default function NavBar({ path }) {
{path.map((item, index) => (
<div className="flex flex-row items-center justify-start gap-2 red-hat-mono">
<Link to={`/${path.slice(0, index + 1).join('/')}`} key={item} className={`text-white ${index === path.length - 1 ? 'font-bold' : ''}`}>
{item}
{decodeURIComponent(item)}
</Link>
{index !== path.length - 1 && <p className="text-white red-hat-mono">/</p>}
</div>
frontend/src/gallery/components/AlbumCreateModal.jsx
+3 -1
View File
@@ -2,10 +2,12 @@ import Modal from '../../components/Modal'
import { getServerUrl } from '../../hooks/getConstants'
import { useAccount } from '../../contexts/useAccount'
import { useState } from 'react'
import { useNotifier } from '../../contexts/useNotifier'
export default function AlbumCreateModal({ open, onOpenChange, trigger, parentId }) {
const { getAccessToken } = useAccount()
const [title, setTitle] = useState('')
const [description, setDescription] = useState('')
const { showError } = useNotifier()
const handleCreateAlbum = async () => {
const response = await fetch(`${getServerUrl()}/api/albums/createAlbum`, {
method: 'POST',
@@ -21,7 +23,7 @@ export default function AlbumCreateModal({ open, onOpenChange, trigger, parentId
})
const data = await response.json()
if (data.error) {
console.error(data.error)
showError(data.error)
} else {
onOpenChange(false)
}
frontend/src/gallery/components/AlbumList.jsx
+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>
)
}
frontend/src/gallery/index.jsx
+39 -3
View File
@@ -1,22 +1,58 @@
import NavBar from '../components/NavBar'
import { useLocation } from 'react-router-dom';
import { useAccount } from '../contexts/useAccount';
import { useEffect } from 'react';
import { useEffect, useState } from 'react';
import AlbumList from './components/AlbumList';
import { getServerUrl } from '../hooks/getConstants';
import { useNotifier } from '../contexts/useNotifier';
export default function Gallery() {
const currentPath = useLocation().pathname;
const pathList = currentPath.split('/').slice(1);
const currentAlbumName = pathList[pathList.length - 1];
const [currentAlbumID, setCurrentAlbumID] = useState("!notfound!"); // set to impossible value to prevent client from fetching root album
const { fetchUserData, user } = useAccount()
const { getAccessToken } = useAccount()
const { showError } = useNotifier()
useEffect(() => {
fetchUserData()
}, [])
useEffect(() => {
const getCurrentAlbumID = async () => {
console.log("currentAlbumName", currentAlbumName)
console.log("pathList", pathList)
if (currentAlbumName === 'gallery') {
setCurrentAlbumID('');
return;
}
const response = await fetch(`${getServerUrl()}/api/albums/getIDFromPath`, {
method: 'POST',
headers: {
'Authorization': getAccessToken(),
},
body: JSON.stringify({
path: decodeURIComponent(pathList.slice(1).join('/')),
}),
})
const data = await response.json()
if (data.error) {
setCurrentAlbumID("!notfound!")
showError('Album not found')
} else {
setCurrentAlbumID(data.id);
}
};
getCurrentAlbumID();
}, [currentPath]);
useEffect(() => {
console.log("currentAlbumID", currentAlbumID)
}, [currentAlbumID])
return (
<div className="flex flex-col items-center justify-start h-full w-full bg-[#141414]">
<NavBar path={pathList} />
<AlbumList currentAlbumName={currentAlbumName} />
<AlbumList currentAlbumName={currentAlbumID} />
</div>
)
}