From 298ba7d586afc6f56a8314068047af1a32864f03 Mon Sep 17 00:00:00 2001 From: Fedor Katurov Date: Mon, 11 Nov 2019 16:41:37 +0700 Subject: [PATCH] added messages to profile dialog --- src/components/main/Header/index.tsx | 8 +++++-- src/components/main/UserButton/index.tsx | 5 ++-- src/components/node/NodeNoComments/index.tsx | 2 +- src/constants/api.ts | 2 +- .../dialogs/BetterScrollDialog/styles.scss | 6 ++++- .../dialogs/ProfileDialog/index.tsx | 9 ++++++- .../dialogs/ProfileDialog/styles.scss | 3 +++ src/containers/profile/ProfileInfo/index.tsx | 24 +++++++++++++------ .../profile/ProfileInfo/styles.scss | 22 +++++++++++------ src/redux/auth/constants.ts | 1 + src/redux/auth/sagas.ts | 3 +-- src/redux/auth/types.ts | 1 + 12 files changed, 62 insertions(+), 24 deletions(-) diff --git a/src/components/main/Header/index.tsx b/src/components/main/Header/index.tsx index 99074f4a..0bcb508c 100644 --- a/src/components/main/Header/index.tsx +++ b/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 mapDispatchToProps & {}; const HeaderUnconnected: FC = 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 (
@@ -41,7 +43,9 @@ const HeaderUnconnected: FC = memo( flow
- {is_user && } + {is_user && ( + + )} {!is_user && ( diff --git a/src/components/main/UserButton/index.tsx b/src/components/main/UserButton/index.tsx index 4cffe38d..b29d1d1b 100644 --- a/src/components/main/UserButton/index.tsx +++ b/src/components/main/UserButton/index.tsx @@ -10,12 +10,13 @@ import { Link } from 'react-router-dom'; interface IProps { user: Partial; onLogout: () => void; + onProfileClick: () => void; } -const UserButton: FC = ({ user: { username, photo }, onLogout }) => ( +const UserButton: FC = ({ user: { username, photo }, onProfileClick, onLogout }) => (
- {username} +
{username}
= ({ is_loading = false }) => ( diff --git a/src/constants/api.ts b/src/constants/api.ts index 653fb08c..f8c8bab2 100644 --- a/src/constants/api.ts +++ b/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/', diff --git a/src/containers/dialogs/BetterScrollDialog/styles.scss b/src/containers/dialogs/BetterScrollDialog/styles.scss index 3a99f0e1..7cf39484 100644 --- a/src/containers/dialogs/BetterScrollDialog/styles.scss +++ b/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 { diff --git a/src/containers/dialogs/ProfileDialog/index.tsx b/src/containers/dialogs/ProfileDialog/index.tsx index 0521e09c..3ff1b7f2 100644 --- a/src/containers/dialogs/ProfileDialog/index.tsx +++ b/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 & {}; const ProfileDialogUnconnected: FC = ({ onRequestClose, is_loading, user }) => ( } + footer={} onClose={onRequestClose} > -
+
+ + + +
); diff --git a/src/containers/dialogs/ProfileDialog/styles.scss b/src/containers/dialogs/ProfileDialog/styles.scss index e69de29b..12fb0688 100644 --- a/src/containers/dialogs/ProfileDialog/styles.scss +++ b/src/containers/dialogs/ProfileDialog/styles.scss @@ -0,0 +1,3 @@ +.messages { + padding: $gap; +} diff --git a/src/containers/profile/ProfileInfo/index.tsx b/src/containers/profile/ProfileInfo/index.tsx index c3b950b4..a243cc85 100644 --- a/src/containers/profile/ProfileInfo/index.tsx +++ b/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 = ({ user, is_loading = false }) => ( - -
+ + +
- -
{is_loading ? : 'User Name'}
+
+
+ {is_loading ? : user.username} +
-
- {is_loading ? : 'Some description here'} +
+ {is_loading ? : getPrettyDate(user.last_seen)} +
diff --git a/src/containers/profile/ProfileInfo/styles.scss b/src/containers/profile/ProfileInfo/styles.scss index 5caf2ec9..577d3e78 100644 --- a/src/containers/profile/ProfileInfo/styles.scss +++ b/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; } diff --git a/src/redux/auth/constants.ts b/src/redux/auth/constants.ts index d86a2720..0616abbe 100644 --- a/src/redux/auth/constants.ts +++ b/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 { diff --git a/src/redux/auth/sagas.ts b/src/redux/auth/sagas.ts index c81b639b..b7261dc9 100644 --- a/src/redux/auth/sagas.ts +++ b/src/redux/auth/sagas.ts @@ -104,8 +104,7 @@ function* openProfile({ username }: ReturnType) { return yield put(modalSetShown(false)); } - yield put(authSetProfile({ is_loading: false })); - console.log({ username, user }); + yield put(authSetProfile({ is_loading: false, user })); } function* authSaga() { diff --git a/src/redux/auth/types.ts b/src/redux/auth/types.ts index 423637ec..fbe0754e 100644 --- a/src/redux/auth/types.ts +++ b/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;