Final Refactoring of the Frontend Codebase

listenbrainz/webserver/static/js/src/follow/UserListModalEntry.tsx

@@ -3,7 +3,7 @@ import * as React from "react";
 import { useContext } from "react";
 import FollowButton from "./FollowButton";
 import GlobalAppContext from "../utils/GlobalAppContext";
-import SimilarityScore from "../SimilarityScore";
+import SimilarityScore from "../stats/SimilarityScore";
 
 export type UserListModalEntryProps = {
   mode: "follow-following" | "similar-users";

listenbrainz/webserver/static/js/src/playlists/Playlist.tsx

@@ -29,7 +29,7 @@ import {
 } from "../notifications/AlertNotificationsHOC";
 import APIServiceClass from "../utils/APIService";
 import GlobalAppContext, { GlobalAppContextT } from "../utils/GlobalAppContext";
-import SpotifyAPIService from "../SpotifyAPIService";
+import SpotifyAPIService from "../utils/SpotifyAPIService";
 import BrainzPlayer from "../brainzplayer/BrainzPlayer";
 import Card from "../components/Card";
 import Loader from "../components/Loader";

listenbrainz/webserver/static/js/src/stats/Choropleth.tsx

@@ -11,7 +11,7 @@ import { useMediaQuery } from "react-responsive";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { IconProp } from "@fortawesome/fontawesome-svg-core";
 import { faHeadphones } from "@fortawesome/free-solid-svg-icons";
-import * as worldCountries from "./world_countries.json";
+import * as worldCountries from "../../tests/__mocks__/world_countries.json";
 
 export type ChoroplethProps = {
   data: UserArtistMapData;

listenbrainz/webserver/static/js/src/RecentListens.tsx → listenbrainz/webserver/static/js/src/user/RecentListens.tsx

@@ -17,19 +17,19 @@ import {
   faThumbtack,
   faTrashAlt,
 } from "@fortawesome/free-solid-svg-icons";
-import GlobalAppContext, { GlobalAppContextT } from "./utils/GlobalAppContext";
+import GlobalAppContext, { GlobalAppContextT } from "../utils/GlobalAppContext";
 import {
   WithAlertNotificationsInjectedProps,
   withAlertNotifications,
-} from "./notifications/AlertNotificationsHOC";
-
-import APIServiceClass from "./utils/APIService";
-import BrainzPlayer from "./brainzplayer/BrainzPlayer";
-import ErrorBoundary from "./utils/ErrorBoundary";
-import ListenCard from "./listens/ListenCard";
-import Loader from "./components/Loader";
-import PinRecordingModal from "./pins/PinRecordingModal";
-import PinnedRecordingCard from "./pins/PinnedRecordingCard";
+} from "../notifications/AlertNotificationsHOC";
+
+import APIServiceClass from "../utils/APIService";
+import BrainzPlayer from "../brainzplayer/BrainzPlayer";
+import ErrorBoundary from "../utils/ErrorBoundary";
+import ListenCard from "../listens/ListenCard";
+import Loader from "../components/Loader";
+import PinRecordingModal from "../pins/PinRecordingModal";
+import PinnedRecordingCard from "../pins/PinnedRecordingCard";
 import {
   formatWSMessageToListen,
   getPageProps,
@@ -38,9 +38,9 @@ import {
   getArtistMBIDs,
   getReleaseMBID,
   getReleaseGroupMBID,
-} from "./utils/utils";
-import CBReviewModal from "./cb-review/CBReviewModal";
-import ListenControl from "./listens/ListenControl";
+} from "../utils/utils";
+import CBReviewModal from "../cb-review/CBReviewModal";
+import ListenControl from "../listens/ListenControl";
 
 export type RecentListensProps = {
   latestListenTs: number;

listenbrainz/webserver/static/js/src/UserFeedback.tsx → listenbrainz/webserver/static/js/src/user/UserFeedback.tsx

@@ -13,21 +13,21 @@ import {
 } from "@fortawesome/free-solid-svg-icons";
 import { isNaN, get, clone, has } from "lodash";
 import { Integrations } from "@sentry/tracing";
-import GlobalAppContext, { GlobalAppContextT } from "./utils/GlobalAppContext";
+import GlobalAppContext, { GlobalAppContextT } from "../utils/GlobalAppContext";
 import {
   WithAlertNotificationsInjectedProps,
   withAlertNotifications,
-} from "./notifications/AlertNotificationsHOC";
-
-import Pill from "./components/Pill";
-import APIServiceClass from "./utils/APIService";
-import BrainzPlayer from "./brainzplayer/BrainzPlayer";
-import ErrorBoundary from "./utils/ErrorBoundary";
-import ListenCard from "./listens/ListenCard";
-import Loader from "./components/Loader";
-import PinRecordingModal from "./pins/PinRecordingModal";
-import { getPageProps, handleNavigationClickEvent } from "./utils/utils";
-import ListenControl from "./listens/ListenControl";
+} from "../notifications/AlertNotificationsHOC";
+
+import Pill from "../components/Pill";
+import APIServiceClass from "../utils/APIService";
+import BrainzPlayer from "../brainzplayer/BrainzPlayer";
+import ErrorBoundary from "../utils/ErrorBoundary";
+import ListenCard from "../listens/ListenCard";
+import Loader from "../components/Loader";
+import PinRecordingModal from "../pins/PinRecordingModal";
+import { getPageProps, handleNavigationClickEvent } from "../utils/utils";
+import ListenControl from "../listens/ListenControl";
 
 export type UserFeedbackProps = {
   feedback?: Array<FeedbackResponseWithTrackMetadata>;

listenbrainz/webserver/static/js/src/UserPageHeading.tsx → listenbrainz/webserver/static/js/src/user/UserPageHeading.tsx

@@ -23,11 +23,11 @@ import * as ReactDOM from "react-dom";
 import * as Sentry from "@sentry/react";
 import { Integrations } from "@sentry/tracing";
 import { isEmpty, isNil } from "lodash";
-import FollowButton from "./follow/FollowButton";
-import APIService from "./utils/APIService";
-import GlobalAppContext, { GlobalAppContextT } from "./utils/GlobalAppContext";
-import ReportUserButton from "./report-user/ReportUser";
-import { getPageProps } from "./utils/utils";
+import FollowButton from "../follow/FollowButton";
+import APIService from "../utils/APIService";
+import GlobalAppContext, { GlobalAppContextT } from "../utils/GlobalAppContext";
+import ReportUserButton from "../report-user/ReportUser";
+import { getPageProps } from "../utils/utils";
 
 const UserPageHeading = ({
   user,

listenbrainz/webserver/static/js/src/SpotifyAPIService.ts → listenbrainz/webserver/static/js/src/utils/SpotifyAPIService.ts

@@ -3,7 +3,7 @@
 
 /* eslint-disable camelcase */
 
-import { searchForSpotifyTrack } from "./utils/utils";
+import { searchForSpotifyTrack } from "./utils";
 
 export default class SpotifyAPIService {
   static async checkStatus(response: Response) {

listenbrainz/webserver/static/js/src/utils/utils.tsx

@@ -3,7 +3,7 @@ import * as _ from "lodash";
 import * as timeago from "time-ago";
 import SpotifyPlayer from "../brainzplayer/SpotifyPlayer";
 import YoutubePlayer from "../brainzplayer/YoutubePlayer";
-import SpotifyAPIService from "../SpotifyAPIService";
+import SpotifyAPIService from "./SpotifyAPIService";
 
 const searchForSpotifyTrack = async (
   spotifyToken?: string,

listenbrainz/webserver/static/js/src/year-in-music/YearInMusic.tsx

@@ -28,7 +28,6 @@ import { getPageProps } from "../utils/utils";
 import { getEntityLink } from "../stats/utils";
 import ComponentToImage from "./ComponentToImage";
 
-import fakeData from "./year-in-music-data.json";
 import ListenCard from "../listens/ListenCard";
 import UserListModalEntry from "../follow/UserListModalEntry";
 import {

listenbrainz/webserver/static/js/src/SimilarityScore.test.tsx → listenbrainz/webserver/static/js/tests/stats/SimilarityScore.test.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { mount } from "enzyme";
 
-import SimilarityScore, { SimilarityScoreProps } from "./SimilarityScore";
+import SimilarityScore, { SimilarityScoreProps } from "../../src/stats/SimilarityScore";
 
 const props: SimilarityScoreProps = {
   similarityScore: 0.239745792,

listenbrainz/webserver/static/js/src/RecentListens.test.tsx → listenbrainz/webserver/static/js/tests/user/RecentListens.test.tsx

@@ -5,20 +5,20 @@ import { mount } from "enzyme";
 import * as timeago from "time-ago";
 import fetchMock from "jest-fetch-mock";
 import { io } from "socket.io-client";
-import GlobalAppContext, { GlobalAppContextT } from "./utils/GlobalAppContext";
-import APIServiceClass from "./utils/APIService";
+import GlobalAppContext, { GlobalAppContextT } from "../../src/utils/GlobalAppContext";
+import APIServiceClass from "../../src/utils/APIService";
 
-import * as recentListensProps from "../tests/__mocks__/recentListensProps.json";
-import * as recentListensPropsTooManyListens from "../tests/__mocks__/recentListensPropsTooManyListens.json";
-import * as recentListensPropsOneListen from "../tests/__mocks__/recentListensPropsOneListen.json";
-import * as recentListensPropsPlayingNow from "../tests/__mocks__/recentListensPropsPlayingNow.json";
+import * as recentListensProps from "../__mocks__/recentListensProps.json";
+import * as recentListensPropsTooManyListens from "../__mocks__/recentListensPropsTooManyListens.json";
+import * as recentListensPropsOneListen from "../__mocks__/recentListensPropsOneListen.json";
+import * as recentListensPropsPlayingNow from "../__mocks__/recentListensPropsPlayingNow.json";
 
 import RecentListens, {
   RecentListensProps,
   RecentListensState,
-} from "./RecentListens";
-import PinRecordingModal from "./pins/PinRecordingModal";
-import CBReviewModal from "./cb-review/CBReviewModal";
+} from "../../src/user/RecentListens";
+import PinRecordingModal from "../../src/pins/PinRecordingModal";
+import CBReviewModal from "../../src/cb-review/CBReviewModal";
 
 // Font Awesome generates a random hash ID for each icon everytime.
 // Mocking Math.random() fixes this

listenbrainz/webserver/static/js/src/RecentListensControls.test.tsx → listenbrainz/webserver/static/js/tests/user/RecentListensControls.test.tsx

@@ -2,11 +2,11 @@ import * as React from "react";
 import { mount } from "enzyme";
 import fetchMock from "jest-fetch-mock";
 
-import * as recentListensPropsOneListen from "../tests/__mocks__/recentListensPropsOneListen.json";
-import * as getFeedbackByMsidResponse from "../tests/__mocks__/getFeedbackByMsidResponse.json";
-import GlobalAppContext from "./utils/GlobalAppContext";
-import APIService from "./utils/APIService";
-import RecentListens, { RecentListensProps } from "./RecentListens";
+import * as recentListensPropsOneListen from "../__mocks__/recentListensPropsOneListen.json";
+import * as getFeedbackByMsidResponse from "../__mocks__/getFeedbackByMsidResponse.json";
+import GlobalAppContext from "../../src/utils/GlobalAppContext";
+import APIService from "../../src/utils/APIService";
+import RecentListens, { RecentListensProps } from "../../src/user/RecentListens";
 
 // Font Awesome generates a random hash ID for each icon everytime.
 // Mocking Math.random() fixes this

listenbrainz/webserver/static/js/src/UserFeedback.test.tsx → listenbrainz/webserver/static/js/tests/user/UserFeedback.test.tsx

@@ -5,13 +5,13 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import UserFeedback, {
   UserFeedbackProps,
   UserFeedbackState,
-} from "./UserFeedback";
-import GlobalAppContext, { GlobalAppContextT } from "./utils/GlobalAppContext";
-import APIService from "./utils/APIService";
-import * as userFeedbackProps from "../tests/__mocks__/userFeedbackProps.json";
-import * as userFeedbackAPIResponse from "../tests/__mocks__/userFeedbackAPIResponse.json";
-import ListenCard from "./listens/ListenCard";
-import ListenFeedbackComponent from "./listens/ListenFeedbackComponent";
+} from "../../src/user/UserFeedback";
+import GlobalAppContext, { GlobalAppContextT } from "../../src/utils/GlobalAppContext";
+import APIService from "../../src/utils/APIService";
+import * as userFeedbackProps from "../__mocks__/userFeedbackProps.json";
+import * as userFeedbackAPIResponse from "../__mocks__/userFeedbackAPIResponse.json";
+import ListenCard from "../../src/listens/ListenCard";
+import ListenFeedbackComponent from "../../src/listens/ListenFeedbackComponent";
 
 const { totalCount, user, feedback, youtube, spotify } = userFeedbackProps;
 

listenbrainz/webserver/static/js/src/UserPageHeading.test.tsx → listenbrainz/webserver/static/js/tests/user/UserPageHeading.test.tsx

@@ -20,12 +20,12 @@
 
 import * as React from "react";
 import { mount, shallow } from "enzyme";
-import UserPageHeading from "./UserPageHeading";
-import FollowButton from "./follow/FollowButton";
-import ReportUserButton from "./report-user/ReportUser";
-import ReportUserModal from "./report-user/ReportUserModal";
-import GlobalAppContext, { GlobalAppContextT } from "./utils/GlobalAppContext";
-import APIService from "./utils/APIService";
+import UserPageHeading from "../../src/user/UserPageHeading";
+import FollowButton from "../../src/follow/FollowButton";
+import ReportUserButton from "../../src/report-user/ReportUser";
+import ReportUserModal from "../../src/report-user/ReportUserModal";
+import GlobalAppContext, { GlobalAppContextT } from "../../src/utils/GlobalAppContext";
+import APIService from "../../src/utils/APIService";
 
 const user = {
   id: 1,

webpack.config.js

@@ -50,14 +50,14 @@ module.exports = function (env, argv) {
       // Otherwise with a standalone entrypoint Webpack would generate a superfluous js file.
       // All the Less/CSS will be exported separately to a main.css file and not appear in the recentListens module
       recentListens: [
-        path.resolve(jsDir, "src/RecentListens.tsx"),
+        path.resolve(jsDir, "src/user/RecentListens.tsx"),
         path.resolve(cssDir, "main.less"),
       ],
       import: path.resolve(jsDir, "src/lastfm/LastFMImporter.tsx"),
       userEntityChart: path.resolve(jsDir, "src/stats/UserEntityChart.tsx"),
       userReports: path.resolve(jsDir, "src/stats/UserReports.tsx"),
-      userPageHeading: path.resolve(jsDir, "src/UserPageHeading.tsx"),
-      userFeedback: path.resolve(jsDir, "src/UserFeedback.tsx"),
+      userPageHeading: path.resolve(jsDir, "src/user/UserPageHeading.tsx"),
+      userFeedback: path.resolve(jsDir, "src/user/UserFeedback.tsx"),
       userPins: path.resolve(jsDir, "src/pins/UserPins.tsx"),
       userFeed: path.resolve(jsDir, "src/user-feed/UserFeed.tsx"),
       playlist: path.resolve(jsDir, "src/playlists/Playlist.tsx"),
@@ -69,7 +69,10 @@ module.exports = function (env, argv) {
         jsDir,
         "src/recommendations/Recommendations.tsx"
       ),
-      missingMBData: path.resolve(jsDir, "src/missing-mb-data/MissingMBData.tsx"),
+      missingMBData: path.resolve(
+        jsDir,
+        "src/missing-mb-data/MissingMBData.tsx"
+      ),
       playerPage: path.resolve(jsDir, "src/player-pages/PlayerPage.tsx"),
     },
     output: {