feat: add top-artists report

frontend/src/components/ReportTopArtists.tsx

@@ -0,0 +1,62 @@
+import React, { useMemo, useState } from "react";
+import { Redirect } from "react-router-dom";
+import { getTopArtists } from "../api/api";
+import { TimePreset } from "../api/entities/time-preset.enum";
+import { TopArtistsOptions } from "../api/entities/top-artists-options";
+import { useAsync } from "../hooks/use-async";
+import { useAuth } from "../hooks/use-auth";
+import { ReportOptions } from "./ReportOptions";
+
+export const ReportTopArtists: React.FC = () => {
+  const { user } = useAuth();
+
+  const [reportOptions, setReportOptions] = useState<TopArtistsOptions>({
+    timePreset: TimePreset.LAST_90_DAYS,
+    customTimeStart: new Date(0),
+    customTimeEnd: new Date(),
+  });
+
+  const fetchData = useMemo(() => () => getTopArtists(reportOptions), [
+    reportOptions,
+  ]);
+
+  const { value: report, pending: isLoading } = useAsync(fetchData, []);
+
+  const reportHasItems = !isLoading && report.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 Artists</p>
+        </div>
+        <div className="shadow-xl bg-gray-100 rounded p-5 m-2">
+          <ReportOptions
+            reportOptions={reportOptions}
+            setReportOptions={setReportOptions}
+          />
+          {isLoading && (
+            <div>
+              <div className="loader rounded-full border-8 h-64 w-64"></div>
+            </div>
+          )}
+          {!reportHasItems && (
+            <div>
+              <p>Report is emtpy! :(</p>
+            </div>
+          )}
+          {reportHasItems &&
+            report.map(({ artist, count }) => (
+              <div>
+                {count} - {artist.name}
+              </div>
+            ))}
+        </div>
+      </div>
+    </div>
+  );
+};