improve: candidates tab and editing candidates (nounsDAO#1278)

* improve: candidates tab and editing candidates

* compile i18n strings

* temporary english placeholders

* fix lint errors

* candidate pagination, lazy load, lint and type fixes

Author: modrovsky

packages/nouns-webapp/src/components/CandidateCard/index.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 
 import { Trans } from '@lingui/react/macro';
 import clsx from 'clsx';
-import { Link } from 'react-router';
 
 import ShortAddress from '@/components/ShortAddress';
 import { relativeTimestamp } from '@/utils/timeUtils';
@@ -28,9 +27,9 @@ const CandidateCard: React.FC<Readonly<CandidateCardProps>> = ({
   const proposerVoteCount = candidate.proposerVotes;
 
   return (
-    <Link
+    <a
       className={clsx(classes.candidateLink, classes.candidateLinkWithCountdown)}
-      to={`/candidates/${candidate.id}`}
+      href={`/candidates/${candidate.id}`}
     >
       <div className={classes.title}>
         <span className={classes.candidateTitle}>
@@ -48,7 +47,9 @@ const CandidateCard: React.FC<Readonly<CandidateCardProps>> = ({
             <CandidateSponsors
               signers={signers}
               nounsRequired={candidate.requiredVotes}
-              currentBlock={currentBlock && currentBlock - 1n}
+              currentBlock={
+                currentBlock != null && currentBlock > 0n ? currentBlock - 1n : undefined
+              }
               isThresholdMetByProposer={
                 !!(proposerVoteCount && proposerVoteCount >= candidate.requiredVotes)
               }
@@ -59,23 +60,24 @@ const CandidateCard: React.FC<Readonly<CandidateCardProps>> = ({
                 candidate.voteCount - candidate.requiredVotes > 0 && classes.sponsorCountOverflow,
               )}
             >
-              <strong>
-                {candidate.voteCount} /{' '}
-                {candidate.proposerVotes > nounsRequired ? (
-                  <em className={classes.naVotesLabel}>n/a</em>
-                ) : (
-                  candidate.requiredVotes
-                )}
-              </strong>{' '}
-              <Trans>sponsored votes</Trans>
+              {candidate.proposerVotes > nounsRequired && candidate.voteCount === 0 ? (
+                <Trans>No sponsors needed</Trans>
+              ) : (
+                <>
+                  <strong>
+                    {candidate.voteCount} / {candidate.requiredVotes}
+                  </strong>{' '}
+                  <Trans>sponsored votes</Trans>
+                </>
+              )}
             </span>
           </div>
           <p className={classes.timestamp}>
             {relativeTimestamp(Number(candidate.lastUpdatedTimestamp))}
           </p>
         </div>
       </div>
-    </Link>
+    </a>
   );
 };
 

packages/nouns-webapp/src/components/Proposals/Proposals.module.css

@@ -388,6 +388,15 @@
   box-shadow: none;
 }
 
+.candidatesSectionHeader {
+  font-family: 'PT Root UI';
+  font-size: 1rem;
+  font-weight: bold;
+  color: var(--brand-gray-light-text);
+  margin-top: 1rem;
+  margin-bottom: 0.5rem;
+}
+
 .dataStatus {
   text-align: center;
   margin-top: 1rem;

packages/nouns-webapp/src/components/Proposals/index.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 
 import { ClockIcon } from '@heroicons/react/solid';
 import { i18n } from '@lingui/core';
@@ -103,11 +103,17 @@ interface ProposalsProps {
 
 const Proposals = ({ proposals, nounsRequired }: ProposalsProps) => {
   const [showDelegateModal, setShowDelegateModal] = useState(false);
-  const [activeTab, setActiveTab] = useState(0);
+  const { hash } = useLocation();
+  const [activeTab, setActiveTab] = useState(hash === '#candidates' ? 1 : 0);
   const { data: blockNumber } = useBlockNumber();
   const { address: account } = useAccount();
   const navigate = useNavigate();
-  const { data: candidatesData, refetch: refetchCandidates } = useCandidateProposals(blockNumber);
+  const {
+    data: candidatesData,
+    fetchMore,
+    loadingMore,
+    hasMore,
+  } = useCandidateProposals(blockNumber, activeTab === 1);
   const dispatch = useAppDispatch();
   const candidates = useAppSelector(state => state.candidates.data);
   const connectedAccountNounVotes = useUserVotes() ?? 0;
@@ -118,37 +124,54 @@ const Proposals = ({ proposals, nounsRequired }: ProposalsProps) => {
   const hasNounBalance = (useNounTokenBalance(account ?? '0x0') ?? 0) > 0;
   const isDaoGteV3 = useIsDaoGteV3();
   const tabs = ['Proposals', config.featureToggles.candidates && isDaoGteV3 && 'Candidates'];
-  const { hash } = useLocation();
+
+  // Infinite scroll: the sentinel div uses a `key` tied to the candidates
+  // count, so React unmounts/remounts it after each page load. The callback
+  // ref fires on mount, sets up a one-shot IntersectionObserver, and
+  // fetchMore is guarded by refs in the hook to prevent double-fires.
+  const sentinelRef = useCallback(
+    (node: HTMLDivElement | null) => {
+      if (!node) return;
+      const observer = new IntersectionObserver(
+        entries => {
+          if (entries[0]?.isIntersecting) {
+            observer.disconnect();
+            fetchMore();
+          }
+        },
+        { rootMargin: '200px' },
+      );
+      observer.observe(node);
+    },
+    [fetchMore],
+  );
 
   useEffect(() => {
-    (async () => {
-      if (candidates) {
-        return;
-      }
-      await refetchCandidates();
+    if (candidatesData.length > 0) {
       const filteredCandidates = filter(
-        candidatesData ?? [],
+        candidatesData,
         (candidate): candidate is ProposalCandidate => candidate !== undefined,
       );
       if (filteredCandidates.length > 0) {
         dispatch(setCandidates(filteredCandidates));
       }
-    })();
-  }, [candidates, candidatesData, refetchCandidates, dispatch]);
+    }
+  }, [candidatesData, dispatch]);
 
   useEffect(() => {
     if (hash === '#candidates') {
       setActiveTab(1);
     }
   }, [hash]);
 
-  useEffect(() => {
-    if (activeTab === 1) {
-      navigate('/vote#candidates');
+  const handleTabChange = (index: number) => {
+    setActiveTab(index);
+    if (index === 1) {
+      navigate('/vote#candidates', { replace: true });
     } else {
-      navigate('/vote');
+      navigate('/vote', { replace: true });
     }
-  }, [activeTab, navigate]);
+  };
 
   const nullStateCopy = () => {
     if (!!account) {
@@ -177,7 +200,7 @@ const Proposals = ({ proposals, nounsRequired }: ProposalsProps) => {
                 <button
                   type="button"
                   className={clsx(classes.tab, index === activeTab ? classes.activeTab : '')}
-                  onClick={() => setActiveTab(index)}
+                  onClick={() => handleTabChange(index)}
                   key={index}
                 >
                   {tab}
@@ -348,10 +371,20 @@ const Proposals = ({ proposals, nounsRequired }: ProposalsProps) => {
             <Row>
               <Col lg={9}>
                 {nounsRequired !== undefined && candidates && candidates.length > 0 ? (
-                  candidates
-                    .slice(0)
-                    .reverse()
-                    .map((c, i) => {
+                  (() => {
+                    const sortedCandidates = candidates;
+                    const myCandidates = account
+                      ? sortedCandidates.filter(
+                          c => c.proposer?.toLowerCase() === account.toLowerCase(),
+                        )
+                      : [];
+                    const otherCandidates = account
+                      ? sortedCandidates.filter(
+                          c => c.proposer?.toLowerCase() !== account.toLowerCase(),
+                        )
+                      : sortedCandidates;
+
+                    const renderCandidate = (c: (typeof candidates)[number], i: number) => {
                       if (c.proposalIdToUpdate !== undefined && +c.proposalIdToUpdate > 0) {
                         const prop = find(proposals ?? [], p => p.id == c.proposalIdToUpdate);
                         const isOriginalPropUpdatable = !!(
@@ -372,7 +405,43 @@ const Proposals = ({ proposals, nounsRequired }: ProposalsProps) => {
                           />
                         </div>
                       );
-                    })
+                    };
+
+                    return (
+                      <>
+                        {myCandidates.length > 0 && (
+                          <>
+                            <h5 className={classes.candidatesSectionHeader}>
+                              <Trans>Your Candidates</Trans>
+                            </h5>
+                            {myCandidates.map(renderCandidate)}
+                          </>
+                        )}
+                        {otherCandidates.length > 0 && (
+                          <>
+                            {myCandidates.length > 0 && (
+                              <h5 className={classes.candidatesSectionHeader}>
+                                <Trans>All Candidates</Trans>
+                              </h5>
+                            )}
+                            {otherCandidates.map(renderCandidate)}
+                          </>
+                        )}
+                        {hasMore && (
+                          <div
+                            ref={sentinelRef}
+                            key={`sentinel-${candidates.length}`}
+                            style={{ height: 1 }}
+                          />
+                        )}
+                        {loadingMore && (
+                          <div className="d-flex justify-content-center py-3">
+                            <Spinner animation="border" size="sm" />
+                          </div>
+                        )}
+                      </>
+                    );
+                  })()
                 ) : (
                   <>
                     {!candidates && (

packages/nouns-webapp/src/locales/en-US.po

@@ -1465,6 +1465,10 @@ msgstr "The Nouns Foundation considers the veto an emergency power that should n
 msgid "Nouns govern <0>Nouns DAO</0>. Nouns can vote on proposals or delegate their vote to a third party. A minimum of <1>{0}</1> is required to submit proposals."
 msgstr "Nouns govern <0>Nouns DAO</0>. Nouns can vote on proposals or delegate their vote to a third party. A minimum of <1>{0}</1> is required to submit proposals."
 
+#: src/components/Proposals/index.tsx
+msgid "Your Candidates"
+msgstr "Your Candidates"
+
 #: src/pages/Fork/DeployForkButton.tsx
 msgid "Deploying Nouns fork and beginning the forking period"
 msgstr "Deploying Nouns fork and beginning the forking period"
@@ -1500,6 +1504,10 @@ msgstr "Adding your feedback"
 msgid "Proposed Transactions"
 msgstr "Proposed Transactions"
 
+#: src/components/CandidateCard/index.tsx
+msgid "No sponsors needed"
+msgstr "No sponsors needed"
+
 #. placeholder {0}: i18n.date(new Date(proposalCreationTimestamp * 1000), { dateStyle: 'long', timeStyle: 'long', })
 #: src/components/ProposalHeader/index.tsx
 msgid "Only Nouns you owned or were delegated to you before {0} are eligible to vote."
@@ -1557,6 +1565,10 @@ msgstr "No arguments required "
 msgid "Add Streaming Payment Action"
 msgstr "Add Streaming Payment Action"
 
+#: src/components/Proposals/index.tsx
+msgid "All Candidates"
+msgstr "All Candidates"
+
 #: src/pages/BrandAssets/BrandAssetsPage.tsx
 msgid "Generate endless Nouns assembled from the onchain artwork"
 msgstr "Generate endless Nouns assembled from the onchain artwork"

packages/nouns-webapp/src/locales/ja-JP.po

@@ -1470,6 +1470,10 @@ msgstr "Nouns Foundationは、拒否権を通常の業務で行使すべきで
 msgid "Nouns govern <0>Nouns DAO</0>. Nouns can vote on proposals or delegate their vote to a third party. A minimum of <1>{0}</1> is required to submit proposals."
 msgstr "Nounsは<0>Nouns DAO</0>を統治します。Nounsは提案に投票するか、第三者に投票を委任することができます。提案を提出するには、最低<1>{0}</1>が必要です。"
 
+#: src/components/Proposals/index.tsx
+msgid "Your Candidates"
+msgstr "Your Candidates"
+
 #: src/pages/Fork/DeployForkButton.tsx
 msgid "Deploying Nouns fork and beginning the forking period"
 msgstr "Nounsフォークをデプロイし、フォーク期間を開始"
@@ -1505,6 +1509,10 @@ msgstr "フィードバックを追加"
 msgid "Proposed Transactions"
 msgstr "提案中のトランザクション"
 
+#: src/components/CandidateCard/index.tsx
+msgid "No sponsors needed"
+msgstr "No sponsors needed"
+
 #. placeholder {0}: i18n.date(new Date(proposalCreationTimestamp * 1000), { dateStyle: 'long', timeStyle: 'long', })
 #: src/components/ProposalHeader/index.tsx
 msgid "Only Nouns you owned or were delegated to you before {0} are eligible to vote."
@@ -1562,6 +1570,10 @@ msgstr "引数は不要"
 msgid "Add Streaming Payment Action"
 msgstr "ストリーミング支払いアクションを追加"
 
+#: src/components/Proposals/index.tsx
+msgid "All Candidates"
+msgstr "All Candidates"
+
 #: src/pages/BrandAssets/BrandAssetsPage.tsx
 msgid "Generate endless Nouns assembled from the onchain artwork"
 msgstr "オンチェーンアートワークから組み立てられた無限の名詞を生成する"

packages/nouns-webapp/src/locales/pseudo.po

@@ -1465,6 +1465,10 @@ msgstr ""
 msgid "Nouns govern <0>Nouns DAO</0>. Nouns can vote on proposals or delegate their vote to a third party. A minimum of <1>{0}</1> is required to submit proposals."
 msgstr ""
 
+#: src/components/Proposals/index.tsx
+msgid "Your Candidates"
+msgstr "Your Candidates"
+
 #: src/pages/Fork/DeployForkButton.tsx
 msgid "Deploying Nouns fork and beginning the forking period"
 msgstr ""
@@ -1500,6 +1504,10 @@ msgstr ""
 msgid "Proposed Transactions"
 msgstr ""
 
+#: src/components/CandidateCard/index.tsx
+msgid "No sponsors needed"
+msgstr "No sponsors needed"
+
 #. placeholder {0}: i18n.date(new Date(proposalCreationTimestamp * 1000), { dateStyle: 'long', timeStyle: 'long', })
 #: src/components/ProposalHeader/index.tsx
 msgid "Only Nouns you owned or were delegated to you before {0} are eligible to vote."
@@ -1557,6 +1565,10 @@ msgstr ""
 msgid "Add Streaming Payment Action"
 msgstr ""
 
+#: src/components/Proposals/index.tsx
+msgid "All Candidates"
+msgstr "All Candidates"
+
 #: src/pages/BrandAssets/BrandAssetsPage.tsx
 msgid "Generate endless Nouns assembled from the onchain artwork"
 msgstr ""

packages/nouns-webapp/src/locales/zh-CN.po

@@ -1465,6 +1465,10 @@ msgstr "Nouns 基金会认为，否决权是一种紧急权力，不应在日常
 msgid "Nouns govern <0>Nouns DAO</0>. Nouns can vote on proposals or delegate their vote to a third party. A minimum of <1>{0}</1> is required to submit proposals."
 msgstr "Nouns 管理<0>Nouns DAO</0>。Nouns 可以对提案进行投票或将其投票委托给第三方。提交提案至少需要 <1>{0}</1>。"
 
+#: src/components/Proposals/index.tsx
+msgid "Your Candidates"
+msgstr "Your Candidates"
+
 #: src/pages/Fork/DeployForkButton.tsx
 msgid "Deploying Nouns fork and beginning the forking period"
 msgstr "正在部署 Nouns 分叉并开始分叉期"
@@ -1500,6 +1504,10 @@ msgstr "正在添加您的反馈"
 msgid "Proposed Transactions"
 msgstr "提议的交易"
 
+#: src/components/CandidateCard/index.tsx
+msgid "No sponsors needed"
+msgstr "No sponsors needed"
+
 #. placeholder {0}: i18n.date(new Date(proposalCreationTimestamp * 1000), { dateStyle: 'long', timeStyle: 'long', })
 #: src/components/ProposalHeader/index.tsx
 msgid "Only Nouns you owned or were delegated to you before {0} are eligible to vote."
@@ -1557,6 +1565,10 @@ msgstr "无需参数 "
 msgid "Add Streaming Payment Action"
 msgstr "添加流支付操作"
 
+#: src/components/Proposals/index.tsx
+msgid "All Candidates"
+msgstr "All Candidates"
+
 #: src/pages/BrandAssets/BrandAssetsPage.tsx
 msgid "Generate endless Nouns assembled from the onchain artwork"
 msgstr "从链上艺术作品中生成无尽的名词"