react-app: Integrate paginated proposal votes and deposits to detail …

…screen API refs oursky#128
hochiw · Jun 29, 2022 · e839152 · e839152
1 parent a993988
commit e839152
Show file tree

Hide file tree

Showing 4 changed files with 405 additions and 8 deletions.
diff --git a/react-app/src/components/ProposalDetailScreen/ProposalDetailScreen.graphql b/react-app/src/components/ProposalDetailScreen/ProposalDetailScreen.graphql
@@ -1,3 +1,54 @@
+fragment ProposalDetailVoterDepositorValidator on Validator {
+  id
+  operatorAddress
+  moniker
+  identity
+  securityContact
+}
+
+fragment ProposalDetailVoterDepositorAddress on StringObject {
+  value
+}
+
+fragment ProposalDetailProposalVoteVoter on ProposalVoter {
+  ... on StringObject {
+    ...ProposalDetailVoterDepositorAddress
+  }
+  ... on Validator {
+    ...ProposalDetailVoterDepositorValidator
+  }
+}
+
+fragment ProposalDetailProposalDepositDepositor on ProposalDepositor {
+  ... on StringObject {
+    ...ProposalDetailVoterDepositorAddress
+  }
+  ... on Validator {
+    ...ProposalDetailVoterDepositorValidator
+  }
+}
+
+fragment ProposalDetailProposalVote on ProposalVote {
+  id
+  proposalId
+  voter {
+    ...ProposalDetailProposalVoteVoter
+  }
+  option
+}
+
+fragment ProposalDetailProposalDeposit on ProposalDeposit {
+  id
+  proposalId
+  depositor {
+    ...ProposalDetailProposalDepositDepositor
+  }
+  amount {
+    denom
+    amount
+  }
+}
+
 fragment ProposalDetailScreenProposal on Proposal {
   id
   proposalId
@@ -24,9 +75,62 @@ fragment ProposalDetailScreenProposal on Proposal {
   }
 
   myReaction
+
+  votes(input: $voteInput) {
+    totalCount
+    edges {
+      node {
+        ...ProposalDetailProposalVote
+      }
+    }
+  }
+  deposits(input: $depositInput) {
+    totalCount
+    edges {
+      node {
+        ...ProposalDetailProposalDeposit
+      }
+    }
+  }
+}
+
+query ProposalDetailVotesPanelQuery(
+  $proposalId: ID!
+  $input: QueryProposalVotesInput!
+) {
+  proposalByID(id: $proposalId) {
+    votes(input: $input) {
+      totalCount
+      edges {
+        node {
+          ...ProposalDetailProposalVote
+        }
+      }
+    }
+  }
+}
+
+query ProposalDetailDepositsPanelQuery(
+  $proposalId: ID!
+  $input: QueryProposalDepositsInput!
+) {
+  proposalByID(id: $proposalId) {
+    deposits(input: $input) {
+      totalCount
+      edges {
+        node {
+          ...ProposalDetailProposalDeposit
+        }
+      }
+    }
+  }
 }
 
-query ProposalDetailScreenQuery($id: ID!) {
+query ProposalDetailScreenQuery(
+  $id: ID!
+  $voteInput: QueryProposalVotesInput!
+  $depositInput: QueryProposalDepositsInput!
+) {
   proposalByID(id: $id) {
     ...ProposalDetailScreenProposal
   }

diff --git a/react-app/src/components/ProposalDetailScreen/ProposalDetailScreen.tsx b/react-app/src/components/ProposalDetailScreen/ProposalDetailScreen.tsx
@@ -19,9 +19,14 @@ import ProposalDescription from "./ProposalDescription";
 import { useProposalQuery } from "./ProposalDetailScreenAPI";
 import { ProposalData } from "./ProposalData";
 
+const PROPOSAL_DETAIL_DATA_PAGE_SIZE = 5;
+
 const ProposalDetailScreen: React.FC = () => {
   const { id } = useParams();
-  const { fetch, requestState } = useProposalQuery();
+  const { fetch, requestState } = useProposalQuery(
+    0,
+    PROPOSAL_DETAIL_DATA_PAGE_SIZE
+  );
   const { translate } = useLocale();
   const reactionAPI = useReactionAPI();
   const navigate = useNavigate();