From eedadb8884c91d7c7259e3fa6e79a25ac5c2d66a Mon Sep 17 00:00:00 2001
From: TheCatLady <52870424+TheCatLady@users.noreply.github.com>
Date: Thu, 4 Feb 2021 20:35:11 -0500
Subject: [PATCH] refactor(ui): Display user avatars in request list (#848)

---
 .../RequestList/RequestItem/index.tsx         | 42 ++++++++++++-------
 src/i18n/locale/en.json                       |  1 -
 2 files changed, 26 insertions(+), 17 deletions(-)

diff --git a/src/components/RequestList/RequestItem/index.tsx b/src/components/RequestList/RequestItem/index.tsx
index c10b5b3a7..d7e3cae37 100644
--- a/src/components/RequestList/RequestItem/index.tsx
+++ b/src/components/RequestList/RequestItem/index.tsx
@@ -27,7 +27,6 @@ import { useToasts } from 'react-toast-notifications';
 import RequestModal from '../../RequestModal';
 
 const messages = defineMessages({
-  requestedby: 'Requested by {username}',
   seasons: 'Seasons',
   notavailable: 'N/A',
   failedretry: 'Something went wrong while retrying the request.',
@@ -163,10 +162,15 @@ const RequestItem: React.FC<RequestItemProps> = ({
                 {isMovie(title) ? title.title : title.name}
               </a>
             </Link>
-            <div className="text-sm">
-              {intl.formatMessage(messages.requestedby, {
-                username: requestData.requestedBy.displayName,
-              })}
+            <div className="flex items-center">
+              <img
+                src={requestData.requestedBy.avatar}
+                alt=""
+                className="w-5 mr-2 rounded-full"
+              />
+              <span className="text-sm">
+                {requestData.requestedBy.displayName}
+              </span>
             </div>
             {requestData.seasons.length > 0 && (
               <div className="items-center hidden mt-2 text-sm sm:flex">
@@ -216,18 +220,24 @@ const RequestItem: React.FC<RequestItemProps> = ({
         <div className="flex flex-col">
           {requestData.modifiedBy ? (
             <span className="text-sm text-gray-300">
-              <span className="mr-1">{requestData.modifiedBy.displayName}</span>
-              <span>
-                (
-                <FormattedRelativeTime
-                  value={Math.floor(
-                    (new Date(requestData.updatedAt).getTime() - Date.now()) /
-                      1000
-                  )}
-                  updateIntervalInSeconds={1}
+              <div className="flex items-center">
+                <img
+                  src={requestData.modifiedBy.avatar}
+                  alt=""
+                  className="w-5 mr-2 rounded-full"
                 />
-                )
-              </span>
+                <span className="text-sm">
+                  {requestData.modifiedBy.displayName} (
+                  <FormattedRelativeTime
+                    value={Math.floor(
+                      (new Date(requestData.updatedAt).getTime() - Date.now()) /
+                        1000
+                    )}
+                    updateIntervalInSeconds={1}
+                  />
+                  )
+                </span>
+              </div>
             </span>
           ) : (
             <span className="text-sm text-gray-300">N/A</span>
diff --git a/src/i18n/locale/en.json b/src/i18n/locale/en.json
index 85092face..c6fb2656b 100644
--- a/src/i18n/locale/en.json
+++ b/src/i18n/locale/en.json
@@ -148,7 +148,6 @@
   "components.RequestCard.seasons": "Seasons",
   "components.RequestList.RequestItem.failedretry": "Something went wrong while retrying the request.",
   "components.RequestList.RequestItem.notavailable": "N/A",
-  "components.RequestList.RequestItem.requestedby": "Requested by {username}",
   "components.RequestList.RequestItem.seasons": "Seasons",
   "components.RequestList.filterAll": "All",
   "components.RequestList.filterApproved": "Approved",