133 lines
3.4 KiB
JavaScript
133 lines
3.4 KiB
JavaScript
import React from 'react';
|
|
import {
|
|
HashRouter as Router,
|
|
Switch,
|
|
Route,
|
|
Link,
|
|
useParams
|
|
} from "react-router-dom";
|
|
|
|
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 + `/api/album/${album}`)
|
|
.then(res => res.json())
|
|
.then(
|
|
(result) => this.setState({media_items: result}),
|
|
(error) => this.setState({error}),
|
|
);
|
|
}
|
|
render() {
|
|
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={ `/api/image/${mi.id}?w=256&h=256` } 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 + "/api/albums")
|
|
.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.coverPhotoMediaItemId !== undefined) {
|
|
img = <img height="256" width="256" src={ `/api/image/${a.coverPhotoMediaItemId}?w=256&h=256` } 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>;
|
|
}
|
|
}
|
|
}
|
|
|
|
const AlbumRoute = () => {
|
|
// We can use the `useParams` hook here to access
|
|
// the dynamic pieces of the URL.
|
|
let { album_id } = useParams();
|
|
return <Album album={album_id} />;
|
|
}
|
|
|
|
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;
|
|
|
|
return (
|
|
<div className="container">
|
|
<Router>
|
|
<Switch>
|
|
<Route exact path="/">
|
|
<AlbumIndex />
|
|
</Route>
|
|
<Route exact path="/:album_id">
|
|
<AlbumRoute />
|
|
</Route>
|
|
</Switch>
|
|
</Router>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default App;
|