Merge pull request #2715 from metabrainz/tags-component

LB-1410, LB-1340, LB-1337: Tags component: show all tags and improve layout
metabrainz · Jan 18, 2024 · 908023d · 908023d
2 parents 0c3336d + 0d2b59a
commit 908023d
Show file tree

Hide file tree

Showing 36 changed files with 265 additions and 129 deletions.
diff --git a/frontend/css/tags.less b/frontend/css/tags.less
@@ -17,7 +17,6 @@
     height: 100%;
     display: inline-block;
     padding: 3px 7px;
-    vertical-align: middle;
     &:first-child {
       border-top-left-radius: @tagBorderRadius;
       border-bottom-left-radius: @tagBorderRadius;

diff --git a/frontend/js/src/entity-pages/AlbumPage.tsx b/frontend/js/src/entity-pages/AlbumPage.tsx
@@ -189,7 +189,6 @@ export default function AlbumPage(props: AlbumPageProps): JSX.Element {
   );
 
   const filteredTags = chain(releaseGroupTags)
-    .filter("genre_mbid")
     .sortBy("count")
     .value()
     .reverse();
@@ -484,13 +483,13 @@ export default function AlbumPage(props: AlbumPageProps): JSX.Element {
   );
 }
 
-document.addEventListener("DOMContentLoaded", () => {
+document.addEventListener("DOMContentLoaded", async () => {
   const {
     domContainer,
     reactProps,
     globalAppContext,
     sentryProps,
-  } = getPageProps();
+  } = await getPageProps();
   const { sentry_dsn, sentry_traces_sample_rate } = sentryProps;
 
   if (sentry_dsn) {

diff --git a/frontend/js/src/entity-pages/ArtistPage.tsx b/frontend/js/src/entity-pages/ArtistPage.tsx
@@ -128,7 +128,6 @@ export default function ArtistPage(props: ArtistPageProps): JSX.Element {
     popularRecordings.map(popularRecordingToListen) ?? [];
 
   const filteredTags = chain(artist.tag?.artist)
-    .filter("genre_mbid")
     .sortBy("count")
     .value()
     .reverse();
@@ -482,13 +481,13 @@ export default function ArtistPage(props: ArtistPageProps): JSX.Element {
   );
 }
 
-document.addEventListener("DOMContentLoaded", () => {
+document.addEventListener("DOMContentLoaded", async () => {
   const {
     domContainer,
     reactProps,
     globalAppContext,
     sentryProps,
-  } = getPageProps();
+  } = await getPageProps();
   const { sentry_dsn, sentry_traces_sample_rate } = sentryProps;
 
   if (sentry_dsn) {

diff --git a/frontend/js/src/explore/Explore.tsx b/frontend/js/src/explore/Explore.tsx
@@ -131,8 +131,8 @@ function ExplorePage() {
   );
 }
 
-document.addEventListener("DOMContentLoaded", () => {
-  const { domContainer, globalAppContext } = getPageProps();
+document.addEventListener("DOMContentLoaded", async () => {
+  const { domContainer, globalAppContext } = await getPageProps();
 
   const renderRoot = createRoot(domContainer!);
   renderRoot.render(

diff --git a/frontend/js/src/explore/ai-brainz/AIBrainz.tsx b/frontend/js/src/explore/ai-brainz/AIBrainz.tsx
@@ -346,8 +346,8 @@ function AIBrainzComponent(props: AIBrainzComponentProps) {
   );
 }
 
-document.addEventListener("DOMContentLoaded", () => {
-  const { domContainer, globalAppContext } = getPageProps();
+document.addEventListener("DOMContentLoaded", async () => {
+  const { domContainer, globalAppContext } = await getPageProps();
 
   const AIBrainzComponentWithAlertNotifications = withAlertNotifications(
     AIBrainzComponent

diff --git a/frontend/js/src/explore/art-creator/ArtCreator.tsx b/frontend/js/src/explore/art-creator/ArtCreator.tsx
@@ -673,8 +673,8 @@ function ArtCreator() {
 
 export default ArtCreator;
 
-document.addEventListener("DOMContentLoaded", () => {
-  const { domContainer, globalAppContext, sentryProps } = getPageProps();
+document.addEventListener("DOMContentLoaded", async () => {
+  const { domContainer, globalAppContext, sentryProps } = await getPageProps();
   const { sentry_dsn, sentry_traces_sample_rate } = sentryProps;
 
   if (sentry_dsn) {

diff --git a/frontend/js/src/explore/cover-art-collage/2022/CoverArtComposite.tsx b/frontend/js/src/explore/cover-art-collage/2022/CoverArtComposite.tsx
@@ -170,8 +170,8 @@ export default function CoverArtComposite() {
   );
 }
 
-document.addEventListener("DOMContentLoaded", () => {
-  const { domContainer } = getPageProps();
+document.addEventListener("DOMContentLoaded", async () => {
+  const { domContainer } = await getPageProps();
 
   const renderRoot = createRoot(domContainer!);
   renderRoot.render(

diff --git a/frontend/js/src/explore/cover-art-collage/2023/CoverArtComposite.tsx b/frontend/js/src/explore/cover-art-collage/2023/CoverArtComposite.tsx
@@ -162,8 +162,8 @@ export default function CoverArtComposite() {
   );
 }
 
-document.addEventListener("DOMContentLoaded", () => {
-  const { domContainer } = getPageProps();
+document.addEventListener("DOMContentLoaded", async () => {
+  const { domContainer } = await getPageProps();
 
   const renderRoot = createRoot(domContainer!);
   renderRoot.render(

diff --git a/frontend/js/src/explore/fresh-releases/FreshReleases.tsx b/frontend/js/src/explore/fresh-releases/FreshReleases.tsx
@@ -322,8 +322,8 @@ export default function FreshReleases() {
   );
 }
 
-document.addEventListener("DOMContentLoaded", () => {
-  const { domContainer, globalAppContext, sentryProps } = getPageProps();
+document.addEventListener("DOMContentLoaded", async () => {
+  const { domContainer, globalAppContext, sentryProps } = await getPageProps();
   const { sentry_dsn, sentry_traces_sample_rate } = sentryProps;
 
   if (sentry_dsn) {

diff --git a/frontend/js/src/explore/huesound/ColorPlay.tsx b/frontend/js/src/explore/huesound/ColorPlay.tsx
@@ -236,8 +236,8 @@ export default class ColorPlay extends React.Component<
   }
 }
 
-document.addEventListener("DOMContentLoaded", () => {
-  const { domContainer, reactProps, globalAppContext } = getPageProps();
+document.addEventListener("DOMContentLoaded", async () => {
+  const { domContainer, reactProps, globalAppContext } = await getPageProps();
 
   const { user } = reactProps;
 

diff --git a/frontend/js/src/explore/lb-radio/LBRadio.tsx b/frontend/js/src/explore/lb-radio/LBRadio.tsx
@@ -133,8 +133,8 @@ function LBRadio(props: LBRadioProps) {
   );
 }
 
-document.addEventListener("DOMContentLoaded", () => {
-  const { domContainer, reactProps, globalAppContext } = getPageProps();
+document.addEventListener("DOMContentLoaded", async () => {
+  const { domContainer, reactProps, globalAppContext } = await getPageProps();
 
   const { user, mode, prompt, token } = reactProps;
   const renderRoot = createRoot(domContainer!);

diff --git a/frontend/js/src/home/Homepage.tsx b/frontend/js/src/home/Homepage.tsx
@@ -26,9 +26,9 @@ import { getPageProps } from "../utils/utils";
 import Blog from "./Blog";
 import ErrorBoundary from "../utils/ErrorBoundary";
 
-document.addEventListener("DOMContentLoaded", () => {
+document.addEventListener("DOMContentLoaded", async () => {
   const domContainer = document.querySelector("#blogs");
-  const { globalAppContext, sentryProps } = getPageProps();
+  const { globalAppContext, sentryProps } = await getPageProps();
   const { sentry_dsn, sentry_traces_sample_rate } = sentryProps;
 
   if (sentry_dsn) {

diff --git a/frontend/js/src/lastfm/LastFMImporter.tsx b/frontend/js/src/lastfm/LastFMImporter.tsx
@@ -669,13 +669,13 @@ export default class LastFmImporter extends React.Component<
   }
 }
 
-document.addEventListener("DOMContentLoaded", () => {
+document.addEventListener("DOMContentLoaded", async () => {
   const {
     domContainer,
     reactProps,
     globalAppContext,
     sentryProps,
-  } = getPageProps();
+  } = await getPageProps();
   const { sentry_dsn, sentry_traces_sample_rate } = sentryProps;
 
   if (sentry_dsn) {

diff --git a/frontend/js/src/metadata-viewer/MetadataViewer.tsx b/frontend/js/src/metadata-viewer/MetadataViewer.tsx
@@ -44,16 +44,12 @@ function getNowPlayingRecordingMBID(
 }
 
 function filterAndSortTags(tags?: EntityTag[]): EntityTag[] | undefined {
-  return tags
-    ?.filter((tag) => {
-      return tag.genre_mbid;
-    })
-    .sort((a, b) => {
-      if (a.genre_mbid && !b.genre_mbid) {
-        return 1;
-      }
-      return b.count - a.count;
-    });
+  return tags?.sort((a, b) => {
+    if (a.genre_mbid && !b.genre_mbid) {
+      return 1;
+    }
+    return b.count - a.count;
+  });
 }
 
 export default function MetadataViewer(props: MetadataViewerProps) {

diff --git a/frontend/js/src/metadata-viewer/MetadataViewerPageWrapper.tsx b/frontend/js/src/metadata-viewer/MetadataViewerPageWrapper.tsx
@@ -118,7 +118,7 @@ document.addEventListener("DOMContentLoaded", async () => {
     reactProps,
     globalAppContext,
     sentryProps,
-  } = getPageProps();
+  } = await getPageProps();
   const { sentry_dsn, sentry_traces_sample_rate } = sentryProps;
 
   if (sentry_dsn) {
@@ -131,20 +131,6 @@ document.addEventListener("DOMContentLoaded", async () => {
 
   const { playing_now } = reactProps;
 
-  /** Fetch and save list of MusicBrainz genres on startup
-   * Not sure where this should end (list of genres sent by back-end instead?)
-   * but for now genres are only used on this page
-   */
-  try {
-    const response = await fetch(
-      "https://musicbrainz.org/ws/2/genre/all?fmt=txt"
-    );
-    const genresList = await response.text();
-    globalAppContext.musicbrainzGenres = Array.from(genresList.split("\n"));
-  } catch (error) {
-    console.error(error);
-  }
-
   const PlayingNowPageWithAlertNotifications = withAlertNotifications(
     PlayingNowPage
   );

diff --git a/frontend/js/src/missing-mb-data/MissingMBData.tsx b/frontend/js/src/missing-mb-data/MissingMBData.tsx
@@ -364,13 +364,13 @@ export default class MissingMBDataPage extends React.Component<
   }
 }
 
-document.addEventListener("DOMContentLoaded", () => {
+document.addEventListener("DOMContentLoaded", async () => {
   const {
     domContainer,
     reactProps,
     globalAppContext,
     sentryProps,
-  } = getPageProps();
+  } = await getPageProps();
   const { sentry_dsn, sentry_traces_sample_rate } = sentryProps;
 
   if (sentry_dsn) {

diff --git a/frontend/js/src/player-pages/PlayerPage.tsx b/frontend/js/src/player-pages/PlayerPage.tsx
@@ -255,13 +255,13 @@ export default class PlayerPage extends React.Component<
   }
 }
 
-document.addEventListener("DOMContentLoaded", () => {
+document.addEventListener("DOMContentLoaded", async () => {
   const {
     domContainer,
     reactProps,
     globalAppContext,
     sentryProps,
-  } = getPageProps();
+  } = await getPageProps();
   const { sentry_dsn, sentry_traces_sample_rate } = sentryProps;
 
   if (sentry_dsn) {

diff --git a/frontend/js/src/playlists/Playlist.tsx b/frontend/js/src/playlists/Playlist.tsx
@@ -488,13 +488,13 @@ export default class PlaylistPage extends React.Component<
   }
 }
 
-document.addEventListener("DOMContentLoaded", () => {
+document.addEventListener("DOMContentLoaded", async () => {
   const {
     domContainer,
     reactProps,
     globalAppContext,
     sentryProps,
-  } = getPageProps();
+  } = await getPageProps();
   const { sentry_dsn, sentry_traces_sample_rate } = sentryProps;
 
   if (sentry_dsn) {

diff --git a/frontend/js/src/playlists/Playlists.tsx b/frontend/js/src/playlists/Playlists.tsx
@@ -183,13 +183,13 @@ export default class UserPlaylists extends React.Component<
   }
 }
 
-document.addEventListener("DOMContentLoaded", () => {
+document.addEventListener("DOMContentLoaded", async () => {
   const {
     domContainer,
     reactProps,
     globalAppContext,
     sentryProps,
-  } = getPageProps();
+  } = await getPageProps();
   const { sentry_dsn, sentry_traces_sample_rate } = sentryProps;
 
   if (sentry_dsn) {

diff --git a/frontend/js/src/recent/RecentListens.tsx b/frontend/js/src/recent/RecentListens.tsx
@@ -108,13 +108,13 @@ export default class RecentListens extends React.Component<
   }
 }
 
-document.addEventListener("DOMContentLoaded", () => {
+document.addEventListener("DOMContentLoaded", async () => {
   const {
     domContainer,
     reactProps,
     globalAppContext,
     sentryProps,
-  } = getPageProps();
+  } = await getPageProps();
   const { sentry_dsn, sentry_traces_sample_rate } = sentryProps;
   if (sentry_dsn) {
     Sentry.init({

diff --git a/frontend/js/src/recommendations/Recommendations.tsx b/frontend/js/src/recommendations/Recommendations.tsx
@@ -342,13 +342,13 @@ export default class Recommendations extends React.Component<
   }
 }
 
-document.addEventListener("DOMContentLoaded", () => {
+document.addEventListener("DOMContentLoaded", async () => {
   const {
     domContainer,
     reactProps,
     globalAppContext,
     sentryProps,
-  } = getPageProps();
+  } = await getPageProps();
   const { sentry_dsn, sentry_traces_sample_rate } = sentryProps;
 
   if (sentry_dsn) {

diff --git a/frontend/js/src/recommendations/RecommendationsPage.tsx b/frontend/js/src/recommendations/RecommendationsPage.tsx
@@ -488,13 +488,13 @@ export default class RecommendationsPage extends React.Component<
   }
 }
 
-document.addEventListener("DOMContentLoaded", () => {
+document.addEventListener("DOMContentLoaded", async () => {
   const {
     domContainer,
     reactProps,
     globalAppContext,
     sentryProps,
-  } = getPageProps();
+  } = await getPageProps();
   const { sentry_dsn, sentry_traces_sample_rate } = sentryProps;
 
   if (sentry_dsn) {

diff --git a/frontend/js/src/stats/UserEntityChart.tsx b/frontend/js/src/stats/UserEntityChart.tsx
@@ -683,13 +683,13 @@ export default class UserEntityChart extends React.Component<
   }
 }
 
-document.addEventListener("DOMContentLoaded", () => {
+document.addEventListener("DOMContentLoaded", async () => {
   const {
     domContainer,
     reactProps,
     globalAppContext,
     sentryProps,
-  } = getPageProps();
+  } = await getPageProps();
   const { sentry_dsn, sentry_traces_sample_rate } = sentryProps;
 
   if (sentry_dsn) {

diff --git a/frontend/js/src/stats/UserReports.tsx b/frontend/js/src/stats/UserReports.tsx
@@ -215,13 +215,13 @@ export default class UserReports extends React.Component<
   }
 }
 
-document.addEventListener("DOMContentLoaded", () => {
+document.addEventListener("DOMContentLoaded", async () => {
   const {
     domContainer,
     reactProps,
     globalAppContext,
     sentryProps,
-  } = getPageProps();
+  } = await getPageProps();
   const { sentry_dsn, sentry_traces_sample_rate } = sentryProps;
 
   if (sentry_dsn) {