diff --git a/src/components/Diff/Diff.jsx b/src/components/Diff/Diff.jsx index 7aab23722..6a07e0912 100644 --- a/src/components/Diff/Diff.jsx +++ b/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 }) => { ); }; + +export const DiffText = ({ newText, oldText }) => { + const diff = diffWordsWithSpace(oldText, newText); + return diff.map((elem, index) => ( + + {elem.value} + + )); +}; + +DiffText.propTypes = { + newText: PropTypes.string.isRequired, + oldText: PropTypes.string +}; diff --git a/src/components/ModalDiff/ModalDiff.jsx b/src/components/ModalDiff/ModalDiff.jsx index 71f7b43a7..e13d96a71 100644 --- a/src/components/ModalDiff/ModalDiff.jsx +++ b/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 = ({
- {proposalDetails.name} + } subtitle={ @@ -64,7 +66,8 @@ const ModalDiff = ({ + className={styles.diffTabs} + contentClassName={styles.diffTabContent}> diff --git a/src/components/ModalDiff/ModalDiff.module.css b/src/components/ModalDiff/ModalDiff.module.css index 26d4ec959..2dbefbce2 100644 --- a/src/components/ModalDiff/ModalDiff.module.css +++ b/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); + } +} diff --git a/src/components/VersionPicker/hooks.js b/src/components/VersionPicker/hooks.js index d1e84afaf..20c92a4f1 100644 --- a/src/components/VersionPicker/hooks.js +++ b/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 }; } diff --git a/src/helpers.js b/src/helpers.js index 364178e3c..91c0cb05b 100644 --- a/src/helpers.js +++ b/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", diff --git a/yarn.lock b/yarn.lock index ea4641854..d2e0510c9 100644 --- a/yarn.lock +++ b/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"