From 31c0041800169f016aedc4ce87ecf5639b9e6d3d Mon Sep 17 00:00:00 2001
From: Chaojun Huang <chaojun@opensquare.network>
Date: Thu, 17 Oct 2024 15:25:10 +0800
Subject: [PATCH] fix: kusama society vote result popup, #1034 (#1056)

* fix: kusama society vote result popup, #1034

* Update
---
 next/components/loadingField.js               |  5 ++
 next/components/postDetail/postResults.js     | 34 ++++++++++---
 .../common/voteCountOptionList.js             | 24 +++++----
 .../strategyResult/onePersonOneVoteResult.js  | 13 ++++-
 .../strategyResult/societyVoteResult.js       | 13 ++++-
 next/components/postResult/index.js           | 12 ++++-
 next/components/postResult/popup.js           |  6 +--
 next/components/postResult/societyPopup.js    | 50 +++++++++++++++++++
 8 files changed, 134 insertions(+), 23 deletions(-)
 create mode 100644 next/components/loadingField.js
 create mode 100644 next/components/postResult/societyPopup.js

diff --git a/next/components/loadingField.js b/next/components/loadingField.js
new file mode 100644
index 00000000..427d682b
--- /dev/null
+++ b/next/components/loadingField.js
@@ -0,0 +1,5 @@
+import { ReactComponent as LoadingSvg } from "public/imgs/icons/loading.svg";
+
+export default function LoadingField({ children, isLoading }) {
+  return isLoading ? <LoadingSvg /> : children;
+}
diff --git a/next/components/postDetail/postResults.js b/next/components/postDetail/postResults.js
index 362e7203..42d8e3f5 100644
--- a/next/components/postDetail/postResults.js
+++ b/next/components/postDetail/postResults.js
@@ -14,10 +14,12 @@ import {
   hasSocietyVoteStrategyOnly,
 } from "frontedUtils/strategy";
 import QuorumSocietyVoteResult from "./strategyResult/quorumSocietyVoteResult";
+import isNil from "lodash.isnil";
+import LoadingField from "../loadingField";
 
-export default function PostResult({ data, voteStatus, space }) {
-  const votedAmount = data?.votedWeights?.balanceOf || 0;
-  const societyVotedAmount = data?.votedWeights?.societyVote || 0;
+export function InnerPostResult({ data, voteStatus, space }) {
+  const votedAmount = data?.votedWeights?.balanceOf;
+  const societyVotedAmount = data?.votedWeights?.societyVote;
 
   const results = data?.weightStrategy?.map((strategy) => {
     if (strategy === "balance-of") {
@@ -97,7 +99,9 @@ export default function PostResult({ data, voteStatus, space }) {
       <VoteItem>
         <div>Voted</div>
         <div>
-          <ValueDisplay value={votedAmount?.toString()} space={space} />
+          <LoadingField isLoading={isNil(votedAmount)}>
+            <ValueDisplay value={votedAmount?.toString()} space={space} />
+          </LoadingField>
         </div>
       </VoteItem>
     );
@@ -105,24 +109,40 @@ export default function PostResult({ data, voteStatus, space }) {
     voted = (
       <VoteItem>
         <div>Voted</div>
-        <div>{societyVotedAmount} VOTE</div>
+        <div>
+          <LoadingField isLoading={isNil(societyVotedAmount)}>
+            {societyVotedAmount} VOTE
+          </LoadingField>
+        </div>
       </VoteItem>
     );
   }
 
   return (
-    <Panel>
+    <>
       <SideSectionTitle title="Results" img="/imgs/icons/strategy.svg" />
       <Divider />
       <div>
         {voted}
         <VoteItem>
           <div>Voters</div>
-          <div>{data?.votesCount}</div>
+          <div>
+            <LoadingField isLoading={isNil(data?.votesCount)}>
+              {data?.votesCount}
+            </LoadingField>
+          </div>
         </VoteItem>
       </div>
       {results}
       {biasedVoting}
+    </>
+  );
+}
+
+export default function PostResultPanel({ data, voteStatus, space }) {
+  return (
+    <Panel>
+      <InnerPostResult data={data} voteStatus={voteStatus} space={space} />
     </Panel>
   );
 }
diff --git a/next/components/postDetail/strategyResult/common/voteCountOptionList.js b/next/components/postDetail/strategyResult/common/voteCountOptionList.js
index 21c820e6..f3611e43 100644
--- a/next/components/postDetail/strategyResult/common/voteCountOptionList.js
+++ b/next/components/postDetail/strategyResult/common/voteCountOptionList.js
@@ -9,6 +9,8 @@ import {
   ResultHead,
   ResultName,
 } from "./styled";
+import isNil from "lodash.isnil";
+import LoadingField from "@/components/loadingField";
 
 export default function VoteCountOptionList({ optionList, strategy, total }) {
   return (
@@ -25,16 +27,18 @@ export default function VoteCountOptionList({ optionList, strategy, total }) {
                 <OptionIndex>{vote.choice}</OptionIndex>
               </Tooltip>
               <FlexAround>
-                <Tooltip
-                  content={
-                    total === 0
-                      ? "0.00%"
-                      : `${((vote.voteBalance / total) * 100).toFixed(2)}%`
-                  }
-                >
-                  <div>{vote.voteBalance} VOTE</div>
-                </Tooltip>
-                {vote.icon && <>&nbsp;{vote.icon}</>}
+                <LoadingField isLoading={isNil(vote.voteBalance)}>
+                  <Tooltip
+                    content={
+                      total === 0
+                        ? "0.00%"
+                        : `${((vote.voteBalance / total) * 100).toFixed(2)}%`
+                    }
+                  >
+                    <div>{vote.voteBalance} VOTE</div>
+                  </Tooltip>
+                  {vote.icon && <>&nbsp;{vote.icon}</>}
+                </LoadingField>
               </FlexAround>
             </ProgressItem>
             <ProgressBackground>
diff --git a/next/components/postDetail/strategyResult/onePersonOneVoteResult.js b/next/components/postDetail/strategyResult/onePersonOneVoteResult.js
index 529bd632..3473a6e4 100644
--- a/next/components/postDetail/strategyResult/onePersonOneVoteResult.js
+++ b/next/components/postDetail/strategyResult/onePersonOneVoteResult.js
@@ -5,7 +5,7 @@ import VoteCountOptionList from "./common/voteCountOptionList";
 
 export default function OnePersonOneVoteResult({ proposal, voteStatus }) {
   let winnerChoice = null;
-  for (let item of voteStatus) {
+  for (let item of voteStatus || []) {
     if (new BigNumber(item.onePersonOneVote).isZero()) {
       continue;
     }
@@ -25,6 +25,17 @@ export default function OnePersonOneVoteResult({ proposal, voteStatus }) {
 
   const optionList = [];
   proposal?.choices?.forEach((choice, index) => {
+    if (!voteStatus) {
+      optionList.push({
+        index: index + 1,
+        choice,
+        voteBalance: null,
+        percentage: "0",
+        icon: null,
+      });
+      return;
+    }
+
     for (let voteStat of voteStatus) {
       if (voteStat.choice !== choice) {
         continue;
diff --git a/next/components/postDetail/strategyResult/societyVoteResult.js b/next/components/postDetail/strategyResult/societyVoteResult.js
index 00c672d4..54d14528 100644
--- a/next/components/postDetail/strategyResult/societyVoteResult.js
+++ b/next/components/postDetail/strategyResult/societyVoteResult.js
@@ -13,7 +13,7 @@ export default function SocietyVoteResult({ proposal, voteStatus }) {
   const total = proposal?.votedWeights?.societyVote || 0;
 
   let winnerChoice = null;
-  for (let item of voteStatus) {
+  for (let item of voteStatus || []) {
     if (new BigNumber(item.societyVote).isZero()) {
       continue;
     }
@@ -32,6 +32,17 @@ export default function SocietyVoteResult({ proposal, voteStatus }) {
 
   const optionList = [];
   proposal?.choices?.forEach((choice, index) => {
+    if (!voteStatus) {
+      optionList.push({
+        index: index + 1,
+        choice,
+        voteBalance: null,
+        percentage: "0",
+        icon: null,
+      });
+      return;
+    }
+
     for (let voteStat of voteStatus) {
       if (voteStat.choice !== choice) {
         continue;
diff --git a/next/components/postResult/index.js b/next/components/postResult/index.js
index 8cf7bc50..f3c1f887 100644
--- a/next/components/postResult/index.js
+++ b/next/components/postResult/index.js
@@ -4,6 +4,11 @@ import { useRef, useState } from "react";
 import { ReactComponent as StatusSvg } from "public/imgs/icons/status.svg";
 import { useOffset } from "frontedUtils/hooks";
 import Popup from "./popup";
+import SocietyPopup from "./societyPopup";
+import {
+  hasOnePersonOneVoteStrategyOnly,
+  hasSocietyVoteStrategyOnly,
+} from "frontedUtils/strategy";
 
 const Wrapper = styled.div`
   position: relative;
@@ -32,6 +37,11 @@ export default function ResultPopup({ data, space }) {
   const { top } = useOffset(ref);
   const [show, setShow] = useState(false);
 
+  const isSocietyProposal =
+    hasSocietyVoteStrategyOnly(data?.weightStrategy) ||
+    hasOnePersonOneVoteStrategyOnly(data?.weightStrategy);
+  const PopupComponent = isSocietyProposal ? SocietyPopup : Popup;
+
   return (
     <Wrapper
       ref={ref}
@@ -41,7 +51,7 @@ export default function ResultPopup({ data, space }) {
       <IconWrapper className="icon">
         <StatusSvg />
       </IconWrapper>
-      {show && <Popup data={data} space={space} isTop={top > 400} />}
+      {show && <PopupComponent data={data} space={space} isTop={top > 400} />}
     </Wrapper>
   );
 }
diff --git a/next/components/postResult/popup.js b/next/components/postResult/popup.js
index 8b0680fd..abbd6151 100644
--- a/next/components/postResult/popup.js
+++ b/next/components/postResult/popup.js
@@ -8,7 +8,7 @@ import { votesSelector, fetchVote } from "store/reducers/voteSlice";
 import { ReactComponent as LoadingSvg } from "public/imgs/icons/loading.svg";
 import BigNumber from "bignumber.js";
 
-const ResultWrapper = styled.div`
+export const ResultWrapper = styled.div`
   z-index: 999;
   position: absolute;
   background: var(--fillBgPrimary);
@@ -27,7 +27,7 @@ const ResultWrapper = styled.div`
     `}
 `;
 
-const Triangle = styled.div`
+export const Triangle = styled.div`
   position: absolute;
   width: 0;
   height: 0;
@@ -38,7 +38,7 @@ const Triangle = styled.div`
   top: 100%;
 `;
 
-const TriangleTop = styled(Triangle)`
+export const TriangleTop = styled(Triangle)`
   border-top: 0;
   border-bottom: 8px solid var(--fillBgPrimary);
   top: -8px;
diff --git a/next/components/postResult/societyPopup.js b/next/components/postResult/societyPopup.js
new file mode 100644
index 00000000..6210a2aa
--- /dev/null
+++ b/next/components/postResult/societyPopup.js
@@ -0,0 +1,50 @@
+import { useEffect } from "react";
+import { useSelector, useDispatch } from "react-redux";
+
+import { votesSelector, fetchVote } from "store/reducers/voteSlice";
+import { InnerPostResult } from "../postDetail/postResults";
+import { ResultWrapper, Triangle, TriangleTop } from "./popup";
+
+export default function SocietyPopup({ data, isTop, space }) {
+  const votes = useSelector(votesSelector);
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    if (data?.cid && !votes[data?.cid]) {
+      dispatch(fetchVote(data?.cid, data?.space));
+    }
+  }, [votes, data, dispatch]);
+
+  const vote = votes[data?.cid];
+
+  const votesCount = vote?.reduce(
+    (pre, cur) => pre + Number(cur.votesCount ?? 0),
+    0,
+  );
+  const totalSocietyVote = vote?.reduce(
+    (pre, cur) => pre + Number(cur.societyVote ?? 0),
+    0,
+  );
+  const totalOnePersonOneVote = vote?.reduce(
+    (pre, cur) => pre + Number(cur.onePersonOneVote ?? 0),
+    0,
+  );
+
+  return (
+    <ResultWrapper isTop={isTop} className="shadow-shadowPopup">
+      <InnerPostResult
+        data={{
+          ...data,
+          votesCount,
+          votedWeights: {
+            societyVote: totalSocietyVote,
+            onePersonOneVote: totalOnePersonOneVote,
+          },
+        }}
+        voteStatus={vote}
+        space={space}
+      />
+      {isTop ? <Triangle /> : <TriangleTop />}
+    </ResultWrapper>
+  );
+}