refator: use TimeOptions for TopArtists report

frontend/src/api/api.ts

@@ -111,7 +111,9 @@ export const getListensReport = async (
 export const getTopArtists = async (
   options: TopArtistsOptions
 ): Promise<TopArtistsItem[]> => {
-  const { timePreset, customTimeStart, customTimeEnd } = options;
+  const {
+    time: { timePreset, customTimeStart, customTimeEnd },
+  } = options;
 
   const res = await fetch(
     `/api/v1/reports/top-artists?${qs({

frontend/src/api/entities/time-options.ts

@@ -0,0 +1,7 @@
+import { TimePreset } from "./time-preset.enum";
+
+export interface TimeOptions {
+  timePreset: TimePreset;
+  customTimeStart: Date;
+  customTimeEnd: Date;
+}

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

@@ -1,7 +1,6 @@
 import { TimePreset } from "./time-preset.enum";
+import { TimeOptions } from "./time-options";
 
 export interface TopArtistsOptions {
-  timePreset: TimePreset;
-  customTimeStart: Date;
-  customTimeEnd: Date;
+  time: TimeOptions;
 }

frontend/src/components/ReportTimeOptions.tsx

@@ -1,11 +1,11 @@
 import React from "react";
+import { TimeOptions } from "../api/entities/time-options";
 import { TimePreset } from "../api/entities/time-preset.enum";
-import { TopArtistsOptions } from "../api/entities/top-artists-options";
 import { DateSelect } from "./inputs/DateSelect";
 
-interface ReportOptionsProps {
-  reportOptions: TopArtistsOptions;
-  setReportOptions: (options: TopArtistsOptions) => void;
+interface ReportTimeOptionsProps {
+  timeOptions: TimeOptions;
+  setTimeOptions: (options: TimeOptions) => void;
 }
 
 const timePresetOptions = [
@@ -18,9 +18,9 @@ const timePresetOptions = [
   { value: TimePreset.CUSTOM, description: "Custom" },
 ];
 
-export const ReportOptions: React.FC<ReportOptionsProps> = ({
-  reportOptions,
-  setReportOptions,
+export const ReportTimeOptions: React.FC<ReportTimeOptionsProps> = ({
+  timeOptions,
+  setTimeOptions,
 }) => {
   return (
     <div className="md:flex">
@@ -29,33 +29,37 @@ export const ReportOptions: React.FC<ReportOptionsProps> = ({
         <select
           className="block appearance-none min-w-full md:w-1/4 bg-white border border-gray-400 hover:border-gray-500 p-2 rounded shadow leading-tight focus:outline-none focus:shadow-outline"
           onChange={(e) =>
-            setReportOptions({
-              ...reportOptions,
+            setTimeOptions({
+              ...timeOptions,
               timePreset: e.target.value as TimePreset,
             })
           }
         >
           {timePresetOptions.map(({ value, description }) => (
-            <option value={value} key={value}>
+            <option
+              value={value}
+              key={value}
+              selected={value === timeOptions.timePreset}
+            >
               {description}
             </option>
           ))}
         </select>
       </div>
-      {reportOptions.timePreset === TimePreset.CUSTOM && (
+      {timeOptions.timePreset === TimePreset.CUSTOM && (
         <div className="md:flex text-gray-700">
           <DateSelect
             label="Start"
-            value={reportOptions.customTimeStart}
+            value={timeOptions.customTimeStart}
             onChange={(newDate) =>
-              setReportOptions({ ...reportOptions, customTimeStart: newDate })
+              setTimeOptions({ ...timeOptions, customTimeStart: newDate })
             }
           />
           <DateSelect
             label="End"
-            value={reportOptions.customTimeEnd}
+            value={timeOptions.customTimeEnd}
             onChange={(newDate) =>
-              setReportOptions({ ...reportOptions, customTimeEnd: newDate })
+              setTimeOptions({ ...timeOptions, customTimeEnd: newDate })
             }
           />
         </div>

frontend/src/components/ReportTopArtists.tsx

@@ -5,19 +5,20 @@ 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";
+import { ReportTimeOptions } from "./ReportTimeOptions";
+import { TimeOptions } from "../api/entities/time-options";
 
 export const ReportTopArtists: React.FC = () => {
   const { user } = useAuth();
 
-  const [reportOptions, setReportOptions] = useState<TopArtistsOptions>({
+  const [timeOptions, setTimeOptions] = useState<TimeOptions>({
     timePreset: TimePreset.LAST_90_DAYS,
     customTimeStart: new Date(0),
     customTimeEnd: new Date(),
   });
 
-  const fetchData = useMemo(() => () => getTopArtists(reportOptions), [
-    reportOptions,
+  const fetchData = useMemo(() => () => getTopArtists({ time: timeOptions }), [
+    timeOptions,
   ]);
 
   const { value: report, pending: isLoading } = useAsync(fetchData, []);
@@ -35,9 +36,9 @@ export const ReportTopArtists: React.FC = () => {
           <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}
+          <ReportTimeOptions
+            timeOptions={timeOptions}
+            setTimeOptions={setTimeOptions}
           />
           {isLoading && (
             <div>

src/reports/dto/get-top-artists-report.dto.ts

@@ -1,18 +1,10 @@
-import { IsEnum, IsISO8601, ValidateIf } from "class-validator";
+import { ValidateNested } from "class-validator";
 import { User } from "../../users/user.entity";
-import { TimePreset } from "../timePreset.enum";
+import { ReportTimeDto } from "./report-time.dto";
 
 export class GetTopArtistsReportDto {
   user: User;
 
-  @IsEnum(TimePreset)
-  timePreset: TimePreset;
-
-  @ValidateIf((o) => o.timePreset === TimePreset.CUSTOM)
-  @IsISO8601()
-  customTimeStart: string;
-
-  @ValidateIf((o) => o.timePreset === TimePreset.CUSTOM)
-  @IsISO8601()
-  customTimeEnd: string;
+  @ValidateNested()
+  time: ReportTimeDto;
 }

src/reports/dto/report-time.dto.ts

@@ -0,0 +1,15 @@
+import { IsEnum, IsISO8601, ValidateIf } from "class-validator";
+import { TimePreset } from "../timePreset.enum";
+
+export class ReportTimeDto {
+  @IsEnum(TimePreset)
+  timePreset: TimePreset;
+
+  @ValidateIf((o) => o.timePreset === TimePreset.CUSTOM)
+  @IsISO8601()
+  customTimeStart: string;
+
+  @ValidateIf((o) => o.timePreset === TimePreset.CUSTOM)
+  @IsISO8601()
+  customTimeEnd: string;
+}

src/reports/reports.controller.ts

@@ -24,9 +24,9 @@ export class ReportsController {
   @Get("top-artists")
   @Auth()
   async getTopArtists(
-    @Query() options: Omit<GetTopArtistsReportDto, "user">,
+    @Query() time: ReportTimeDto,
     @ReqUser() user: User
   ): Promise<TopArtistsReportDto> {
-    return this.reportsService.getTopArtists({ ...options, user });
+    return this.reportsService.getTopArtists({ user, time });
   }
 }

src/reports/reports.service.ts

@@ -100,13 +100,9 @@ export class ReportsService {
   async getTopArtists(
     options: GetTopArtistsReportDto
   ): Promise<TopArtistsReportDto> {
-    const { user, timePreset, customTimeStart, customTimeEnd } = options;
+    const { user, time: timePreset } = options;
 
-    const interval = this.getIntervalFromPreset({
-      timePreset,
-      customTimeStart,
-      customTimeEnd,
-    });
+    const interval = this.getIntervalFromPreset(timePreset);
 
     const getArtistsWithCountQB = this.listensService
       .getScopedQueryBuilder()