onChange

Description

Fires when comments data has been changed

Usage

onChange?: (ev: {
  action: "add" | "update" | "delete";
  id?: string | number;
  comment?: {
    id?: string | number;
    content: string;
    author?: {
      id: string | number;
      name?: string;
      avatar?: string;
      color?: string;
    };
    user?: string | number;
    date?: Date;
    format?: "text" | "markdown" | FormatComponent;
  };
  value: {
    id?: string | number;
    content: string;
    author?: {
      id: string | number;
      name?: string;
      avatar?: string;
      color?: string;
    };
    user?: string | number;
    date?: Date;
    format?: "text" | "markdown" | FormatComponent;
  }[];
  originalValue: {
    id?: string | number;
    content: string;
    author?: {
      id: string | number;
      name?: string;
      avatar?: string;
      color?: string;
    };
    user?: string | number;
    date?: Date;
    format?: "text" | "markdown" | FormatComponent;
  }[] | string | number;
}) => void;

Parameters

ev - an object describing the change event. Contains the following properties:

• action - (required) type of change:

  • "add" - a new comment was added
  • "update" - an existing comment was modified
  • "delete" - a comment was removed

• id - (optional) identifier of the comment being changed. Present for "update" and "delete", omitted for "add".

• comment - (optional) the comment object that was added or updated. Present for "add" and "update", omitted for "delete".
  Fields of comment:

  • id - (optional) unique identifier of the comment
  • content - (required) text of the comment
  • author - (optional) embedded author object:
    • id - (required) unique identifier of the author
    • name - (optional) display name of the author
    • avatar - (optional) URL of the author's avatar
    • color - (optional) color used to style the author's comments
  • user - (optional) ID of a user from the users list
  • date - (optional) timestamp when the comment was posted
  • format - (optional) rendering format: "text" | "markdown" | FormatComponent (refer to format property for description)

• value - (required) array of all current comments after the change, each with the same structure as above.

• originalValue - (required) the initial state of the widget’s value property. Can be:

  • IComment[] - an array of comments (see comment above)
  • string or number - a key or identifier if initialized with a single value

Examples

Handling data changes

import { Comments } from '@svar-ui/react-comments';
import { value } from './data.js';

const handleOnChange = ({ id, action, comment, originalValue }) => {
  console.log(id, action, comment, originalValue);
};

export default function App() {
  return <Comments value={value} onChange={handleOnChange} />;
}

For add operations, onChange does not provide id. For delete operations, onChange does not provide comment. originalValue represents the state of the widget's value property at the time of data loading.

Loading and saving comments through REST helper

import { RestURL } from '@svar-ui/lib-data-provider';
import { Comments } from '@svar-ui/react-comments';

const url = new RestURL('https://some.com/api/comments');

export default function App() {
  return (
    <Comments
      onData={v => url.get(v)}
      onChange={({ action, comment, id, originalValue: v }) =>
        url.path(v).save(action, comment, id)
      }
    />
  );
}

This example demonstrates how to load comments from a REST API and save changes back to the server.

Saving changes in comments through local storage

import { Comments } from '@svar-ui/react-comments';

export default function App() {
  return (
    <Comments
      value={1}
      onData={v => localStorage.getItem(`comments-${v}`)}
      onChange={({ value }) =>
        localStorage.setItem(`comments-${value}`, JSON.stringify(value))
      }
    />
  );
}

This example saves the comments to local storage whenever there is a change in the comments data.