Chore: handle mealie API change (#3895)

---------

Co-authored-by: shamoon <4887959+shamoon@users.noreply.github.com>

docs/widgets/services/mealie.md

@@ -14,4 +14,5 @@ widget:
   type: mealie
   url: http://mealie-frontend.host.or.ip
   key: mealieapitoken
+  version: 2 # only required if version > 1, defaults to 1
 ```

src/utils/config/service-helpers.js

@@ -402,7 +402,7 @@ export function cleanServiceGroups(groups) {
           // frigate
           enableRecentEvents,
 
-          // glances, pihole, pfsense
+          // glances, mealie, pihole, pfsense
           version,
 
           // glances
@@ -512,9 +512,6 @@ export function cleanServiceGroups(groups) {
         if (type === "unifi") {
           if (site) cleanedService.widget.site = site;
         }
-        if (type === "pfsense") {
-          if (version) cleanedService.widget.version = version;
-        }
         if (type === "proxmox") {
           if (node) cleanedService.widget.node = node;
         }
@@ -561,7 +558,7 @@ export function cleanServiceGroups(groups) {
           if (snapshotHost) cleanedService.widget.snapshotHost = snapshotHost;
           if (snapshotPath) cleanedService.widget.snapshotPath = snapshotPath;
         }
-        if (["glances", "pihole"].includes(type)) {
+        if (["glances", "mealie", "pfsense", "pihole"].includes(type)) {
           if (version) cleanedService.widget.version = version;
         }
         if (type === "glances") {

src/widgets/mealie/component.jsx

@@ -1,17 +1,20 @@
+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 version = widget.version ?? 1;
+  const { data, error } = useWidgetAPI(widget, version === 1 ? "statisticsv1" : "statisticsv2");
 
-  const { data: mealieData, error: mealieError } = useWidgetAPI(widget);
-
-  if (mealieError || mealieData?.statusCode === 401) {
-    return <Container service={service} error={mealieError ?? mealieData} />;
+  if (error) {
+    return <Container service={service} error={error} />;
   }
 
-  if (!mealieData) {
+  if (!data) {
     return (
       <Container service={service}>
         <Block label="mealie.recipes" />
@@ -21,13 +24,12 @@ export default function Component({ service }) {
       </Container>
     );
   }
-
   return (
     <Container service={service}>
-      <Block label="mealie.recipes" value={mealieData.totalRecipes} />
-      <Block label="mealie.users" value={mealieData.totalUsers} />
-      <Block label="mealie.categories" value={mealieData.totalCategories} />
-      <Block label="mealie.tags" value={mealieData.totalTags} />
+      <Block label="mealie.recipes" value={t("common.number", { value: data.totalRecipes })} />
+      <Block label="mealie.users" value={t("common.number", { value: data.totalUsers })} />
+      <Block label="mealie.categories" value={t("common.number", { value: data.totalCategories })} />
+      <Block label="mealie.tags" value={t("common.number", { value: data.totalTags })} />
     </Container>
   );
 }

src/widgets/mealie/widget.js

@@ -1,8 +1,17 @@
 import credentialedProxyHandler from "utils/proxy/handlers/credentialed";
 
 const widget = {
-  api: "{url}/api/groups/statistics",
+  api: "{url}/api/{endpoint}",
   proxyHandler: credentialedProxyHandler,
+
+  mappings: {
+    statisticsv1: {
+      endpoint: "groups/statistics",
+    },
+    statisticsv2: {
+      endpoint: "households/statistics",
+    },
+  },
 };
 
 export default widget;