Add EXIF to sideview

ui/src/Pages/AlbumPage/AlbumPage.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react'
 import gql from 'graphql-tag'
 import { Query } from 'react-apollo'
 import Layout from '../../Layout'
-import AlbumSidebar from './AlbumSidebar'
+import PhotoSidebar from '../../components/sidebar/PhotoSidebar'
 import PhotoGallery from '../../PhotoGallery'
 import AlbumGallery from '../AllAlbumsPage/AlbumGallery'
 
@@ -92,7 +92,7 @@ class AlbumPage extends Component {
                     this.setActiveImage(index, data.album.photos[index].id)
                   }}
                 />
-                <AlbumSidebar imageId={this.state.activeImageId} />
+                <PhotoSidebar imageId={this.state.activeImageId} />
               </div>
             )
           }}

ui/src/Pages/AlbumPage/AlbumSidebar.js

@@ -1,71 +0,0 @@
-import React, { Component } from 'react'
-import styled from 'styled-components'
-import { Query } from 'react-apollo'
-import gql from 'graphql-tag'
-
-const photoQuery = gql`
-  query sidebarPhoto($id: ID) {
-    photo(id: $id) {
-      title
-      original {
-        url
-        width
-        height
-      }
-    }
-  }
-`
-
-const RightSidebar = styled.div`
-  height: 100%;
-  width: 500px;
-  position: fixed;
-  right: 0;
-  top: 60px;
-  background-color: white;
-  padding: 12px;
-  border-left: 1px solid #eee;
-`
-
-const PreviewImage = styled.img`
-  width: 100%;
-  height: 333px;
-  object-fit: contain;
-`
-
-const Name = styled.div`
-  text-align: center;
-  font-size: 16px;
-`
-
-class AlbumSidebar extends Component {
-  render() {
-    const { imageId } = this.props
-
-    if (!imageId) {
-      return <RightSidebar />
-    }
-
-    return (
-      <RightSidebar>
-        <Query query={photoQuery} variables={{ id: imageId }}>
-          {({ loading, error, data }) => {
-            if (loading) return 'Loading...'
-            if (error) return error
-
-            const { photo } = data
-
-            return (
-              <div>
-                <PreviewImage src={photo.original.url} />
-                <Name>{photo.title}</Name>
-              </div>
-            )
-          }}
-        </Query>
-      </RightSidebar>
-    )
-  }
-}
-
-export default AlbumSidebar

ui/src/Pages/AllAlbumsPage/AlbumBox.js

@@ -32,7 +32,13 @@ export const AlbumBox = ({ album, ...props }) => {
 
   return (
     <AlbumBoxLink {...props} to={`/album/${album.id}`}>
-      <AlbumBoxImage image={album.photos[0] && album.photos[0].thumbnail.url} />
+      <AlbumBoxImage
+        image={
+          album.photos[0] &&
+          album.photos[0].thumbnail &&
+          album.photos[0].thumbnail.url
+        }
+      />
       <p>{album.title}</p>
     </AlbumBoxLink>
   )

ui/src/Pages/PhotosPage/PhotosPage.js

@@ -3,7 +3,7 @@ import Layout from '../../Layout'
 import gql from 'graphql-tag'
 import { Query } from 'react-apollo'
 import PhotoGallery from '../../PhotoGallery'
-import AlbumSidebar from '../AlbumPage/AlbumSidebar'
+import PhotoSidebar from '../../components/sidebar/PhotoSidebar'
 
 const photoQuery = gql`
   query allPhotosPage {
@@ -79,7 +79,7 @@ class PhotosPage extends Component {
             return (
               <div>
                 {galleryGroups}
-                <AlbumSidebar imageId={activeImage} />
+                <PhotoSidebar imageId={activeImage} />
               </div>
             )
           }}

ui/src/PhotoGallery.js

@@ -131,7 +131,7 @@ class PhotoGallery extends React.Component {
               onSelectImage && onSelectImage(index)
             }}
           >
-            <Photo src={photo.thumbnail.url} />
+            <Photo src={photo.thumbnail && photo.thumbnail.url} />
             <PhotoOverlay active={active} />
           </PhotoContainer>
         )

ui/src/components/sidebar/PhotoSidebar.js

@@ -0,0 +1,127 @@
+import React, { Component } from 'react'
+import styled from 'styled-components'
+import { Query } from 'react-apollo'
+import gql from 'graphql-tag'
+import { SidebarItem } from './SidebarItem'
+
+const photoQuery = gql`
+  query sidebarPhoto($id: ID) {
+    photo(id: $id) {
+      title
+      original {
+        url
+        width
+        height
+      }
+      exif {
+        camera
+        maker
+        lens
+        dateShot {
+          formatted
+        }
+        fileSize
+        exposure
+        aperture
+        iso
+        focalLength
+        flash
+      }
+    }
+  }
+`
+
+const RightSidebar = styled.div`
+  height: 100%;
+  width: 500px;
+  position: fixed;
+  right: 0;
+  top: 60px;
+  background-color: white;
+  padding: 12px;
+  border-left: 1px solid #eee;
+`
+
+const PreviewImage = styled.img`
+  width: 100%;
+  height: 333px;
+  object-fit: contain;
+`
+
+const Name = styled.div`
+  text-align: center;
+  font-size: 16px;
+  margin-bottom: 12px;
+`
+
+const exifNameLookup = {
+  camera: 'Camera',
+  maker: 'Maker',
+  lens: 'Lens',
+  dateShot: 'Date Shot',
+  fileSize: 'File Size',
+  exposure: 'Exposure',
+  aperture: 'Aperture',
+  iso: 'ISO',
+  focalLength: 'Focal Length',
+  flash: 'Flash',
+}
+
+class AlbumSidebar extends Component {
+  render() {
+    const { imageId } = this.props
+
+    if (!imageId) {
+      return <RightSidebar />
+    }
+
+    return (
+      <RightSidebar>
+        <Query query={photoQuery} variables={{ id: imageId }}>
+          {({ loading, error, data }) => {
+            if (loading) return 'Loading...'
+            if (error) return error
+
+            const { photo } = data
+
+            let exifItems = []
+
+            if (photo.exif) {
+              let exifKeys = Object.keys(photo.exif).filter(
+                x => !!photo.exif[x] && x != '__typename'
+              )
+
+              let exif = exifKeys.reduce(
+                (prev, curr) => ({
+                  ...prev,
+                  [curr]: photo.exif[curr],
+                }),
+                {}
+              )
+
+              exif.dateShot = exif.dateShot.formatted
+
+              exifItems = exifKeys.map(key => (
+                <SidebarItem
+                  key={key}
+                  name={exifNameLookup[key]}
+                  value={exif[key]}
+                />
+              ))
+            }
+
+            return (
+              <div>
+                <PreviewImage src={photo.original && photo.original.url} />
+                <Name>{photo.title}</Name>
+                <div>{exifItems}</div>
+              </div>
+            )
+          }}
+        </Query>
+      </RightSidebar>
+    )
+  }
+}
+
+export default AlbumSidebar

ui/src/components/sidebar/SidebarItem.js

@@ -0,0 +1,23 @@
+import React from 'react'
+import styled from 'styled-components'
+
+const ItemName = styled.div`
+  display: inline-block;
+  width: 100px;
+  font-weight: 600;
+  font-size: 12px;
+  color: #888;
+  text-align: right;
+  margin-right: 8px;
+`
+
+const ItemValue = styled.div`
+  display: inline-block;
+`
+
+export const SidebarItem = ({ name, value }) => (
+  <div>
+    <ItemName>{name}</ItemName>
+    <ItemValue>{value}</ItemValue>
+  </div>
+)