wathiede/photosync
1
0
Fork 1
Code Issues Pull Requests Releases Wiki Activity

Render album or index based on the presence of a hash in the URL.

Browse Source
This commit is contained in:
Bill Thiede 2020-02-09 09:00:13 -08:00
parent b08e9616bf
commit bdf23a6e48
1 changed files with 76 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

92
react-debug/src/App.js vendored
View File

@ -1,6 +1,50 @@
import React from 'react';
class App extends React.Component {
class Album extends React.Component {
constructor(props) {
super(props);
this.state = {
error: null,
album: null,
};
}
componentDidMount() {
let {album} = this.props;
fetch(process.env.PUBLIC_URL + `/photosync/${album}/album.json`)
.then(res => res.json())
.then(
(result) => this.setState({album: result}),
(error) => this.setState({error}),
);
}
render() {
let {error, album} = this.state;
console.log(this.state);
if (error !== null) {
return <h2>Error: {JSON.stringify(error)}</h2>;
} else if (album !== null) {
console.log(album);
return album.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.productUrl }>
{ figure }
</a>
});
} else {
return <h2>Loading...</h2>;
}
}
}
class AlbumIndex extends React.Component {
constructor(props) {
super(props);
this.state = {
@ -18,29 +62,45 @@ class App extends React.Component {
}
render() {
let {error, albums} = this.state;
console.log(this.state);
let content;
if (error !== null) {
content = <h2>Error: {JSON.stringify(error)}</h2>;
return <h2>Error: {JSON.stringify(error)}</h2>;
} else if (albums !== null) {
console.log(albums);
content = albums.map((a) => {
let thumb = <img className="mr-3"/>;
return albums.map((a) => {
let img = <img src="https://via.placeholder.com/256x128" className="mr-3" alt="unset"/>;
if (a.coverPhotoBaseUrl !== undefined) {
thumb = <img src={ a.coverPhotoBaseUrl + "=w64-h64-c" } className="mr-3" alt={ a.title }/>;
img = <img src={ a.coverPhotoBaseUrl + "=w256" } className="mr-3" alt={ a.title }/>;
}
return <div key={ a.id } className="media">
<a href={ a.productUrl }>
{thumb}
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>
<div className="media-body">
<h5 className="mt-0">{ a.title }</h5>
{ a.mediaItemsCount } photos
</div>
</div>
});
} else {
content = <h2>Loading...</h2>;
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 (