feat: add top tracks report

frontend/src/App.tsx

@@ -7,6 +7,7 @@ import { RecentListens } from "./components/RecentListens";
 import { ReportListens } from "./components/ReportListens";
 import { ReportTopAlbums } from "./components/ReportTopAlbums";
 import { ReportTopArtists } from "./components/ReportTopArtists";
+import { ReportTopTracks } from "./components/ReportTopTracks";
 import { useAuth } from "./hooks/use-auth";
 import "./tailwind/generated.css";
 
@@ -30,6 +31,7 @@ export function App() {
         <Route path="/reports/listens" exact component={ReportListens} />
         <Route path="/reports/top-artists" exact component={ReportTopArtists} />
         <Route path="/reports/top-albums" exact component={ReportTopAlbums} />
+        <Route path="/reports/top-tracks" exact component={ReportTopTracks} />
       </Switch>
     </div>
   );

frontend/src/api/api.ts

@@ -9,6 +9,8 @@ import { TopAlbumsItem } from "./entities/top-albums-item";
 import { TopAlbumsOptions } from "./entities/top-albums-options";
 import { TopArtistsItem } from "./entities/top-artists-item";
 import { TopArtistsOptions } from "./entities/top-artists-options";
+import { TopTracksItem } from "./entities/top-tracks-item";
+import { TopTracksOptions } from "./entities/top-tracks-options";
 
 export class UnauthenticatedError extends Error {}
 
@@ -149,3 +151,40 @@ export const getTopAlbums = async (
   } = res;
   return items;
 };
+
+export const getTopTracks = async (
+  options: TopTracksOptions,
+  client: AxiosInstance
+): Promise<TopTracksItem[]> => {
+  const {
+    time: { timePreset, customTimeStart, customTimeEnd },
+  } = options;
+
+  const res = await client.get<{ items: TopTracksItem[] }>(
+    `/api/v1/reports/top-tracks`,
+    {
+      params: {
+        timePreset,
+        customTimeStart: formatISO(customTimeStart),
+        customTimeEnd: formatISO(customTimeEnd),
+      },
+    }
+  );
+
+  switch (res.status) {
+    case 200: {
+      break;
+    }
+    case 401: {
+      throw new UnauthenticatedError(`No token or token expired`);
+    }
+    default: {
+      throw new Error(`Unable to getTopTracks: ${res.status}`);
+    }
+  }
+
+  const {
+    data: { items },
+  } = res;
+  return items;
+};

frontend/src/api/entities/top-tracks-item.ts

@@ -0,0 +1,6 @@
+import { Track } from "./track";
+
+export interface TopTracksItem {
+  track: Track;
+  count: number;
+}

frontend/src/api/entities/top-tracks-options.ts

@@ -0,0 +1,5 @@
+import { TimeOptions } from "./time-options";
+
+export interface TopTracksOptions {
+  time: TimeOptions;
+}

frontend/src/components/NavBar.tsx

@@ -31,6 +31,9 @@ export const NavBar: React.FC = () => {
               <Link to="/reports/top-albums">
                 <NavItem>Top Albums</NavItem>
               </Link>
+              <Link to="/reports/top-tracks">
+                <NavItem>Top Tracks</NavItem>
+              </Link>
             </>
           )}
         </div>

frontend/src/components/ReportTopTracks.tsx

@@ -0,0 +1,80 @@
+import React, { useMemo, useState } from "react";
+import { Redirect } from "react-router-dom";
+import { TimeOptions } from "../api/entities/time-options";
+import { TimePreset } from "../api/entities/time-preset.enum";
+import { Track } from "../api/entities/track";
+import { useTopTracks } from "../hooks/use-api";
+import { useAuth } from "../hooks/use-auth";
+import { ReportTimeOptions } from "./ReportTimeOptions";
+import { TopListItem } from "./TopListItem";
+
+export const ReportTopTracks: React.FC = () => {
+  const { user } = useAuth();
+
+  const [timeOptions, setTimeOptions] = useState<TimeOptions>({
+    timePreset: TimePreset.LAST_90_DAYS,
+    customTimeStart: new Date(0),
+    customTimeEnd: new Date(),
+  });
+
+  const options = useMemo(
+    () => ({
+      time: timeOptions,
+    }),
+    [timeOptions]
+  );
+
+  const { topTracks, isLoading } = useTopTracks(options);
+
+  const reportHasItems = !isLoading && topTracks.length !== 0;
+
+  if (!user) {
+    return <Redirect to="/" />;
+  }
+
+  return (
+    <div className="md:flex md:justify-center p-4">
+      <div className="md:flex-shrink-0 min-w-full xl:min-w-0 xl:w-2/3 max-w-screen-lg">
+        <div className="flex justify-between">
+          <p className="text-2xl font-normal text-gray-700">Top Tracks</p>
+        </div>
+        <div className="shadow-xl bg-gray-100 rounded p-5 m-2">
+          <ReportTimeOptions
+            timeOptions={timeOptions}
+            setTimeOptions={setTimeOptions}
+          />
+          {isLoading && (
+            <div>
+              <div className="loader rounded-full border-8 h-64 w-64"></div>
+            </div>
+          )}
+          {!reportHasItems && (
+            <div>
+              <p>Report is emtpy! :(</p>
+            </div>
+          )}
+          {reportHasItems &&
+            topTracks.map(({ track, count }) => (
+              <ReportItem track={track} count={count} />
+            ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const ReportItem: React.FC<{
+  track: Track;
+  count: number;
+}> = ({ track, count }) => {
+  const artists = track.artists?.map((artist) => artist.name).join(", ") || "";
+
+  return (
+    <TopListItem
+      key={track.id}
+      title={track.name}
+      subTitle={artists}
+      count={count}
+    />
+  );
+};

frontend/src/hooks/use-api.tsx

@@ -4,11 +4,13 @@ import {
   getRecentListens,
   getTopAlbums,
   getTopArtists,
+  getTopTracks,
 } from "../api/api";
 import { ListenReportOptions } from "../api/entities/listen-report-options";
 import { PaginationOptions } from "../api/entities/pagination-options";
 import { TopAlbumsOptions } from "../api/entities/top-albums-options";
 import { TopArtistsOptions } from "../api/entities/top-artists-options";
+import { TopTracksOptions } from "../api/entities/top-tracks-options";
 import { useApiClient } from "./use-api-client";
 import { useAsync } from "./use-async";
 
@@ -81,3 +83,19 @@ export const useTopAlbums = (options: TopAlbumsOptions) => {
 
   return { topAlbums, isLoading, error };
 };
+
+export const useTopTracks = (options: TopTracksOptions) => {
+  const { client } = useApiClient();
+
+  const fetchData = useMemo(() => () => getTopTracks(options, client), [
+    options,
+    client,
+  ]);
+
+  const { value: topTracks, pending: isLoading, error } = useAsync(
+    fetchData,
+    INITIAL_EMPTY_ARRAY
+  );
+
+  return { topTracks, isLoading, error };
+};