Voting: use app paths

apps/voting/app/src/App.js

@@ -27,9 +27,11 @@ const App = React.memo(function App() {
     selectVote,
     votes,
   } = useAppLogic()
+
   const { layoutName } = useLayout()
   const compactMode = layoutName === 'small'
   const handleBack = useCallback(() => selectVote(-1), [selectVote])
+
   const {
     filteredVotes,
     voteStatusFilter,

apps/voting/app/src/app-logic.js

@@ -1,35 +1,46 @@
 import React, { useCallback, useMemo, useState } from 'react'
-import { AragonApi, useApi, useAppState } from '@aragon/api-react'
+import { AragonApi, useApi, useAppState, usePath } from '@aragon/api-react'
 import appStateReducer from './app-state-reducer'
 import { EMPTY_CALLSCRIPT } from './evmscript-utils'
 import usePanelState from './hooks/usePanelState'
 import useVotes from './hooks/useVotes'
 import { noop } from './utils'
 import { VOTE_YEA } from './vote-types'
 
+const VOTE_ID_PATH_RE = /^\/vote\/([0-9]+)\/?$/
+const NO_VOTE_ID = '-1'
+
+function voteIdFromPath(path) {
+  const matches = path.match(VOTE_ID_PATH_RE)
+  return matches ? matches[1] : NO_VOTE_ID
+}
+
 // Get the vote currently selected, or null otherwise.
 export function useSelectedVote(votes) {
-  const [selectedVoteId, setSelectedVoteId] = useState('-1')
+  const [path, requestPath] = usePath()
   const { ready } = useAppState()
 
   // The memoized vote currently selected.
   const selectedVote = useMemo(() => {
-    // The `ready` check prevents a vote to be selected
-    // until the app state is fully ready.
-    if (!ready || selectedVoteId === '-1') {
+    const voteId = path ? voteIdFromPath(path) : NO_VOTE_ID
+
+    // The `ready` check prevents a vote to be
+    // selected until the app state is fully ready.
+    if (!ready || voteId === NO_VOTE_ID) {
       return null
     }
-    return votes.find(vote => vote.voteId === selectedVoteId) || null
-  }, [selectedVoteId, votes, ready])
 
-  return [
-    selectedVote,
+    return votes.find(vote => vote.voteId === voteId) || null
+  }, [path, ready, votes])
+
+  const selectVote = useCallback(
+    voteId => {
+      requestPath(String(voteId) === NO_VOTE_ID ? '' : `/vote/${voteId}/`)
+    },
+    [requestPath]
+  )
 
-    // setSelectedVoteId() is exported directly: since `selectedVoteId` is
-    // set in the `selectedVote` dependencies, it means that the useMemo()
-    // will be updated every time `selectedVoteId` changes.
-    setSelectedVoteId,
-  ]
+  return [selectedVote, selectVote]
 }
 
 // Create a new vote