From e52e8d2664458d15713ba388c07a692986ffa6f9 Mon Sep 17 00:00:00 2001 From: Alexey Kuzniecov Date: Wed, 20 Apr 2022 00:07:22 +0300 Subject: [PATCH 1/2] feat: add option traditional view to comments --- src/components/HypothesisBuilder/comments.js | 205 ++++++++++++++----- 1 file changed, 151 insertions(+), 54 deletions(-) diff --git a/src/components/HypothesisBuilder/comments.js b/src/components/HypothesisBuilder/comments.js index ca3b17da3..d685bb1a8 100644 --- a/src/components/HypothesisBuilder/comments.js +++ b/src/components/HypothesisBuilder/comments.js @@ -1,6 +1,7 @@ import { ChatAltIcon } from "@heroicons/react/solid"; import dayjs from "dayjs"; import React, { useEffect, useState } from "react"; +import clsx from "clsx"; import { getPersons } from "../../api/services/users"; import { CommentInput, CommentText } from "../Comment"; @@ -9,6 +10,126 @@ function getInitials(name) { return matches.slice(0, 2); } +export const DefaultCommentsTimeline = ({ + comments, + onClickUserTag, + getInitials +}) => ( + +); + +export const TraditionalCommentsTimeline = ({ + comments, + onClickUserTag, + getInitials +}) => ( + +); + export function CommentsSection({ comments, titlePrepend, @@ -18,6 +139,7 @@ export function CommentsSection({ const [commentTextValue, setCommentTextValue] = useState(""); const [isLoading, setIsLoading] = useState(false); const [users, setUsers] = useState([]); + const [commentsView, setCommentsView] = useState("Default"); // eslint-disable-next-line no-unused-vars const handleComment = (event) => { @@ -69,63 +191,38 @@ export function CommentsSection({ +
+
Comments view:
+
+ {["Default", "Traditional"].map((view) => ( + + ))} +
+
{comments.length <= 0 ? (
No comments yet
+ ) : commentsView === "Default" ? ( + ) : ( - + )} ); From 82f9e085053c929c17af3b2667fce540f92058f8 Mon Sep 17 00:00:00 2001 From: Alexey Kuzniecov Date: Fri, 22 Apr 2022 11:19:54 +0300 Subject: [PATCH 2/2] refactor: split Comments component into subcomponents --- src/components/HypothesisBuilder/comments.js | 126 +----------------- .../default-comments-timeline.js | 64 +++++++++ .../traditional-comments-timeline.js | 61 +++++++++ 3 files changed, 128 insertions(+), 123 deletions(-) create mode 100644 src/components/HypothesisBuilder/default-comments-timeline.js create mode 100644 src/components/HypothesisBuilder/traditional-comments-timeline.js diff --git a/src/components/HypothesisBuilder/comments.js b/src/components/HypothesisBuilder/comments.js index d685bb1a8..dc4e0cf14 100644 --- a/src/components/HypothesisBuilder/comments.js +++ b/src/components/HypothesisBuilder/comments.js @@ -1,135 +1,15 @@ -import { ChatAltIcon } from "@heroicons/react/solid"; -import dayjs from "dayjs"; import React, { useEffect, useState } from "react"; import clsx from "clsx"; import { getPersons } from "../../api/services/users"; -import { CommentInput, CommentText } from "../Comment"; +import { CommentInput } from "../Comment"; +import { DefaultCommentsTimeline } from "./default-comments-timeline"; +import { TraditionalCommentsTimeline } from "./traditional-comments-timeline"; function getInitials(name) { const matches = name.match(/\b(\w)/g); return matches.slice(0, 2); } -export const DefaultCommentsTimeline = ({ - comments, - onClickUserTag, - getInitials -}) => ( -
    - {comments.map((comment) => ( -
  • -
    -
    -
    - {comment.imageUrl ? ( - - ) : ( -
    - {getInitials(comment.created_by.name)} -
    - )} - - - -
    -
    -
    -
    - - {comment.created_by.name} - -
    -

    - commented {dayjs(comment.created_at).fromNow()} -

    -
    -
    -

    - -

    -
    -
    -
    -
    -
    • - ))} -
-); - -export const TraditionalCommentsTimeline = ({ - comments, - onClickUserTag, - getInitials -}) => ( -
    - {comments.map((comment) => ( -
  • -
    -
    -
    - - {`[${comment?.subject || "No subject"}]`} - -
    -
    - - {`[${comment.created_by.name}]`} - -
    -
    - {comment.imageUrl ? ( - - ) : ( -
    - {getInitials(comment.created_by.name)} -
    - )} -
    -
    -
    -

    - -

    -
    -
    -
    -

    - {dayjs(comment.created_at).fromNow()} -

    -
    -
    -
    -
    • - ))} -
-); - export function CommentsSection({ comments, titlePrepend, diff --git a/src/components/HypothesisBuilder/default-comments-timeline.js b/src/components/HypothesisBuilder/default-comments-timeline.js new file mode 100644 index 000000000..10e0708e1 --- /dev/null +++ b/src/components/HypothesisBuilder/default-comments-timeline.js @@ -0,0 +1,64 @@ +import { ChatAltIcon } from "@heroicons/react/solid"; +import dayjs from "dayjs"; +import { CommentText } from "../Comment"; + +export const DefaultCommentsTimeline = ({ + comments, + onClickUserTag, + getInitials +}) => ( +
    + {comments.map((comment) => ( +
  • +
    +
    +
    + {comment.imageUrl ? ( + + ) : ( +
    + {getInitials(comment.created_by.name)} +
    + )} + + + +
    +
    +
    +
    + + {comment.created_by.name} + +
    +

    + commented {dayjs(comment.created_at).fromNow()} +

    +
    +
    +

    + +

    +
    +
    +
    +
    +
    • + ))} +
+); diff --git a/src/components/HypothesisBuilder/traditional-comments-timeline.js b/src/components/HypothesisBuilder/traditional-comments-timeline.js new file mode 100644 index 000000000..ff38e6bf7 --- /dev/null +++ b/src/components/HypothesisBuilder/traditional-comments-timeline.js @@ -0,0 +1,61 @@ +import dayjs from "dayjs"; +import { CommentText } from "../Comment"; + +export const TraditionalCommentsTimeline = ({ + comments, + onClickUserTag, + getInitials +}) => ( +
    + {comments.map((comment) => ( +
  • +
    +
    +
    + + {`[${comment?.subject || "No subject"}]`} + +
    +
    + + {`[${comment.created_by.name}]`} + +
    +
    + {comment.imageUrl ? ( + + ) : ( +
    + {getInitials(comment.created_by.name)} +
    + )} +
    +
    +
    +

    + +

    +
    +
    +
    +

    + {dayjs(comment.created_at).fromNow()} +

    +
    +
    +
    +
    • + ))} +
+);