From 51260c12232018021970b9a0e2cb563fdc0e7663 Mon Sep 17 00:00:00 2001
From: Pierre Bertet <hello@pierre.world>
Date: Fri, 8 Nov 2019 18:03:44 +0100
Subject: [PATCH] Voting: app paths (#1029)

---
 apps/voting/app/package.json     |  4 +--
 apps/voting/app/src/App.js       |  2 ++
 apps/voting/app/src/app-logic.js | 42 +++++++++++++++++++++-----------
 3 files changed, 32 insertions(+), 16 deletions(-)

diff --git a/apps/voting/app/package.json b/apps/voting/app/package.json
index 39db778687..8d89b2e76c 100644
--- a/apps/voting/app/package.json
+++ b/apps/voting/app/package.json
@@ -4,8 +4,8 @@
   "private": true,
   "license": "AGPL-3.0-or-later",
   "dependencies": {
-    "@aragon/api": "^2.0.0-beta.6",
-    "@aragon/api-react": "^2.0.0-beta.6",
+    "@aragon/api": "^2.0.0-beta.8",
+    "@aragon/api-react": "^2.0.0-beta.8",
     "@aragon/ui": "^1.0.0-alpha.23",
     "bn.js": "^4.11.8",
     "date-fns": "2.0.0-alpha.22",
diff --git a/apps/voting/app/src/App.js b/apps/voting/app/src/App.js
index b0463cad38..c69f1156ed 100644
--- a/apps/voting/app/src/App.js
+++ b/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,
diff --git a/apps/voting/app/src/app-logic.js b/apps/voting/app/src/app-logic.js
index 53b017ba9a..611fc1f488 100644
--- a/apps/voting/app/src/app-logic.js
+++ b/apps/voting/app/src/app-logic.js
@@ -1,5 +1,5 @@
 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'
@@ -7,29 +7,43 @@ 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) {
+  if (!path) {
+    return NO_VOTE_ID
+  }
+  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 = voteIdFromPath(path)
+
+    // 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