Restore ProfileMediaPanel, convert to TSX+FC

app/soapbox/features/ui/components/profile_media_panel.js

@@ -1,128 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import { FormattedMessage, injectIntl } from 'react-intl';
-import { connect } from 'react-redux';
-
-import { openModal } from 'soapbox/actions/modals';
-import Icon from 'soapbox/components/icon';
-import { Spinner } from 'soapbox/components/ui';
-import { getAccountGallery } from 'soapbox/selectors';
-
-import { expandAccountMediaTimeline } from '../../../actions/timelines';
-import MediaItem from '../../account_gallery/components/media_item';
-
-class ProfileMediaPanel extends ImmutablePureComponent {
-
-  static propTypes = {
-    account: ImmutablePropTypes.record,
-    attachments: ImmutablePropTypes.list,
-    dispatch: PropTypes.func.isRequired,
-  };
-
-  state = {
-    isLoading: true,
-  }
-
-  handleOpenMedia = attachment => {
-    if (attachment.get('type') === 'video') {
-      this.props.dispatch(openModal('VIDEO', { media: attachment, status: attachment.get('status') }));
-    } else {
-      const media = attachment.getIn(['status', 'media_attachments']);
-      const index = media.findIndex(x => x.get('id') === attachment.get('id'));
-
-      this.props.dispatch(openModal('MEDIA', { media, index, status: attachment.get('status'), account: attachment.get('account') }));
-    }
-  }
-
-  fetchMedia = () => {
-    const { account } = this.props;
-
-    if (account) {
-      const accountId = account.get('id');
-
-      this.props.dispatch(expandAccountMediaTimeline(accountId))
-        .then(() => this.setState({ isLoading: false }))
-        .catch(() => {});
-
-    }
-  }
-
-  componentDidMount() {
-    this.fetchMedia();
-  }
-
-  componentDidUpdate(prevProps) {
-    const oldId = prevProps.account && prevProps.account.get('id');
-    const newId = this.props.account && this.props.account.get('id');
-
-    if (newId !== oldId) {
-      this.setState({ isLoading: true });
-      this.fetchMedia();
-    }
-  }
-
-  renderAttachments() {
-    const { attachments } = this.props;
-    const publicAttachments = attachments.filter(attachment => attachment.getIn(['status', 'visibility']) === 'public');
-    const nineAttachments = publicAttachments.slice(0, 9);
-
-    if (!nineAttachments.isEmpty()) {
-      return (
-        <div className='media-panel__list'>
-          {nineAttachments.map((attachment, index) => (
-            <MediaItem
-              key={`${attachment.getIn(['status', 'id'])}+${attachment.get('id')}`}
-              attachment={attachment}
-              displayWidth={255}
-              onOpenMedia={this.handleOpenMedia}
-            />
-          ))}
-        </div>
-      );
-    } else {
-      return (
-        <div className='media-panel__empty'>
-          <FormattedMessage id='media_panel.empty_message' defaultMessage='No media found.' />
-        </div>
-      );
-    }
-  }
-
-  render() {
-    const { account } = this.props;
-    const { isLoading } = this.state;
-
-    return (
-      <div className='media-panel'>
-        <div className='media-panel-header'>
-          <Icon src={require('@tabler/icons/icons/camera.svg')} className='media-panel-header__icon' />
-          <span className='media-panel-header__label'>
-            <FormattedMessage id='media_panel.title' defaultMessage='Media' />
-          </span>
-        </div>
-        {account &&
-          <div className='media-panel__content'>
-            {isLoading ? (
-              <Spinner />
-            ) : (
-              this.renderAttachments()
-            )}
-          </div>
-        }
-      </div>
-    );
-  }
-
-}
-
-const mapStateToProps = (state, { account }) => ({
-  attachments: getAccountGallery(state, account.get('id')),
-});
-
-export default injectIntl(
-  connect(mapStateToProps, null, null, {
-    forwardRef: true,
-  },
-  )(ProfileMediaPanel));

app/soapbox/features/ui/components/profile_media_panel.tsx

@@ -0,0 +1,90 @@
+import { List as ImmutableList } from 'immutable';
+import React, { useState, useEffect } from 'react';
+import { FormattedMessage } from 'react-intl';
+import { useDispatch } from 'react-redux';
+
+import { openModal } from 'soapbox/actions/modals';
+import { Spinner, Widget } from 'soapbox/components/ui';
+import { useAppSelector } from 'soapbox/hooks';
+import { getAccountGallery } from 'soapbox/selectors';
+
+import { expandAccountMediaTimeline } from '../../../actions/timelines';
+import MediaItem from '../../account_gallery/components/media_item';
+
+import type { Account, Attachment } from 'soapbox/types/entities';
+
+interface IProfileMediaPanel {
+  account?: Account,
+}
+
+const ProfileMediaPanel: React.FC<IProfileMediaPanel> = ({ account }) => {
+  const dispatch = useDispatch();
+
+  const [loading, setLoading] = useState(true);
+
+  const attachments: ImmutableList<Attachment> = useAppSelector((state) => account ? getAccountGallery(state, account?.id) : ImmutableList());
+
+  const handleOpenMedia = (attachment: Attachment): void => {
+    if (attachment.type === 'video') {
+      dispatch(openModal('VIDEO', { media: attachment, status: attachment.status }));
+    } else {
+      const media = attachment.getIn(['status', 'media_attachments']) as ImmutableList<Attachment>;
+      const index = media.findIndex(x => x.id === attachment.id);
+
+      dispatch(openModal('MEDIA', { media, index, status: attachment.status, account: attachment.account }));
+    }
+  };
+
+  useEffect(() => {
+    setLoading(true);
+
+    if (account) {
+      dispatch(expandAccountMediaTimeline(account.id))
+        // @ts-ignore yes it does
+        .then(() => setLoading(false))
+        .catch(() => {});
+    }
+  }, [account?.id]);
+
+  const renderAttachments = () => {
+    const publicAttachments = attachments.filter(attachment => attachment.getIn(['status', 'visibility']) === 'public');
+    const nineAttachments = publicAttachments.slice(0, 9);
+
+    if (!nineAttachments.isEmpty()) {
+      return (
+        <div className='media-panel__list'>
+          {nineAttachments.map((attachment, _index) => (
+            <MediaItem
+              key={`${attachment.getIn(['status', 'id'])}+${attachment.id}`}
+              attachment={attachment}
+              displayWidth={255}
+              onOpenMedia={handleOpenMedia}
+            />
+          ))}
+        </div>
+      );
+    } else {
+      return (
+        <div className='media-panel__empty'>
+          <FormattedMessage id='media_panel.empty_message' defaultMessage='No media found.' />
+        </div>
+      );
+    }
+  };
+
+  return (
+    <Widget title={<FormattedMessage id='media_panel.title' defaultMessage='Media' />}>
+      {account && (
+        <div className='media-panel__content'>
+          {loading ? (
+            <Spinner />
+          ) : (
+            renderAttachments()
+          )}
+        </div>
+      )}
+    </Widget>
+  );
+};
+
+export default ProfileMediaPanel;

app/soapbox/pages/profile_page.js

@@ -13,6 +13,7 @@ import {
   WhoToFollowPanel,
   TrendsPanel,
   ProfileInfoPanel,
+  ProfileMediaPanel,
   SignUpPanel,
 } from 'soapbox/features/ui/util/async-components';
 import { findAccountByUsername } from 'soapbox/selectors';
@@ -155,6 +156,9 @@ class ProfilePage extends ImmutablePureComponent {
               {Component => <Component key='sign-up-panel' />}
             </BundleContainer>
           )}
+          <BundleContainer fetchComponent={ProfileMediaPanel}>
+            {Component => <Component account={account} />}
+          </BundleContainer>
           {showTrendsPanel && (
             <BundleContainer fetchComponent={TrendsPanel}>
               {Component => <Component limit={3} key='trends-panel' />}

app/styles/components/profile-media-panel.scss

@@ -47,13 +47,11 @@
   }
 
   &__list {
-    padding: 0 5px;
     display: flex;
     flex-wrap: wrap;
   }
 
   &__empty {
-    padding: 0 15px 10px 15px;
     font-size: 14px;
     color: var(--primary-text-color--faint);
   }