fixed number formatting in widgets: radarr, sonarr, overseerr

src/widgets/overseerr/component.jsx

@@ -1,8 +1,11 @@
+import { useTranslation } from "next-i18next";
+
 import Container from "components/services/widget/container";
 import Block from "components/services/widget/block";
 import useWidgetAPI from "utils/proxy/use-widget-api";
 
 export default function Component({ service }) {
+  const { t } = useTranslation();
   const { widget } = service;
 
   const { data: statsData, error: statsError } = useWidgetAPI(widget, "request/count");
@@ -24,10 +27,10 @@ export default function Component({ service }) {
 
   return (
     <Container service={service}>
-      <Block label="overseerr.pending" value={statsData.pending} />
-      <Block label="overseerr.processing" value={statsData.processing} />
-      <Block label="overseerr.approved" value={statsData.approved} />
-      <Block label="overseerr.available" value={statsData.available} />
+      <Block label="overseerr.pending" value={t("common.number", { value: statsData.pending })} />
+      <Block label="overseerr.processing" value={t("common.number", { value: statsData.processing })} />
+      <Block label="overseerr.approved" value={t("common.number", { value: statsData.approved })} />
+      <Block label="overseerr.available" value={t("common.number", { value: statsData.available })} />
     </Container>
   );
 }

src/widgets/radarr/component.jsx

@@ -1,8 +1,11 @@
+import { useTranslation } from "next-i18next";
+
 import Container from "components/services/widget/container";
 import Block from "components/services/widget/block";
 import useWidgetAPI from "utils/proxy/use-widget-api";
 
 export default function Component({ service }) {
+  const { t } = useTranslation();
   const { widget } = service;
 
   const { data: moviesData, error: moviesError } = useWidgetAPI(widget, "movie");
@@ -26,10 +29,10 @@ export default function Component({ service }) {
 
   return (
     <Container service={service}>
-      <Block label="radarr.wanted" value={moviesData.wanted} />
-      <Block label="radarr.missing" value={moviesData.missing} />
-      <Block label="radarr.queued" value={queuedData.totalCount} />
-      <Block label="radarr.movies" value={moviesData.have} />
+      <Block label="radarr.wanted" value={t("common.number", { value: moviesData.wanted })} />
+      <Block label="radarr.missing" value={t("common.number", { value: moviesData.missing })} />
+      <Block label="radarr.queued" value={t("common.number", { value: queuedData.totalCount })} />
+      <Block label="radarr.movies" value={t("common.number", { value: moviesData.have })} />
     </Container>
   );
 }

src/widgets/sonarr/component.jsx

@@ -1,8 +1,11 @@
+import { useTranslation } from "next-i18next";
+
 import Container from "components/services/widget/container";
 import Block from "components/services/widget/block";
 import useWidgetAPI from "utils/proxy/use-widget-api";
 
 export default function Component({ service }) {
+  const { t } = useTranslation();
   const { widget } = service;
 
   const { data: wantedData, error: wantedError } = useWidgetAPI(widget, "wanted/missing");
@@ -26,9 +29,9 @@ export default function Component({ service }) {
 
   return (
     <Container service={service}>
-      <Block label="sonarr.wanted" value={wantedData.totalRecords} />
-      <Block label="sonarr.queued" value={queuedData.totalRecords} />
-      <Block label="sonarr.series" value={seriesData.total} />
+      <Block label="sonarr.wanted" value={t("common.number", { value: wantedData.totalRecords })} />
+      <Block label="sonarr.queued" value={t("common.number", { value: queuedData.totalRecords })} />
+      <Block label="sonarr.series" value={t("common.number", { value: seriesData.total })} />
     </Container>
   );
 }