From 5bc76f23d05eb82096f8f78c9510778e2b6b14d9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julian=20T=C3=B6lle?= Date: Sun, 12 Jul 2020 17:16:33 +0200 Subject: [PATCH] refator: use TimeOptions for TopArtists report --- frontend/src/api/api.ts | 4 ++- frontend/src/api/entities/time-options.ts | 7 ++++ .../src/api/entities/top-artists-options.ts | 5 ++- ...eportOptions.tsx => ReportTimeOptions.tsx} | 34 +++++++++++-------- frontend/src/components/ReportTopArtists.tsx | 15 ++++---- src/reports/dto/get-top-artists-report.dto.ts | 16 +++------ src/reports/dto/report-time.dto.ts | 15 ++++++++ src/reports/reports.controller.ts | 4 +-- src/reports/reports.service.ts | 8 ++--- 9 files changed, 62 insertions(+), 46 deletions(-) create mode 100644 frontend/src/api/entities/time-options.ts rename frontend/src/components/{ReportOptions.tsx => ReportTimeOptions.tsx} (66%) create mode 100644 src/reports/dto/report-time.dto.ts diff --git a/frontend/src/api/api.ts b/frontend/src/api/api.ts index 63339f1..c0400bd 100644 --- a/frontend/src/api/api.ts +++ b/frontend/src/api/api.ts @@ -111,7 +111,9 @@ export const getListensReport = async ( export const getTopArtists = async ( options: TopArtistsOptions ): Promise => { - const { timePreset, customTimeStart, customTimeEnd } = options; + const { + time: { timePreset, customTimeStart, customTimeEnd }, + } = options; const res = await fetch( `/api/v1/reports/top-artists?${qs({ diff --git a/frontend/src/api/entities/time-options.ts b/frontend/src/api/entities/time-options.ts new file mode 100644 index 0000000..cda4c64 --- /dev/null +++ b/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; +} diff --git a/frontend/src/api/entities/top-artists-options.ts b/frontend/src/api/entities/top-artists-options.ts index c5114d4..7853978 100644 --- a/frontend/src/api/entities/top-artists-options.ts +++ b/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; } diff --git a/frontend/src/components/ReportOptions.tsx b/frontend/src/components/ReportTimeOptions.tsx similarity index 66% rename from frontend/src/components/ReportOptions.tsx rename to frontend/src/components/ReportTimeOptions.tsx index 14620ff..6cc5097 100644 --- a/frontend/src/components/ReportOptions.tsx +++ b/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 = ({ - reportOptions, - setReportOptions, +export const ReportTimeOptions: React.FC = ({ + timeOptions, + setTimeOptions, }) => { return (
@@ -29,33 +29,37 @@ export const ReportOptions: React.FC = ({
- {reportOptions.timePreset === TimePreset.CUSTOM && ( + {timeOptions.timePreset === TimePreset.CUSTOM && (
- setReportOptions({ ...reportOptions, customTimeStart: newDate }) + setTimeOptions({ ...timeOptions, customTimeStart: newDate }) } /> - setReportOptions({ ...reportOptions, customTimeEnd: newDate }) + setTimeOptions({ ...timeOptions, customTimeEnd: newDate }) } />
diff --git a/frontend/src/components/ReportTopArtists.tsx b/frontend/src/components/ReportTopArtists.tsx index 6b08676..581af3b 100644 --- a/frontend/src/components/ReportTopArtists.tsx +++ b/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({ + const [timeOptions, setTimeOptions] = useState({ 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 = () => {

Top Artists

- {isLoading && (
diff --git a/src/reports/dto/get-top-artists-report.dto.ts b/src/reports/dto/get-top-artists-report.dto.ts index 449eab0..716bd72 100644 --- a/src/reports/dto/get-top-artists-report.dto.ts +++ b/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; } diff --git a/src/reports/dto/report-time.dto.ts b/src/reports/dto/report-time.dto.ts new file mode 100644 index 0000000..a2a6833 --- /dev/null +++ b/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; +} diff --git a/src/reports/reports.controller.ts b/src/reports/reports.controller.ts index a51ca20..54e0462 100644 --- a/src/reports/reports.controller.ts +++ b/src/reports/reports.controller.ts @@ -24,9 +24,9 @@ export class ReportsController { @Get("top-artists") @Auth() async getTopArtists( - @Query() options: Omit, + @Query() time: ReportTimeDto, @ReqUser() user: User ): Promise { - return this.reportsService.getTopArtists({ ...options, user }); + return this.reportsService.getTopArtists({ user, time }); } } diff --git a/src/reports/reports.service.ts b/src/reports/reports.service.ts index 1c33c2a..b4fa1a8 100644 --- a/src/reports/reports.service.ts +++ b/src/reports/reports.service.ts @@ -100,13 +100,9 @@ export class ReportsService { async getTopArtists( options: GetTopArtistsReportDto ): Promise { - 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()