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

datocms-plugin-record-comments 0.2.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 (25) 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 +43 -43
package/build/asset-manifest.json +0 -13
package/build/index.html +0 -1
package/build/robots.txt +0 -3
package/build/static/css/main.19c0232f.css +0 -2
package/build/static/css/main.19c0232f.css.map +0 -1
package/build/static/js/main.255a6b09.js +0 -3
package/build/static/js/main.255a6b09.js.LICENSE.txt +0 -59
package/build/static/js/main.255a6b09.js.map +0 -1
package/public/index.html +0 -11
package/public/robots.txt +0 -3
package/src/entrypoints/CommentsBar.tsx +0 -254
package/src/entrypoints/NoLogModal.tsx +0 -43
package/src/entrypoints/components/Comment.tsx +0 -260
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 -45
package/src/react-app-env.d.ts +0 -1
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,254 +0,0 @@
-import { RenderItemFormSidebarPanelCtx } from "datocms-plugin-sdk";
-import {
-  AccountAttributes,
-  UserAttributes,
-} from "datocms-plugin-sdk/dist/types/SiteApiSchema";
-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;
-};
-const CommentsBar = ({ ctx }: PropTypes) => {
-  //this component is way too big, i should split it into smaller ones
-  const userEmail = (ctx.currentUser.attributes as UserAttributes)
-    .email as string;
-  const userName =
-    (ctx.currentUser.attributes as UserAttributes).full_name ||
-    `${(ctx.currentUser.attributes! as AccountAttributes).first_name} ${
-      (ctx.currentUser.attributes as AccountAttributes).last_name
-    }`;
-  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(`/admin/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,260 +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 {
-  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) => {
-  //this component is way too big, i should split it into smaller ones
-  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 md5 = require("md5");
-  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;

package/src/entrypoints/styles/comment.module.css DELETED Viewed

@@ -1,134 +0,0 @@
-.comment-main {
-  display: flex;
-  justify-content: space-around;
-}
-.author-profile-picture {
-  border-radius: 5px;
-  width: 50px;
-}
-.comment__buttons {
-  display: flex;
-  justify-content: left;
-}
-.comment__button {
-  background-color: transparent;
-  border: none;
-  color: var(--light-body-color);
-}
-.comment__button:hover {
-  cursor: pointer;
-  color: var(--dark-color);
-}
-.comment {
-  margin-bottom: 3em;
-}
-.reply {
-  margin-bottom: 0;
-}
-.author-info {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 1em;
-  flex-grow: 1;
-}
-.reply {
-  margin-left: 30px;
-}
-.comment-body {
-  flex-grow: 8;
-}
-.comment-textarea {
-  background-color: var(--lighter-bg-color);
-  border: solid var(--border-color);
-  resize: none;
-  font: inherit;
-  width: 100%;
-}
-.comment-footer {
-  font-size: var(--font-size-s);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.comment__buttons {
-  display: flex;
-  flex-direction: column;
-  align-items: baseline;
-  width: 90%;
-}
-.comment__timestamps {
-  color: var(--light-body-color);
-  font-size: var(--font-size-xs);
-}
-.tip {
-  width: 0px;
-  height: 0px;
-  position: absolute;
-  background: transparent;
-  border: 10px solid var(--light-bg-color);
-}
-.tip-down {
-  bottom: -25px;
-  left: 10px;
-  border-right-color: transparent;
-  border-left-color: transparent;
-  border-bottom-color: transparent;
-}
-.dialogbox .body {
-  position: relative;
-  max-width: 300px;
-  height: auto;
-  padding: 5px;
-  background-color: var(--light-bg-color);
-  border-radius: 3px;
-  border: 5px solid var(--light-bg-color);
-}
-.body .message {
-  border-radius: 3px;
-  font-size: var(--font-size-s);
-}
-.reply-line {
-  content: "";
-  width: 2px;
-  height: 80px;
-  background: var(--darker-border-color);
-  position: absolute;
-  left: 32px;
-}
-.reply-profile-picture-line {
-  content: "";
-  width: 30px;
-  height: 2px;
-  background: var(--darker-border-color);
-  position: absolute;
-  left: 32px;
-  z-index: -1;
-}
-.upvoted {
-  color: var(--dark-color);
-}
-.comment__interface {
-  color: var(--light-body-color);
-}

package/src/entrypoints/styles/commentbar.module.css DELETED Viewed

@@ -1,3 +0,0 @@
-.add-comment-button {
-  margin-bottom: 1.4em;
-}