From d978734bceff746882c0c772ae39baa81cbc330b Mon Sep 17 00:00:00 2001
From: mgabdev <>
Date: Wed, 17 Jul 2019 18:57:44 -0400
Subject: [PATCH] Removed unnecessary scrollContainer in status,
 account_gallery

document scrolls, not individual containers/components
simply removed the wrapping <ScrollContainer /> and updated indentation
---
 .../features/account_gallery/index.js         | 75 +++++++++----------
 .../gabsocial/features/status/index.js        | 67 ++++++++---------
 2 files changed, 68 insertions(+), 74 deletions(-)

diff --git a/app/javascript/gabsocial/features/account_gallery/index.js b/app/javascript/gabsocial/features/account_gallery/index.js
index 8d77b27c..9c2fc52e 100644
--- a/app/javascript/gabsocial/features/account_gallery/index.js
+++ b/app/javascript/gabsocial/features/account_gallery/index.js
@@ -12,7 +12,6 @@ import Column from '../ui/components/column';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { getAccountGallery } from 'gabsocial/selectors';
 import MediaItem from './components/media_item';
-import { ScrollContainer } from 'react-router-scroll-4';
 import LoadMore from 'gabsocial/components/load_more';
 import MissingIndicator from 'gabsocial/components/missing_indicator';
 import { openModal } from 'gabsocial/actions/modal';
@@ -189,46 +188,44 @@ class AccountGallery extends ImmutablePureComponent {
 
     return (
       <Column>
-        <ScrollContainer scrollKey='account_gallery'>
-          <div className='slist slist--flex' onScroll={this.handleScroll}>
-            <div className='account__section-headline'>
-              <div style={{width: '100%', display: 'flex'}}>
-                <NavLink exact to={`/${accountUsername}`}>
-                  <FormattedMessage id='account.posts' defaultMessage='Gabs' />
-                </NavLink>
-                <NavLink exact to={`/${accountUsername}/with_replies`}>
-                  <FormattedMessage id='account.posts_with_replies' defaultMessage='Gabs and replies' />
-                </NavLink>
-                <NavLink exact to={`/${accountUsername}/media`}>
-                  <FormattedMessage id='account.media' defaultMessage='Media' />
-                </NavLink>
-              </div>
+        <div className='slist slist--flex' onScroll={this.handleScroll}>
+          <div className='account__section-headline'>
+            <div style={{width: '100%', display: 'flex'}}>
+              <NavLink exact to={`/${accountUsername}`}>
+                <FormattedMessage id='account.posts' defaultMessage='Gabs' />
+              </NavLink>
+              <NavLink exact to={`/${accountUsername}/with_replies`}>
+                <FormattedMessage id='account.posts_with_replies' defaultMessage='Gabs and replies' />
+              </NavLink>
+              <NavLink exact to={`/${accountUsername}/media`}>
+                <FormattedMessage id='account.media' defaultMessage='Media' />
+              </NavLink>
             </div>
-
-            <div role='feed' className='account-gallery__container' ref={this.handleRef}>
-              {attachments.map((attachment, index) => attachment === null ? (
-                <LoadMoreMedia key={'more:' + attachments.getIn(index + 1, 'id')} maxId={index > 0 ? attachments.getIn(index - 1, 'id') : null} onLoadMore={this.handleLoadMore} />
-              ) : (
-                <MediaItem key={attachment.get('id')} attachment={attachment} displayWidth={width} onOpenMedia={this.handleOpenMedia} />
-              ))}
-
-              {
-                attachments.size == 0 &&
-                <div className='empty-column-indicator'>
-                  <FormattedMessage id='account_gallery.none' defaultMessage='No media to show.'/>
-                </div>
-              }
-
-              {loadOlder}
-            </div>
-
-            {isLoading && attachments.size === 0 && (
-              <div className='slist__append'>
-                <LoadingIndicator />
-              </div>
-            )}
           </div>
-        </ScrollContainer>
+
+          <div role='feed' className='account-gallery__container' ref={this.handleRef}>
+            {attachments.map((attachment, index) => attachment === null ? (
+              <LoadMoreMedia key={'more:' + attachments.getIn(index + 1, 'id')} maxId={index > 0 ? attachments.getIn(index - 1, 'id') : null} onLoadMore={this.handleLoadMore} />
+            ) : (
+              <MediaItem key={attachment.get('id')} attachment={attachment} displayWidth={width} onOpenMedia={this.handleOpenMedia} />
+            ))}
+
+            {
+              attachments.size == 0 &&
+              <div className='empty-column-indicator'>
+                <FormattedMessage id='account_gallery.none' defaultMessage='No media to show.'/>
+              </div>
+            }
+
+            {loadOlder}
+          </div>
+
+          {isLoading && attachments.size === 0 && (
+            <div className='slist__append'>
+              <LoadingIndicator />
+            </div>
+          )}
+        </div>
       </Column>
     );
   }
diff --git a/app/javascript/gabsocial/features/status/index.js b/app/javascript/gabsocial/features/status/index.js
index 0e8c3e00..e88ab4c1 100644
--- a/app/javascript/gabsocial/features/status/index.js
+++ b/app/javascript/gabsocial/features/status/index.js
@@ -33,7 +33,6 @@ import {
 import { initMuteModal } from '../../actions/mutes';
 import { initReport } from '../../actions/reports';
 import { makeGetStatus } from '../../selectors';
-import { ScrollContainer } from 'react-router-scroll-4';
 import ColumnHeader from '../../components/column_header';
 import StatusContainer from '../../containers/status_container';
 import { openModal } from '../../actions/modal';
@@ -471,43 +470,41 @@ class Status extends ImmutablePureComponent {
           />
         }
 
-        <ScrollContainer scrollKey='thread'>
-          <div ref={this.setRef}>
-            {ancestors}
+        <div ref={this.setRef}>
+          {ancestors}
 
-            <HotKeys handlers={handlers}>
-              <div className={classNames('focusable', 'detailed-status__wrapper')} tabIndex='0' aria-label={textForScreenReader(intl, status, false)}>
-                <DetailedStatus
-                  status={status}
-                  onOpenVideo={this.handleOpenVideo}
-                  onOpenMedia={this.handleOpenMedia}
-                  onToggleHidden={this.handleToggleHidden}
-                  domain={domain}
-                  showMedia={this.state.showMedia}
-                  onToggleMediaVisibility={this.handleToggleMediaVisibility}
-                />
+          <HotKeys handlers={handlers}>
+            <div className={classNames('focusable', 'detailed-status__wrapper')} tabIndex='0' aria-label={textForScreenReader(intl, status, false)}>
+              <DetailedStatus
+                status={status}
+                onOpenVideo={this.handleOpenVideo}
+                onOpenMedia={this.handleOpenMedia}
+                onToggleHidden={this.handleToggleHidden}
+                domain={domain}
+                showMedia={this.state.showMedia}
+                onToggleMediaVisibility={this.handleToggleMediaVisibility}
+              />
 
-                <ActionBar
-                  status={status}
-                  onReply={this.handleReplyClick}
-                  onFavourite={this.handleFavouriteClick}
-                  onReblog={this.handleReblogClick}
-                  onDelete={this.handleDeleteClick}
-                  onDirect={this.handleDirectClick}
-                  onMention={this.handleMentionClick}
-                  onMute={this.handleMuteClick}
-                  onMuteConversation={this.handleConversationMuteClick}
-                  onBlock={this.handleBlockClick}
-                  onReport={this.handleReport}
-                  onPin={this.handlePin}
-                  onEmbed={this.handleEmbed}
-                />
-              </div>
-            </HotKeys>
+              <ActionBar
+                status={status}
+                onReply={this.handleReplyClick}
+                onFavourite={this.handleFavouriteClick}
+                onReblog={this.handleReblogClick}
+                onDelete={this.handleDeleteClick}
+                onDirect={this.handleDirectClick}
+                onMention={this.handleMentionClick}
+                onMute={this.handleMuteClick}
+                onMuteConversation={this.handleConversationMuteClick}
+                onBlock={this.handleBlockClick}
+                onReport={this.handleReport}
+                onPin={this.handlePin}
+                onEmbed={this.handleEmbed}
+              />
+            </div>
+          </HotKeys>
 
-            {descendants}
-          </div>
-        </ScrollContainer>
+          {descendants}
+        </div>
       </Column>
     );
   }