PhotoGallery refactoring
This commit is contained in:
viktorstrate
parent
034b85e1f7
commit
0780981ddc
|
|
@ -1,16 +1,9 @@
|
|||
import React, { Component } from 'react'
|
||||
import gql from 'graphql-tag'
|
||||
import { Query } from 'react-apollo'
|
||||
import {
|
||||
Gallery,
|
||||
Photo,
|
||||
PhotoFiller,
|
||||
PhotoContainer,
|
||||
PhotoOverlay,
|
||||
} from './styledElements'
|
||||
import Layout from '../../Layout'
|
||||
import { Loader } from 'semantic-ui-react'
|
||||
import AlbumSidebar from './AlbumSidebar'
|
||||
import PhotoGallery from '../../PhotoGallery'
|
||||
|
||||
const albumQuery = gql`
|
||||
query albumQuery($id: ID) {
|
||||
|
|
@ -34,12 +27,12 @@ class AlbumPage extends Component {
|
|||
|
||||
this.state = {
|
||||
activeImage: -1,
|
||||
activeImageId: null,
|
||||
}
|
||||
|
||||
this.setActiveImage = this.setActiveImage.bind(this)
|
||||
|
||||
this.photoAmount = 1
|
||||
this.previousActive = false
|
||||
|
||||
this.keyDownEvent = e => {
|
||||
const activeImage = this.state.activeImage
|
||||
|
|
@ -67,16 +60,10 @@ class AlbumPage extends Component {
|
|||
document.removeEventListener('keydown', this.keyDownEvent)
|
||||
}
|
||||
|
||||
setActiveImage(index) {
|
||||
this.previousActive = this.state.activeImage != -1
|
||||
setActiveImage(index, id) {
|
||||
this.setState({
|
||||
activeImage: index,
|
||||
})
|
||||
}
|
||||
|
||||
dismissPopup() {
|
||||
this.setState({
|
||||
activeImage: -1,
|
||||
activeImageId: id,
|
||||
})
|
||||
}
|
||||
|
||||
|
|
@ -89,44 +76,22 @@ class AlbumPage extends Component {
|
|||
{({ loading, error, data }) => {
|
||||
if (error) return <div>Error</div>
|
||||
|
||||
let photos = null
|
||||
if (data.album) {
|
||||
this.photoAmount = data.album.photos.length
|
||||
|
||||
const { activeImage } = this.state
|
||||
|
||||
photos = data.album.photos.map((photo, index) => {
|
||||
const active = activeImage == index
|
||||
|
||||
return (
|
||||
<PhotoContainer
|
||||
key={photo.id}
|
||||
onClick={() => {
|
||||
this.setActiveImage(index)
|
||||
}}
|
||||
>
|
||||
<Photo src={photo.thumbnail.path} />
|
||||
<PhotoOverlay active={active} />
|
||||
</PhotoContainer>
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1>{data.album ? data.album.title : ''}</h1>
|
||||
<Gallery>
|
||||
<Loader active={loading}>Loading images</Loader>
|
||||
{photos}
|
||||
<PhotoFiller />
|
||||
</Gallery>
|
||||
<AlbumSidebar
|
||||
imageId={
|
||||
this.state.activeImage != -1
|
||||
? data.album.photos[this.state.activeImage].id
|
||||
: null
|
||||
}
|
||||
<PhotoGallery
|
||||
loading={loading}
|
||||
title={data.album && data.album.title}
|
||||
photos={data.album && data.album.photos}
|
||||
activeIndex={this.state.activeImage}
|
||||
onSelectImage={index => {
|
||||
this.setActiveImage(index, data.album.photos[index].id)
|
||||
}}
|
||||
/>
|
||||
<AlbumSidebar imageId={this.state.activeImageId} />
|
||||
</div>
|
||||
)
|
||||
}}
|
||||
|
|
|
|||
|
|
@ -1,41 +0,0 @@
|
|||
import styled from 'styled-components'
|
||||
|
||||
export const Gallery = styled.div`
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
`
|
||||
|
||||
export const PhotoContainer = styled.div`
|
||||
flex-grow: 1;
|
||||
height: 200px;
|
||||
margin: 4px;
|
||||
background-color: #eee;
|
||||
position: relative;
|
||||
`
|
||||
|
||||
export const Photo = styled.img`
|
||||
height: 200px;
|
||||
min-width: 100%;
|
||||
position: relative;
|
||||
object-fit: cover;
|
||||
`
|
||||
|
||||
export const PhotoOverlay = styled.div`
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
${props =>
|
||||
props.active &&
|
||||
`
|
||||
border: 4px solid rgba(65, 131, 196, 0.6);
|
||||
`}
|
||||
`
|
||||
|
||||
export const PhotoFiller = styled.div`
|
||||
height: 200px;
|
||||
flex-grow: 999999;
|
||||
`
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
import { Loader } from 'semantic-ui-react'
|
||||
|
||||
export const Gallery = styled.div`
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
`
|
||||
|
||||
export const PhotoContainer = styled.div`
|
||||
flex-grow: 1;
|
||||
height: 200px;
|
||||
margin: 4px;
|
||||
background-color: #eee;
|
||||
position: relative;
|
||||
`
|
||||
|
||||
export const Photo = styled.img`
|
||||
height: 200px;
|
||||
min-width: 100%;
|
||||
position: relative;
|
||||
object-fit: cover;
|
||||
`
|
||||
|
||||
export const PhotoOverlay = styled.div`
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
${props =>
|
||||
props.active &&
|
||||
`
|
||||
border: 4px solid rgba(65, 131, 196, 0.6);
|
||||
`}
|
||||
`
|
||||
|
||||
export const PhotoFiller = styled.div`
|
||||
height: 200px;
|
||||
flex-grow: 999999;
|
||||
`
|
||||
|
||||
const PhotoGallery = ({
|
||||
activeIndex = -1,
|
||||
photos,
|
||||
loading,
|
||||
title,
|
||||
onSelectImage,
|
||||
}) => {
|
||||
let photoElements = null
|
||||
if (photos) {
|
||||
photoElements = photos.map((photo, index) => {
|
||||
const active = activeIndex == index
|
||||
|
||||
return (
|
||||
<PhotoContainer
|
||||
key={photo.id}
|
||||
style={{ cursor: onSelectImage && 'pointer' }}
|
||||
onClick={() => {
|
||||
onSelectImage && onSelectImage(index)
|
||||
}}
|
||||
>
|
||||
<Photo src={photo.thumbnail.path} />
|
||||
<PhotoOverlay active={active} />
|
||||
</PhotoContainer>
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1>{title}</h1>
|
||||
<Gallery>
|
||||
<Loader active={loading}>Loading images</Loader>
|
||||
{photoElements}
|
||||
<PhotoFiller />
|
||||
</Gallery>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default PhotoGallery
|
||||
Loading…
Reference in New Issue