General ui improvements

ui/package-lock.json

@@ -1,5 +1,5 @@
 {
-  "name": "grand-stack-starter-ui",
+  "name": "photoview-ui",
   "version": "0.0.1",
   "lockfileVersion": 1,
   "requires": true,

ui/src/Pages/AllAlbumsPage/AlbumBox.js

@@ -46,15 +46,20 @@ export const AlbumBox = ({ album, ...props }) => {
     )
   }
 
+  let thumbnail =
+    album.photos[0] &&
+    album.photos[0].thumbnail &&
+    album.photos[0].thumbnail.url
+
+  thumbnail =
+    thumbnail ||
+    (album.subAlbums[0] &&
+      album.subAlbums[0].photos[0] &&
+      album.subAlbums[0].photos[0].thumbnail.url)
+
   return (
     <AlbumBoxLink {...props} to={`/album/${album.id}`}>
-      <AlbumBoxImage
-        src={
-          album.photos[0] &&
-          album.photos[0].thumbnail &&
-          album.photos[0].thumbnail.url
-        }
-      />
+      <AlbumBoxImage src={thumbnail} />
       <p>{album.title}</p>
     </AlbumBoxLink>
   )

ui/src/Pages/AllAlbumsPage/AlbumsPage.js

@@ -9,11 +9,18 @@ const getAlbumsQuery = gql`
     myAlbums(filter: { parentAlbum: null }, orderBy: title_asc) {
       id
       title
-      photos {
+      photos(first: 1) {
         thumbnail {
           url
         }
       }
+      subAlbums(first: 1) {
+        photos(first: 1) {
+          thumbnail {
+            url
+          }
+        }
+      }
     }
   }
 `

ui/src/Pages/PhotosPage/PhotosPage.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react'
 import Layout from '../../Layout'
 import gql from 'graphql-tag'
 import { Query } from 'react-apollo'
+import { Link } from 'react-router-dom'
 import PhotoGallery from '../../components/photoGallery/PhotoGallery'
 import PhotoSidebar from '../../components/sidebar/PhotoSidebar'
 
@@ -95,7 +96,9 @@ class PhotosPage extends Component {
             if (data.myAlbums) {
               galleryGroups = data.myAlbums.map((album, index) => (
                 <div key={album.id}>
-                  <h1>{album.title}</h1>
+                  <Link to={`/album/${album.id}`}>
+                    <h1>{album.title}</h1>
+                  </Link>
                   <PhotoGallery
                     onSelectImage={photoIndex => {
                       this.setActiveImage(index, photoIndex)

ui/src/components/photoGallery/PhotoGallery.js

@@ -93,6 +93,8 @@ class PhotoGallery extends React.Component {
 
     let photoElements = null
     if (photos) {
+      photos.filter(photo => photo.thumbnail)
+
       photoElements = photos.map((photo, index) => {
         const active = activeIndex == index