Feature/dao-action-page DAO-283

packages/govern-console/.prettierrc.json

@@ -3,5 +3,6 @@
   "trailingComma": "all",
   "singleQuote": true,
   "printWidth": 100,
-  "tabWidth": 2
+  "tabWidth": 2,
+  "endOfLine":"auto"
 }

packages/govern-console/package.json

@@ -5,7 +5,7 @@
   "dependencies": {
     "@apollo/client": "^3.3.14",
     "@aragon/govern": "^1.0.0-beta.12",
-    "@aragon/ui": "https://github.com/aragon/ui.git#v2",
+    "@aragon/ui": "https://github.com/aragon/ui#v2",
     "@date-io/moment": "^1.3.13",
     "@elastic/apm-rum-react": "^1.3.1",
     "@material-ui/core": "^4.11.3",

packages/govern-console/src/containers/DAO/DaoActionPage.tsx

@@ -0,0 +1,181 @@
+import React, { useState } from 'react';
+import { DropDown, Button, GU, SearchInput, IconDown, Grid, GridItem, useLayout } from '@aragon/ui';
+import styled from 'styled-components';
+import { useHistory } from 'react-router-dom';
+
+import DaoActionCard from './components/DaoActionCard/DaoActionCard';
+import NoActionAvailable from './components/NoActionAvailable/NoActionAvailable';
+
+type actionsType = {
+  __typename?: string;
+  id: string;
+  state: string;
+  createdAt: string;
+  payload: {
+    __typename?: string;
+    id: string;
+    executionTime: string;
+    title: string;
+  };
+}[];
+
+type props = {
+  fetchMore: () => Promise<void>;
+  actions: actionsType;
+  isMore: boolean;
+  identifier: string;
+};
+
+const Container = styled.div`
+  margin-top: ${3 * GU}px;
+`;
+
+const HeaderContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  margin-bottom: ${3 * GU}px;
+`;
+
+const Title = styled.div`
+  font-weight: 600;
+  font-size: 28px;
+  line-height: 125%;
+`;
+
+const SearchContainer = styled.div`
+  display: flex;
+  align-items: center;
+  width: 100%;
+  margin-bottom: ${3 * GU}px;
+`;
+
+const CustomActionButton = styled(Button)`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  padding: 12px 24px;
+  width: 134px;
+  height: 44px;
+  border-radius: 12px;
+  box-shadow: none;
+`;
+
+const LoadMoreButton = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  padding: 12px 24px;
+  width: 154px;
+  height: 44px;
+  border-radius: 12px;
+  color: #7483ab;
+  background: #ffffff;
+  box-shadow: none;
+  cursor: pointer;
+  & > svg {
+    padding-left: 2px;
+  }
+`;
+
+const ActionListContainer = styled.div`
+  width: 100%;
+  margin-bottom: ${3 * GU}px;
+`;
+
+const DaoActionsPage: React.FC<props> = ({ fetchMore, actions, isMore, identifier }) => {
+  const history = useHistory();
+  const [selected, setSelected] = useState<number>(0);
+  const [value, setValue] = useState<string>('');
+  const actionStates = [
+    'All Actions',
+    'Executable',
+    'Scheduled',
+    'Challenged',
+    'Executed',
+    'Rejected',
+    'Ruled Negatively',
+  ];
+
+  const FilterState = (data: actionsType[0]) => {
+    return selected > 0 ? actionStates[selected] === data.state : true;
+  };
+
+  const SearchAction = (data: actionsType[0]) => {
+    const re = new RegExp(value, 'i');
+    if (data.payload.title?.match(re) || value === '') return data;
+  };
+
+  const RenderActions = (actions: actionsType) => {
+    const { layoutName } = useLayout();
+    const temp: React.ReactElement[] = [];
+    if (actions) {
+      actions
+        .filter((data) => FilterState(data)) // Filter Based on status
+        .filter((data) => SearchAction(data)) // search among vidible Actions
+        .map((data, index: number) => {
+          temp.push(
+            <GridItem
+              gridColumn={layoutName === 'medium' ? '1/-1' : index % 2 === 0 ? '1/3' : '3/5'}
+            >
+              <DaoActionCard
+                key={index}
+                date={data.createdAt}
+                state={data.state}
+                title={data.payload.title}
+              />
+            </GridItem>,
+          );
+        });
+      if (temp.length === 0) return <NoActionAvailable />;
+      return temp;
+    } else return <div>Loading...</div>;
+  };
+
+  const goToNewExecution = () => {
+    history.push(`/daos/${identifier}/actions/new-execution`);
+  };
+
+  return (
+    <Container>
+      <HeaderContainer>
+        <Title>Actions</Title>
+        <CustomActionButton label="New action" onClick={goToNewExecution} />
+      </HeaderContainer>
+      <SearchContainer>
+        <DropDown
+          items={actionStates}
+          css={`
+            border: none;
+          `}
+          selected={selected}
+          onChange={setSelected}
+        />
+        <SearchInput
+          css={`
+            width: 100%;
+            margin-left: ${3 * GU}px;
+            border-radius: 12px;
+          `}
+          onChange={(text: string) => setValue(text)}
+          placeholder="Type to search..."
+          wide={true}
+        />
+      </SearchContainer>
+      <ActionListContainer>
+        <Grid column={'4'}>{RenderActions(actions)}</Grid>
+      </ActionListContainer>
+      {isMore && (
+        <LoadMoreButton onClick={fetchMore}>
+          <span>Load more</span>
+          <IconDown />
+        </LoadMoreButton>
+      )}
+    </Container>
+  );
+};
+
+export default DaoActionsPage;

packages/govern-console/src/containers/DAO/DaoHomePage.tsx

@@ -4,12 +4,13 @@ import { Grid, GridItem, GU, useLayout } from '@aragon/ui';
 import { lazy, Suspense, useEffect, useMemo, useState } from 'react';
 import { Redirect, Switch, useHistory, useLocation, useParams, useRouteMatch } from 'react-router';
 
+import NoDaoFound from './NoDaoFound';
 import DaoSideCard from './components/DaoSideCard/DaoSideCard';
 import NewExecution from 'containers/NewExecution/NewExecution';
 import HelpComponent from 'components/HelpComponent/HelpComponent';
 import ProposalDetails from 'containers/ProposalDetails/ProposalDetails';
 import { useDaoQuery, useLazyProposalListQuery } from 'hooks/query-hooks';
-
+import DaoActionsPage from './DaoActionPage';
 const DaoSettings = lazy(() => import('containers/DAOSettings/DAOSettings'));
 
 const StyledGridItem = styled(GridItem)<{ paddingTop: string }>`
@@ -32,13 +33,16 @@ const DaoHomePage: React.FC = () => {
    * State
    */
   const [daoExists, setDaoExists] = useState<boolean>(true);
+  const [IsMoreActions, setIsMoreActions] = useState<boolean>(false);
+  const [daoDetails, setDaoDetails] = useState<any>();
+  const [queueNonce, setQueueNonce] = useState<number>();
   const [visibleActions, setVisibleActions] = useState<any>([]);
 
   /**
    * Effects
    */
   const { data: dao, loading: daoIsLoading } = useDaoQuery(daoName);
-  const { getQueueData, data: queueData } = useLazyProposalListQuery();
+  const { getQueueData, data: queueData, fetchMore } = useLazyProposalListQuery();
 
   /**
    * Update state and get queue data
@@ -63,6 +67,19 @@ const DaoHomePage: React.FC = () => {
     }
   }, [daoIsLoading, dao, getQueueData]);
 
+  /**
+   * Functions
+   */
+  const fetchMoreData = async () => {
+    if (fetchMore) {
+      fetchMore({
+        variables: {
+          offset: visibleActions.length,
+        },
+      });
+    }
+  };
+
   /**
    * Update visible proposals
    */
@@ -72,6 +89,12 @@ const DaoHomePage: React.FC = () => {
     }
   }, [queueData]);
 
+  useEffect(() => {
+    if (queueNonce && visibleActions.length) {
+      setIsMoreActions(queueNonce !== visibleActions.length);
+    } else setIsMoreActions(false);
+  }, [queueNonce, visibleActions]);
+
   /**
    * Render
    */
@@ -100,7 +123,14 @@ const DaoHomePage: React.FC = () => {
             <ApmRoute
               exact
               path={`${path}actions`}
-              render={() => <div>Actions Component goes here...</div>}
+              render={() => (
+                <DaoActionsPage
+                  fetchMore={fetchMoreData}
+                  actions={visibleActions}
+                  isMore={IsMoreActions}
+                  identifier={daoName}
+                />
+              )}
             />
             <ApmRoute
               exact

packages/govern-console/src/containers/DAO/components/ActionLink/ActionLink.tsx

@@ -9,13 +9,11 @@ const StyledDiv = styled(NavLink)`
   height: 48px;
   padding: 8px 12px;
   border-radius: 12px;
-
   font-size: 16px;
   color: #7483ab;
   line-height: 20px;
   font-weight: 600;
   text-decoration: none;
-
   /* Active */
   &.active {
     color: #00c2ff;