116 lines
3.0 KiB
JavaScript
116 lines
3.0 KiB
JavaScript
import React from 'react';
|
|
|
|
import './App.css';
|
|
|
|
class Album extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
error: null,
|
|
media_items: null,
|
|
};
|
|
}
|
|
componentDidMount() {
|
|
let {album} = this.props;
|
|
fetch(process.env.PUBLIC_URL + `/photosync/${album}/album.json`)
|
|
.then(res => res.json())
|
|
.then(
|
|
(result) => this.setState({media_items: result}),
|
|
(error) => this.setState({error}),
|
|
);
|
|
}
|
|
render() {
|
|
let {album} = this.props;
|
|
let {error, media_items} = this.state;
|
|
console.log(this.state);
|
|
if (error !== null) {
|
|
return <h2>Error: {JSON.stringify(error)}</h2>;
|
|
} else if (media_items !== null) {
|
|
console.log(media_items);
|
|
return media_items.map((mi) => {
|
|
// TODO(wathiede): use coverPhotoMediaItemId and fetch from a
|
|
// locally cached image.
|
|
return <figure key={ mi.id } className="figure">
|
|
<img height="256" width="256" src={ `/photosync/images/${mi.id}/${mi.filename}?thumb` } className="mr-3" alt={ mi.filename }/>
|
|
<figcaption className="figure-caption">
|
|
<a key={ mi.id } href={ mi.productUrl }>
|
|
<p className="text-truncate">{ mi.filename}</p>
|
|
</a>
|
|
</figcaption>
|
|
</figure>
|
|
});
|
|
} else {
|
|
return <h2>Loading...</h2>;
|
|
}
|
|
}
|
|
}
|
|
|
|
class AlbumIndex extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
error: null,
|
|
albums: null,
|
|
};
|
|
}
|
|
componentDidMount() {
|
|
fetch(process.env.PUBLIC_URL + "/photosync/albums.json")
|
|
.then(res => res.json())
|
|
.then(
|
|
(result) => this.setState({albums: result}),
|
|
(error) => this.setState({error}),
|
|
);
|
|
}
|
|
render() {
|
|
let {error, albums} = this.state;
|
|
if (error !== null) {
|
|
return <h2>Error: {JSON.stringify(error)}</h2>;
|
|
} else if (albums !== null) {
|
|
console.log(albums);
|
|
return albums.map((a) => {
|
|
let img = <img src="https://via.placeholder.com/256x128" className="mr-3" alt="unset"/>;
|
|
if (a.coverPhotoBaseUrl !== undefined) {
|
|
img = <img src={ a.coverPhotoBaseUrl + "=w256" } className="mr-3" alt={ a.title }/>;
|
|
}
|
|
|
|
let figure = <figure key={ a.id } className="figure">
|
|
{img}
|
|
<figcaption className="figure-caption">{ a.title || "No title" } - { a.mediaItemsCount || 0 } photos </figcaption>
|
|
</figure>;
|
|
return <a key={ a.id } href={ '#' + a.id }>
|
|
{ figure }
|
|
</a>
|
|
});
|
|
} else {
|
|
return <h2>Loading...</h2>;
|
|
}
|
|
}
|
|
}
|
|
|
|
class App extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
curAlbum: window.location.hash,
|
|
};
|
|
}
|
|
render() {
|
|
let {curAlbum} = this.state;
|
|
console.log(this.state);
|
|
let content;
|
|
if (curAlbum) {
|
|
content = <Album album={ curAlbum.slice(1) } />
|
|
} else {
|
|
content = <AlbumIndex />;
|
|
}
|
|
|
|
return (
|
|
<div className="container">
|
|
{ content }
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default App;
|