diff --git a/src/containers/dialogs/BetterScrollDialog/index.tsx b/src/containers/dialogs/BetterScrollDialog/index.tsx
index 3b5c54b7..eb580ae9 100644
--- a/src/containers/dialogs/BetterScrollDialog/index.tsx
+++ b/src/containers/dialogs/BetterScrollDialog/index.tsx
@@ -1,6 +1,6 @@
-import React, { FC, MouseEventHandler, useEffect, useRef, ReactElement } from 'react';
+import React, { FC, MouseEventHandler, ReactElement, useEffect, useRef, } from 'react';
import * as styles from './styles.scss';
-import { enableBodyScroll, disableBodyScroll } from 'body-scroll-lock';
+import { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock';
import { Icon } from '~/components/input/Icon';
import { LoaderCircle } from '~/components/input/LoaderCircle';
diff --git a/src/containers/dialogs/ProfileDialog/index.tsx b/src/containers/dialogs/ProfileDialog/index.tsx
index 26ba39f0..4e361af5 100644
--- a/src/containers/dialogs/ProfileDialog/index.tsx
+++ b/src/containers/dialogs/ProfileDialog/index.tsx
@@ -12,6 +12,7 @@ import pick from 'ramda/es/pick';
import { CoverBackdrop } from '~/components/containers/CoverBackdrop';
import { ProfileSettings } from '~/components/profile/ProfileSettings';
import { ProfileAccounts } from '~/components/profile/ProfileAccounts';
+import { MessageForm } from '~/components/profile/MessageForm';
const TAB_CONTENT = {
profile: <ProfileDescription />,
@@ -31,6 +32,14 @@ const mapDispatchToProps = {
type IProps = IDialogProps & ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & {};
+const PROFILE_HEADERS = {
+ // messages: <MessageForm />,
+};
+
+const PROFILE_FOOTERS = {
+ messages: <MessageForm />,
+};
+
const ProfileDialogUnconnected: FC<IProps> = ({
onRequestClose,
authSetProfile,
@@ -51,8 +60,10 @@ const ProfileDialogUnconnected: FC<IProps> = ({
user={user}
tab={tab}
setTab={setTab}
+ content={PROFILE_HEADERS[tab]}
/>
}
+ footer={PROFILE_FOOTERS[tab]}
backdrop={<CoverBackdrop cover={user && user.cover} />}
onClose={onRequestClose}
>
diff --git a/src/containers/profile/ProfileInfo/index.tsx b/src/containers/profile/ProfileInfo/index.tsx
index adcb160f..f70c7c70 100644
--- a/src/containers/profile/ProfileInfo/index.tsx
+++ b/src/containers/profile/ProfileInfo/index.tsx
@@ -1,12 +1,10 @@
-import React, { FC } from 'react';
+import React, { FC, ReactNode } from 'react';
import { IUser } from '~/redux/auth/types';
import styles from './styles.scss';
import { Group } from '~/components/containers/Group';
import { Placeholder } from '~/components/placeholders/Placeholder';
-import { getURL, getPrettyDate } from '~/utils/dom';
-import { PRESETS } from '~/constants/urls';
+import { getPrettyDate } from '~/utils/dom';
import { ProfileTabs } from '../ProfileTabs';
-import { MessageForm } from '~/components/profile/MessageForm';
import { ProfileAvatar } from '../ProfileAvatar';
interface IProps {
@@ -17,13 +15,11 @@ interface IProps {
is_own?: boolean;
setTab?: (tab: string) => void;
+
+ content?: ReactNode;
}
-const TAB_HEADERS = {
- messages: <MessageForm />,
-};
-
-const ProfileInfo: FC<IProps> = ({ user, tab, is_loading, is_own, setTab }) => (
+const ProfileInfo: FC<IProps> = ({ user, tab, is_loading, is_own, setTab, content = null }) => (
<div>
<Group className={styles.wrap} horizontal>
<ProfileAvatar />
@@ -41,7 +37,7 @@ const ProfileInfo: FC<IProps> = ({ user, tab, is_loading, is_own, setTab }) => (
<ProfileTabs tab={tab} is_own={is_own} setTab={setTab} />
- {TAB_HEADERS[tab] || null}
+ {content}
</div>
);
diff --git a/src/containers/profile/ProfileMessages/index.tsx b/src/containers/profile/ProfileMessages/index.tsx
index 7700f048..de3d4e9e 100644
--- a/src/containers/profile/ProfileMessages/index.tsx
+++ b/src/containers/profile/ProfileMessages/index.tsx
@@ -1,10 +1,9 @@
-import React, { FC, useCallback, useEffect, useState } from 'react';
+import React, { FC, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
import { connect } from 'react-redux';
import { selectAuthProfile, selectAuthUser } from '~/redux/auth/selectors';
import styles from './styles.scss';
import * as AUTH_ACTIONS from '~/redux/messages/actions';
import { Message } from '~/components/profile/Message';
-import { Group } from '~/components/containers/Group';
import pick from 'ramda/es/pick';
import { NodeNoComments } from '~/components/node/NodeNoComments';
import { selectMessages } from '~/redux/messages/selectors';
@@ -29,6 +28,8 @@ const ProfileMessagesUnconnected: FC<IProps> = ({
messagesGetMessages,
messagesDeleteMessage,
}) => {
+ const wasAtBottom = useRef(true);
+ const [wrap, setWrap] = useState<HTMLDivElement>(null);
const [editingMessageId, setEditingMessageId] = useState(0);
const onEditMessage = useCallback((id: number) => setEditingMessageId(id), [setEditingMessageId]);
@@ -55,32 +56,71 @@ const ProfileMessagesUnconnected: FC<IProps> = ({
return () => clearTimeout(timer);
}, [profile.user, messages.messages]);
+ const storeRef = useCallback(
+ (div: HTMLDivElement) => {
+ if (!div || !div.parentElement) return;
+ const parent = div.parentElement;
+ parent.scrollTo(0, parent.scrollHeight);
+ setWrap(div);
+ },
+ [setWrap]
+ );
+
+ useLayoutEffect(() => {
+ const parent = wrap?.parentElement;
+
+ if (!parent) return;
+
+ if (wasAtBottom.current) {
+ parent.scrollTo(0, parent.scrollHeight);
+ }
+ }, [messages.messages]);
+
+ const onScroll = useCallback(() => {
+ const parent = wrap?.parentElement;
+
+ if (!parent) return;
+
+ const scrollPos = parent.scrollTop + parent.clientHeight;
+ wasAtBottom.current = parent.scrollHeight - scrollPos < 40;
+ }, [wrap]);
+
+ useEffect(() => {
+ const parent = wrap?.parentElement;
+ if (!parent) return;
+
+ parent.addEventListener('scroll', onScroll);
+ return () => parent.removeEventListener('scroll', onScroll);
+ }, [wrap, onScroll]);
+
if (!messages.messages.length || profile.is_loading)
return <NodeNoComments is_loading={messages.is_loading_messages || profile.is_loading} />;
return (
- <Group className={styles.messages}>
- {messages.messages
- .filter(message => !!message.text)
- .map((
- message // TODO: show files / memo
- ) => (
- <Message
- message={message}
- incoming={id !== message.from.id}
- key={message.id}
- onEdit={onEditMessage}
- onDelete={onDeleteMessage}
- isEditing={editingMessageId === message.id}
- onCancelEdit={onCancelEdit}
- onRestore={onRestoreMessage}
- />
- ))}
+ messages.messages.length > 0 && (
+ <div className={styles.messages} ref={storeRef}>
+ {messages.messages
+ .filter(message => !!message.text)
+ .map((
+ message // TODO: show files / memo
+ ) => (
+ <Message
+ message={message}
+ incoming={id !== message.from.id}
+ key={message.id}
+ onEdit={onEditMessage}
+ onDelete={onDeleteMessage}
+ isEditing={editingMessageId === message.id}
+ onCancelEdit={onCancelEdit}
+ onRestore={onRestoreMessage}
+ />
+ ))}
- {!messages.is_loading_messages && messages.messages.length > 0 && (
- <div className={styles.placeholder}>Когда-нибудь здесь будут еще сообщения</div>
- )}
- </Group>
+ {!messages.is_loading_messages && messages.messages.length > 0 && (
+ <div className={styles.placeholder}>Когда-нибудь здесь будут еще сообщения</div>
+ )}
+ </div>
+ )
);
};
diff --git a/src/containers/profile/ProfileMessages/styles.scss b/src/containers/profile/ProfileMessages/styles.scss
index 197da902..45f4072f 100644
--- a/src/containers/profile/ProfileMessages/styles.scss
+++ b/src/containers/profile/ProfileMessages/styles.scss
@@ -1,6 +1,21 @@
.messages {
padding: $gap;
background: $node_bg;
+ display: flex;
+ flex-direction: column-reverse !important;
+ overflow: auto;
+
+ & > * {
+ margin: $gap / 2 0;
+
+ &:last-child {
+ margin-top: 0;
+ }
+
+ &:first-child {
+ margin-bottom: 0;
+ }
+ }
}
.placeholder {