Voting new styles for 0.8

apps/voting/app/now.json

@@ -0,0 +1,10 @@
+{
+  "version": 2,
+  "public": true,
+  "scope": "aragon",
+  "name": "voting",
+  "alias": "nightly-voting.aragon.org",
+  "builds": [
+    { "src": "package.json", "use": "@now/static-build", "config": { "distDir": "build" } }
+  ]
+}

apps/voting/app/package.json

@@ -6,7 +6,7 @@
   "dependencies": {
     "@aragon/api": "^2.0.0-beta.3",
     "@aragon/api-react": "^2.0.0-beta.1",
-    "@aragon/ui": "^0.40.1",
+    "@aragon/ui": "^1.0.0-alpha.14",
     "bn.js": "^4.11.8",
     "date-fns": "2.0.0-alpha.22",
     "onecolor": "^3.1.0",
@@ -45,11 +45,12 @@
   "scripts": {
     "lint": "eslint ./src",
     "test": "jest",
-    "sync-assets": "copy-aragon-ui-assets -n aragon-ui ./build && rsync -rtu ./public/ ./build",
     "start": "npm run sync-assets && npm run watch:script & parcel serve index.html -p 3001 --out-dir build/",
     "build": "npm run sync-assets && npm run build:script && parcel build index.html --out-dir build/ --public-url \".\"",
+    "build:script": "parcel build src/script.js --out-dir build/",
     "watch:script": "parcel watch src/script.js --out-dir build/ --no-hmr",
-    "build:script": "parcel build src/script.js --out-dir build/"
+    "sync-assets": "copy-aragon-ui-assets -n aragon-ui ./build && rsync -rtu ./public/ ./build",
+    "now-build": "npm run build"
   },
   "browserslist": [
     ">2%",

apps/voting/app/src/App.js

@@ -1,69 +1,128 @@
-import React from 'react'
-import { SyncIndicator, Main } from '@aragon/ui'
-
-import EmptyState from './screens/EmptyState'
-import Votes from './screens/Votes'
-import VotePanel from './components/VotePanel'
+import React, { useCallback } from 'react'
+import {
+  Button,
+  Header,
+  IconPlus,
+  Main,
+  SyncIndicator,
+  GU,
+  useLayout,
+} from '@aragon/ui'
 import NewVotePanel from './components/NewVotePanel'
-import AppLayout from './components/AppLayout'
-import NewVoteIcon from './components/NewVoteIcon'
-
+import useFilterVotes from './hooks/useFilterVotes'
+import useScrollTop from './hooks/useScrollTop'
+import NoVotes from './screens/NoVotes'
+import VoteDetail from './screens/VoteDetail'
+import Votes from './screens/Votes'
+import { AppLogicProvider, useAppLogic } from './app-logic'
 import { IdentityProvider } from './identity-manager'
 import { SettingsProvider } from './vote-settings-manager'
-import { AppLogicProvider, useAppLogic } from './app-logic'
 
-function App() {
+const App = React.memo(function App() {
   const {
+    actions,
     isSyncing,
-    votes,
+    newVotePanel,
     selectedVote,
-    actions,
     selectVote,
-    newVotePanel,
-    selectedVotePanel,
+    votes,
   } = useAppLogic()
+  const { layoutName } = useLayout()
+  const compactMode = layoutName === 'small'
+  const handleBack = useCallback(() => selectVote(-1), [selectVote])
+  const {
+    filteredVotes,
+    voteStatusFilter,
+    handleVoteStatusFilterChange,
+    voteOutcomeFilter,
+    handleVoteOutcomeFilterChange,
+    voteTrendFilter,
+    handleVoteTrendFilterChange,
+    voteAppFilter,
+    handleVoteAppFilterChange,
+    voteDateRangeFilter,
+    handleVoteDateRangeFilterChange,
+    handleClearFilters,
+  } = useFilterVotes(votes)
+
+  useScrollTop(selectedVote)
 
   return (
-    <div css="min-width: 320px">
-      <Main assetsUrl="./aragon-ui">
-        <SyncIndicator visible={isSyncing} />
-        <AppLayout
-          title="Voting"
-          mainButton={{
-            label: 'New vote',
-            icon: <NewVoteIcon />,
-            onClick: newVotePanel.requestOpen,
-          }}
+    <React.Fragment>
+      <SyncIndicator visible={isSyncing} />
+      {!votes.length && (
+        <div
+          css={`
+            height: calc(100vh - ${8 * GU}px);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+          `}
         >
-          {votes.length > 0 ? (
-            <Votes votes={votes} onSelectVote={selectVote} />
+          <NoVotes onNewVote={newVotePanel.requestOpen} isSyncing={isSyncing} />
+        </div>
+      )}
+      {!!votes.length && (
+        <React.Fragment>
+          <Header
+            primary="Voting"
+            secondary={
+              !selectedVote && (
+                <Button
+                  mode="strong"
+                  onClick={newVotePanel.requestOpen}
+                  label="New vote"
+                  icon={<IconPlus />}
+                  display={compactMode ? 'icon' : 'label'}
+                />
+              )
+            }
+          />
+          {selectedVote ? (
+            <VoteDetail
+              vote={selectedVote}
+              onBack={handleBack}
+              onVote={actions.vote}
+              onExecute={actions.execute}
+            />
           ) : (
-            !isSyncing && <EmptyState onActivate={newVotePanel.requestOpen} />
+            <Votes
+              votes={votes}
+              selectVote={selectVote}
+              filteredVotes={filteredVotes}
+              voteStatusFilter={voteStatusFilter}
+              handleVoteStatusFilterChange={handleVoteStatusFilterChange}
+              voteOutcomeFilter={voteOutcomeFilter}
+              handleVoteOutcomeFilterChange={handleVoteOutcomeFilterChange}
+              voteTrendFilter={voteTrendFilter}
+              handleVoteTrendFilterChange={handleVoteTrendFilterChange}
+              voteAppFilter={voteAppFilter}
+              handleVoteAppFilterChange={handleVoteAppFilterChange}
+              voteDateRangeFilter={voteDateRangeFilter}
+              handleVoteDateRangeFilterChange={handleVoteDateRangeFilterChange}
+              handleClearFilters={handleClearFilters}
+            />
           )}
-        </AppLayout>
-
-        <VotePanel
-          vote={selectedVote}
-          onExecute={actions.execute}
-          onVote={actions.vote}
-          panelState={selectedVotePanel}
-        />
+        </React.Fragment>
+      )}
+      <NewVotePanel
+        onCreateVote={actions.createVote}
+        panelState={newVotePanel}
+      />
+    </React.Fragment>
+  )
+})
 
-        <NewVotePanel
-          onCreateVote={actions.createVote}
-          panelState={newVotePanel}
-        />
-      </Main>
-    </div>
+export default function Voting() {
+  return (
+    <Main assetsUrl="./aragon-ui">
+      <AppLogicProvider>
+        <IdentityProvider>
+          <SettingsProvider>
+            <App />
+          </SettingsProvider>
+        </IdentityProvider>
+      </AppLogicProvider>
+    </Main>
   )
 }
-
-export default () => (
-  <AppLogicProvider>
-    <IdentityProvider>
-      <SettingsProvider>
-        <App />
-      </SettingsProvider>
-    </IdentityProvider>
-  </AppLogicProvider>
-)

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

@@ -1,10 +1,11 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react'
+import React, { useCallback, useMemo, useState } from 'react'
 import { AragonApi, useApi, useAppState } from '@aragon/api-react'
 import appStateReducer from './app-state-reducer'
-import { usePanelState } from './utils-hooks'
-import { useVotes } from './vote-hooks'
-import { VOTE_YEA } from './vote-types'
 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'
 
 // Get the vote currently selected, or null otherwise.
 export function useSelectedVote(votes) {
@@ -32,7 +33,7 @@ export function useSelectedVote(votes) {
 }
 
 // Create a new vote
-export function useCreateVoteAction(onDone) {
+export function useCreateVoteAction(onDone = noop) {
   const api = useApi()
   return useCallback(
     question => {
@@ -47,7 +48,7 @@ export function useCreateVoteAction(onDone) {
 }
 
 // Vote (the action) on a vote
-export function useVoteAction(onDone) {
+export function useVoteAction(onDone = noop) {
   const api = useApi()
   return useCallback(
     (voteId, voteType, executesIfDecided = true) => {
@@ -60,7 +61,7 @@ export function useVoteAction(onDone) {
 }
 
 // Execute a vote
-export function useExecuteAction(onDone) {
+export function useExecuteAction(onDone = noop) {
   const api = useApi()
   return useCallback(
     voteId => {
@@ -72,67 +73,27 @@ export function useExecuteAction(onDone) {
   )
 }
 
-// Handles the state of the selected vote panel.
-export function useSelectedVotePanel(selectedVote, selectVote) {
-  const selectedVoteId = selectedVote ? selectedVote.voteId : '-1'
-
-  // Only deselect the current vote when the panel is fully closed, so that
-  // the panel doesn’t appear empty while being closed.
-  const onDidClose = useCallback(() => {
-    selectVote('-1')
-  }, [selectVote])
-
-  const selectedVotePanel = usePanelState({ onDidClose })
-
-  // This is to help the React Hooks linter.
-  const { requestOpen, didOpen } = selectedVotePanel
-
-  // When the selected vote changes, open the selected vote panel.
-  useEffect(() => {
-    if (selectedVoteId !== '-1' && !didOpen) {
-      requestOpen()
-    }
-  }, [selectedVoteId, requestOpen, didOpen])
-
-  return selectedVotePanel
-}
-
 // Handles the main logic of the app.
 export function useAppLogic() {
   const { isSyncing, ready } = useAppState()
 
   const votes = useVotes()
   const [selectedVote, selectVote] = useSelectedVote(votes)
   const newVotePanel = usePanelState()
-  const selectedVotePanel = useSelectedVotePanel(selectedVote, selectVote)
 
   const actions = {
     createVote: useCreateVoteAction(newVotePanel.requestClose),
-    vote: useVoteAction(selectedVotePanel.requestClose),
-    execute: useExecuteAction(selectedVotePanel.requestClose),
+    vote: useVoteAction(),
+    execute: useExecuteAction(),
   }
 
   return {
-    isSyncing: isSyncing || !ready,
-    votes,
+    actions,
     selectVote,
     selectedVote,
-    actions,
-    newVotePanel: useMemo(
-      () => ({
-        ...newVotePanel,
-        // ensure there is only one panel opened at a time
-        visible: newVotePanel.visible && !selectedVotePanel.visible,
-      }),
-      [newVotePanel, selectedVotePanel.visible]
-    ),
-    selectedVotePanel: useMemo(
-      () => ({
-        ...selectedVotePanel,
-        visible: selectedVotePanel.visible && !newVotePanel.visible,
-      }),
-      [selectedVotePanel, newVotePanel.visible]
-    ),
+    votes,
+    isSyncing: isSyncing || !ready,
+    newVotePanel: useMemo(() => newVotePanel, [newVotePanel]),
   }
 }
 

apps/voting/app/src/app-state-reducer.js

@@ -45,6 +45,7 @@ function appStateReducer(state) {
               endDate: new Date(data.startDate + voteTime),
               minAcceptQuorum: new BN(data.minAcceptQuorum),
               nay: new BN(data.nay),
+              startDate: new Date(data.startDate),
               supportRequired: new BN(data.supportRequired),
               votingPower: new BN(data.votingPower),
               yea: new BN(data.yea),