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,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) {
+    myAlbums(orderBy: title_asc) {
-      id
       title
-      thumbnail {
+      id
-        url
+      photos(orderBy: title_desc) {
-        width
+        id
-        height
+        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
+              <div>
-                loading={loading}
+                {galleryGroups}
-                title="All photos"
+                <AlbumSidebar imageId={activeImage} />
-                photos={data.myPhotos}
+              </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,18 +29,30 @@ const Photo = photoProps => {
   const [props, set, stop] = useSpring(() => ({ opacity: 0 }))
 
   return (
-    <LazyLoad>
+    <StyledPhoto
-      <StyledPhoto
+      {...photoProps}
-        {...photoProps}
+      style={props}
-        style={props}
+      onLoad={() => {
-        onLoad={() => {
+        set({ opacity: 1 })
-          set({ opacity: 1 })
+      }}
-        }}
+    />
-      />
-    </LazyLoad>
   )
 }
 
+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 }) => {
+class PhotoGallery extends React.Component {
-  let photoElements = null
+  constructor(props) {
-  if (photos) {
+    super(props)
-    photoElements = photos.map((photo, index) => {
-      const active = activeIndex == index
 
-      let minWidth = 100
+    // this.keyDownEvent = e => {
-      if (photo.thumbnail) {
+    //   if (!this.props.onSelectImage) {
-        minWidth = Math.floor(
+    //     return
-          (photo.thumbnail.width / photo.thumbnail.height) * 200
+    //   }
-        )
-      }
 
-      return (
+    //   const activeImage = this.state.activeImage
-        <PhotoContainer
+    //   if (activeImage != -1) {
-          key={photo.id}
+    //     if (e.key == 'ArrowRight') {
-          style={{
+    //       this.setActiveImage((activeImage + 1) % this.photoAmount)
-            cursor: onSelectImage ? 'pointer' : null,
+    //     }
-            minWidth: `${minWidth}px`,
+
-          }}
+    //     if (e.key == 'ArrowLeft') {
-          onClick={() => {
+    //       if (activeImage <= 0) {
-            onSelectImage && onSelectImage(index)
+    //         this.setActiveImage(this.photoAmount - 1)
-          }}
+    //       } else {
-        >
+    //         this.setActiveImage(activeImage - 1)
-          <Photo src={photo.thumbnail.url} />
+    //       }
-          <PhotoOverlay active={active} />
+    //     }
-        </PhotoContainer>
+    //   }
-      )
+    // }
-    })
   }
 
-  return (
+  // componentDidMount() {
-    <div>
+  //   document.addEventListener('keydown', this.keyDownEvent)
-      <Gallery>
+  // }
-        <Loader active={loading}>Loading images</Loader>
-        {photoElements}
-        <PhotoFiller />
-      </Gallery>
-    </div>
-  )
-}
 
+  // 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