displaying profile photo

src/components/containers/CommentWrapper/styles.scss

@@ -15,12 +15,13 @@
 
 .thumb {
   flex: 0 0 $comment_height;
-  background: transparentize(black, 0.9);
   border-radius: $panel_radius 0 0 $panel_radius;
+  background-color: transparentize(black, 0.9);
 }
 
 .thumb_image {
   height: $comment_height;
-  background: transparentize(white, 0.97);
+  background: transparentize(white, 0.97) no-repeat 50% 50%;
   border-radius: $panel_radius 0 0 $panel_radius;
+  background-size: cover;
 }

src/components/editors/ImageGrid/index.tsx

@@ -1,6 +1,4 @@
-import React, {
- FC, useCallback, ChangeEventHandler, DragEventHandler,
-} from 'react';
+import React, { FC, useCallback, ChangeEventHandler, DragEventHandler } from 'react';
 import { SortableContainer, SortableElement } from 'react-sortable-hoc';
 import * as styles from './styles.scss';
 import { ImageUpload } from '~/components/upload/ImageUpload';
@@ -31,7 +29,7 @@ const SortableList = SortableContainer(
     <div className={styles.grid}>
       {items.map((file, index) => (
         <SortableItem key={file.id} index={index} collection={0}>
-          <ImageUpload id={file.id} thumb={getURL(file.url)} />
+          <ImageUpload id={file.id} thumb={getURL(file)} />
         </SortableItem>
       ))}
 
@@ -44,9 +42,7 @@ const SortableList = SortableContainer(
   )
 );
 
-const ImageGrid: FC<IProps> = ({
- items, locked, onFileMove, onUpload,
-}) => {
+const ImageGrid: FC<IProps> = ({ items, locked, onFileMove, onUpload }) => {
   const onMove = useCallback(({ oldIndex, newIndex }) => onFileMove(oldIndex, newIndex), [
     onFileMove,
   ]);

src/components/node/Comment/index.tsx

@@ -43,7 +43,7 @@ const Comment: FC<IProps> = ({ comment, is_empty, is_loading, className, photo,
         <div className={styles.images}>
           {groupped.image.map(file => (
             <div key={file.id}>
-              <img src={getURL(file.url)} alt={file.name} />
+              <img src={getURL(file)} alt={file.name} />
             </div>
           ))}
         </div>
@@ -55,7 +55,7 @@ const Comment: FC<IProps> = ({ comment, is_empty, is_loading, className, photo,
             <div
               key={file.id}
               onClick={() => {
-                Player.set(getURL(file.url));
+                Player.set(getURL(file));
                 Player.load();
                 Player.play();
               }}

src/components/node/CommentForm/index.tsx

@@ -17,9 +17,12 @@ import * as UPLOAD_ACTIONS from '~/redux/uploads/actions';
 import { selectUploads } from '~/redux/uploads/selectors';
 import { IState } from '~/redux/store';
 import { getFileType } from '~/utils/uploader';
+import { selectUser } from '~/redux/auth/selectors';
+import { getURL } from '~/utils/dom';
 
 const mapStateToProps = (state: IState) => ({
   node: selectNode(state),
+  user: selectUser(state),
   uploads: selectUploads(state),
 });
 
@@ -37,6 +40,7 @@ type IProps = ReturnType<typeof mapStateToProps> &
 const CommentFormUnconnected: FC<IProps> = ({
   node: { comment_data, is_sending_comment },
   uploads: { statuses, files },
+  user: { photo },
   id,
   nodePostComment,
   nodeSetCommentData,
@@ -116,7 +120,7 @@ const CommentFormUnconnected: FC<IProps> = ({
   const comment = comment_data[id];
 
   return (
-    <CommentWrapper>
+    <CommentWrapper photo={getURL(photo)}>
       <form onSubmit={onSubmit}>
         <div className={styles.input}>
           <Textarea