comments: Add proposal author updates.

src/actions/api.js

@@ -1063,15 +1063,24 @@ export const onSubmitComment = (
   token,
   commentText,
   parentid,
-  state
+  state,
+  extraData,
+  extraDataHint
 ) =>
   withCsrf((dispatch, getState, csrf) => {
-    const comment = api.makeComment(token, commentText, parentid, state);
+    const comment = api.makeComment(
+      token,
+      commentText,
+      parentid,
+      state,
+      extraData,
+      extraDataHint
+    );
     dispatch(act.REQUEST_NEW_COMMENT(comment));
     return Promise.resolve(api.signComment(currentUserID, comment))
       .then((comment) => {
-        // make sure this is not a duplicate comment by comparing to the existent
-        // comments signatures
+        // make sure this is not a duplicate comment by comparing to the
+        // existen comments signatures.
         const comments = sel.commentsByToken(getState())[token];
         const signatureFound =
           comments && comments.find((cm) => cm.signature === comment.signature);
@@ -1694,8 +1703,8 @@ export const onSubmitDccComment = (currentUserID, token, comment, parentid) =>
     return Promise.resolve(api.makeDccComment(token, comment, parentid))
       .then((comment) => api.signDccComment(currentUserID, comment))
       .then((comment) => {
-        // make sure this is not a duplicate comment by comparing to the existent
-        // comments signatures
+        // make sure this is not a duplicate comment by comparing to the
+        // existent comments signatures.
         const comments = sel.commentsByToken(getState())[token];
         const signatureFound =
           comments && comments.find((cm) => cm.signature === comment.signature);

src/actions/app.js

@@ -143,11 +143,19 @@ export const onEditProposal =
   };
 
 export const onSaveNewComment =
-  ({ comment, token, parentID, state }) =>
+  ({ comment, token, parentID, state, extraData, extraDataHint }) =>
   (dispatch, getState) => {
     const userid = sel.currentUserID(getState());
     return dispatch(
-      onSubmitCommentApi(userid, token, comment, parentID, state)
+      onSubmitCommentApi(
+        userid,
+        token,
+        comment,
+        parentID,
+        state,
+        extraData,
+        extraDataHint
+      )
     );
   };
 

src/components/CommentForm/CommentForm.jsx

@@ -2,10 +2,11 @@ import React from "react";
 import PropTypes from "prop-types";
 import { Formik } from "formik";
 import FormikPersist from "src/components/FormikPersist";
-import { Button, Message } from "pi-ui";
+import { Button, Message, BoxTextInput } from "pi-ui";
 import { Row } from "../layout";
 import MarkdownEditor from "src/components/MarkdownEditor";
 import validationSchema from "./validation";
+import { usePolicy } from "src/hooks";
 
 const forbiddenCommentsMdElements = ["h1", "h2", "h3", "h4", "h5", "h6"];
 
@@ -15,14 +16,18 @@ const CommentForm = ({
   onCommentSubmitted,
   disableSubmit,
   persistKey,
-  className
+  className,
+  canReceiveAuthorUpdates
 }) => {
+  const {
+    policyPi: { namesupportedchars, namelengthmax, namelengthmin }
+  } = usePolicy();
   async function handleSubmit(
-    values,
+    { comment, title },
     { resetForm, setSubmitting, setFieldError }
   ) {
     try {
-      await onSubmit(values.comment.trim());
+      await onSubmit({ comment: comment.trim(), title });
       setSubmitting(false);
       resetForm();
       onCommentSubmitted && onCommentSubmitted();
@@ -34,29 +39,50 @@ const CommentForm = ({
   return (
     <Formik
       initialValues={{
+        title: canReceiveAuthorUpdates ? "" : null,
         comment: ""
       }}
       loading={!validationSchema}
-      validationSchema={validationSchema}
+      validationSchema={validationSchema({
+        namesupportedchars,
+        namelengthmax,
+        namelengthmin
+      })}
       onSubmit={handleSubmit}>
-      {(formikProps) => {
-        const {
-          values,
-          handleBlur,
-          handleSubmit,
-          isSubmitting,
-          setFieldValue,
-          errors,
-          isValid
-        } = formikProps;
-        function handleCommentChange(v) {
-          setFieldValue("comment", v);
-        }
+      {({
+        values,
+        handleBlur,
+        handleSubmit,
+        handleChange,
+        isSubmitting,
+        setFieldTouched,
+        setFieldValue,
+        errors,
+        isValid,
+        touched
+      }) => {
+        const handleTitleChangeWithTouched = (e) => {
+          setFieldTouched("title", true);
+          handleChange(e);
+        };
+
+        const handleCommentChange = (v) => setFieldValue("comment", v);
+
         return (
           <form onSubmit={handleSubmit} className={className}>
             {errors && errors.global && (
               <Message kind="error">{errors.global.toString()}</Message>
             )}
+            {canReceiveAuthorUpdates && (
+              <BoxTextInput
+                placeholder="Update title"
+                name="title"
+                tabIndex={1}
+                value={values.title}
+                onChange={handleTitleChangeWithTouched}
+                error={touched.title && errors.title}
+              />
+            )}
             <MarkdownEditor
               allowImgs={false}
               allowHeaders={false}
@@ -66,7 +92,7 @@ const CommentForm = ({
               onChange={handleCommentChange}
               onBlur={handleBlur}
               disallowedElements={forbiddenCommentsMdElements}
-              placeholder={"Write a comment"}
+              placeholder="Write a comment"
             />
             <Row justify="right" topMarginSize="s">
               {!!onCancel && (

src/components/CommentForm/validation.js

@@ -1,7 +1,28 @@
 import * as Yup from "yup";
+import { yupFieldMatcher } from "src/utils/validation";
 
-const commentValidationSchema = Yup.object().shape({
-  comment: Yup.string().required("Required")
-});
+const commentValidationSchema = ({
+  namesupportedchars,
+  namelengthmax,
+  namelengthmin
+}) =>
+  Yup.object().shape(
+    {
+      comment: Yup.string().required("required"),
+      title: Yup.string()
+        .nullable()
+        .notRequired()
+        .when("title", {
+          is: (value) => value?.length,
+          then: (rule) =>
+            rule
+              .min(namelengthmin)
+              .max(namelengthmax)
+              .matches(...yupFieldMatcher("Title", namesupportedchars))
+        })
+    },
+    // Add Cyclic deps here because when require itself
+    ["title", "title"]
+  );
 
 export default commentValidationSchema;

src/constants.js

@@ -53,6 +53,7 @@ export const PROPOSAL_USER_FILTER_DRAFT_PROPOSALS = 2;
 
 export const PROPOSAL_METADATA_FILENAME = "proposalmetadata.json";
 export const VOTE_METADATA_FILENAME = "votemetadata.json";
+export const PROPOSAL_UPDATE_HINT = "proposalupdate";
 
 export const PROPOSAL_AMOUNT_UNIT = "$";
 

src/containers/Comments/Comment/CommentWrapper.jsx

@@ -7,7 +7,8 @@ import Comment from "./Comment";
 import {
   PROPOSAL_STATE_UNVETTED,
   PROPOSAL_COMMENT_UPVOTE,
-  PROPOSAL_COMMENT_DOWNVOTE
+  PROPOSAL_COMMENT_DOWNVOTE,
+  PROPOSAL_UPDATE_HINT
 } from "src/constants";
 
 const ContextLink = React.memo(({ parentid, recordToken }) => (
@@ -99,9 +100,13 @@ const CommentWrapper = ({
     userid,
     isNew,
     sumOfNewDescendants,
-    parentid
+    parentid,
+    extradatahint,
+    extradata
   } = comment;
 
+  const isAuthorUpdate = extradatahint === PROPOSAL_UPDATE_HINT;
+  const authorUpdateMetadata = isAuthorUpdate && JSON.parse(extradata);
   const isRecordAuthor =
     recordAuthorID === userid || recordAuthorUsername === username;
   const censorable = isAdmin && !readOnly;
@@ -134,7 +139,7 @@ const CommentWrapper = ({
   }, [showReplies]);
 
   const handleSubmitComment = useCallback(
-    (comment) =>
+    ({ comment }) =>
       onSubmitComment({
         comment,
         token,
@@ -181,6 +186,12 @@ const CommentWrapper = ({
 
   return (
     <>
+      {authorUpdateMetadata && (
+        <div>
+          commentid: {commentid} timestamp: {timestamp} title:{" "}
+          {authorUpdateMetadata.title}
+        </div>
+      )}
       <Comment
         permalink={`${recordBaseLink}/comments/${commentid}`}
         seeInContextLink={contextLink}

src/containers/Comments/Comments.jsx

@@ -16,17 +16,15 @@ import CommentsListWrapper from "./CommentsList/CommentsListWrapper";
 import CommentLoader from "./Comment/CommentLoader";
 import Link from "src/components/Link";
 import Or from "src/components/Or";
-import useQueryString from "src/hooks/utils/useQueryString";
-import useScrollTo from "src/hooks/utils/useScrollTo";
+import { useQueryString, useScrollTo } from "src/hooks";
 import {
   getSortOptionsForSelect,
   createSelectOptionFromSortOption,
   commentSortOptions,
   handleCommentCensoringInfo,
   NUMBER_OF_LIST_PLACEHOLDERS
 } from "./helpers";
-import useIdentity from "src/hooks/api/useIdentity";
-import usePaywall from "src/hooks/api/usePaywall";
+import { useIdentity, usePaywall } from "src/hooks";
 import { IdentityMessageError } from "src/components/IdentityErrorIndicators";
 import ModalLogin from "src/components/ModalLogin";
 import useModalContext from "src/hooks/utils/useModalContext";
@@ -35,6 +33,7 @@ import { commentsReducer, initialState, actions } from "./commentsReducer";
 import { getQueryStringValue } from "src/lib/queryString";
 import useLocalStorage from "src/hooks/utils/useLocalStorage";
 import { debounce } from "lodash";
+import { PROPOSAL_UPDATE_HINT } from "src/constants";
 
 const COMMENTS_LOGIN_MODAL_ID = "commentsLoginModal";
 
@@ -288,7 +287,8 @@ const Comments = ({
   className,
   history,
   proposalState,
-  recordBaseLink
+  recordBaseLink,
+  canReceiveAuthorUpdates
 }) => {
   const [, identityError] = useIdentity();
   const { isPaid, paywallEnabled } = usePaywall();
@@ -310,21 +310,30 @@ const Comments = ({
   const [handleOpenModal, handleCloseModal] = useModalContext();
   const { userid } = currentUser || {};
 
-  const onRedirectToSignup = () => {
-    history.push("/user/signup");
-  };
+  const onRedirectToSignup = () => history.push("/user/signup");
 
   const paywallMissing = paywallEnabled && !isPaid;
   const isSingleThread = !!threadParentID;
 
   const handleSubmitComment = useCallback(
-    (comment) =>
-      onSubmitComment({
+    ({ comment, title }) => {
+      // If title is provided then we are dealing with an author
+      // update.
+      let extraData = "",
+        extraDataHint = "";
+      if (title) {
+        extraDataHint = PROPOSAL_UPDATE_HINT;
+        extraData = JSON.stringify({ title });
+      }
+      return onSubmitComment({
         comment,
         token: recordTokenFull,
         parentID: 0,
-        state: proposalState
-      }),
+        state: proposalState,
+        extraData,
+        extraDataHint
+      });
+    },
     [onSubmitComment, proposalState, recordTokenFull]
   );
 
@@ -374,7 +383,7 @@ const Comments = ({
             }>
             <Or>
               {readOnly && (
-                <Message kind="blocked" title={"Comments are not allowed"}>
+                <Message kind="blocked" title="Comments are not allowed">
                   {readOnlyReason}
                 </Message>
               )}
@@ -395,6 +404,7 @@ const Comments = ({
                 persistKey={`commenting-on-${recordToken}`}
                 onSubmit={handleSubmitComment}
                 disableSubmit={!!identityError || paywallMissing}
+                canReceiveAuthorUpdates={canReceiveAuthorUpdates}
               />
             )}
           </LoggedInContent>

src/containers/Comments/CommentsList/CommentsListWrapper.jsx

@@ -1,13 +1,11 @@
 import React, { useState, useEffect } from "react";
 import CommentsList from "./CommentsList";
 
-const getChildren = (comments, commentId, lastTimeAccessed, currentUserID) => {
-  return (
-    comments.filter((comment) => +comment.parentid === +commentId) || []
-  ).map((comment) =>
-    createComputedComment(comment, comments, lastTimeAccessed, currentUserID)
+const getChildren = (comments, commentId, lastTimeAccessed, currentUserID) =>
+  (comments.filter((comment) => +comment.parentid === +commentId) || []).map(
+    (comment) =>
+      createComputedComment(comment, comments, lastTimeAccessed, currentUserID)
   );
-};
 
 const createComputedComment = (
   comment,