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, {
+import React, { FC, useCallback, ChangeEventHandler, DragEventHandler } from '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> = ({
+const ImageGrid: FC<IProps> = ({ items, locked, onFileMove, onUpload }) => {
- 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

src/redux/auth/constants.ts

@@ -35,6 +35,7 @@ export const EMPTY_USER: IUser = {
   name: null,
   username: null,
   photo: null,
+  cover: null,
   is_activated: false,
   is_user: false,
 };

src/redux/auth/types.ts

@@ -1,3 +1,5 @@
+import { IFile } from '../types';
+
 export interface IToken {
   access: string;
   refresh: string;
@@ -8,7 +10,8 @@ export interface IUser {
   username: string;
   email: string;
   role: string;
-  photo: string;
+  photo: IFile;
+  cover: IFile;
   name: string;
 
   is_activated: boolean;

src/utils/dom.ts

@@ -1,3 +1,5 @@
+import { IFile } from '~/redux/types';
+
 export const getStyle = (oElm: any, strCssRule: string) => {
   if (document.defaultView && document.defaultView.getComputedStyle) {
     return document.defaultView.getComputedStyle(oElm, '').getPropertyValue(strCssRule);
@@ -52,8 +54,10 @@ export const describeArc = (
   ].join(' ');
 };
 
-export const getURL = url => {
+export const getURL = (file: IFile) => {
-  return url
+  if (!file || !file.url) return null;
+
+  return file.url
     .replace('REMOTE_OLD://', process.env.REMOTE_OLD)
     .replace('REMOTE_CURRENT://', process.env.REMOTE_CURRENT);
 };