From 2d42995e6fa83d03d78a4715da618850f68395cd Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 13 Oct 2021 12:55:17 -0500
Subject: [PATCH] ProfileMediaPanel: fix navigating between profiles, display
 LoadingIndicator, display empty message

---
 app/soapbox/actions/timelines.js              |  4 +-
 .../ui/components/profile_media_panel.js      | 79 +++++++++++++++----
 .../components/profile-media-panel.scss       | 10 +++
 3 files changed, 75 insertions(+), 18 deletions(-)

diff --git a/app/soapbox/actions/timelines.js b/app/soapbox/actions/timelines.js
index 5ef4ae733..0ae23a0ed 100644
--- a/app/soapbox/actions/timelines.js
+++ b/app/soapbox/actions/timelines.js
@@ -138,7 +138,7 @@ export function expandTimeline(timelineId, path, params = {}, done = noOp) {
 
     if (timeline.get('isLoading')) {
       done();
-      return;
+      return dispatch(noOp);
     }
 
     if (!params.max_id && !params.pinned && timeline.get('items', ImmutableOrderedSet()).size > 0) {
@@ -149,7 +149,7 @@ export function expandTimeline(timelineId, path, params = {}, done = noOp) {
 
     dispatch(expandTimelineRequest(timelineId, isLoadingMore));
 
-    api(getState).get(path, { params }).then(response => {
+    return api(getState).get(path, { params }).then(response => {
       const next = getLinks(response).refs.find(link => link.rel === 'next');
       dispatch(importFetchedStatuses(response.data));
       dispatch(expandTimelineSuccess(timelineId, response.data, next ? next.uri : null, response.code === 206, isLoadingRecent, isLoadingMore));
diff --git a/app/soapbox/features/ui/components/profile_media_panel.js b/app/soapbox/features/ui/components/profile_media_panel.js
index 108af12cd..7f41e976d 100644
--- a/app/soapbox/features/ui/components/profile_media_panel.js
+++ b/app/soapbox/features/ui/components/profile_media_panel.js
@@ -9,6 +9,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import MediaItem from '../../account_gallery/components/media_item';
 import Icon from 'soapbox/components/icon';
+import LoadingIndicator from 'soapbox/components/loading_indicator';
 
 class ProfileMediaPanel extends ImmutablePureComponent {
 
@@ -18,6 +19,10 @@ class ProfileMediaPanel extends ImmutablePureComponent {
     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') }));
@@ -29,16 +34,63 @@ class ProfileMediaPanel extends ImmutablePureComponent {
     }
   }
 
-  componentDidMount() {
+  fetchMedia = () => {
     const { account } = this.props;
-    const accountId = account.get('id');
-    this.props.dispatch(expandAccountMediaTimeline(accountId));
+
+    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 { attachments, account } = this.props;
-    const publicAttachments = attachments.filter(attachment => attachment.getIn(['status', 'visibility']) === 'public');
-    const nineAttachments = publicAttachments.slice(0, 9);
+    const { account } = this.props;
+    const { isLoading } = this.state;
 
     return (
       <div className='media-panel'>
@@ -50,16 +102,11 @@ class ProfileMediaPanel extends ImmutablePureComponent {
         </div>
         {account &&
           <div className='media-panel__content'>
-            <div className='media-panel__list'>
-              {!nineAttachments.isEmpty() && nineAttachments.map((attachment, index) => (
-                <MediaItem
-                  key={`${attachment.getIn(['status', 'id'])}+${attachment.get('id')}`}
-                  attachment={attachment}
-                  displayWidth={255}
-                  onOpenMedia={this.handleOpenMedia}
-                />
-              ))}
-            </div>
+            {isLoading ? (
+              <LoadingIndicator />
+            ) : (
+              this.renderAttachments()
+            )}
           </div>
         }
       </div>
diff --git a/app/styles/components/profile-media-panel.scss b/app/styles/components/profile-media-panel.scss
index 782cbc275..fb0b6a502 100644
--- a/app/styles/components/profile-media-panel.scss
+++ b/app/styles/components/profile-media-panel.scss
@@ -51,4 +51,14 @@
     display: flex;
     flex-wrap: wrap;
   }
+
+  &__empty {
+    padding: 0 15px 10px 15px;
+    font-size: 14px;
+    color: var(--primary-text-color--faint);
+  }
+
+  .loading-indicator {
+    margin: 0 auto;
+  }
 }