feat: show proposals-archive

src/components/Proposal/Proposal.jsx

@@ -144,6 +144,8 @@ const Proposal = React.memo(function Proposal({
     proposalURL,
     authorURL,
     commentsURL,
+    // TODO: remove legacy
+    isLegacy,
     rfpProposalURL
   } = useProposalURLs(proposalToken, userid, isRfpSubmission, linkto, state);
   const isPublic = isPublicProposal(proposal);
@@ -219,6 +221,7 @@ const Proposal = React.memo(function Proposal({
                   data-testid={"proposal-title"}
                   id={`proposal-title-${proposalToken}`}
                   truncate
+                  isLegacy={isLegacy}
                   linesBeforeTruncate={2}
                   url={extended ? "" : proposalURL}>
                   {name || proposalToken}

src/components/RecordWrapper/RecordWrapper.jsx

@@ -66,15 +66,29 @@ export const RecordToken = ({ token, isCopyable }) => {
   );
 };
 
-export const Title = ({ children, url, ...props }) => {
+// TODO: remove legacy
+export const Title = ({ children, url, isLegacy, ...props }) => {
   const SimpleWrapper = (props) => <div {...props} />;
   const Wrapper = url ? Link : SimpleWrapper;
-  return (
+  return !isLegacy ? (
     <Wrapper to={url} className={styles.title}>
       <H2 {...props} data-testid="record-title">
         {children}
       </H2>
     </Wrapper>
+  ) : (
+    <>
+      <Tooltip
+        content="This proposal is an archived proposal. Clicking on it will take you to the proposals-archive website."
+        placement="right">
+        <Icon type="info" />
+      </Tooltip>
+      <a href={url} className={classNames(styles.title, "margin-left-s")}>
+        <H2 {...props} data-testid="record-title">
+          {children}
+        </H2>
+      </a>
+    </>
   );
 };
 

src/components/RecordWrapper/RecordWrapper.module.css

@@ -4,6 +4,10 @@
   max-width: 100%;
 }
 
+.title:hover {
+  text-decoration: underline;
+}
+
 .header {
   display: flex;
   flex-direction: column;

src/constants.js

@@ -195,3 +195,6 @@ export const MONTHS_LABELS = [
 export const TOTP_CODE_LENGTH = 6;
 export const TOTP_DEFAULT_TYPE = 1;
 export const TOTP_MISSING_LOGIN_ERROR = 79;
+
+// TODO: remove legacy
+export const ARCHIVE_URL = "https://proposals-archive.decred.org/";

src/containers/Proposal/Vetted/Vetted.jsx

@@ -1,7 +1,9 @@
 import React, { useCallback, useMemo } from "react";
+import isEmpty from "lodash/fp/isEmpty";
 import styles from "./VettedProposals.module.css";
 import { tabValues, mapProposalsTokensByTab, statusByTab } from "./helpers";
 import useProposalsBatch from "src/hooks/api/useProposalsBatch";
+import useLegacyVettedProposals from "src/hooks/api/useLegacyVettedProposals";
 import Proposal from "src/components/Proposal";
 import ProposalLoader from "src/components/Proposal/ProposalLoader";
 import { PublicActionsProvider } from "src/containers/Proposal/Actions";
@@ -38,6 +40,36 @@ const VettedProposals = ({ TopBanner, PageDetails, Sidebar, Main }) => {
     proposalPageSize: 4
   });
 
+  // TODO: remove legacy
+  const { legacyProposals, legacyProposalsTokens } = useLegacyVettedProposals(
+    !hasMoreProposals,
+    statusByTab[tabLabels[index]]
+  );
+
+  const mergedProposalsTokens = !isEmpty(legacyProposalsTokens)
+    ? Object.keys(proposalsTokens).reduce((acc, cur) => {
+        if (cur === "started" || cur === "pre") {
+          return {
+            ...acc,
+            [cur]: proposalsTokens[cur]
+          };
+        }
+        if (cur === "ineligible") {
+          return {
+            ...acc,
+            [cur]: [
+              ...proposalsTokens[cur],
+              ...legacyProposalsTokens["abandoned"]
+            ]
+          };
+        }
+        return {
+          ...acc,
+          [cur]: [...proposalsTokens[cur], ...legacyProposalsTokens[cur]]
+        };
+      }, {})
+    : proposalsTokens;
+
   const getEmptyMessage = useCallback((tab) => {
     const mapTabToMessage = {
       [tabValues.IN_DISCUSSION]: "No proposals under discussion",
@@ -49,9 +81,10 @@ const VettedProposals = ({ TopBanner, PageDetails, Sidebar, Main }) => {
     return mapTabToMessage[tab];
   }, []);
 
+  // TODO: remove legacy
   const recordTokensByTab = useMemo(
-    () => mapProposalsTokensByTab(tabLabels, proposalsTokens),
-    [proposalsTokens]
+    () => mapProposalsTokensByTab(tabLabels, mergedProposalsTokens),
+    [mergedProposalsTokens]
   );
 
   const content = useCallback(
@@ -78,7 +111,7 @@ const VettedProposals = ({ TopBanner, PageDetails, Sidebar, Main }) => {
 
   return (
     <RecordsView
-      records={proposals}
+      records={{ ...proposals, ...legacyProposals }}
       tabLabels={tabLabels}
       recordTokensByTab={recordTokensByTab}
       renderRecord={renderProposal}

src/containers/Proposal/hooks/useProposalURLs.js

@@ -1,6 +1,9 @@
 import { useMemo } from "react";
 import { useConfig } from "src/containers/Config";
 import { getProposalUrl, getCommentsUrl, getAuthorUrl } from "../helpers";
+import { ARCHIVE_URL } from "src/constants";
+import * as sel from "src/selectors";
+import { useSelector } from "src/redux";
 import { PROPOSAL_STATE_VETTED } from "src/constants";
 
 export default function useProposalURLs(
@@ -11,11 +14,12 @@ export default function useProposalURLs(
   state
 ) {
   const { javascriptEnabled } = useConfig();
-
-  const proposalURL = useMemo(
-    () => getProposalUrl(proposalToken, javascriptEnabled, state),
-    [proposalToken, javascriptEnabled, state]
-  );
+  // TODO: remove legacy
+  const legacyProposals = useSelector(sel.legacyProposals);
+  const isLegacy = legacyProposals.includes(proposalToken);
+  const proposalURL = !isLegacy
+    ? getProposalUrl(proposalToken, javascriptEnabled, state, isLegacy)
+    : `${ARCHIVE_URL}proposals/${proposalToken.substring(0, 7)}`;
   const commentsURL = useMemo(
     () => getCommentsUrl(proposalToken, javascriptEnabled, state),
     [javascriptEnabled, proposalToken, state]
@@ -32,5 +36,5 @@ export default function useProposalURLs(
     );
   }, [isRfpSubmission, javascriptEnabled, linkto]);
 
-  return { proposalURL, authorURL, commentsURL, rfpProposalURL };
+  return { isLegacy, proposalURL, authorURL, commentsURL, rfpProposalURL };
 }

src/hooks/api/useLegacyVettedProposals.js

@@ -0,0 +1,55 @@
+// TODO: remove legacy
+import { useEffect, useState } from "react";
+import {
+  PROPOSAL_VOTING_APPROVED,
+  PROPOSAL_VOTING_REJECTED,
+  PROPOSAL_VOTING_INELIGIBLE
+} from "src/constants";
+import legacyProposalsInfo from "src/legacyproposals.json";
+import tokenInventory from "src/legacytokeninventory.json";
+
+const mapOldToNewStatus = {
+  // old public
+  4: 2,
+  // old abandoned
+  6: 4
+};
+
+const newLegacyProposalsInfo = legacyProposalsInfo.proposals.map((p) => ({
+  ...p,
+  status: mapOldToNewStatus[p.status]
+}));
+
+const mapStatusToString = {
+  [PROPOSAL_VOTING_APPROVED]: "approved",
+  [PROPOSAL_VOTING_REJECTED]: "rejected",
+  [PROPOSAL_VOTING_INELIGIBLE]: "abandoned"
+};
+
+export default function useLegacyVettedProposals(shouldReturn = false, status) {
+  const [legacyProposals, setLegacyProposals] = useState([]);
+  const [legacyProposalsTokens, setLegacyProposalsTokens] = useState({});
+  useEffect(() => {
+    // shouldReturn is a boolean to control when the proposals are done fetching so we can return the legacy props.
+    if (shouldReturn) {
+      const proposalsTokensList = tokenInventory[mapStatusToString[status]];
+      // filter propsals by tab and transform from Array to Object where the key is the proposal token and the value is the proposal info
+      const finalList = newLegacyProposalsInfo
+        .filter(
+          (p) =>
+            proposalsTokensList &&
+            proposalsTokensList.includes(p.censorshiprecord.token)
+        )
+        .reduce(
+          (acc, cur) => ({ ...acc, [cur.censorshiprecord.token]: cur }),
+          {}
+        );
+      setLegacyProposals(finalList);
+      setLegacyProposalsTokens(tokenInventory);
+    } else {
+      setLegacyProposals([]);
+      setLegacyProposalsTokens({});
+    }
+  }, [legacyProposals.proposals, shouldReturn, status]);
+  return { legacyProposals, legacyProposalsTokens };
+}