Change api mock to async (#71)

packages/DApp/src/components/card/ProposeModal.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import styled from 'styled-components'
 import { getCommunityDetails } from '../../helpers/apiMock'
 import { ButtonPrimary } from '../Button'
@@ -11,22 +11,39 @@ import { ConfirmBtn } from './VoteConfirmModal'
 import { useContractFunction } from '@usedapp/core'
 
 import { useContracts } from '../../hooks/useContracts'
+import { CommunityDetail } from '../../models/community'
 
 interface ProposeModalProps {
   availableAmount: number
   setShowConfirmModal: (val: boolean) => void
-  setPublicKey: (publicKey: string) => void
-  publicKey: string
+  setCommunityFound: (community: CommunityDetail | undefined) => void
+  communityFound: CommunityDetail | undefined
 }
 
-export function ProposeModal({ availableAmount, setShowConfirmModal, setPublicKey, publicKey }: ProposeModalProps) {
+export function ProposeModal({
+  availableAmount,
+  setShowConfirmModal,
+  setCommunityFound,
+  communityFound,
+}: ProposeModalProps) {
   const [proposingAmount, setProposingAmount] = useState(availableAmount)
-  const communityFound = getCommunityDetails(publicKey)
+  const [publicKey, setPublicKey] = useState('')
+  const [loading, setLoading] = useState(false)
   const disabled = proposingAmount === 0
 
   const { votingContract } = useContracts()
   const { send } = useContractFunction(votingContract, 'initializeVotingRoom')
 
+  useEffect(() => {
+    const getDetails = async (key: string) => {
+      setLoading(true)
+      setCommunityFound(await getCommunityDetails(key))
+      setLoading(false)
+    }
+    setCommunityFound(undefined)
+    getDetails(publicKey)
+  }, [publicKey])
+
   return (
     <CommunityProposing>
       <CommunityKeyLabel>
@@ -69,7 +86,7 @@ export function ProposeModal({ availableAmount, setShowConfirmModal, setPublicKe
           <InfoText>To propose a community, it must have at least 42 members and have a ENS domain.</InfoText>
         </ProposingInfo>
       )}
-
+      {loading && publicKey && <div>LOADING</div>}
       {communityFound && !communityFound.validForAddition ? (
         <ConfirmBtn
           onClick={() => {

packages/DApp/src/components/votes/VotesInfo.tsx

@@ -4,13 +4,13 @@ import { useEthers } from '@usedapp/core'
 import { Modal } from '../Modal'
 import { ProposeModal } from '../card/ProposeModal'
 import { VoteConfirmModal } from '../card/VoteConfirmModal'
-import { getCommunityDetails } from '../../helpers/apiMock'
+import { CommunityDetail } from '../../models/community'
 
 export function VotesInfo() {
   const { account } = useEthers()
   const [showProposeModal, setShowProposeModal] = useState(false)
   const [showConfirmModal, setShowConfirmModal] = useState(false)
-  const [publicKey, setPublicKey] = useState('')
+  const [communityFound, setCommunityFound] = useState<undefined | CommunityDetail>(undefined)
 
   const setNext = (val: boolean) => {
     setShowConfirmModal(val)
@@ -19,7 +19,7 @@ export function VotesInfo() {
 
   const clearKey = (val: boolean) => {
     setShowConfirmModal(val)
-    setPublicKey('')
+    setCommunityFound(undefined)
   }
 
   return (
@@ -33,24 +33,20 @@ export function VotesInfo() {
           heading="Add community to directory"
           setShowModal={(val: boolean) => {
             setShowProposeModal(val)
-            setPublicKey('')
+            setCommunityFound(undefined)
           }}
         >
           <ProposeModal
             availableAmount={65245346}
             setShowConfirmModal={setNext}
-            setPublicKey={setPublicKey}
-            publicKey={publicKey}
+            setCommunityFound={setCommunityFound}
+            communityFound={communityFound}
           />{' '}
         </Modal>
       )}
-      {showConfirmModal && (
+      {showConfirmModal && communityFound && (
         <Modal setShowModal={clearKey}>
-          <VoteConfirmModal
-            community={getCommunityDetails(publicKey)}
-            selectedVote={{ verb: 'to add' }}
-            setShowModal={clearKey}
-          />
+          <VoteConfirmModal community={communityFound} selectedVote={{ verb: 'to add' }} setShowModal={clearKey} />
         </Modal>
       )}
 

packages/DApp/src/helpers/apiMock.ts

@@ -2,10 +2,15 @@ import { communities, communitiesInDirectory, communitiesUnderVote } from './api
 import { CommunityDetail, DirectorySortingEnum, VotingSortingEnum } from '../models/community'
 import { APIOptions } from '../models/api'
 
-export function getCommunityDetails(publicKey: string) {
+export function getCommunityDetailsSync(publicKey: string) {
   return communities.filter((community) => community.publicKey == publicKey)[0]
 }
 
+export async function getCommunityDetails(publicKey: string) {
+  await new Promise((r) => setTimeout(r, 3000))
+  return getCommunityDetailsSync(publicKey)
+}
+
 function filterCommunities(resolvedCommunities: CommunityDetail[], filterKeyword?: string) {
   let filteredCommunities = undefined
 

packages/DApp/test/apiMock.test.ts

@@ -1,17 +1,17 @@
 import { expect } from 'chai'
-import { getCommunityDetails, getCommunitiesInDirectorySync } from '../src/helpers/apiMock'
+import { getCommunityDetailsSync, getCommunitiesInDirectorySync } from '../src/helpers/apiMock'
 import { communities } from '../src/helpers/apiMockData'
 import { DirectorySortingEnum } from '../src/models/community'
 
 describe('getCommunityDetails', () => {
   it('success', async () => {
-    expect(getCommunityDetails('0x344C19E3040Ec63A96b7aeB708C82a066315604B')).to.deep.eq(communities[0])
+    expect(getCommunityDetailsSync('0x344C19E3040Ec63A96b7aeB708C82a066315604B')).to.deep.eq(communities[0])
   })
   it('gets different community', async () => {
-    expect(getCommunityDetails('0xABA1EF51EF4bc360A9E8c9Ad2d787330b602EB24')).to.deep.eq(communities[1])
+    expect(getCommunityDetailsSync('0xABA1EF51EF4bc360A9E8c9Ad2d787330b602EB24')).to.deep.eq(communities[1])
   })
   it('empty', async () => {
-    expect(getCommunityDetails('0xabA1eF51ef4bc360a9e8C9aD2d787330B6q2eb24')).to.deep.eq(undefined)
+    expect(getCommunityDetailsSync('0xabA1eF51ef4bc360a9e8C9aD2d787330B6q2eb24')).to.deep.eq(undefined)
   })
 })