comments highlight

src/components/media/AudioPlayer/styles.scss

@@ -1,6 +1,11 @@
 .wrap {
   display: flex;
   flex-direction: row;
+  height: $comment_height;
+  position: relative;
+  align-items: center;
+  justify-content: stretch;
+  flex: 1;
 
   &:global(.playing) {
     .progress {

src/components/node/Comment/index.tsx

@@ -1,73 +1,39 @@
-import React, { FC, HTMLAttributes, useMemo } from 'react';
+import React, { FC, HTMLAttributes } from 'react';
 import { CommentWrapper } from '~/components/containers/CommentWrapper';
-import { IComment, IFile } from '~/redux/types';
+import { ICommentGroup } from '~/redux/types';
+import { getURL } from '~/utils/dom';
+import { CommentContent } from '~/components/node/CommentContent';
 import * as styles from './styles.scss';
-import { formatCommentText, getURL, getPrettyDate } from '~/utils/dom';
-import { Group } from '~/components/containers/Group';
-import assocPath from 'ramda/es/assocPath';
-import append from 'ramda/es/append';
-import reduce from 'ramda/es/reduce';
-import { UPLOAD_TYPES } from '~/redux/uploads/constants';
-import { AudioPlayer } from '~/components/media/AudioPlayer';
 
 type IProps = HTMLAttributes<HTMLDivElement> & {
   is_empty?: boolean;
   is_loading?: boolean;
-  comment?: IComment;
+  comment_group?: ICommentGroup;
   is_same?: boolean;
 };
 
-const Comment: FC<IProps> = ({ comment, is_empty, is_same, is_loading, className, ...props }) => {
+const Comment: FC<IProps> = ({
-  const groupped = useMemo<Record<keyof typeof UPLOAD_TYPES, IFile[]>>(
+  comment_group,
-    () =>
+  is_empty,
-      reduce(
+  is_same,
-        (group, file) => assocPath([file.type], append(file, group[file.type]), group),
+  is_loading,
-        {},
+  className,
-        comment.files
+  ...props
-      ),
+}) => {
-    [comment]
-  );
-
   return (
     <CommentWrapper
       className={className}
       is_empty={is_empty}
       is_loading={is_loading}
-      photo={getURL(comment.user.photo)}
+      photo={getURL(comment_group.user.photo)}
       is_same={is_same}
       {...props}
     >
-      {comment.text && (
+      <div className={styles.wrap}>
-        <Group
+        {comment_group.comments.map(comment => (
-          className={styles.text}
+          <CommentContent comment={comment} key={comment.id} />
-          dangerouslySetInnerHTML={{
-            __html: formatCommentText(
-              !is_same && comment.user && comment.user.username,
-              comment.text
-            ),
-          }}
-        />
-      )}
-
-      <div className={styles.date}>{getPrettyDate(comment.created_at)}</div>
-
-      {groupped.image && (
-        <div className={styles.images}>
-          {groupped.image.map(file => (
-            <div key={file.id}>
-              <img src={getURL(file)} alt={file.name} />
-            </div>
         ))}
       </div>
-      )}
-
-      {groupped.audio && (
-        <div className={styles.audios}>
-          {groupped.audio.map(file => (
-            <AudioPlayer key={file.id} file={file} />
-          ))}
-        </div>
-      )}
     </CommentWrapper>
   );
 };

src/components/node/Comment/styles.scss

@@ -1,48 +1,2 @@
-@import 'flexbin/flexbin.scss';
+.wrap {
-
-.text {
-  // @include outer_shadow();
-
-  padding: $gap;
-  font-weight: 300;
-  font: $font_16_medium;
-  min-height: $comment_height;
-  box-sizing: border-box;
-  position: relative;
-  color: #cccccc;
-
-  b {
-    font-weight: 600;
-  }
-}
-
-.date {
-  position: absolute;
-  bottom: 0;
-  right: 0;
-  font: $font_12_regular;
-  color: transparentize($color: white, $amount: 0.8);
-  padding: 2px 4px;
-  border-radius: 0 0 $radius 0;
-}
-
-.images {
-  @include flexbin(240px, 5px);
-
-  img {
-    border-radius: $radius;
-  }
-}
-
-.audios {
-  & > div {
-    @include outer_shadow();
-
-    height: $comment_height;
-    border-radius: $radius;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    text-align: center;
-  }
 }

src/components/node/CommentContent/index.tsx

@@ -0,0 +1,79 @@
+import React, { FC, useMemo } from 'react';
+import { IComment, IFile } from '~/redux/types';
+import path from 'ramda/es/path';
+import { formatCommentText, getURL } from '~/utils/dom';
+import { Group } from '~/components/containers/Group';
+import * as styles from './styles.scss';
+import { UPLOAD_TYPES } from '~/redux/uploads/constants';
+import assocPath from 'ramda/es/assocPath';
+import append from 'ramda/es/append';
+import reduce from 'ramda/es/reduce';
+import { AudioPlayer } from '~/components/media/AudioPlayer';
+import classnames from 'classnames';
+
+interface IProps {
+  comment: IComment;
+}
+
+const CommentContent: FC<IProps> = ({ comment }) => {
+  const groupped = useMemo<Record<keyof typeof UPLOAD_TYPES, IFile[]>>(
+    () =>
+      reduce(
+        (group, file) => assocPath([file.type], append(file, group[file.type]), group),
+        {},
+        comment.files
+      ),
+    [comment]
+  );
+
+  return (
+    <>
+      {comment.text && (
+        <div className={styles.block}>
+          <Group
+            className={styles.text}
+            dangerouslySetInnerHTML={{
+              __html: formatCommentText(path(['user', 'username'], comment), comment.text),
+            }}
+          />
+        </div>
+      )}
+
+      {groupped.image && groupped.image.length > 0 && (
+        <div className={styles.block}>
+          <div className={styles.images}>
+            {groupped.image.map(file => (
+              <div key={file.id}>
+                <img src={getURL(file)} alt={file.name} />
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {groupped.audio && groupped.audio.length > 0 && (
+        <>
+          {groupped.audio.map(file => (
+            <div className={classnames(styles.block, styles.audio_block)} key={file.id}>
+              <AudioPlayer file={file} />
+            </div>
+          ))}
+        </>
+      )}
+    </>
+  );
+};
+
+export { CommentContent };
+
+/*
+{comment.text && (
+        
+      )}
+
+      <div className={styles.date}>{getPrettyDate(comment.created_at)}</div>
+
+
+
+
+      */

src/components/node/CommentContent/styles.scss

@@ -0,0 +1,65 @@
+@import 'flexbin/flexbin.scss';
+
+.block {
+  min-height: $comment_height;
+  box-shadow: inset rgba(255, 255, 255, 0.05) 1px 1px, inset rgba(0, 0, 0, 0.1) -1px -1px;
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-start;
+
+  &:first-child {
+    border-top-right-radius: $radius;
+  }
+
+  &:last-child {
+    border-bottom-right-radius: $radius;
+  }
+}
+
+.block_audio {
+  align-items: center;
+  justify-content: center;
+}
+
+.text {
+  padding: $gap;
+  font-weight: 300;
+  font: $font_16_medium;
+  line-height: 20px;
+  box-sizing: border-box;
+  position: relative;
+  color: #cccccc;
+
+  b {
+    font-weight: 600;
+  }
+}
+
+.date {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  font: $font_12_regular;
+  color: transparentize($color: white, $amount: 0.8);
+  padding: 2px 4px;
+  border-radius: 0 0 $radius 0;
+}
+
+.images {
+  @include flexbin(240px, 5px);
+
+  img {
+    border-radius: $radius;
+  }
+}
+
+.audios {
+  & > div {
+    height: $comment_height;
+    border-radius: $radius;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+  }
+}

src/components/node/NodeComments/index.tsx

@@ -1,24 +1,29 @@
-import React, { FC } from 'react';
+import React, { FC, useMemo } from 'react';
 import { Comment } from '../Comment';
 import { Filler } from '~/components/containers/Filler';
 
 import * as styles from './styles.scss';
+import { ICommentGroup, IComment } from '~/redux/types';
+import { groupCommentsByUser } from '~/utils/fn';
 
 interface IProps {
-  comments?: any;
+  comments?: IComment[];
 }
 
-const isSameComment = (comments, index) =>
+const NodeComments: FC<IProps> = ({ comments }) => {
-  comments[index - 1] && comments[index - 1].user.id === comments[index].user.id;
+  const groupped: ICommentGroup[] = useMemo(() => comments.reduce(groupCommentsByUser, []), [
+    comments,
+  ]);
 
-const NodeComments: FC<IProps> = ({ comments }) => (
+  return (
     <div className={styles.wrap}>
-    {comments.map((comment, index) => (
+      {groupped.map(group => (
-      <Comment key={comment.id} comment={comment} is_same={isSameComment(comments, index)} />
+        <Comment key={group.ids.join()} comment_group={group} />
       ))}
 
       <Filler />
     </div>
-);
+  );
+};
 
 export { NodeComments };

src/containers/node/NodeLayout/index.tsx

@@ -68,13 +68,13 @@ const NodeLayoutUnconnected: FC<IProps> = ({
         <Padder>
           <Group horizontal className={styles.content}>
             <Group className={styles.comments}>
-              {is_user && <CommentForm id={0} />}
-
               {is_loading_comments || !comments.length ? (
                 <NodeNoComments is_loading={is_loading_comments} />
               ) : (
                 <NodeComments comments={comments} />
               )}
+
+              {is_user && <CommentForm id={0} />}
             </Group>
 
             <div className={styles.panel}>

src/redux/node/constants.ts

@@ -67,6 +67,7 @@ export const NODE_COMPONENTS: INodeComponents = {
 };
 
 export const EMPTY_COMMENT: IComment = {
+  id: null,
   text: '',
   files: [],
   temp_ids: [],

src/redux/node/sagas.ts

@@ -100,7 +100,7 @@ function* onPostComment({ id }: ReturnType<typeof nodePostComment>) {
   if (current_node && current_node.id === current.id) {
     // if user still browsing that node
     const { comments } = yield select(selectNode);
-    yield put(nodeSetComments([comment, ...comments]));
+    yield put(nodeSetComments([...comments, comment]));
     yield put(nodeSetCommentData(0, { ...EMPTY_COMMENT }));
   }
 }

src/redux/types.ts

@@ -133,6 +133,7 @@ export interface INode {
 }
 
 export interface IComment {
+  id: number;
   text: string;
   temp_ids?: string[];
   files: IFile[];
@@ -143,6 +144,12 @@ export interface IComment {
   update_at?: string;
 }
 
+export interface ICommentGroup {
+  user: IUser;
+  comments: IComment[];
+  ids: IComment['id'][];
+}
+
 export type IUploadProgressHandler = (progress: ProgressEvent) => void;
 export type IError = ValueOf<typeof ERRORS>;
 export type IValidationErrors = Record<string, IError>;

src/styles/global.scss

@@ -76,6 +76,10 @@ body {
   height: 40px;
 }
 
+:global(.grey) {
+  color: #555555;
+}
+
 :global(h2) {
   font: $font_24_bold;
 }

src/utils/dom.ts

@@ -72,11 +72,15 @@ export const formatCommentText = (author, text: string) =>
     .replace(/(\n{2,})/gi, '\n')
     .replace(/</g, '&lt;')
     .replace(/>/g, '&gt;')
+    .replace(/:\/\//gim, ':|--|')
+    .replace(/(\/\/[^\n]+)/gim, '<span class="grey">$1</span>')
+    .replace(/:\|--\|/gim, '://')
     .split('\n')
     .map((el, index) =>
       index === 0 ? `${author ? `<p><b>${author}</b>: ` : ''}${el}</p>` : `<p>${el}</p>`
     )
     .join('');
+// .replace(/\/\*(\*(?!\/)|[^*])*\*\//igm, '');
 
 export const getPrettyDate = (date: string): string =>
   formatDistanceToNow(new Date(date), { locale: ru, includeSeconds: true, addSuffix: true });

src/utils/fn.ts

@@ -2,7 +2,41 @@ import curry from 'ramda/es/curry';
 import insert from 'ramda/es/insert';
 import nth from 'ramda/es/nth';
 import remove from 'ramda/es/remove';
+import { ICommentGroup, IComment } from '~/redux/types';
+import path from 'ramda/es/path';
 
 export const moveArrItem = curry((at, to, list) => insert(to, nth(at, list), remove(at, 1, list)));
 export const objFromArray = (array: any[], key: string) =>
   array.reduce((obj, el) => (key && el[key] ? { ...obj, [el[key]]: el } : obj), {});
+
+export const groupCommentsByUser = (
+  result: ICommentGroup[],
+  comment: IComment
+): ICommentGroup[] => {
+  const last: ICommentGroup = path([result.length - 1], result) || null;
+
+  return [
+    ...(!last || path(['user', 'id'], last) !== path(['user', 'id'], comment)
+      ? [
+          // add new group
+          ...result,
+          {
+            user: comment.user,
+            comments: [comment],
+            ids: [comment.id],
+          },
+        ]
+      : [
+          // append to last group
+          ...result.slice(0, result.length - 1),
+          {
+            ...last,
+            comments: [...last.comments, comment],
+            ids: [...last.ids, comment.id],
+          },
+        ]),
+  ];
+};
+
+// const isSameComment = (comments, index) =>
+//   comments[index - 1] && comments[index - 1].user.id === comments[index].user.id;