From fc87fabab5abce36251e1595292e6750e5c2de9b Mon Sep 17 00:00:00 2001
From: viktorstrate <viktorstrate@gmail.com>
Date: Tue, 23 Jul 2019 23:10:18 +0200
Subject: [PATCH] Improve photos page

---
 ui/src/Pages/AlbumPage/AlbumPage.js   |  25 -----
 ui/src/Pages/PhotosPage/PhotosPage.js |  71 +++++++++++--
 ui/src/PhotoGallery.js                | 141 +++++++++++++++++---------
 3 files changed, 154 insertions(+), 83 deletions(-)

diff --git a/ui/src/Pages/AlbumPage/AlbumPage.js b/ui/src/Pages/AlbumPage/AlbumPage.js
index 575bcf2..f2540d1 100644
--- a/ui/src/Pages/AlbumPage/AlbumPage.js
+++ b/ui/src/Pages/AlbumPage/AlbumPage.js
@@ -43,31 +43,6 @@ class AlbumPage extends Component {
     this.setActiveImage = this.setActiveImage.bind(this)
 
     this.photoAmount = 1
-
-    this.keyDownEvent = e => {
-      const activeImage = this.state.activeImage
-      if (activeImage != -1) {
-        if (e.key == 'ArrowRight') {
-          this.setActiveImage((activeImage + 1) % this.photoAmount)
-        }
-
-        if (e.key == 'ArrowLeft') {
-          if (activeImage <= 0) {
-            this.setActiveImage(this.photoAmount - 1)
-          } else {
-            this.setActiveImage(activeImage - 1)
-          }
-        }
-      }
-    }
-  }
-
-  componentDidMount() {
-    document.addEventListener('keydown', this.keyDownEvent)
-  }
-
-  componentWillUnmount() {
-    document.removeEventListener('keydown', this.keyDownEvent)
   }
 
   setActiveImage(index, id) {
diff --git a/ui/src/Pages/PhotosPage/PhotosPage.js b/ui/src/Pages/PhotosPage/PhotosPage.js
index 09b2338..1277dbe 100644
--- a/ui/src/Pages/PhotosPage/PhotosPage.js
+++ b/ui/src/Pages/PhotosPage/PhotosPage.js
@@ -3,22 +3,43 @@ import Layout from '../../Layout'
 import gql from 'graphql-tag'
 import { Query } from 'react-apollo'
 import PhotoGallery from '../../PhotoGallery'
+import AlbumSidebar from '../AlbumPage/AlbumSidebar'
 
 const photoQuery = gql`
   query allPhotosPage {
-    myPhotos(orderBy: title_desc) {
-      id
+    myAlbums(orderBy: title_asc) {
       title
-      thumbnail {
-        url
-        width
-        height
+      id
+      photos(orderBy: title_desc) {
+        id
+        title
+        thumbnail {
+          url
+          width
+          height
+        }
       }
     }
   }
 `
 
 class PhotosPage extends Component {
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      activeAlbum: null,
+      activeIndex: null,
+    }
+  }
+
+  setActiveImage(album, index) {
+    this.setState({
+      activeIndex: index,
+      activeAlbum: album,
+    })
+  }
+
   render() {
     return (
       <Layout>
@@ -26,12 +47,40 @@ class PhotosPage extends Component {
           {({ loading, error, data }) => {
             if (error) return error
 
+            let galleryGroups = []
+
+            if (data.myAlbums) {
+              galleryGroups = data.myAlbums.map(album => (
+                <div key={album.id}>
+                  <h1>{album.title}</h1>
+                  <PhotoGallery
+                    onSelectImage={index => {
+                      this.setActiveImage(album.id, index)
+                    }}
+                    activeIndex={
+                      this.state.activeAlbum == album.id
+                        ? this.state.activeIndex
+                        : -1
+                    }
+                    loading={loading}
+                    photos={album.photos}
+                  />
+                </div>
+              ))
+            }
+
+            let activeImage = null
+            if (this.state.activeAlbum) {
+              activeImage = data.myAlbums.find(
+                album => album.id == this.state.activeAlbum
+              ).photos[this.state.activeIndex].id
+            }
+
             return (
-              <PhotoGallery
-                loading={loading}
-                title="All photos"
-                photos={data.myPhotos}
-              />
+              <div>
+                {galleryGroups}
+                <AlbumSidebar imageId={activeImage} />
+              </div>
             )
           }}
         </Query>
diff --git a/ui/src/PhotoGallery.js b/ui/src/PhotoGallery.js
index 600218a..bad85ab 100644
--- a/ui/src/PhotoGallery.js
+++ b/ui/src/PhotoGallery.js
@@ -18,7 +18,7 @@ const PhotoContainer = styled.div`
   position: relative;
 `
 
-const Photo = photoProps => {
+const PhotoImg = photoProps => {
   const StyledPhoto = styled(animated.img)`
     height: 200px;
     min-width: 100%;
@@ -29,18 +29,30 @@ const Photo = photoProps => {
   const [props, set, stop] = useSpring(() => ({ opacity: 0 }))
 
   return (
-    <LazyLoad>
-      <StyledPhoto
-        {...photoProps}
-        style={props}
-        onLoad={() => {
-          set({ opacity: 1 })
-        }}
-      />
-    </LazyLoad>
+    <StyledPhoto
+      {...photoProps}
+      style={props}
+      onLoad={() => {
+        set({ opacity: 1 })
+      }}
+    />
   )
 }
 
+class Photo extends React.Component {
+  shouldComponentUpdate(nextProps) {
+    return nextProps.src != this.props.src
+  }
+
+  render() {
+    return (
+      <LazyLoad>
+        <PhotoImg {...this.props} />
+      </LazyLoad>
+    )
+  }
+}
+
 const PhotoOverlay = styled.div`
   width: 100%;
   height: 100%;
@@ -60,46 +72,81 @@ const PhotoFiller = styled.div`
   flex-grow: 999999;
 `
 
-const PhotoGallery = ({ activeIndex = -1, photos, loading, onSelectImage }) => {
-  let photoElements = null
-  if (photos) {
-    photoElements = photos.map((photo, index) => {
-      const active = activeIndex == index
+class PhotoGallery extends React.Component {
+  constructor(props) {
+    super(props)
 
-      let minWidth = 100
-      if (photo.thumbnail) {
-        minWidth = Math.floor(
-          (photo.thumbnail.width / photo.thumbnail.height) * 200
-        )
-      }
+    // this.keyDownEvent = e => {
+    //   if (!this.props.onSelectImage) {
+    //     return
+    //   }
 
-      return (
-        <PhotoContainer
-          key={photo.id}
-          style={{
-            cursor: onSelectImage ? 'pointer' : null,
-            minWidth: `${minWidth}px`,
-          }}
-          onClick={() => {
-            onSelectImage && onSelectImage(index)
-          }}
-        >
-          <Photo src={photo.thumbnail.url} />
-          <PhotoOverlay active={active} />
-        </PhotoContainer>
-      )
-    })
+    //   const activeImage = this.state.activeImage
+    //   if (activeImage != -1) {
+    //     if (e.key == 'ArrowRight') {
+    //       this.setActiveImage((activeImage + 1) % this.photoAmount)
+    //     }
+
+    //     if (e.key == 'ArrowLeft') {
+    //       if (activeImage <= 0) {
+    //         this.setActiveImage(this.photoAmount - 1)
+    //       } else {
+    //         this.setActiveImage(activeImage - 1)
+    //       }
+    //     }
+    //   }
+    // }
   }
 
-  return (
-    <div>
-      <Gallery>
-        <Loader active={loading}>Loading images</Loader>
-        {photoElements}
-        <PhotoFiller />
-      </Gallery>
-    </div>
-  )
-}
+  // componentDidMount() {
+  //   document.addEventListener('keydown', this.keyDownEvent)
+  // }
 
+  // componentWillUnmount() {
+  //   document.removeEventListener('keydown', this.keyDownEvent)
+  // }
+
+  render() {
+    const { activeIndex = -1, photos, loading, onSelectImage } = this.props
+    let photoElements = null
+    if (photos) {
+      photoElements = photos.map((photo, index) => {
+        const active = activeIndex == index
+
+        let minWidth = 100
+        if (photo.thumbnail) {
+          minWidth = Math.floor(
+            (photo.thumbnail.width / photo.thumbnail.height) * 200
+          )
+        }
+
+        return (
+          <PhotoContainer
+            key={photo.id}
+            style={{
+              cursor: onSelectImage ? 'pointer' : null,
+              minWidth: `${minWidth}px`,
+            }}
+            onClick={() => {
+              onSelectImage && onSelectImage(index)
+            }}
+          >
+            <Photo src={photo.thumbnail.url} />
+            <PhotoOverlay active={active} />
+          </PhotoContainer>
+        )
+      })
+    }
+
+    return (
+      <div>
+        <Gallery>
+          <Loader active={loading}>Loading images</Loader>
+          {photoElements}
+          <PhotoFiller />
+        </Gallery>
+      </div>
+    )
+  }
+}
 export default PhotoGallery
