Improve sidebar

ui/src/Pages/AlbumPage/AlbumPage.js

@@ -114,8 +114,6 @@ class AlbumPage extends Component {
 
     return (
       <Layout>
-        <SidebarConsumer>
-          {({ updateSidebar }) => (
         <Query query={albumQuery} variables={{ id: albumId }}>
           {({ loading, error, data }) => {
             if (error) return <div>Error</div>
@@ -149,9 +147,6 @@ class AlbumPage extends Component {
                   activeIndex={this.state.activeImage}
                   presenting={this.state.presenting}
                   onSelectImage={index => {
-                        updateSidebar(
-                          <PhotoSidebar imageId={this.photos[index].id} />
-                        )
                     this.setActiveImage(index)
                   }}
                   setPresenting={this.setPresenting}
@@ -162,8 +157,6 @@ class AlbumPage extends Component {
             )
           }}
         </Query>
-          )}
-        </SidebarConsumer>
       </Layout>
     )
   }

ui/src/Pages/PhotosPage/PhotosPage.js

@@ -86,8 +86,6 @@ class PhotosPage extends Component {
   render() {
     return (
       <Layout>
-        <SidebarConsumer>
-          {({ updateSidebar }) => (
         <Query query={photoQuery}>
           {({ loading, error, data }) => {
             if (error) return error
@@ -102,11 +100,6 @@ class PhotosPage extends Component {
                   <AlbumTitle album={album} />
                   <PhotoGallery
                     onSelectImage={photoIndex => {
-                          updateSidebar(
-                            <PhotoSidebar
-                              imageId={album.photos[photoIndex].id}
-                            />
-                          )
                       this.setActiveImage(index, photoIndex)
                     }}
                     activeIndex={
@@ -138,8 +131,6 @@ class PhotosPage extends Component {
             return <div>{galleryGroups}</div>
           }}
         </Query>
-          )}
-        </SidebarConsumer>
       </Layout>
     )
   }

ui/src/components/AlbumTitle.js

@@ -3,10 +3,18 @@ import { Link } from 'react-router-dom'
 import styled from 'styled-components'
 import { Icon } from 'semantic-ui-react'
 import { SidebarConsumer } from './sidebar/Sidebar'
+import AlbumSidebar from './sidebar/AlbumSidebar'
 
 const Header = styled.h1`
+  margin: 28px 0 12px 0 !important;
+
+  & a {
     color: black;
-  margin: 24px 0 12px 0;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
 `
 
 const SettingsIcon = props => {
@@ -21,7 +29,7 @@ const SettingsIcon = props => {
     }
   `
 
-  return <StyledIcon name="edit outline" size="small" {...props} />
+  return <StyledIcon name="settings" size="small" {...props} />
 }
 
 const AlbumTitle = ({ album, disableLink = false }) => {
@@ -40,7 +48,7 @@ const AlbumTitle = ({ album, disableLink = false }) => {
           {title}
           <SettingsIcon
             onClick={() => {
-              updateSidebar(<div>Title stuff {album.title}</div>)
+              updateSidebar(<AlbumSidebar albumId={album.id} />)
             }}
           />
         </Header>

ui/src/components/photoGallery/PhotoGallery.js

@@ -5,6 +5,8 @@ import { Photo } from './Photo'
 import PresentView from './PresentView'
 import PropTypes from 'prop-types'
 import { fetchProtectedImage } from './ProtectedImage'
+import { SidebarConsumer } from '../sidebar/Sidebar'
+import PhotoSidebar from '../sidebar/PhotoSidebar'
 
 const Gallery = styled.div`
   display: flex;
@@ -91,6 +93,7 @@ class PhotoGallery extends React.Component {
 
     const activeImage = photos && activeIndex != -1 && photos[activeIndex]
 
+    const getPhotoElements = updateSidebar => {
       let photoElements = null
       if (photos) {
         photos.filter(photo => photo.thumbnail)
@@ -109,7 +112,10 @@ class PhotoGallery extends React.Component {
             <Photo
               key={photo.id}
               photo={photo}
-            onSelectImage={onSelectImage}
+              onSelectImage={index => {
+                updateSidebar(<PhotoSidebar imageId={photo.id} />)
+                onSelectImage(index)
+              }}
               setPresenting={this.props.setPresenting}
               minWidth={minWidth}
               index={index}
@@ -119,11 +125,16 @@ class PhotoGallery extends React.Component {
         })
       }
 
+      return photoElements
+    }
+
     return (
+      <SidebarConsumer>
+        {({ updateSidebar }) => (
           <div>
             <Gallery>
               <Loader active={loading}>Loading images</Loader>
-          {photoElements}
+              {getPhotoElements(updateSidebar)}
               <PhotoFiller />
             </Gallery>
             <PresentView
@@ -133,6 +144,8 @@ class PhotoGallery extends React.Component {
               imageLoaded={this.preloadImages()}
             />
           </div>
+        )}
+      </SidebarConsumer>
     )
   }
 }

ui/src/components/sidebar/AlbumSidebar.js

@@ -0,0 +1,30 @@
+import React from 'react'
+import { Query } from 'react-apollo'
+import gql from 'graphql-tag'
+
+const albumQuery = gql`
+  query getAlbumSidebar($id: ID!) {
+    album(id: $id) {
+      id
+      title
+    }
+  }
+`
+
+const AlbumSidebar = ({ albumId }) => {
+  return (
+    <div>
+      <p>Album options</p>
+      <Query query={albumQuery} variables={{ id: albumId }}>
+        {({ loading, error, data }) => {
+          if (loading) return <div>Loading...</div>
+          if (error) return <div>{error.message}</div>
+
+          return <h1>{data.album.title}</h1>
+        }}
+      </Query>
+    </div>
+  )
+}
+
+export default AlbumSidebar

ui/src/components/sidebar/Sidebar.js

@@ -25,10 +25,13 @@ class Sidebar extends React.Component {
     super(props)
 
     this.state = {
-      content: 'Start value',
+      content: null,
     }
 
-    this.update = content => this.setState({ content })
+    this.update = content => {
+      console.log('Updating sidebar', content)
+      this.setState({ content })
+    }
   }
 
   render() {