From 3944845bde1baf07f3131876579b3ef2ed6a868a Mon Sep 17 00:00:00 2001
From: Pierre Bertet <hello@pierre.world>
Date: Fri, 25 Oct 2019 03:43:17 +0200
Subject: [PATCH] Voting: use app paths

---
 apps/voting/app/src/App.js       |  2 ++
 apps/voting/app/src/app-logic.js | 39 ++++++++++++++++++++------------
 2 files changed, 27 insertions(+), 14 deletions(-)

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..b7022ec844 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,40 @@ 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