Cleanup AlbumPage to use new URLParameters hook
This commit is contained in:
parent
398f1bf46b
commit
d75e725248
|
@ -1,10 +1,10 @@
|
||||||
import React, { useCallback, useState, useEffect } from 'react'
|
import React, { useCallback } from 'react'
|
||||||
import ReactRouterPropTypes from 'react-router-prop-types'
|
import ReactRouterPropTypes from 'react-router-prop-types'
|
||||||
import { useLocation } from 'react-router-dom'
|
|
||||||
import { useQuery, gql } from '@apollo/client'
|
import { useQuery, gql } from '@apollo/client'
|
||||||
import AlbumGallery from '../../components/albumGallery/AlbumGallery'
|
import AlbumGallery from '../../components/albumGallery/AlbumGallery'
|
||||||
import PropTypes from 'prop-types'
|
import PropTypes from 'prop-types'
|
||||||
import Layout from '../../Layout'
|
import Layout from '../../Layout'
|
||||||
|
import useURLParameters from '../../components/useUrlParameters'
|
||||||
|
|
||||||
const albumQuery = gql`
|
const albumQuery = gql`
|
||||||
query albumQuery(
|
query albumQuery(
|
||||||
|
@ -56,37 +56,39 @@ let refetchNeededFavorites = false
|
||||||
|
|
||||||
function AlbumPage({ match }) {
|
function AlbumPage({ match }) {
|
||||||
const albumId = match.params.id
|
const albumId = match.params.id
|
||||||
const [onlyFavorites, setOnlyFavorites] = useState(
|
|
||||||
match.params.subPage === 'favorites'
|
|
||||||
)
|
|
||||||
|
|
||||||
const urlParams = new URLSearchParams(useLocation().search)
|
const { getParam, setParam, setParams } = useURLParameters()
|
||||||
const [ordering, setOrdering] = useState({
|
|
||||||
orderBy: urlParams.get('orderBy') || 'date_shot',
|
const onlyFavorites = getParam('favorites') == '1' ? true : false
|
||||||
orderDirection: urlParams.get('orderDirection') || 'ASC',
|
const setOnlyFavorites = favorites => setParam('favorites', favorites ? 1 : 0)
|
||||||
})
|
|
||||||
|
const orderBy = getParam('orderBy', 'date_shot')
|
||||||
|
const orderDirection = getParam('orderDirection', 'ASC')
|
||||||
|
|
||||||
|
const setOrdering = useCallback(
|
||||||
|
({ orderBy, orderDirection }) => {
|
||||||
|
let updatedParams = []
|
||||||
|
if (orderBy !== undefined) {
|
||||||
|
updatedParams.push({ key: 'orderBy', value: orderBy })
|
||||||
|
}
|
||||||
|
if (orderDirection !== undefined) {
|
||||||
|
updatedParams.push({ key: 'orderDirection', value: orderDirection })
|
||||||
|
}
|
||||||
|
|
||||||
|
setParams(updatedParams)
|
||||||
|
},
|
||||||
|
[setParams]
|
||||||
|
)
|
||||||
|
|
||||||
const { loading, error, data, refetch } = useQuery(albumQuery, {
|
const { loading, error, data, refetch } = useQuery(albumQuery, {
|
||||||
variables: {
|
variables: {
|
||||||
id: albumId,
|
id: albumId,
|
||||||
onlyFavorites,
|
onlyFavorites,
|
||||||
mediaOrderBy: ordering.orderBy,
|
mediaOrderBy: orderBy,
|
||||||
mediaOrderDirection: ordering.orderDirection,
|
mediaOrderDirection: orderDirection,
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
const setOrderingCallback = useCallback(
|
|
||||||
ordering => {
|
|
||||||
setOrdering(prevState => {
|
|
||||||
return {
|
|
||||||
...prevState,
|
|
||||||
...ordering,
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
[setOrdering, onlyFavorites]
|
|
||||||
)
|
|
||||||
|
|
||||||
const toggleFavorites = useCallback(
|
const toggleFavorites = useCallback(
|
||||||
onlyFavorites => {
|
onlyFavorites => {
|
||||||
if (
|
if (
|
||||||
|
@ -108,13 +110,6 @@ function AlbumPage({ match }) {
|
||||||
[setOnlyFavorites, refetch]
|
[setOnlyFavorites, refetch]
|
||||||
)
|
)
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const pathName = `/album/${albumId + (onlyFavorites ? '/favorites' : '')}`
|
|
||||||
const queryString = `orderBy=${ordering.orderBy}&orderDirection=${ordering.orderDirection}`
|
|
||||||
|
|
||||||
history.replaceState({}, '', pathName + '?' + queryString)
|
|
||||||
}, [onlyFavorites, ordering])
|
|
||||||
|
|
||||||
if (error) return <div>Error</div>
|
if (error) return <div>Error</div>
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
@ -127,8 +122,8 @@ function AlbumPage({ match }) {
|
||||||
onlyFavorites={onlyFavorites}
|
onlyFavorites={onlyFavorites}
|
||||||
onFavorite={() => (refetchNeededAll = refetchNeededFavorites = true)}
|
onFavorite={() => (refetchNeededAll = refetchNeededFavorites = true)}
|
||||||
showFilter
|
showFilter
|
||||||
setOrdering={setOrderingCallback}
|
setOrdering={setOrdering}
|
||||||
ordering={ordering}
|
ordering={{ orderBy, orderDirection }}
|
||||||
/>
|
/>
|
||||||
</Layout>
|
</Layout>
|
||||||
)
|
)
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
|
import React from 'react'
|
||||||
import { authToken } from '../authentication'
|
import { authToken } from '../authentication'
|
||||||
import { Checkbox, Dropdown, Button, Icon } from 'semantic-ui-react'
|
import { Checkbox, Dropdown, Button, Icon } from 'semantic-ui-react'
|
||||||
import React, { useEffect, useState } from 'react'
|
|
||||||
import styled from 'styled-components'
|
import styled from 'styled-components'
|
||||||
import PropTypes from 'prop-types'
|
import PropTypes from 'prop-types'
|
||||||
|
|
||||||
|
@ -22,7 +22,7 @@ const sortingOptions = [
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: 'kind',
|
key: 'kind',
|
||||||
value: 'kind',
|
value: 'type',
|
||||||
text: 'Kind',
|
text: 'Kind',
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
|
@ -81,17 +81,11 @@ const AlbumFilter = ({
|
||||||
setOrdering,
|
setOrdering,
|
||||||
ordering,
|
ordering,
|
||||||
}) => {
|
}) => {
|
||||||
const [orderDirection, setOrderDirection] = useState(ordering.orderDirection)
|
|
||||||
|
|
||||||
const onChangeOrderDirection = (e, data) => {
|
const onChangeOrderDirection = (e, data) => {
|
||||||
const direction = data.children.props.name === 'arrow up' ? 'DESC' : 'ASC'
|
const direction = data.children.props.name === 'arrow up' ? 'DESC' : 'ASC'
|
||||||
setOrderDirection(direction)
|
setOrdering({ orderDirection: direction })
|
||||||
}
|
}
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
setOrdering({ orderDirection })
|
|
||||||
}, [orderDirection])
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{authToken() && (
|
{authToken() && (
|
||||||
|
@ -113,7 +107,9 @@ const AlbumFilter = ({
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
<OrderDirectionButton icon basic onClick={onChangeOrderDirection}>
|
<OrderDirectionButton icon basic onClick={onChangeOrderDirection}>
|
||||||
<Icon name={'arrow ' + (orderDirection === 'ASC' ? 'up' : 'down')} />
|
<Icon
|
||||||
|
name={'arrow ' + (ordering.orderDirection === 'ASC' ? 'up' : 'down')}
|
||||||
|
/>
|
||||||
</OrderDirectionButton>
|
</OrderDirectionButton>
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
|
@ -126,4 +122,4 @@ AlbumFilter.propTypes = {
|
||||||
ordering: PropTypes.object,
|
ordering: PropTypes.object,
|
||||||
}
|
}
|
||||||
|
|
||||||
export default React.memo(AlbumFilter)
|
export default AlbumFilter
|
||||||
|
|
|
@ -6,20 +6,31 @@ function useURLParameters() {
|
||||||
const url = new URL(urlString)
|
const url = new URL(urlString)
|
||||||
const params = new URLSearchParams(url.search)
|
const params = new URLSearchParams(url.search)
|
||||||
|
|
||||||
const getParam = key => {
|
const getParam = (key, defaultValue = null) => {
|
||||||
return params.get(key)
|
return params.has(key) ? params.get(key) : defaultValue
|
||||||
|
}
|
||||||
|
|
||||||
|
const updateParams = () => {
|
||||||
|
history.replaceState({}, '', url.pathname + '?' + params.toString())
|
||||||
|
setUrlString(document.location.href)
|
||||||
}
|
}
|
||||||
|
|
||||||
const setParam = (key, value) => {
|
const setParam = (key, value) => {
|
||||||
params.set(key, value)
|
params.set(key, value)
|
||||||
history.replaceState({}, '', url.pathname + '?' + params.toString())
|
updateParams()
|
||||||
|
}
|
||||||
|
|
||||||
setUrlString(document.location.href)
|
const setParams = pairs => {
|
||||||
|
for (const pair of pairs) {
|
||||||
|
params.set(pair.key, pair.value)
|
||||||
|
}
|
||||||
|
updateParams()
|
||||||
}
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
getParam,
|
getParam,
|
||||||
setParam,
|
setParam,
|
||||||
|
setParams,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue