53 lines
1.4 KiB
TypeScript
53 lines
1.4 KiB
TypeScript
import React, {useEffect, useState} from 'react'
|
|
import './App.css'
|
|
import {AlbumMetadata} from "./AlbumMetadata.ts"
|
|
import PhotoContainer from "./PhotoContainer.tsx";
|
|
import AlbumPlayer from "./AlbumPlayer.tsx";
|
|
import hostName from "./Config.ts";
|
|
import {AlbumInfo} from "./AlbumInfo.ts";
|
|
|
|
|
|
|
|
function App() {
|
|
const [albums, setAlbums] = useState(Array<AlbumMetadata>)
|
|
const [selectedAlbum, setSelectedAlbum] = useState("")
|
|
const [albumInfo, setAlbumInfo] = useState<AlbumInfo>()
|
|
|
|
useEffect(() => {
|
|
let fetched = fetch(`${hostName}/album`)
|
|
fetched.then(response => {
|
|
if(response.ok) {
|
|
response.json().then( body =>
|
|
setAlbums(body)
|
|
)
|
|
}
|
|
})
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
if (selectedAlbum) {
|
|
let fetched = fetch(`${hostName}/album/${selectedAlbum}`)
|
|
fetched.then(response => {
|
|
if (response.ok) {
|
|
response.json().then(body =>
|
|
setAlbumInfo(body)
|
|
)
|
|
}
|
|
})
|
|
}
|
|
}, [selectedAlbum])
|
|
|
|
function handleAlbumClick(event: React.MouseEvent<HTMLElement>) {
|
|
setSelectedAlbum(event.currentTarget.id)
|
|
}
|
|
|
|
return (
|
|
<div className={"gallery"}>
|
|
<PhotoContainer imageList={albums} albumClickHandler={handleAlbumClick}/>
|
|
{albumInfo ? <AlbumPlayer albumHash={selectedAlbum} albumInfo={albumInfo} key={selectedAlbum}/> : <div></div> }
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default App
|