Upgrade app structure

app/package.json

@@ -3,9 +3,9 @@
   "version": "1.0.0",
   "main": "src/index.js",
   "dependencies": {
-    "@aragon/api": "^2.0.0-beta.7",
-    "@aragon/api-react": "^2.0.0-beta.6",
-    "@aragon/ui": "^1.0.0-alpha.26",
+    "@aragon/api": "^2.0.0-beta.9",
+    "@aragon/api-react": "^2.0.0-beta.9",
+    "@aragon/ui": "^1.3.1",
     "core-js": "^3.1.4",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",

app/src/App.js

@@ -1,164 +1,104 @@
-import React, { useState } from 'react'
-import { useAragonApi } from '@aragon/api-react'
+import React, { useCallback } from 'react'
+import { useGuiStyle, useAppState } from '@aragon/api-react'
 import {
   Main,
   Button,
   SidePanel,
-  Box,
-  DataView,
-  useTheme,
-  Text,
-  Tag,
+  SyncIndicator,
+  IconPlus,
+  Header,
+  GU,
+  useLayout,
 } from '@aragon/ui'
 import styled from 'styled-components'
-import AppHeader from './components/AppHeader'
-import Balance from './components/Balance'
-import ProposalDetail from './components/ProposalDetail'
+
+import ProposalDetail from './screens/ProposalDetail'
+import Proposals from './screens/Proposals'
 import AddProposalPanel from './components/AddProposalPanel'
-import { ConvictionBar, ConvictionTrend } from './components/ConvictionVisuals'
-import { toDecimals } from './lib/math-utils'
-import { toHex } from 'web3-utils'
+// import ProposalDetail from './components/ProposalDetail'
 
-function App() {
-  const { api, appState, connectedAccount } = useAragonApi()
-  const { proposals, convictionStakes, requestToken } = appState
-  const activeProposals = proposals.filter(({ executed }) => !executed)
+import useAppLogic from './app-logic'
+import useFilterProposals from './hooks/useFilterProposals'
+import useSelectedProposal from './hooks/useSelectedProposal'
 
-  const [proposalPanel, setProposalPanel] = useState(false)
-  const onProposalSubmit = ({ title, link, amount, beneficiary }) => {
-    const decimals = parseInt(requestToken.decimals)
-    const decimalAmount = toDecimals(amount.trim(), decimals).toString()
-    api.addProposal(title, toHex(link), decimalAmount, beneficiary).toPromise()
-    setProposalPanel(false)
-  }
+const Layout = styled.div`
+  display: flex;
+  justify-content: center;
+  margin-top: ${2.5 * GU}px;
+`
 
-  const myStakes =
-    (convictionStakes &&
-      convictionStakes.filter(({ entity }) => entity === connectedAccount)) ||
-    []
+const App = React.memo(function App() {
+  const { setProposalPanel, proposalPanel, onProposalSubmit } = useAppLogic()
 
-  const myLastStake = [...myStakes].pop() || {}
+  const { proposals = [], isSyncing, requestToken } = useAppState()
 
-  return (
-    <Main assetsUrl="./aragon-ui">
-      <>
-        <AppHeader
-          heading="Conviction Voting"
-          action1={
-            <Button
-              mode="strong"
-              label="New proposal"
-              onClick={() => setProposalPanel(true)}
-            >
-              New proposal
-            </Button>
-          }
-        />
-        <Wrapper>
-          <div css="width: 25%; margin-right: 1rem;">
-            <Box heading="Vault balance">
-              <Balance {...requestToken} />
-            </Box>
-            {myLastStake.tokensStaked > 0 && (
-              <Box heading="My staked proposal" key={myLastStake.proposal}>
-                <ProposalInfo
-                  proposal={
-                    proposals.filter(({ id }) => id === myLastStake.proposal)[0]
-                  }
-                  stake={myLastStake}
-                />
-              </Box>
-            )}
-          </div>
-          <div css="width: 75%">
-            <DataView
-              fields={[
-                { label: 'Proposal', priority: 1 },
-                { label: 'Requested', priority: 4 },
-                { label: 'Conviction progress', priority: 2 },
-                { label: 'Trend', priority: 5 },
-              ]}
-              entries={activeProposals}
-              renderEntry={proposal => [
-                <IdAndTitle {...proposal} />,
-                <Amount {...proposal} />,
-                <ConvictionBar proposal={proposal} />,
-                <ConvictionTrend proposal={proposal} />,
-              ]}
-              renderEntryExpansion={proposal => (
-                <ProposalDetail
-                  proposal={proposal}
-                  onStake={() =>
-                    api.stakeAllToProposal(proposal.id).toPromise()
-                  }
-                  onWithdraw={() =>
-                    api.withdrawAllFromProposal(proposal.id).toPromise()
-                  }
-                  onExecute={() =>
-                    api.executeProposal(proposal.id, true).toPromise()
-                  }
-                />
-              )}
-            />
-          </div>
-        </Wrapper>
-        <SidePanel
-          title="New proposal"
-          opened={proposalPanel}
-          onClose={() => setProposalPanel(false)}
-        >
-          <AddProposalPanel onSubmit={onProposalSubmit} />
-        </SidePanel>
-      </>
-    </Main>
-  )
-}
+  const { layoutName } = useLayout()
+  const compactMode = layoutName === 'small'
 
-const IdAndTitle = ({ id, name }) => {
-  const theme = useTheme()
-  return (
-    <div>
-      <Text color={theme.surfaceContent.toString()}>#{id}</Text>{' '}
-      <Text color={theme.surfaceContentSecondary.toString()}>{name}</Text>
-    </div>
-  )
-}
+  const [selectedProposal, selectProposal] = useSelectedProposal(proposals)
+  const handleBack = useCallback(() => selectProposal(-1), [selectProposal])
 
-const Amount = ({ requestedAmount = 0 }) => {
   const {
-    appState: {
-      requestToken: { symbol, decimals, verified },
-    },
-  } = useAragonApi()
+    filteredProposals,
+    proposalStatusFilter,
+    handleProposalStatusFilterChange,
+  } = useFilterProposals(proposals)
+
   return (
-    <div>
-      <Balance
-        amount={requestedAmount}
-        decimals={decimals}
-        symbol={symbol}
-        verified={verified}
-      />
-    </div>
+    <Layout size={layoutName}>
+      <div
+        css={`
+          width: ${layoutName !== 'small' ? '75%' : '100%'};
+        `}
+      >
+        <SyncIndicator visible={isSyncing} />
+        <Header
+          primary="Conviction Voting"
+          secondary={
+            !selectedProposal && (
+              <Button
+                mode="strong"
+                onClick={() => setProposalPanel(true)}
+                label="New proposal"
+                icon={<IconPlus />}
+                display={compactMode ? 'icon' : 'label'}
+              />
+            )
+          }
+        />
+        {selectedProposal ? (
+          <ProposalDetail
+            proposal={selectedProposal}
+            onBack={handleBack}
+            requestToken={requestToken}
+          />
+        ) : (
+          <Proposals
+            proposals={proposals}
+            selectProposal={selectProposal}
+            filteredProposals={filteredProposals}
+            proposalStatusFilter={proposalStatusFilter}
+            handleProposalStatusFilterChange={handleProposalStatusFilterChange}
+            requestToken={requestToken}
+          />
+        )}
+      </div>
+      <SidePanel
+        title="New proposal"
+        opened={proposalPanel}
+        onClose={() => setProposalPanel(false)}
+      >
+        <AddProposalPanel onSubmit={onProposalSubmit} />
+      </SidePanel>
+    </Layout>
   )
-}
+})
 
-const ProposalInfo = ({ proposal, stake }) => {
-  const {
-    appState: {
-      stakeToken: { tokenSymbol },
-    },
-  } = useAragonApi()
+export default () => {
+  const { appearance } = useGuiStyle()
   return (
-    <div>
-      <IdAndTitle {...proposal} />
-      <Tag>{`✓ Supported with ${stake.tokensStaked} ${tokenSymbol}`}</Tag>
-      <ConvictionBar proposal={proposal} />
-    </div>
+    <Main layout={false} theme={appearance} assetsUrl="./aragon-ui">
+      <App />
+    </Main>
   )
 }
-
-const Wrapper = styled.div`
-  display: flex;
-`
-
-export default App

app/src/app-logic.js

@@ -0,0 +1,57 @@
+import { useState } from 'react'
+import { useAragonApi, useAppState } from '@aragon/api-react'
+// import usePanelState from './hooks/usePanelState'
+// import { noop } from './utils'
+import { toDecimals } from './lib/math-utils'
+import { toHex } from 'web3-utils'
+
+// // Create a new proposal
+// export function useCreateProposalAction(onDone = noop) {
+//   const api = useApi()
+//   return useCallback(
+//     title => {
+//       if (api) {
+//         // Don't care about response
+//         api['newProposal(string)'](title).toPromise()
+//         onDone()
+//       }
+//     },
+//     [api, onDone]
+//   )
+// }
+
+// Handles the main logic of the app.
+export default function useAppLogic() {
+  const { api, connectedAccount } = useAragonApi()
+  const { requestToken, convictionStakes } = useAppState()
+
+  const [proposalPanel, setProposalPanel] = useState(false)
+
+  const onProposalSubmit = ({ title, link, amount, beneficiary }) => {
+    const decimals = parseInt(requestToken.decimals)
+    const decimalAmount = toDecimals(amount.trim(), decimals).toString()
+    api.addProposal(title, toHex(link), decimalAmount, beneficiary).toPromise()
+    setProposalPanel(false)
+  }
+
+  const myStakes =
+    (convictionStakes &&
+      convictionStakes.filter(({ entity }) => entity === connectedAccount)) ||
+    []
+
+  const myLastStake = [...myStakes].pop() || []
+  // const newProposalPanel = usePanelState()
+
+  // const actions = {
+  //   createProposal: useCreateProposalAction(newProposalPanel.requestClose),
+  // }
+
+  return {
+    // actions,
+    // newProposalPanel,
+    onProposalSubmit,
+    proposalPanel,
+    setProposalPanel,
+    myLastStake,
+  }
+}