messages form at the bottom

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';
 

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}
     >

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 { getPrettyDate } from '~/utils/dom';
-import { PRESETS } from '~/constants/urls';
 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 = {
+const ProfileInfo: FC<IProps> = ({ user, tab, is_loading, is_own, setTab, content = null }) => (
-  messages: <MessageForm />,
-};
-
-const ProfileInfo: FC<IProps> = ({ user, tab, is_loading, is_own, setTab }) => (
   <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>
 );
 

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,11 +56,49 @@ 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.length > 0 && (
+      <div className={styles.messages} ref={storeRef}>
         {messages.messages
           .filter(message => !!message.text)
           .map((
@@ -80,7 +119,8 @@ const ProfileMessagesUnconnected: FC<IProps> = ({
         {!messages.is_loading_messages && messages.messages.length > 0 && (
           <div className={styles.placeholder}>Когда-нибудь здесь будут еще сообщения</div>
         )}
-    </Group>
+      </div>
+    )
   );
 };
 

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 {