feat(frontend): display humaized durations on dashboard

IgnisDa · May 5, 2023 · 1c1f693 · 1c1f693
1 parent b19d61b
commit 1c1f693
Showing 1 changed file with 20 additions and 8 deletions.
diff --git a/apps/frontend/src/pages/index.tsx b/apps/frontend/src/pages/index.tsx
@@ -17,16 +17,25 @@ import { useMutation, useQuery } from "@tanstack/react-query";
 import type { RegerateUserSummaryMutationVariables } from "@trackona/generated/graphql/backend/graphql";
 import { REGENERATE_USER_SUMMARY } from "@trackona/graphql/backend/mutations";
 import { USER_SUMMARY } from "@trackona/graphql/backend/queries";
+import {
+	HumanizeDuration,
+	HumanizeDurationLanguage,
+} from "humanize-duration-ts";
 import type { ReactElement } from "react";
 
+const service = new HumanizeDurationLanguage();
+const humaizer = new HumanizeDuration(service);
+
 const StatTitle = (props: { text: string }) => {
 	return <Title order={3}>{props.text}</Title>;
 };
 
-const StatNumber = (props: { text: number }) => {
+const StatNumber = (props: { text: number; isDuration?: boolean }) => {
 	return (
 		<Text fw="bold" style={{ display: "inline" }}>
-			{props.text}
+			{props.isDuration
+				? humaizer.humanize(props.text * 1000 * 60)
+				: props.text}
 		</Text>
 	);
 };
@@ -56,7 +65,6 @@ const Page: NextPageWithLayout = () => {
 	return (
 		<Container>
 			<Stack>
-				<Title>Your summary</Title>
 				{userSummary.isLoading ? <Loader /> : null}
 				{userSummary.isError ? (
 					<Alert color='yellow' icon={<IconAlertCircle size="1rem" />}>
@@ -83,8 +91,9 @@ const Page: NextPageWithLayout = () => {
 							<Text>
 								You watched{" "}
 								<StatNumber text={userSummary.data.movies.watched} /> movie(s)
-								totalling <StatNumber text={userSummary.data.movies.runtime} />{" "}
-								minute(s).
+								totalling{" "}
+								<StatNumber text={userSummary.data.movies.runtime} isDuration />
+								.
 							</Text>
 						</Box>
 						<Box>
@@ -95,7 +104,7 @@ const Page: NextPageWithLayout = () => {
 								show(s) and{" "}
 								<StatNumber text={userSummary.data.shows.watchedEpisodes} />{" "}
 								episode(s) totalling{" "}
-								<StatNumber text={userSummary.data.shows.runtime} /> minute(s).
+								<StatNumber text={userSummary.data.shows.runtime} isDuration />.
 							</Text>
 						</Box>
 						<Box>
@@ -112,8 +121,11 @@ const Page: NextPageWithLayout = () => {
 								You listened to{" "}
 								<StatNumber text={userSummary.data.audioBooks.played} />{" "}
 								audiobook(s) totalling{" "}
-								<StatNumber text={userSummary.data.audioBooks.runtime} />{" "}
-								minute(s).
+								<StatNumber
+									text={userSummary.data.audioBooks.runtime}
+									isDuration
+								/>
+								.
 							</Text>
 						</Box>
 					</SimpleGrid>