npm - datocms-plugin-record-comments - Versions diffs - 0.3.0 → 1.0.0 - Mend

datocms-plugin-record-comments 0.3.0 → 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (26) hide show

package/README.md +64 -4
package/dist/assets/index-D7VcKz6i.css +1 -0
package/dist/assets/index-UKydYRNj.js +251 -0
package/dist/index.html +17 -0
package/package.json +42 -44
package/build/asset-manifest.json +0 -13
package/build/index.html +0 -1
package/build/robots.txt +0 -3
package/build/static/css/main.13d44d44.css +0 -2
package/build/static/css/main.13d44d44.css.map +0 -1
package/build/static/js/main.bce144d4.js +0 -3
package/build/static/js/main.bce144d4.js.LICENSE.txt +0 -59
package/build/static/js/main.bce144d4.js.map +0 -1
package/public/index.html +0 -11
package/public/robots.txt +0 -3
package/src/entrypoints/CommentsBar.tsx +0 -347
package/src/entrypoints/NoLogModal.tsx +0 -43
package/src/entrypoints/components/Comment.tsx +0 -259
package/src/entrypoints/styles/comment.module.css +0 -134
package/src/entrypoints/styles/commentbar.module.css +0 -3
package/src/entrypoints/styles/modal.module.css +0 -13
package/src/index.tsx +0 -44
package/src/react-app-env.d.ts +0 -1
package/src/types/md5.d.ts +0 -4
package/src/utils/render.tsx +0 -6
package/tsconfig.json +0 -26

package/public/index.html DELETED Viewed

@@ -1,11 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-  </body>
-</html>

package/public/robots.txt DELETED Viewed

@@ -1,3 +0,0 @@
-# https://www.robotstxt.org/robotstxt.html
-User-agent: *
-Disallow:

package/src/entrypoints/CommentsBar.tsx DELETED Viewed

@@ -1,347 +0,0 @@
-import { RenderItemFormSidebarPanelCtx } from 'datocms-plugin-sdk';
-import type { SimpleSchemaTypes } from '@datocms/cma-client-node';
-import { Button, Canvas } from 'datocms-react-ui';
-import { useEffect, useState } from 'react';
-import Comment from './components/Comment';
-import styles from './styles/commentbar.module.css';
-type PropTypes = {
-  ctx: RenderItemFormSidebarPanelCtx;
-};
-export type CommentType = {
-  dateISO: string;
-  comment: string;
-  author: {
-    name: string;
-    email: string;
-  };
-  usersWhoUpvoted: string[];
-  replies?: CommentType[];
-  parentCommentISO?: string;
-};
-// Regular DatoCMS user
-type RegularUser = {
-  type: 'user';
-  id: string;
-  attributes: {
-    email: string;
-    first_name: string;
-    last_name: string;
-  };
-};
-// SSO user from external provider
-type SsoUser = {
-  type: 'sso_user';
-  id: string;
-  attributes: {
-    email: string;
-    name: string;
-  };
-};
-// Account user (personal account)
-type Account = {
-  type: 'account';
-  id: string;
-  attributes: {
-    email: string;
-    name: string;
-  };
-};
-// Organization user
-type Organization = {
-  type: 'organization';
-  id: string;
-  attributes: {
-    name: string;
-  };
-};
-const isRegularUser = (user: any): user is RegularUser => {
-  return (
-    user?.type === 'user' &&
-    'attributes' in user &&
-    'email' in user.attributes &&
-    'full_name' in user.attributes
-  );
-};
-const isSsoUser = (user: any): user is SsoUser => {
-  return (
-    user?.type === 'sso_user' &&
-    'attributes' in user &&
-    'email' in user.attributes &&
-    'name' in user.attributes
-  );
-};
-const isAccount = (user: any): user is Account => {
-  return (
-    user?.type === 'account' &&
-    'attributes' in user &&
-    'email' in user.attributes &&
-    'name' in user.attributes
-  );
-};
-const isOrganization = (user: any): user is Organization => {
-  return (
-    user?.type === 'organization' &&
-    'attributes' in user &&
-    'name' in user.attributes
-  );
-};
-const CommentsBar = ({ ctx }: PropTypes) => {
-  //this component is way too big, i should split it into smaller ones
-  const getUserEmail = (user: typeof ctx.currentUser): string => {
-    if (isRegularUser(user)) return user.attributes.email;
-    if (isSsoUser(user)) return user.attributes.email;
-    if (isAccount(user)) return user.attributes.email;
-    if (isOrganization(user)) return `organization-access`;
-    return 'unknown@email.com';
-  };
-  const getUserName = (user: typeof ctx.currentUser): string => {
-    if (isRegularUser(user)) {
-      return user.attributes.full_name;
-    }
-    if (isSsoUser(user)) {
-      return user.attributes.name;
-    }
-    if (isAccount(user)) {
-      return user.attributes.name;
-    }
-    if (isOrganization(user)) {
-      return user.attributes.name;
-    }
-    const email = getUserEmail(user);
-    return email.split('@')[0];
-  };
-  const userEmail = getUserEmail(ctx.currentUser);
-  const userName = getUserName(ctx.currentUser);
-  let foundLog = false;
-  for (const field in ctx.fields) {
-    if (
-      ctx.fields[field]?.attributes.field_type === 'json' &&
-      'comment_log' === ctx.fields[field]?.attributes.api_key
-    ) {
-      foundLog = true;
-      break;
-    }
-  }
-  if (foundLog) {
-    ctx.disableField('comment_log', true);
-  }
-  const initialState =
-    foundLog && ctx.formValues.comment_log
-      ? (JSON.parse(ctx.formValues.comment_log as string) as CommentType[])
-      : [];
-  const [savedComments, setSavedComments] =
-    useState<CommentType[]>(initialState);
-  const handleOpenLogModal = async () => {
-    const result = await ctx.openModal({
-      id: 'NoLogModal',
-      title: "Didn't find a log",
-      width: 'l',
-    });
-    if (result === 'goToModelEdit') {
-      ctx.navigateTo(`/schema/item_types/${ctx.itemType.id}`);
-    }
-  };
-  const saveCommentHandler = () => {
-    if (!foundLog) {
-      handleOpenLogModal();
-      return;
-    }
-    const newComment: CommentType = {
-      dateISO: new Date().toISOString(),
-      comment: '',
-      author: {
-        name: userName,
-        email: userEmail,
-      },
-      usersWhoUpvoted: [],
-      replies: [],
-    };
-    setSavedComments((oldComments: CommentType[]) => {
-      const newComments = [...oldComments];
-      newComments.unshift(newComment);
-      return newComments;
-    });
-  };
-  const deleteCommentHandler = (
-    dateISO: string,
-    parentCommentISO: string = ''
-  ) => {
-    if (parentCommentISO) {
-      setSavedComments((oldComments: CommentType[]) => {
-        const newCommentsIntermediary = [...oldComments];
-        const parentComment = newCommentsIntermediary.find(
-          (comment) => comment.dateISO === parentCommentISO
-        );
-        parentComment!.replies = parentComment!.replies!.filter(
-          (comment) => comment.dateISO !== dateISO
-        );
-        const newComments = newCommentsIntermediary;
-        return newComments;
-      });
-    } else {
-      setSavedComments((oldComments: CommentType[]) => {
-        const newCommentsIntermediary = [...oldComments];
-        const newComments = newCommentsIntermediary.filter(
-          (comment) => comment.dateISO !== dateISO
-        );
-        return newComments;
-      });
-    }
-  };
-  const editCommentHandler = (
-    dateISO: string,
-    newValue: string,
-    parentCommentISO: string = ''
-  ) => {
-    if (parentCommentISO) {
-      setSavedComments((oldComments: CommentType[]) => {
-        const newComments = [...oldComments];
-        const parentComment = newComments.find(
-          (comment) => comment.dateISO === parentCommentISO
-        );
-        const reply = parentComment!.replies!.find(
-          (comment: CommentType) => comment.dateISO === dateISO
-        );
-        reply!.comment = newValue;
-        return newComments;
-      });
-    } else {
-      setSavedComments((oldComments: CommentType[]) => {
-        const newComments = [...oldComments];
-        newComments.find((comment) => comment.dateISO === dateISO)!.comment =
-          newValue;
-        return newComments;
-      });
-    }
-  };
-  const upvoteCommentHandler = (
-    dateISO: string,
-    userUpvotedThisComment: boolean,
-    parentCommentISO: string = ''
-  ) => {
-    if (parentCommentISO) {
-      setSavedComments((oldComments: CommentType[]) => {
-        const newComments = [...oldComments];
-        const parentComment = newComments.find(
-          (comment) => comment.dateISO === parentCommentISO
-        );
-        const reply = parentComment!.replies!.find(
-          (comment: CommentType) => comment.dateISO === dateISO
-        );
-        if (userUpvotedThisComment) {
-          reply!.usersWhoUpvoted = reply!.usersWhoUpvoted.filter(
-            (userWhoUpvotedThisComment) =>
-              userWhoUpvotedThisComment !== userEmail
-          );
-        } else {
-          reply!.usersWhoUpvoted.push(userEmail);
-        }
-        return newComments;
-      });
-    } else {
-      setSavedComments((oldComments: CommentType[]) => {
-        const newComments = [...oldComments];
-        const upvotedComment = newComments.find(
-          (comment) => comment.dateISO === dateISO
-        );
-        if (userUpvotedThisComment) {
-          upvotedComment!.usersWhoUpvoted =
-            upvotedComment!.usersWhoUpvoted.filter(
-              (userWhoUpvotedThisComment) =>
-                userWhoUpvotedThisComment !== userEmail
-            );
-        } else {
-          upvotedComment!.usersWhoUpvoted.push(userEmail);
-        }
-        return newComments;
-      });
-    }
-  };
-  const replyCommentHandler = (parentCommentISO: string) => {
-    const newComment: CommentType = {
-      dateISO: new Date().toISOString(),
-      comment: '',
-      author: {
-        name: userName,
-        email: userEmail,
-      },
-      usersWhoUpvoted: [],
-      parentCommentISO,
-    };
-    setSavedComments((oldComments: CommentType[]) => {
-      const newComments = [...oldComments];
-      newComments
-        .find((comment) => comment.dateISO === parentCommentISO)
-        ?.replies?.unshift(newComment);
-      return newComments;
-    });
-  };
-  useEffect(() => {
-    const objectIsEmpty = !Object.keys(savedComments).length;
-    if (foundLog && objectIsEmpty) {
-      ctx.setFieldValue('comment_log', null);
-    } else if (foundLog) {
-      const formatedComments = JSON.stringify(savedComments, null, 2);
-      const stateIsEqualToLog =
-        formatedComments === (ctx.formValues.comment_log as string);
-      if (!stateIsEqualToLog) {
-        ctx.setFieldValue('comment_log', formatedComments);
-      }
-    }
-  }, [savedComments, ctx, foundLog]);
-  return (
-    <Canvas ctx={ctx}>
-      <Button
-        fullWidth
-        className={styles['add-comment-button']}
-        onClick={saveCommentHandler}
-      >
-        Add a new comment...
-      </Button>
-      {foundLog &&
-        savedComments.map((comment) => {
-          return (
-            <Comment
-              key={comment.dateISO}
-              deleteComment={deleteCommentHandler}
-              editComment={editCommentHandler}
-              upvoteComment={upvoteCommentHandler}
-              replyComment={replyCommentHandler}
-              commentObject={comment}
-              currentUserEmail={userEmail}
-            />
-          );
-        })}
-    </Canvas>
-  );
-};
-export default CommentsBar;

package/src/entrypoints/NoLogModal.tsx DELETED Viewed

@@ -1,43 +0,0 @@
-import { RenderModalCtx } from "datocms-plugin-sdk";
-import { Button, Canvas } from "datocms-react-ui";
-import styles from "./styles/modal.module.css";
-type PropTypes = {
-  ctx: RenderModalCtx;
-};
-const NoLogModal = ({ ctx }: PropTypes) => {
-  const handleCancel = () => {
-    ctx.resolve("cancel");
-  };
-  const handleGoToModel = () => {
-    ctx.resolve("goToModelEdit");
-  };
-  return (
-    <Canvas ctx={ctx}>
-      <div className={styles["error-explanation"]}>
-        <h2>A field is missing from your model!</h2>
-        <p>
-          You need to create a "comment log" JSON field on this model to save
-          comments.
-        </p>
-        <p className={styles["note"]}>
-          Note that the field must be of type "JSON" and its API key must be
-          "comment_log"
-        </p>
-      </div>
-      <div className={styles["buttons"]}>
-        <Button buttonType="negative" buttonSize="l" onClick={handleCancel}>
-          Cancel
-        </Button>
-        <Button buttonType="primary" buttonSize="l" onClick={handleGoToModel}>
-          Go to model editing
-        </Button>
-      </div>
-    </Canvas>
-  );
-};
-export default NoLogModal;

package/src/entrypoints/components/Comment.tsx DELETED Viewed

@@ -1,259 +0,0 @@
-import React, { useEffect, useRef, useState } from "react";
-import styles from "../styles/comment.module.css";
-import Textarea from "react-textarea-autosize";
-import ReactTimeAgo from "react-time-ago";
-import { CommentType } from "../CommentsBar";
-import md5 from "md5";
-import {
-  faChevronUp,
-  faPen,
-  faReply,
-  faSave,
-  faTrashAlt,
-} from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-type commentProps = {
-  deleteComment: (dateISO: string, parentCommentISO?: string) => void;
-  editComment: (
-    dateISO: string,
-    newValue: string,
-    parentCommentISO?: string
-  ) => void;
-  upvoteComment: (
-    dateISO: string,
-    userUpvotedThisComment: boolean,
-    parentCommentISO?: string
-  ) => void;
-  replyComment: (parentCommentISO: string) => void;
-  commentObject: CommentType;
-  currentUserEmail: string;
-};
-const Comment: React.FC<commentProps> = (props) => {
-  const userUpvotedThisComment = !!props.commentObject.usersWhoUpvoted.find(
-    (userWhoUpvoted) => userWhoUpvoted === props.currentUserEmail
-  );
-  const commentSpan = useRef<HTMLDivElement>(null);
-  const [textAreaHeight, setTextAreaHeight] = useState(21);
-  const [isEditing, setIsEditing] = useState(!props.commentObject.comment);
-  const isNotAReply = "replies" in props.commentObject;
-  const userIsAuthor =
-    props.commentObject.author.email === props.currentUserEmail;
-  const authorProfilePictureUrl =
-    "https://www.gravatar.com/avatar/" +
-    md5(props.commentObject.author.email || '') +
-    "?d=mp";
-  const replyClasses = isNotAReply ? "" : " " + styles.reply;
-  const commentClasses = styles.comment + replyClasses;
-  const [textAreaValue, setTextAreaValue] = useState(
-    props.commentObject.comment
-  );
-  const toggleEdit = () => {
-    setIsEditing(true);
-  };
-  const editCommentHandler = () => {
-    if (!textAreaValue.trim()) {
-      return;
-    }
-    setIsEditing(false);
-    if (isNotAReply) {
-      props.editComment(props.commentObject.dateISO, textAreaValue);
-    } else {
-      props.editComment(
-        props.commentObject.dateISO,
-        textAreaValue,
-        props.commentObject.parentCommentISO
-      );
-    }
-  };
-  const deleteCommentHanlder = () => {
-    if (isNotAReply) {
-      props.deleteComment(props.commentObject.dateISO);
-    } else {
-      props.deleteComment(
-        props.commentObject.dateISO,
-        props.commentObject.parentCommentISO
-      );
-    }
-  };
-  const upvoteCommentHandler = () => {
-    if (isNotAReply) {
-      props.upvoteComment(props.commentObject.dateISO, userUpvotedThisComment);
-    } else {
-      props.upvoteComment(
-        props.commentObject.dateISO,
-        userUpvotedThisComment,
-        props.commentObject.parentCommentISO
-      );
-    }
-  };
-  const replyCommentHandler = () => {
-    props.replyComment(props.commentObject.dateISO);
-  };
-  const enterKeyHandler = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
-    if (event.key === "Enter") {
-      editCommentHandler();
-    }
-  };
-  const heightChangeHandler = (height: number) => {
-    setTextAreaHeight(height);
-  };
-  useEffect(() => {
-    const spanHeight = commentSpan.current?.clientHeight;
-    setTextAreaHeight(spanHeight!);
-  }, [commentSpan]);
-  const focousHandler = (event: React.FocusEvent<HTMLTextAreaElement>) => {
-    event.currentTarget.setSelectionRange(
-      event.currentTarget.value.length,
-      event.currentTarget.value.length
-    );
-  };
-  return (
-    <div className={commentClasses}>
-      {!isNotAReply && (
-        <div
-          style={{ height: 100 + textAreaHeight }}
-          className={styles["reply-line"]}
-        ></div>
-      )}
-      <div className={styles["comment-main"]}>
-        <div className={styles["comment-body"]}>
-          {isEditing && (
-            <div className={styles["dialogbox"]}>
-              <div className={styles["body"]}>
-                <span
-                  className={styles["tip"] + " " + styles["tip-down"]}
-                ></span>
-                <div className={styles["message"]}>
-                  <Textarea
-                    autoFocus
-                    onFocus={focousHandler}
-                    onHeightChange={heightChangeHandler}
-                    onKeyPress={enterKeyHandler}
-                    onChange={(event) => setTextAreaValue(event.target.value)}
-                    value={textAreaValue}
-                    className={styles["comment-textarea"]}
-                  />
-                </div>
-              </div>
-            </div>
-          )}
-          {!isEditing && (
-            <div ref={commentSpan} className={styles["dialogbox"]}>
-              <div className={styles["body"]}>
-                <span
-                  className={styles["tip"] + " " + styles["tip-down"]}
-                ></span>
-                <div className={styles["message"]}>
-                  <span>{textAreaValue}</span>
-                </div>
-              </div>
-            </div>
-          )}
-          <div
-            className={`${styles["comment__footer"]} ${styles["comments__item__timestamp"]}`}
-          >
-            <div className={styles["comment-footer"]}>
-              <div className={styles["author-info"]}>
-                <img
-                  className={styles["author-profile-picture"]}
-                  src={authorProfilePictureUrl}
-                  alt={props.commentObject.author.name}
-                />
-              </div>
-              {!isNotAReply && (
-                <div className={styles["reply-profile-picture-line"]}></div>
-              )}
-              <div className={styles["comment__buttons"]}>
-                <div>
-                  <span>{props.commentObject.author.name}</span>
-                </div>
-                <div className={styles["comment__timestamps"]}>
-                  <ReactTimeAgo date={new Date(props.commentObject.dateISO)} />
-                </div>
-                <div className={styles["comment__interface"]}>
-                  <span
-                    className={userUpvotedThisComment ? styles["upvoted"] : ""}
-                  >
-                    {props.commentObject.usersWhoUpvoted.length}
-                  </span>
-                  <button
-                    className={`${styles["comment__button"]} ${
-                      styles["upvotes"]
-                    } ${userUpvotedThisComment ? styles["upvoted"] : ""}`}
-                    onClick={upvoteCommentHandler}
-                  >
-                    <FontAwesomeIcon icon={faChevronUp} />
-                  </button>
-                  {userIsAuthor && props.commentObject.comment && !isEditing ? (
-                    <button
-                      className={styles["comment__button"]}
-                      onClick={toggleEdit}
-                    >
-                      <FontAwesomeIcon icon={faPen} />
-                    </button>
-                  ) : userIsAuthor ? (
-                    <button
-                      className={styles["comment__button"]}
-                      onClick={editCommentHandler}
-                    >
-                      <FontAwesomeIcon icon={faSave} />
-                    </button>
-                  ) : null}
-                  {userIsAuthor && (
-                    <button
-                      className={styles["comment__button"]}
-                      onClick={deleteCommentHanlder}
-                    >
-                      <FontAwesomeIcon icon={faTrashAlt} />
-                    </button>
-                  )}
-                  {isNotAReply && (
-                    <button
-                      className={styles["comment__button"]}
-                      onClick={replyCommentHandler}
-                    >
-                      <FontAwesomeIcon icon={faReply} />
-                    </button>
-                  )}
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      {isNotAReply && (
-        <div className={styles["comments__replies__item"]}>
-          {props.commentObject.replies?.map((reply) => {
-            return (
-              <Comment
-                key={reply.dateISO}
-                deleteComment={props.deleteComment}
-                editComment={props.editComment}
-                upvoteComment={props.upvoteComment}
-                replyComment={props.replyComment}
-                commentObject={reply}
-                currentUserEmail={props.currentUserEmail}
-              />
-            );
-          })}
-        </div>
-      )}
-    </div>
-  );
-};
-export default Comment;