added messages to profile dialog

src/components/main/Header/index.tsx

@@ -22,13 +22,15 @@ const mapDispatchToProps = {
   push: historyPush,
   showDialog: MODAL_ACTIONS.modalShowDialog,
   authLogout: AUTH_ACTIONS.authLogout,
+  authOpenProfile: AUTH_ACTIONS.authOpenProfile,
 };
 
 type IProps = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & {};
 
 const HeaderUnconnected: FC<IProps> = memo(
-  ({ user, user: { username, is_user, photo }, showDialog, authLogout }) => {
+  ({ user, user: { username, is_user }, showDialog, authLogout, authOpenProfile }) => {
     const onLogin = useCallback(() => showDialog(DIALOGS.LOGIN), [showDialog]);
+    const onProfileClick = useCallback(() => authOpenProfile(username), [authOpenProfile, user]);
 
     return (
       <div className={style.container}>
@@ -41,7 +43,9 @@ const HeaderUnconnected: FC<IProps> = memo(
           <Link to="/">flow</Link>
         </div>
 
-        {is_user && <UserButton user={user} onLogout={authLogout} />}
+        {is_user && (
+          <UserButton user={user} onLogout={authLogout} onProfileClick={onProfileClick} />
+        )}
 
         {!is_user && (
           <Group horizontal className={style.user_button} onClick={onLogin}>

src/components/main/UserButton/index.tsx

@@ -10,12 +10,13 @@ import { Link } from 'react-router-dom';
 interface IProps {
   user: Partial<IUser>;
   onLogout: () => void;
+  onProfileClick: () => void;
 }
 
-const UserButton: FC<IProps> = ({ user: { username, photo }, onLogout }) => (
+const UserButton: FC<IProps> = ({ user: { username, photo }, onProfileClick, onLogout }) => (
   <div className={styles.wrap}>
     <Group horizontal className={styles.user_button}>
-      <Link to={`/~${username}`}>{username}</Link>
+      <div onClick={onProfileClick}>{username}</div>
 
       <div
         className={styles.user_avatar}

src/components/node/NodeNoComments/index.tsx

@@ -7,7 +7,7 @@ import { ERRORS } from '~/constants/errors';
 import { t } from '~/utils/trans';
 
 interface IProps {
-  is_loading: boolean;
+  is_loading?: boolean;
 }
 
 const NodeNoComments: FC<IProps> = ({ is_loading = false }) => (

src/constants/api.ts

@@ -7,7 +7,7 @@ export const API = {
     VKONTAKTE_LOGIN: `${process.env.API_HOST}/auth/vkontakte`,
     ME: '/auth/',
     UPLOAD: (target, type) => `/upload/${target}/${type}`,
-    PROFILE: (username: string) => `/user/${username}`,
+    PROFILE: (username: string) => `/auth/user/${username}`,
   },
   NODE: {
     SAVE: '/node/',

src/containers/dialogs/BetterScrollDialog/styles.scss

@@ -5,8 +5,12 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 40px;
+  padding: 70px 20px 40px 20px;
   box-sizing: border-box;
+
+  @include tablet {
+    padding: 70px 5px 5px 5px;
+  }
 }
 
 .container {

src/containers/dialogs/ProfileDialog/index.tsx

@@ -5,6 +5,8 @@ import { ProfileInfo } from '~/containers/profile/ProfileInfo';
 import { IDialogProps } from '~/redux/types';
 import { connect } from 'react-redux';
 import { selectAuthProfile } from '~/redux/auth/selectors';
+import { NodeNoComments } from '~/components/node/NodeNoComments';
+import { CommentForm } from '~/components/node/CommentForm';
 
 const mapStateToProps = selectAuthProfile;
 const mapDispatchToProps = {};
@@ -14,9 +16,14 @@ type IProps = IDialogProps & ReturnType<typeof mapStateToProps> & {};
 const ProfileDialogUnconnected: FC<IProps> = ({ onRequestClose, is_loading, user }) => (
   <BetterScrollDialog
     header={<ProfileInfo is_loading={is_loading} user={user} />}
+    footer={<CommentForm id="0" />}
     onClose={onRequestClose}
   >
-    <div className={styles.example} />
+    <div className={styles.messages}>
+      <NodeNoComments />
+      <NodeNoComments />
+      <NodeNoComments />
+    </div>
   </BetterScrollDialog>
 );
 

src/containers/dialogs/ProfileDialog/styles.scss

@@ -0,0 +1,3 @@
+.messages {
+  padding: $gap;
+}

src/containers/profile/ProfileInfo/index.tsx

@@ -1,9 +1,10 @@
 import React, { FC } from 'react';
 import { IUser } from '~/redux/auth/types';
 import styles from './styles.scss';
-import { Grid } from '~/components/containers/Grid';
 import { Group } from '~/components/containers/Group';
 import { Placeholder } from '~/components/placeholders/Placeholder';
+import { getURL, getPrettyDate } from '~/utils/dom';
+import { PRESETS } from '~/constants/urls';
 
 interface IProps {
   user?: IUser;
@@ -11,14 +12,23 @@ interface IProps {
 }
 
 const ProfileInfo: FC<IProps> = ({ user, is_loading = false }) => (
-  <Group className={styles.wrap} horizontal>
-    <div className={styles.avatar} />
+  <Group>
+    <Group className={styles.wrap} horizontal>
+      <div
+        className={styles.avatar}
+        style={{
+          backgroundImage: `url("${user && getURL(user.photo, PRESETS.avatar)}")`,
+        }}
+      />
 
-    <Group className={styles.field}>
-      <div className={styles.name}>{is_loading ? <Placeholder width="80%" /> : 'User Name'}</div>
+      <div className={styles.field}>
+        <div className={styles.name}>
+          {is_loading ? <Placeholder width="80%" /> : user.username}
+        </div>
 
-      <div className={styles.desription}>
-        {is_loading ? <Placeholder /> : 'Some description here'}
+        <div className={styles.description}>
+          {is_loading ? <Placeholder /> : getPrettyDate(user.last_seen)}
+        </div>
       </div>
     </Group>
   </Group>

src/containers/profile/ProfileInfo/styles.scss

@@ -2,27 +2,35 @@
   justify-content: flex-start;
   align-items: flex-start !important;
   // min-height: 64px;
-  padding: $gap;
+  // padding: $gap;
   box-sizing: border-box;
+  position: relative;
 }
 
 .avatar {
   @include outer_shadow();
 
   border-radius: $radius;
-  width: 140px;
-  height: 140px;
-  background: $content_bg;
+  width: 100px;
+  height: 100px;
+  background: $content_bg 50% 50% no-repeat/cover;
   position: absolute;
-  top: -60px;
-  left: $gap;
+  bottom: 0;
+  left: 0;
 }
 
 .field {
-  padding-left: 140px;
+  padding-left: 110px;
   flex: 1;
+  padding-bottom: 5px;
 }
 
 .name {
   font: $font_24_bold;
+  margin-bottom: 4px;
+}
+
+.description {
+  color: transparentize($color: white, $amount: 0.7);
+  font: $font_14_regular;
 }

src/redux/auth/constants.ts

@@ -44,6 +44,7 @@ export const EMPTY_USER: IUser = {
   cover: null,
   is_activated: false,
   is_user: false,
+  last_seen: null,
 };
 
 export interface IApiUser {

src/redux/auth/sagas.ts

@@ -104,8 +104,7 @@ function* openProfile({ username }: ReturnType<typeof authOpenProfile>) {
     return yield put(modalSetShown(false));
   }
 
-  yield put(authSetProfile({ is_loading: false }));
-  console.log({ username, user });
+  yield put(authSetProfile({ is_loading: false, user }));
 }
 
 function* authSaga() {

src/redux/auth/types.ts

@@ -13,6 +13,7 @@ export interface IUser {
   photo: IFile;
   cover: IFile;
   name: string;
+  last_seen: string;
 
   is_activated: boolean;
   is_user: boolean;