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

react-debug/src/App.js

@@ -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 (