fix: Hide Listen Count and Playlist Count if the value is not defined

metabrainz · Sep 16, 2024 · ef311fc · ef311fc
1 parent 5f6962c
commit ef311fc
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 14 deletions.
diff --git a/frontend/css/donors-page.less b/frontend/css/donors-page.less
@@ -19,7 +19,7 @@
       margin-bottom: 0;
     }
 
-    .donation-amount {
+    .donation-user {
       font-weight: 600;
       font-size: 1.75rem;
       margin-bottom: 0.5rem;

diff --git a/frontend/js/src/donors/Donors.tsx b/frontend/js/src/donors/Donors.tsx
@@ -17,7 +17,6 @@ import Loader from "../components/Loader";
 type DonorLoaderData = {
   data: {
     id: number;
-    name: string;
     donated_at: string;
     donation: number;
     currency: "usd" | "eur";
@@ -93,20 +92,18 @@ function Donors() {
         {donors?.map((donor) => (
           <div key={donor.id} className="donor-card">
             <div className="donor-info">
-              <p className="donation-amount">
-                {donor.musicbrainz_id}{" "}
-                {donor.musicbrainz_id ? (
-                  <>
-                    &#040;
+              <p className="donation-user">
+                {donor.musicbrainz_id &&
+                  (donor.is_listenbrainz_user ? (
                     <Link
                       to={`/user/${donor.musicbrainz_id}`}
                       className="donor-name"
                     >
                       {donor.musicbrainz_id}
                     </Link>
-                    &#041;
-                  </>
-                ) : null}
+                  ) : (
+                    <span>{donor.musicbrainz_id}</span>
+                  ))}
               </p>
               <p className="donation-date">
                 <FontAwesomeIcon icon={faCalendar} />
@@ -123,24 +120,24 @@ function Donors() {
               </p>
               {donor.musicbrainz_id && donor.is_listenbrainz_user ? (
                 <div className="recent-listens">
-                  {donor.listenCount && (
+                  {donor.listenCount ? (
                     <Link
                       className="listen-item"
                       to={`/user/${donor.musicbrainz_id}/stats/?range=all_time`}
                     >
                       <FontAwesomeIcon icon={faMusic} />
                       {formatListenCount(donor.listenCount)} Listens
                     </Link>
-                  )}
-                  {donor.playlistCount && (
+                  ) : null}
+                  {donor.playlistCount ? (
                     <Link
                       className="listen-item"
                       to={`/user/${donor.musicbrainz_id}/playlists/`}
                     >
                       <FontAwesomeIcon icon={faListAlt} />
                       {formatListenCount(donor.playlistCount)} Playlists
                     </Link>
-                  )}
+                  ) : null}
                 </div>
               ) : null}
             </div>