55 lines
1.3 KiB
JavaScript
55 lines
1.3 KiB
JavaScript
import React from 'react';
|
|
|
|
class App 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;
|
|
console.log(this.state);
|
|
let content;
|
|
if (error !== null) {
|
|
content = <h2>Error: {JSON.stringify(error)}</h2>;
|
|
} else if (albums !== null) {
|
|
console.log(albums);
|
|
content = albums.map((a) => {
|
|
let thumb = <img className="mr-3"/>;
|
|
if (a.coverPhotoBaseUrl !== undefined) {
|
|
thumb = <img src={ a.coverPhotoBaseUrl + "=w64-h64-c" } className="mr-3" alt={ a.title }/>;
|
|
}
|
|
return <div key={ a.id } className="media">
|
|
<a href={ a.productUrl }>
|
|
{thumb}
|
|
</a>
|
|
<div className="media-body">
|
|
<h5 className="mt-0">{ a.title }</h5>
|
|
{ a.mediaItemsCount } photos
|
|
</div>
|
|
</div>
|
|
});
|
|
} else {
|
|
content = <h2>Loading...</h2>;
|
|
}
|
|
|
|
return (
|
|
<div className="container">
|
|
{ content }
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default App;
|