Improve photos page

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) {

ui/src/Pages/PhotosPage/PhotosPage.js

@@ -3,10 +3,14 @@ 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) {
+    myAlbums(orderBy: title_asc) {
+      title
+      id
+      photos(orderBy: title_desc) {
         id
         title
         thumbnail {
@@ -16,9 +20,26 @@ const photoQuery = gql`
         }
       }
     }
+  }
 `
 
 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
 
-            return (
+            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}
-                title="All photos"
-                photos={data.myPhotos}
+                    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 (
+              <div>
+                {galleryGroups}
+                <AlbumSidebar imageId={activeImage} />
+              </div>
             )
           }}
         </Query>

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,7 +29,6 @@ const Photo = photoProps => {
   const [props, set, stop] = useSpring(() => ({ opacity: 0 }))
 
   return (
-    <LazyLoad>
     <StyledPhoto
       {...photoProps}
       style={props}
@@ -37,9 +36,22 @@ const Photo = photoProps => {
         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%;
@@ -60,7 +72,42 @@ const PhotoFiller = styled.div`
   flex-grow: 999999;
 `
 
-const PhotoGallery = ({ activeIndex = -1, photos, loading, onSelectImage }) => {
+class PhotoGallery extends React.Component {
+  constructor(props) {
+    super(props)
+
+    // this.keyDownEvent = e => {
+    //   if (!this.props.onSelectImage) {
+    //     return
+    //   }
+
+    //   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)
+  // }
+
+  render() {
+    const { activeIndex = -1, photos, loading, onSelectImage } = this.props
     let photoElements = null
     if (photos) {
       photoElements = photos.map((photo, index) => {
@@ -101,5 +148,5 @@ const PhotoGallery = ({ activeIndex = -1, photos, loading, onSelectImage }) => {
       </div>
     )
   }
-
+}
 export default PhotoGallery