From edce9d0876f63df779ad4fd03f3b6df46fe84e23 Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Thu, 25 Aug 2022 08:52:11 -0400
Subject: [PATCH] Fetch relationships when opening favourites/reblogs modal

---
 app/soapbox/actions/interactions.ts           |  3 +++
 app/soapbox/components/profile-hover-card.tsx |  2 +-
 .../components/status-interaction-bar.tsx     |  2 +-
 .../favourites-modal.tsx}                     | 20 +++++++++----------
 .../features/ui/util/async-components.ts      |  2 +-
 app/soapbox/locales/defaultMessages.json      |  2 +-
 6 files changed, 16 insertions(+), 15 deletions(-)
 rename app/soapbox/features/ui/components/{favourites_modal.tsx => modals/favourites-modal.tsx} (71%)

diff --git a/app/soapbox/actions/interactions.ts b/app/soapbox/actions/interactions.ts
index 70fd93317c..1a90a259fd 100644
--- a/app/soapbox/actions/interactions.ts
+++ b/app/soapbox/actions/interactions.ts
@@ -5,6 +5,7 @@ import { isLoggedIn } from 'soapbox/utils/auth';
 
 import api from '../api';
 
+import { fetchRelationships } from './accounts';
 import { importFetchedAccounts, importFetchedStatus } from './importer';
 
 import type { AxiosError } from 'axios';
@@ -292,6 +293,7 @@ const fetchReblogs = (id: string) =>
 
     api(getState).get(`/api/v1/statuses/${id}/reblogged_by`).then(response => {
       dispatch(importFetchedAccounts(response.data));
+      dispatch(fetchRelationships(response.data.map((item: APIEntity) => item.id)));
       dispatch(fetchReblogsSuccess(id, response.data));
     }).catch(error => {
       dispatch(fetchReblogsFail(id, error));
@@ -323,6 +325,7 @@ const fetchFavourites = (id: string) =>
 
     api(getState).get(`/api/v1/statuses/${id}/favourited_by`).then(response => {
       dispatch(importFetchedAccounts(response.data));
+      dispatch(fetchRelationships(response.data.map((item: APIEntity) => item.id)));
       dispatch(fetchFavouritesSuccess(id, response.data));
     }).catch(error => {
       dispatch(fetchFavouritesFail(id, error));
diff --git a/app/soapbox/components/profile-hover-card.tsx b/app/soapbox/components/profile-hover-card.tsx
index 11de952f26..e2574c7553 100644
--- a/app/soapbox/components/profile-hover-card.tsx
+++ b/app/soapbox/components/profile-hover-card.tsx
@@ -97,7 +97,7 @@ export const ProfileHoverCard: React.FC<IProfileHoverCard> = ({ visible = true }
   return (
     <div
       className={classNames({
-        'absolute transition-opacity w-[320px] z-50 top-0 left-0': true,
+        'absolute transition-opacity w-[320px] z-[101] top-0 left-0': true,
         'opacity-100': visible,
         'opacity-0 pointer-events-none': !visible,
       })}
diff --git a/app/soapbox/features/status/components/status-interaction-bar.tsx b/app/soapbox/features/status/components/status-interaction-bar.tsx
index 3f36548097..ec21849a6b 100644
--- a/app/soapbox/features/status/components/status-interaction-bar.tsx
+++ b/app/soapbox/features/status/components/status-interaction-bar.tsx
@@ -163,7 +163,7 @@ const StatusInteractionBar: React.FC<IStatusInteractionBar> = ({ status }): JSX.
   return (
     <HStack space={3}>
       {getReposts()}
-      
+
       {features.emojiReacts ? getEmojiReacts() : getFavourites()}
     </HStack>
   );
diff --git a/app/soapbox/features/ui/components/favourites_modal.tsx b/app/soapbox/features/ui/components/modals/favourites-modal.tsx
similarity index 71%
rename from app/soapbox/features/ui/components/favourites_modal.tsx
rename to app/soapbox/features/ui/components/modals/favourites-modal.tsx
index 60bc9123f0..f1452b5826 100644
--- a/app/soapbox/features/ui/components/favourites_modal.tsx
+++ b/app/soapbox/features/ui/components/modals/favourites-modal.tsx
@@ -3,7 +3,7 @@ import { FormattedMessage } from 'react-intl';
 
 import { fetchFavourites } from 'soapbox/actions/interactions';
 import ScrollableList from 'soapbox/components/scrollable_list';
-import { Modal, Spinner } from 'soapbox/components/ui';
+import { Modal, Spinner, Stack } from 'soapbox/components/ui';
 import AccountContainer from 'soapbox/containers/account_container';
 import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
 
@@ -34,18 +34,16 @@ const FavouritesModal: React.FC<IFavouritesModal> = ({ onClose, statusId }) => {
   if (!accountIds) {
     body = <Spinner />;
   } else {
-    const emptyMessage = <FormattedMessage id='empty_column.favourites' defaultMessage='No one has liked this post yet. When someone does, they will show up here.' />;
-
     body = (
-      <ScrollableList
-        scrollKey='favourites'
-        emptyMessage={emptyMessage}
-        itemClassName='pb-3'
-      >
-        {accountIds.map((id) =>
-          <AccountContainer key={id} id={id} />,
+      <Stack space={3}>
+        {accountIds.size > 0 ? (
+          accountIds.map((id) =>
+            <AccountContainer key={id} id={id} />,
+          )
+        ) : (
+          <FormattedMessage id='empty_column.favourites' defaultMessage='No one has liked this post yet. When someone does, they will show up here.' />
         )}
-      </ScrollableList>
+      </Stack>
     );
   }
 
diff --git a/app/soapbox/features/ui/util/async-components.ts b/app/soapbox/features/ui/util/async-components.ts
index 8836b9a09d..e73efd2434 100644
--- a/app/soapbox/features/ui/util/async-components.ts
+++ b/app/soapbox/features/ui/util/async-components.ts
@@ -203,7 +203,7 @@ export function ReblogsModal() {
 }
 
 export function FavouritesModal() {
-  return import(/* webpackChunkName: "features/ui" */'../components/favourites_modal');
+  return import(/* webpackChunkName: "features/ui" */'../components/modals/favourites-modal');
 }
 
 export function ReactionsModal() {
diff --git a/app/soapbox/locales/defaultMessages.json b/app/soapbox/locales/defaultMessages.json
index 674824f45d..2dd513e590 100644
--- a/app/soapbox/locales/defaultMessages.json
+++ b/app/soapbox/locales/defaultMessages.json
@@ -6035,7 +6035,7 @@
         "id": "column.favourites"
       }
     ],
-    "path": "app/soapbox/features/ui/components/favourites_modal.json"
+    "path": "app/soapbox/features/ui/components/modals/favourites-modal.json"
   },
   {
     "descriptors": [