CommentList

The CommentList widget displays a list of comments associated with an entity instance. The widget also displays the user name, time stamp, and any image associated with a comment. A sort menu allows users to sort the comments by time stamp. Comments can be edited and deleted by clicking a link. CommentList is often implemented with the CommentBox widget. The CommentBox widget displays both an input box and a submit button.

Note

Define an event handler to edit and delete comments.

CommentList MarkLogic setup

In order to use the CommentBox and CommentList widgets to manage document comments, the documents must have the appropriate read and update permissions. See Protecting Documents for details.

CommentList example

This React application displays a CommentList widget (along with a CommentBox widget for submitting comments):

import { useContext, useEffect } from "react";
import './App.css';
import { MarkLogicContext, CommentBox, CommentList } from "ml-fasttrack";

function App() {
  const context = useContext(MarkLogicContext);
  useEffect(() => {
    context.getDocument('/person/1001.json');
  }, []);
  const onSubmitComment = async (comment) => {
    let res = await context.patchComment(
      '/person/1001.json', { content: comment, context: "/envelope/array-node('comments')" }
    )
      if (res.success === true) context.getDocument('/person/1001.json'); // Reload after new comment
    }
  const onEditComment = async (commentId, comment) => {
    let res = await context.editComment(
      '/person/1001.json', commentId, { content: comment, context: "/envelope/array-node('comments')" }
    )
    if (res.success === true) context.getDocument('/person/1001.json'); // Reload after edit
  }
  const onDeleteComment = async (commentId) => {
    let res = await context.deleteComment(
      '/person/1001.json', commentId, "/envelope/array-node('comments')"
    )
    if (res.success === true) context.getDocument('/person/1001.json'); // Reload after delete
  }
  return (
    <div className="App">
      <div>
        <div style={{height: '240px'}}>
          <CommentBox
            label="Comments"
            inputPlaceholder="Add a comment"
            buttonLabel="Post"
            username="joe-user"
            imgSrc="https://demos.telerik.com/kendo-ui/content/web/Customers/RICSU.jpg"
            profileImage={{
              alt: 'Avatar',
              path: 'https://demos.telerik.com/kendo-ui/content/web/Customers/RICSU.jpg'
            }}
            onSubmit={(comment) => onSubmitComment(comment)}
          />
          <CommentList
            data={context.documentResponse}
            config={{
              entity: {
                entityType: {
                  path: 'data.envelope.comments'
                }
              }
            }}
            username="joe-user"
            onSaveComment={(id, comment) => onEditComment(id, comment)}
            onDeleteComment={(id) => onDeleteComment(id)}
            numToShow={3}
            numToLoad={2}
          />
        </div>
      </div>
    </div>
  );
}

export default App;

CommentList example rendering

The CommentList example code renders this:

CommentList API

Prop	Type	Description
data	any	Array of comments to display.
config	string	A comments configuration object. The `config.comments.path` value is an XPath to the comments in the `data` prop.
username	string	Username of the current user. For testing, whether the current user is allowed to edit or delete a comment.
headerClassName	string	Class name applied to the header.
headerValue	ReactNode	Optional header for the comment list.
footerClassName	string	Class name applied to the footer.
footerValue	ReactNode	Optional footer for the comment list.
commentContainerStyle	CSSProperties	CSS styles applied to the widget container.
userInfoContainerStyle	CSSProperties	CSS styles applied to the user info container.
imgStyle	CSSProperties	CSS styles applied to the comment image.
usernameStyle	CSSProperties	CSS styles applied to the username.
timestampStyle	CSSProperties	CSS styles applied to the timestamp.
contentStyle	CSSProperties	CSS styles applied to the comment content.
buttonsContainerStyle	CSSProperties	CSS styles applied to the button's container.
editLabel	string	Label for the edit button. The default label is Edit.
editStyle	CSSProperties	CSS styles applied to the edit button.
editPlaceholder	string	Placeholder text for the edit input field.
deleteLabel	string	Label for the delete button. The default label is Delete.
deleteStyle	CSSProperties	CSS styles applied to the delete button.
renderImage	ReactNode	Optional custom React component for rendering an image next to each comment.
saveLabel	string	Label for the Save button. The default label is Save.
cancelLabel	string	Label for the Cancel button. The default label is Cancel.
numToShow	number	Number of comments to show by default. If this is undefined, all the comments are shown.
numToLoad	number	Number of comments to load with the load button. The default is 2.
loadLabel	string	Label for the load button. The default label is Load more comments.
loadStyle	CSSProperties	CSS styles applied to the Load more comments button.
summaryStyle	CSSProperties	CSS styles applied to the button comment summary.
formatTimestamp	function	Callback function to format timestamps. The function receives the comment timestamp as an argument and returns the formatted timestamp.
onSaveComment	(commentId: string, comment: { content: string, ts: string, username: string, imgSrc: string }, onSave: (id: string) => void) => void	Callback function triggered when saving a comment. Receives three parameters: the `commentId`, the comment object, and the `onSave`callback function. The `onSave` callback should be executed to update the widget after a comment is saved.
onDeleteComment	(commentId: string, onDelete: (id: string) => void) => void	Callback function triggered when deleting a comment. Receives two parameters: the commentId, and the `onDelete` callback function. The `onDelete` callback should be executed to update the widget after a comment is deleted.

In this section:

Develop with FastTrack