Refactor ProposeModal (#75)

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

@@ -48,7 +48,6 @@ export function ProposeModal({
 }: ProposeModalProps) {
   const [proposingAmount, setProposingAmount] = useState(0)
   const [publicKey, setPublicKey] = useState('')
-  const disabled = proposingAmount === 0
   const loading = useCommunityDetails(publicKey, setCommunityFound)
   const { votingContract } = useContracts()
   const { send } = useContractFunction(votingContract, 'initializeVotingRoom')
@@ -56,20 +55,9 @@ export function ProposeModal({
   return (
     <ColumnFlexDiv>
       <PublicKeyInput publicKey={publicKey} setPublicKey={setPublicKey} />
-
-      {publicKey && communityFound && (
       <ProposingData>
-          <CardCommunity community={communityFound} />
-          {communityFound.validForAddition ? (
-            <VoteProposeWrap>
-              <VotePropose
-                availableAmount={availableAmount}
-                setProposingAmount={setProposingAmount}
-                proposingAmount={proposingAmount}
-                disabled={disabled}
-              />
-            </VoteProposeWrap>
-          ) : (
+        {communityFound ? <CardCommunity community={communityFound} /> : loading && <CommunitySkeleton />}
+        {communityFound && !communityFound.validForAddition && (
           <WarningWrap>
             <Warning
               icon="🤏"
@@ -77,41 +65,31 @@ export function ProposeModal({
             />
           </WarningWrap>
         )}
-        </ProposingData>
-      )}
-
-      {!communityFound && !publicKey && (
-        <ProposingInfo>
-          <span>ℹ️</span>
-          <InfoText>To propose a community, it must have at least 42 members and have a ENS domain.</InfoText>
-        </ProposingInfo>
-      )}
-
-      {loading && publicKey && (
-        <ProposingData>
-          <CommunitySkeleton />
+        {((communityFound && communityFound.validForAddition) || loading) && (
           <VoteProposeWrap>
             <VotePropose
               availableAmount={availableAmount}
               setProposingAmount={setProposingAmount}
               proposingAmount={proposingAmount}
-              disabled={disabled}
+              disabled={!communityFound || !proposingAmount}
             />
           </VoteProposeWrap>
-        </ProposingData>
         )}
+        {!publicKey && (
+          <ProposingInfo>
+            <span>ℹ️</span>
+            <InfoText>To propose a community, it must have at least 42 members and have a ENS domain.</InfoText>
+          </ProposingInfo>
+        )}
+      </ProposingData>
 
       {communityFound && !communityFound.validForAddition ? (
-        <ConfirmBtn
-          onClick={() => {
-            setShowConfirmModal(false)
-          }}
-        >
+        <ConfirmBtn onClick={() => setShowConfirmModal(false)}>
           OK, let’s move on! <span>🤙</span>
         </ConfirmBtn>
       ) : (
         <ProposingBtn
-          disabled={!communityFound || disabled}
+          disabled={!communityFound || !proposingAmount}
           onClick={() => {
             send(1, publicKey)
             setShowConfirmModal(true)
@@ -149,7 +127,6 @@ const ProposingInfo = styled.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
-  width: 100%;
   margin-bottom: 32px;
 
   & > span {

packages/DApp/src/hooks/useCommunityDetails.ts

@@ -16,7 +16,9 @@ export function useCommunityDetails(publicKey: string, setCommunityDetail: (val:
       }
     }
     setCommunityDetail(undefined)
+    if (publicKey) {
       getDetails(publicKey)
+    }
   }, [publicKey])
 
   useEffect(() => setCommunityDetail(undefined), [])