fix: missing error handlers and proposal diff modal

src/components/Diff/Diff.jsx

@@ -1,4 +1,5 @@
 import React, { useMemo } from "react";
+import PropTypes from "prop-types";
 import { classNames } from "pi-ui";
 import { diffWordsWithSpace } from "diff";
 import { arrayDiff, lineDiffFunc, getLineArray, getFilesDiff } from "./helpers";
@@ -131,3 +132,22 @@ export const FilesDiff = ({ oldFiles, newFiles }) => {
     </table>
   );
 };
+
+export const DiffText = ({ newText, oldText }) => {
+  const diff = diffWordsWithSpace(oldText, newText);
+  return diff.map((elem, index) => (
+    <span
+      key={index}
+      className={classNames(
+        elem.added && styles.lineAdded,
+        elem.removed && styles.lineRemoved
+      )}>
+      {elem.value}
+    </span>
+  ));
+};
+
+DiffText.propTypes = {
+  newText: PropTypes.string.isRequired,
+  oldText: PropTypes.string
+};

src/components/ModalDiff/ModalDiff.jsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from "react";
 import { Modal, Text, Tab, Tabs } from "pi-ui";
 import PropTypes from "prop-types";
-import { DiffHTML, FilesDiff } from "src/components/Diff/Diff";
+import { DiffHTML, FilesDiff, DiffText } from "src/components/Diff/Diff";
 import {
   Header,
   Title,
@@ -17,6 +17,8 @@ const ModalDiff = ({
   newText,
   oldFiles,
   newFiles,
+  newTitle,
+  oldTitle,
   proposalDetails,
   ...props
 }) => {
@@ -32,7 +34,7 @@ const ModalDiff = ({
       <Header
         title={
           <Title id={"proposal-title-gfsag"} truncate linesBeforeTruncate={2}>
-            {proposalDetails.name}
+            <DiffText oldText={oldTitle} newText={newTitle} />
           </Title>
         }
         subtitle={
@@ -64,7 +66,8 @@ const ModalDiff = ({
       <Tabs
         onSelectTab={setActiveTabIndex}
         activeTabIndex={activeTabIndex}
-        className={styles.diffTabs}>
+        className={styles.diffTabs}
+        contentClassName={styles.diffTabContent}>
         <Tab label="Text Changes">
           <DiffHTML oldTextBody={oldText} newTextBody={newText} />
         </Tab>

src/components/ModalDiff/ModalDiff.module.css

@@ -8,6 +8,17 @@
   justify-content: center;
 }
 
+.diffTabContent {
+  overflow-y: scroll;
+  max-height: calc(70vh - 20rem);
+}
+
 .version {
   color: var(--text-secondary-color);
 }
+
+@media screen and (max-width: 560px) {
+  .diffTabContent {
+    max-height: calc(70vh);
+  }
+}

src/components/VersionPicker/hooks.js

@@ -19,17 +19,16 @@ export function useVersionPicker(ownProps) {
 
   const onChangeVersion = async (v) => {
     setSelectedVersion(v);
-    const proposalDiff = await fetchProposalsVersions(
-      ownProps.token,
-      selectedVersion
-    );
+    const proposalDiff = await fetchProposalsVersions(ownProps.token, v);
     handleOpenModal(ModalDiff, {
       proposalDetails: proposalDiff.details,
       onClose: handleCloseModal,
       oldText: proposalDiff.oldText,
       oldFiles: proposalDiff.oldFiles,
       newText: proposalDiff.newText,
-      newFiles: proposalDiff.newFiles
+      newFiles: proposalDiff.newFiles,
+      oldTitle: proposalDiff.oldTitle,
+      newTitle: proposalDiff.newTitle
     });
   };
 
@@ -45,7 +44,9 @@ export function useVersionPicker(ownProps) {
       oldFiles: getProposalFilesWithoutIndexMd(prevProposal),
       newFiles: getProposalFilesWithoutIndexMd(proposal),
       newText: getProposalText(proposal),
-      oldText: getProposalText(prevProposal)
+      oldText: getProposalText(prevProposal),
+      newTitle: proposal.name,
+      oldTitle: prevProposal.name
     };
   }
 

src/helpers.js

@@ -132,6 +132,19 @@ export const getHumanReadableError = (errorCode, errorContext = []) => {
     61: "Maximum proposal page size exceeded.",
     62: "That is a duplicate comment.",
     63: "Invalid login credentials",
+    64: "Comment is censored",
+    65: "Invalid proposal version",
+    66: "Invalid proposal metadata",
+    67: "Missing proposal metadata",
+    68: "Proposal metadata digest invalid",
+    69: "Invalid vote type",
+    70: "Invalid vote option",
+    71: "Linkby not met yet",
+    72: "No linked proposals",
+    73: `Invalid propsoal linkto. ${errorContext[0]}`,
+    74: `Invalid proposal linkby. ${errorContext[0]}`,
+    75: `Invalid runoff vote. ${errorContext[0]}`,
+    76: `Wrong proposal type. ${errorContext[0]}`,
 
     // CMS Errors
     1001: "Malformed name",

yarn.lock

@@ -9108,9 +9108,10 @@ performance-now@^2.1.0:
 
 "pi-ui@https://github.com/decred/pi-ui":
   version "1.0.0"
-  resolved "https://github.com/decred/pi-ui#bd184c6c60704474e8be23a1f680d081a2c2472e"
+  resolved "https://github.com/decred/pi-ui#fc945d9d6c57a9949ec34cc3c4a38f8eada3286d"
   dependencies:
     clamp-js-main "^0.11.5"
+    lodash "^4.17.15"
     react-select "2.4.4"
     react-select-event "^4.1.4"
     react-spring "^8.0.25"