From ddf06e30731e67e237d4a857ba73bf2211b41e1a Mon Sep 17 00:00:00 2001
From: viktorstrate <viktorstrate@gmail.com>
Date: Wed, 14 Aug 2019 17:48:08 +0200
Subject: [PATCH] General ui improvements

---
 ui/package-lock.json                          |  2 +-
 ui/src/Pages/AllAlbumsPage/AlbumBox.js        | 19 ++++++++++++-------
 ui/src/Pages/AllAlbumsPage/AlbumsPage.js      |  9 ++++++++-
 ui/src/Pages/PhotosPage/PhotosPage.js         |  5 ++++-
 .../components/photoGallery/PhotoGallery.js   |  2 ++
 5 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/ui/package-lock.json b/ui/package-lock.json
index 9067f6a6..7873d16d 100644
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
@@ -1,5 +1,5 @@
 {
-  "name": "grand-stack-starter-ui",
+  "name": "photoview-ui",
   "version": "0.0.1",
   "lockfileVersion": 1,
   "requires": true,
diff --git a/ui/src/Pages/AllAlbumsPage/AlbumBox.js b/ui/src/Pages/AllAlbumsPage/AlbumBox.js
index ee4b5fbe..d6438e60 100644
--- a/ui/src/Pages/AllAlbumsPage/AlbumBox.js
+++ b/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>
   )
diff --git a/ui/src/Pages/AllAlbumsPage/AlbumsPage.js b/ui/src/Pages/AllAlbumsPage/AlbumsPage.js
index 6b24a023..f6eba39c 100644
--- a/ui/src/Pages/AllAlbumsPage/AlbumsPage.js
+++ b/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
+          }
+        }
+      }
     }
   }
 `
diff --git a/ui/src/Pages/PhotosPage/PhotosPage.js b/ui/src/Pages/PhotosPage/PhotosPage.js
index 5983bbed..d02d3417 100644
--- a/ui/src/Pages/PhotosPage/PhotosPage.js
+++ b/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)
diff --git a/ui/src/components/photoGallery/PhotoGallery.js b/ui/src/components/photoGallery/PhotoGallery.js
index 289d9296..8ce81d60 100644
--- a/ui/src/components/photoGallery/PhotoGallery.js
+++ b/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