Voting: avoid crashing when external app details are not loadable

apps/voting/app/src/App.js

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect } from 'react'
+import React, { useCallback } from 'react'
 import {
   Button,
   Header,

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

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo, useState } from 'react'
+import React, { useCallback, useMemo } from 'react'
 import { AragonApi, useApi, useAppState, usePath } from '@aragon/api-react'
 import appStateReducer from './app-state-reducer'
 import { EMPTY_CALLSCRIPT } from './evmscript-utils'

apps/voting/app/src/components/NewVotePanel.js

@@ -10,10 +10,6 @@ import {
   useSidePanelFocusOnReady,
 } from '@aragon/ui'
 
-const initialState = {
-  question: '',
-}
-
 const NewVotePanel = React.memo(function NewVotePanel({
   panelState,
   onCreateVote,

apps/voting/app/src/components/VoteCard/VoteOptions.js

@@ -30,7 +30,10 @@ class VoteOptions extends React.Component {
 
     const percentages =
       votingPower > 0
-        ? percentageList(options.map(o => o.power / votingPower), 2)
+        ? percentageList(
+            options.map(o => o.power / votingPower),
+            2
+          )
         : [0, 0]
 
     return (

apps/voting/app/src/hooks/usePanelState.js

@@ -1,5 +1,4 @@
 import { useCallback, useMemo, useState } from 'react'
-import { noop } from '../utils'
 
 // Handles the state of a panel.
 export default function usePanelState() {

apps/voting/app/src/hooks/useVotes.js

@@ -24,12 +24,10 @@ function useDecoratedVotes() {
           `Voting: vote #${vote.voteId} does not list any execution targets. The app's cache is likely corrupted and needs to be reset.`
         )
       } else if (!executionTargets.length) {
-        // If there's no execution target, consider it targetting this Voting app
-        targetApp = {
-          ...currentApp,
-          // Don't attach an identifier for this Voting app
-          identifier: undefined,
-        }
+        // If there's no execution target, consider it targeting this Voting app
+        targetApp = { ...currentApp }
+        // Don't attach an identifier for this Voting app
+        delete targetApp.identifier
       } else if (executionTargets.length > 1) {
         // If there's multiple targets, make a "multiple" version
         targetApp = {
@@ -53,11 +51,12 @@ function useDecoratedVotes() {
       if (targetApp) {
         const { appAddress, icon, identifier, name } = targetApp
         executionTargetData = {
+          identifier,
           address: appAddress,
-          name,
+          // If the app name was not loaded, use the app's address
+          name: name || appAddress,
           // Only try to get the icon if it's available
           iconSrc: typeof icon === 'function' ? icon(24) : null,
-          identifier,
         }
       }
 
@@ -80,7 +79,9 @@ function useDecoratedVotes() {
         identifier,
         name,
       }))
-      .sort((a, b) => a.name.localeCompare(b.name))
+      .sort((a, b) => {
+        return a.name ? a.name.localeCompare(b.name) : 1
+      })
 
     return [decoratedVotes, executionTargets]
   }, [votes, connectedAccountVotes, currentApp, installedApps])

apps/voting/app/src/screens/Votes.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useMemo } from 'react'
 import {
   Bar,
   DropDown,
@@ -47,10 +47,14 @@ const Votes = React.memo(function Votes({
   const { layoutName } = useLayout()
   const { openVotes, closedVotes } = useVotes(filteredVotes)
 
-  const multipleOfTarget = executionTargets.reduce((map, { name }) => {
-    map.set(name, map.has(name))
-    return map
-  }, new Map())
+  const multipleOfTarget = useMemo(
+    () =>
+      executionTargets.reduce((map, { appAddress }) => {
+        map.set(appAddress, map.has(appAddress))
+        return map
+      }, new Map()),
+    [executionTargets]
+  )
 
   return (
     <React.Fragment>
@@ -121,9 +125,9 @@ const Votes = React.memo(function Votes({
                 'All',
                 <ThisVoting showTag={multipleOfTarget.get('Voting')} />,
                 ...executionTargets.map(
-                  ({ name, identifier }) =>
-                    `${name}${
-                      multipleOfTarget.get(name) && identifier
+                  ({ appAddress, name, identifier }) =>
+                    `${name || appAddress}${
+                      multipleOfTarget.get(appAddress) && identifier
                         ? ` (${identifier})`
                         : ''
                     }`
@@ -175,7 +179,10 @@ const ThisVoting = ({ showTag }) => (
 )
 
 const VoteGroups = React.memo(({ openVotes, closedVotes, onSelectVote }) => {
-  const voteGroups = [['Open votes', openVotes], ['Closed votes', closedVotes]]
+  const voteGroups = [
+    ['Open votes', openVotes],
+    ['Closed votes', closedVotes],
+  ]
 
   return (
     <React.Fragment>