diff --git a/src/components/profile/MessageForm/styles.scss b/src/components/profile/MessageForm/styles.scss index 1848b978..f74c984f 100644 --- a/src/components/profile/MessageForm/styles.scss +++ b/src/components/profile/MessageForm/styles.scss @@ -2,10 +2,8 @@ @include outer_shadow(); padding: $gap; background: $content_bg; - // position: relative; textarea { - // margin-bottom: 40px; padding-bottom: 0 !important; } } diff --git a/src/components/profile/ProfileDescription/index.tsx b/src/components/profile/ProfileDescription/index.tsx new file mode 100644 index 00000000..4f633755 --- /dev/null +++ b/src/components/profile/ProfileDescription/index.tsx @@ -0,0 +1,32 @@ +import React, { FC } from 'react'; +import { IUser } from '~/redux/auth/types'; +import { formatText } from '~/utils/dom'; +import styles from './styles.scss'; +import { connect } from 'react-redux'; +import { selectAuthProfile } from '~/redux/auth/selectors'; +import { ProfileLoader } from '~/containers/profile/ProfileLoader'; + +const mapStateToProps = state => ({ + profile: selectAuthProfile(state), +}); + +type IProps = ReturnType & {}; + +const ProfileDescriptionUnconnected: FC = ({ profile: { user, is_loading } }) => { + if (is_loading) return ; + + return ( +
+ {user.description &&
{formatText(user.description)}
} + {!user.description && ( +
+ {user.fullname || user.username} пока ничего не рассказал о себе +
+ )} +
+ ); +}; + +const ProfileDescription = connect(mapStateToProps)(ProfileDescriptionUnconnected); + +export { ProfileDescription }; diff --git a/src/components/profile/ProfileDescription/styles.scss b/src/components/profile/ProfileDescription/styles.scss new file mode 100644 index 00000000..df37536d --- /dev/null +++ b/src/components/profile/ProfileDescription/styles.scss @@ -0,0 +1,14 @@ +.content { +} + +.placeholder { + display: flex; + align-items: center; + justify-content: center; + min-height: 33vh; + padding: 40px; + box-sizing: border-box; + color: transparentize($color: white, $amount: 0.8); + text-transform: uppercase; + font: $font_16_semibold; +} diff --git a/src/containers/dialogs/ProfileDialog/index.tsx b/src/containers/dialogs/ProfileDialog/index.tsx index 93604597..ddfeb4eb 100644 --- a/src/containers/dialogs/ProfileDialog/index.tsx +++ b/src/containers/dialogs/ProfileDialog/index.tsx @@ -5,9 +5,10 @@ import { IDialogProps } from '~/redux/types'; import { connect } from 'react-redux'; import { selectAuthProfile } from '~/redux/auth/selectors'; import { ProfileMessages } from '~/containers/profile/ProfileMessages'; +import { ProfileDescription } from '~/components/profile/ProfileDescription'; const TAB_CONTENT = { - profile:
PROFILE
, + profile: , messages: , }; const mapStateToProps = selectAuthProfile; diff --git a/src/containers/profile/ProfileMessages/index.tsx b/src/containers/profile/ProfileMessages/index.tsx index a0c65e2e..a02fb2e6 100644 --- a/src/containers/profile/ProfileMessages/index.tsx +++ b/src/containers/profile/ProfileMessages/index.tsx @@ -26,6 +26,15 @@ const ProfileMessagesUnconnected: FC = ({ profile, user: { id }, authGet authGetMessages(profile.user.username); }, [profile.user]); + useEffect(() => { + if (profile.is_loading || !profile.user || !profile.user.username || profile.messages_error) + return; + + const timer = setTimeout(() => authGetMessages(profile.user.username), 20000); + + return () => clearTimeout(timer); + }, [profile.user, profile.messages]); + if (!profile.messages.length || profile.is_loading) return ; diff --git a/src/redux/auth/constants.ts b/src/redux/auth/constants.ts index 79f081b1..22626c02 100644 --- a/src/redux/auth/constants.ts +++ b/src/redux/auth/constants.ts @@ -48,6 +48,7 @@ export const EMPTY_USER: IUser = { is_user: false, last_seen: null, fullname: null, + description: null, }; export interface IApiUser { diff --git a/src/redux/auth/types.ts b/src/redux/auth/types.ts index a87b5e08..b5445451 100644 --- a/src/redux/auth/types.ts +++ b/src/redux/auth/types.ts @@ -15,6 +15,7 @@ export interface IUser { name: string; last_seen: string; fullname: string; + description: string; is_activated: boolean; is_user: boolean;