Use local fullsize images when rendering album.

react-debug/src/App.js

@@ -7,7 +7,7 @@ class Album extends React.Component {
     super(props);
     this.state = {
       error: null,
-      album: null,
+      media_items: null,
     };
   }
   componentDidMount() {
@@ -15,25 +15,26 @@ class Album extends React.Component {
     fetch(process.env.PUBLIC_URL + `/photosync/${album}/album.json`)
       .then(res => res.json())
       .then(
-        (result) =>  this.setState({album: result}),
+        (result) =>  this.setState({media_items: result}),
         (error) => this.setState({error}),
       );
   }
   render() {
-    let {error, album} = this.state;
+    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 (album !== null) {
+    } else if (media_items !== null) {
-      console.log(album);
+      console.log(media_items);
-      return album.map((a) => {
+      return media_items.map((mi) => {
         // TODO(wathiede): use coverPhotoMediaItemId and fetch from a
         // locally cached image.
-        return <figure key={ a.id } className="figure">
+        return <figure key={ mi.id } className="figure">
-          <img src={ a.baseUrl + "=w256-h256-c" } className="mr-3" alt={ a.filename }/>
+          <img src={ `/photosync/${album}/${mi.id}/${mi.filename}?thumb` } className="mr-3" alt={ mi.filename }/>
           <figcaption className="figure-caption">
-          <a key={ a.id } href={ a.productUrl }>
+          <a key={ mi.id } href={ mi.productUrl }>
-            <p className="text-truncate">{ a.filename}</p>
+            <p className="text-truncate">{ mi.filename}</p>
           </a>
           </figcaption>
         </figure>