Cleanup AlbumPage to use new URLParameters hook

ui/src/Pages/AlbumPage/AlbumPage.js

@@ -1,10 +1,10 @@
-import React, { useCallback, useState, useEffect } from 'react'
+import React, { useCallback } from 'react'
 import ReactRouterPropTypes from 'react-router-prop-types'
-import { useLocation } from 'react-router-dom'
 import { useQuery, gql } from '@apollo/client'
 import AlbumGallery from '../../components/albumGallery/AlbumGallery'
 import PropTypes from 'prop-types'
 import Layout from '../../Layout'
+import useURLParameters from '../../components/useUrlParameters'
 
 const albumQuery = gql`
   query albumQuery(
@@ -56,37 +56,39 @@ let refetchNeededFavorites = false
 
 function AlbumPage({ match }) {
   const albumId = match.params.id
-  const [onlyFavorites, setOnlyFavorites] = useState(
-    match.params.subPage === 'favorites'
-  )
 
-  const urlParams = new URLSearchParams(useLocation().search)
-  const [ordering, setOrdering] = useState({
-    orderBy: urlParams.get('orderBy') || 'date_shot',
-    orderDirection: urlParams.get('orderDirection') || 'ASC',
-  })
+  const { getParam, setParam, setParams } = useURLParameters()
+
+  const onlyFavorites = getParam('favorites') == '1' ? true : false
+  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, {
     variables: {
       id: albumId,
       onlyFavorites,
-      mediaOrderBy: ordering.orderBy,
-      mediaOrderDirection: ordering.orderDirection,
+      mediaOrderBy: orderBy,
+      mediaOrderDirection: orderDirection,
     },
   })
 
-  const setOrderingCallback = useCallback(
-    ordering => {
-      setOrdering(prevState => {
-        return {
-          ...prevState,
-          ...ordering,
-        }
-      })
-    },
-    [setOrdering, onlyFavorites]
-  )
-
   const toggleFavorites = useCallback(
     onlyFavorites => {
       if (
@@ -108,13 +110,6 @@ function AlbumPage({ match }) {
     [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>
 
   return (
@@ -127,8 +122,8 @@ function AlbumPage({ match }) {
         onlyFavorites={onlyFavorites}
         onFavorite={() => (refetchNeededAll = refetchNeededFavorites = true)}
         showFilter
-        setOrdering={setOrderingCallback}
-        ordering={ordering}
+        setOrdering={setOrdering}
+        ordering={{ orderBy, orderDirection }}
       />
     </Layout>
   )

ui/src/components/AlbumFilter.js

@@ -1,6 +1,6 @@
+import React from 'react'
 import { authToken } from '../authentication'
 import { Checkbox, Dropdown, Button, Icon } from 'semantic-ui-react'
-import React, { useEffect, useState } from 'react'
 import styled from 'styled-components'
 import PropTypes from 'prop-types'
 
@@ -22,7 +22,7 @@ const sortingOptions = [
   },
   {
     key: 'kind',
-    value: 'kind',
+    value: 'type',
     text: 'Kind',
   },
 ]
@@ -81,17 +81,11 @@ const AlbumFilter = ({
   setOrdering,
   ordering,
 }) => {
-  const [orderDirection, setOrderDirection] = useState(ordering.orderDirection)
-
   const onChangeOrderDirection = (e, data) => {
     const direction = data.children.props.name === 'arrow up' ? 'DESC' : 'ASC'
-    setOrderDirection(direction)
+    setOrdering({ orderDirection: direction })
   }
 
-  useEffect(() => {
-    setOrdering({ orderDirection })
-  }, [orderDirection])
-
   return (
     <>
       {authToken() && (
@@ -113,7 +107,9 @@ const AlbumFilter = ({
         }}
       />
       <OrderDirectionButton icon basic onClick={onChangeOrderDirection}>
-        <Icon name={'arrow ' + (orderDirection === 'ASC' ? 'up' : 'down')} />
+        <Icon
+          name={'arrow ' + (ordering.orderDirection === 'ASC' ? 'up' : 'down')}
+        />
       </OrderDirectionButton>
     </>
   )
@@ -126,4 +122,4 @@ AlbumFilter.propTypes = {
   ordering: PropTypes.object,
 }
 
-export default React.memo(AlbumFilter)
+export default AlbumFilter

ui/src/components/useURLParameters.js

@@ -6,20 +6,31 @@ function useURLParameters() {
   const url = new URL(urlString)
   const params = new URLSearchParams(url.search)
 
-  const getParam = key => {
-    return params.get(key)
+  const getParam = (key, defaultValue = null) => {
+    return params.has(key) ? params.get(key) : defaultValue
+  }
+
+  const updateParams = () => {
+    history.replaceState({}, '', url.pathname + '?' + params.toString())
+    setUrlString(document.location.href)
   }
 
   const setParam = (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 {
     getParam,
     setParam,
+    setParams,
   }
 }