diff --git a/apps/frontend/src/pages/index.tsx b/apps/frontend/src/pages/index.tsx index 0f2926905b..13f20635c4 100644 --- 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 {props.text}; }; -const StatNumber = (props: { text: number }) => { +const StatNumber = (props: { text: number; isDuration?: boolean }) => { return ( - {props.text} + {props.isDuration + ? humaizer.humanize(props.text * 1000 * 60) + : props.text} ); }; @@ -56,7 +65,6 @@ const Page: NextPageWithLayout = () => { return ( - Your summary {userSummary.isLoading ? : null} {userSummary.isError ? ( }> @@ -83,8 +91,9 @@ const Page: NextPageWithLayout = () => { You watched{" "} movie(s) - totalling {" "} - minute(s). + totalling{" "} + + . @@ -95,7 +104,7 @@ const Page: NextPageWithLayout = () => { show(s) and{" "} {" "} episode(s) totalling{" "} - minute(s). + . @@ -112,8 +121,11 @@ const Page: NextPageWithLayout = () => { You listened to{" "} {" "} audiobook(s) totalling{" "} - {" "} - minute(s). + + .