Merge pull request #1782 from AutarkLabs/allocations-routing

Allocations/routing: wait, don't redirect
AutarkLabs · Dec 17, 2019 · 1bee69d · 1bee69d
2 parents 60ae290 + 7bd6d4b
commit 1bee69d
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 46 deletions.
diff --git a/apps/allocations/app/components/App/App.js b/apps/allocations/app/components/App/App.js
@@ -1,20 +1,23 @@
 import React from 'react'
-import { useAragonApi, usePath } from '../../api-react'
+import { useAragonApi } from '../../api-react'
 import { Main, SidePanel, SyncIndicator } from '@aragon/ui'
 
 import { IdentityProvider } from '../LocalIdentityBadge/IdentityManager'
 import { BudgetDetail, Overview } from '.'
 import { usePanel } from '../../context/Panel'
+import usePathHelpers from '../../hooks/usePathHelpers'
 import { Empty } from '../Card'
 
-const BUDGETS_REGEX = new RegExp('^/budgets/')
-
 function Routes() {
   const { appState: { budgets } } = useAragonApi()
-  const [path] = usePath()
+  const { parsePath } = usePathHelpers()
 
   if (budgets.length === 0) return <Empty />
-  if (path.match(BUDGETS_REGEX)) return <BudgetDetail />
+
+  const { budgetId } = parsePath('^/budgets/:budgetId')
+  const budget = budgets.find(b => b.id === budgetId)
+  if (budget) return <BudgetDetail budget={budget} />
+
   return <Overview />
 }
 

diff --git a/apps/allocations/app/components/App/BudgetDetail.js b/apps/allocations/app/components/App/BudgetDetail.js
@@ -23,6 +23,7 @@ import usePathHelpers from '../../hooks/usePathHelpers'
 import { AllocationsHistory } from '.'
 import BudgetContextMenu from '../BudgetContextMenu'
 import { formatDate } from '../../utils/helpers'
+import * as types from '../../utils/prop-types'
 
 const percentOf = (smaller, bigger) =>
   `${BigNumber(100 * smaller / bigger).dp(1).toString()}%`
@@ -120,22 +121,15 @@ const Grid = styled.div`
   }
 `
 
-export default function BudgetDetail() {
+export default function BudgetDetail({ budget }) {
   const { appState } = useAragonApi()
-  const { parsePath, patientlyRequestPath, requestPath } = usePathHelpers()
+  const { requestPath } = usePathHelpers()
   const { newAllocation } = usePanel()
   const period = usePeriod()
   const theme = useTheme()
 
-  const { id } = parsePath('/budgets/:id')
-
-  const budget = appState.budgets.find(b => b.id === id)
-  if (!budget) {
-    patientlyRequestPath('/')
-    return null
-  }
-
-  const allocations = (appState.allocations || []).filter(a => a.accountId === id)
+  const allocations = (appState.allocations || [])
+    .filter(a => a.accountId === budget.id)
   const utilized = budget.amount - budget.remaining
 
   return (
@@ -146,7 +140,7 @@ export default function BudgetDetail() {
           <Button
             mode="strong"
             icon={<IconPlus />}
-            onClick={() => newAllocation(id)}
+            onClick={() => newAllocation(budget.id)}
             label="New allocation"
           />
         )}
@@ -235,3 +229,7 @@ export default function BudgetDetail() {
     </>
   )
 }
+
+BudgetDetail.propTypes = {
+  budget: types.budget,
+}
diff --git a/apps/allocations/app/components/Card/Budget.js b/apps/allocations/app/components/Card/Budget.js
@@ -5,7 +5,7 @@ import BigNumber from 'bignumber.js'
 import { displayCurrency } from '../../utils/helpers'
 import * as types from '../../utils/prop-types'
 
-import { usePath } from '../../api-react'
+import usePathHelpers from '../../hooks/usePathHelpers'
 import {
   Card,
   IconCheck,
@@ -48,7 +48,7 @@ Budget.propTypes = {
 }
 
 const Wrapper = ({ budget, children, theme }) => {
-  const [ , requestPath ] = usePath()
+  const { requestPath } = usePathHelpers()
   const { active, amount, id, name, token } = budget
   return (
     <Link onClick={() => requestPath(`/budgets/${id}`)}>
@@ -137,11 +137,6 @@ const CardBottom = styled.div`
   border-top: 1px solid ${({ theme }) => theme.border};
 `
 
-const MenuContainer = styled.div`
-  align-self: flex-end;
-  align-items: center;
-`
-
 const CardTitle = styled(Text.Block).attrs({
   size: 'large',
   weight: 'bold',

diff --git a/apps/allocations/app/hooks/usePathHelpers.js b/apps/allocations/app/hooks/usePathHelpers.js
@@ -3,7 +3,6 @@ import { usePath } from '../api-react'
 
 export default function usePathHelpers() {
   const [ path, requestPath ] = usePath()
-  const [ firstTry, setFirstTry ] = React.useState(true)
 
   // accepts a pattern like '/budgets/:id', where ':id' is a named parameter
   // redirects to '/' if the current path doesn't match at all
@@ -18,10 +17,7 @@ export default function usePathHelpers() {
     })
 
     const matchData = path.match(pattern)
-    if (!matchData) {
-      requestPath('/')
-      return {}
-    }
+    if (!matchData) return {}
 
     const groups = namedParameters.reduce(
       (acc, namedParameter, index) => {
@@ -34,22 +30,6 @@ export default function usePathHelpers() {
     return groups
   }, [ path, requestPath ])
 
-  // if this page is the first page loaded for the user,
-  // we may still have incomplete state from aragonAPI;
-  // let's give it a second before redirecting
-  const patientlyRequestPath = React.useCallback(path => {
-    if (firstTry) {
-      setTimeout(() => setFirstTry(false), 1000)
-    } else {
-      requestPath(path)
-    }
-  }, [ firstTry, path, requestPath ])
-
-  return {
-    path,
-    parsePath,
-    patientlyRequestPath,
-    requestPath,
-  }
+  return { parsePath, requestPath }
 }