Merge pull request #2731 from metabrainz/migrate-user-feed-to-spa

Migrate user dashboard and Explore pages to SPA

Author: MonkeyDo

Diff for: frontend/css/listens-page.less

@@ -725,3 +725,8 @@
     }
   }
 }
+
+.user-charts-pill {
+  color: unset !important;
+  text-decoration: unset !important;
+}

Diff for: frontend/css/new-navbar.less

@@ -277,6 +277,7 @@ body {
         a:visited,
         a:visited:hover {
           color: @white;
+          background: initial;
         }
       }
       &.disabled {

Diff for: frontend/js/src/common/listens/ListenCard.tsx

@@ -475,10 +475,7 @@ export default class ListenCard extends React.Component<
                   </div>
                 )}
               </div>
-              <div
-                className="small text-muted ellipsis"
-                title={artistName}
-              >
+              <div className="small text-muted ellipsis" title={artistName}>
                 {getArtistLink(listen)}
               </div>
             </div>

Diff for: frontend/js/src/error/ErrorBoundary.tsx

@@ -0,0 +1,51 @@
+import React from "react";
+import { Helmet } from "react-helmet";
+import { isRouteErrorResponse, useRouteError } from "react-router-dom";
+
+const ErrorStatusMessage: { [key: number]: string } = {
+  400: "Invalid request",
+  401: "Unauthorized",
+  403: "Access denied",
+  404: "Page not found",
+  413: "Filesize limit exceeded",
+  500: "Internal server error",
+  503: "Service unavailable",
+};
+
+type RouteError = {
+  status?: number;
+  message?: string;
+  data?: any;
+};
+
+export function ErrorBoundary() {
+  const error = useRouteError() as RouteError;
+  const errorStatus = error.status || 500;
+  const errorStatusMessage = ErrorStatusMessage[errorStatus] || "Error";
+
+  const errorMessage = error.data?.error || error.message || errorStatusMessage;
+
+  return isRouteErrorResponse(error) ? (
+    <>
+      <Helmet>
+        <title>{errorStatusMessage}</title>
+      </Helmet>
+      <h2 className="page-title">{errorStatusMessage}</h2>
+      <p>
+        <code>{`${errorStatus}: ${errorMessage}`}</code>
+      </p>
+      <p>
+        <a href="/">Back to home page</a>
+      </p>
+    </>
+  ) : (
+    <>
+      <Helmet>
+        <title>Error</title>
+      </Helmet>
+      <h2 className="page-title">Error Occured!</h2>
+    </>
+  );
+}
+
+export default ErrorBoundary;

Diff for: frontend/js/src/explore/Explore.tsx

@@ -1,11 +1,10 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
 
-import { createRoot } from "react-dom/client";
 import * as React from "react";
 import { useContext } from "react";
-import { getPageProps } from "../utils/utils";
 
-import ErrorBoundary from "../utils/ErrorBoundary";
+import { Link } from "react-router-dom";
+import { Helmet } from "react-helmet";
 import GlobalAppContext from "../utils/GlobalAppContext";
 
 type ExploreCardProps = {
@@ -20,9 +19,9 @@ function ExploreCard(props: ExploreCardProps) {
   return (
     <div className="explore-card-container">
       <div className="explore-card">
-        <a href={url}>
+        <Link to={url}>
           <div className="explore-card-img-overlay"> </div>
-        </a>
+        </Link>
         <div className="explore-card-img-clip flex-center">
           <img
             src={`/static/img/explore/${img_name}`}
@@ -32,7 +31,7 @@ function ExploreCard(props: ExploreCardProps) {
         </div>
         <div className="explore-card-text">
           <div className="explore-card-text-name">
-            <a href={url}>{name}</a>
+            <Link to={url}>{name}</Link>
           </div>
           <div>{desc}</div>
         </div>
@@ -41,41 +40,44 @@ function ExploreCard(props: ExploreCardProps) {
   );
 }
 
-function ExplorePage() {
+export default function ExplorePage() {
   const { currentUser } = useContext(GlobalAppContext);
   return (
     <>
+      <Helmet>
+        <title>Explore</title>
+      </Helmet>
       <div className="row">
         <div>
           <ExploreCard
             name="Fresh Releases"
             desc="Discover"
             img_name="fresh-releases.jpg"
-            url="/explore/fresh-releases"
+            url="/explore/fresh-releases/"
           />
         </div>
         <div>
           <ExploreCard
             name="Hue Sound"
             desc="Discover"
             img_name="huesound.jpg"
-            url="/explore/huesound"
+            url="/explore/huesound/"
           />
         </div>
         <div>
           <ExploreCard
             name="Cover Art Collage"
             desc="Discover"
             img_name="cover-art-collage.jpg"
-            url="/explore/cover-art-collage"
+            url="/explore/cover-art-collage/"
           />
         </div>
         <div>
           <ExploreCard
             name="Music Neighborhood"
             desc="Visualisation"
             img_name="music-neighborhood.jpg"
-            url="/explore/music-neighborhood"
+            url="/explore/music-neighborhood/"
           />
         </div>
         {currentUser?.name && (
@@ -84,7 +86,7 @@ function ExplorePage() {
               name="Your Year in Music 2023"
               desc="Review"
               img_name="year-in-music-2023.jpg"
-              url={`/user/${currentUser.name}/year-in-music/2023`}
+              url={`/user/${currentUser.name}/year-in-music/2023/`}
             />
           </div>
         )}
@@ -94,7 +96,7 @@ function ExplorePage() {
               name="Your Year in Music 2022"
               desc="Review"
               img_name="year-in-music-2022.jpg"
-              url={`/user/${currentUser.name}/year-in-music/2022`}
+              url={`/user/${currentUser.name}/year-in-music/2022/`}
             />
           </div>
         )}
@@ -104,7 +106,7 @@ function ExplorePage() {
               name="Your Year in Music 2021"
               desc="Review"
               img_name="year-in-music-2021.jpg"
-              url={`/user/${currentUser.name}/year-in-music/2021`}
+              url={`/user/${currentUser.name}/year-in-music/2021/`}
             />
           </div>
         )}
@@ -113,7 +115,7 @@ function ExplorePage() {
             name="Top Similar Users"
             desc="Social"
             img_name="similar-users.jpg"
-            url="/explore/similar-users"
+            url="/explore/similar-users/"
           />
         </div>
       </div>
@@ -126,28 +128,15 @@ function ExplorePage() {
           name="ListenBrainz Radio"
           desc="Instant custom playlists"
           img_name="lb-radio-beta.jpg"
-          url="/explore/lb-radio"
+          url="/explore/lb-radio/"
         />
         <ExploreCard
           name="Stats art generator"
           desc="Visualize and share your stats"
           img_name="stats-art-beta.jpg"
-          url="/explore/art-creator"
+          url="/explore/art-creator/"
         />
       </div>
     </>
   );
 }
-
-document.addEventListener("DOMContentLoaded", async () => {
-  const { domContainer, globalAppContext } = await getPageProps();
-
-  const renderRoot = createRoot(domContainer!);
-  renderRoot.render(
-    <ErrorBoundary>
-      <GlobalAppContext.Provider value={globalAppContext}>
-        <ExplorePage />
-      </GlobalAppContext.Provider>
-    </ErrorBoundary>
-  );
-});