Added custom API widget (#1858)

* Added custom API widget

* Rename custom widget to customapi

---------

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

src/widgets/customapi/component.jsx

@@ -0,0 +1,75 @@
+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";
+
+function getValue(field, data) {
+  let value = data;
+  let lastField = field;
+  let key = '';
+
+  while (typeof lastField === "object") {
+    key = Object.keys(lastField)[0] ?? null;
+
+    if (key === null) {
+      break;
+    }
+
+    value = value[key];
+    lastField = lastField[key];
+  }
+
+  if (typeof value === 'undefined') {
+    return null;
+  }
+
+  return value[lastField] ?? null;
+}
+
+function formatValue(t, mapping, value) {
+  switch (mapping?.format) {
+    case 'number':
+      return t("common.number", { value: parseInt(value, 10) });
+    case 'float':
+      return t("common.number", { value });
+    case 'percent':
+      return t("common.percent", { value });
+    case 'text':
+    default:
+      return value;
+  }
+}
+
+export default function Component({ service }) {
+  const { t } = useTranslation();
+
+  const { widget } = service;
+
+  const { mappings = [], refreshInterval = 10000 } = widget;
+  const { data: customData, error: customError } = useWidgetAPI(widget, null, {
+    refreshInterval: Math.max(1000, refreshInterval),
+  });
+
+  if (customError) {
+    return <Container service={service} error={customError} />;
+  }
+
+  if (!customData) {
+    return (
+      <Container service={service}>
+        { mappings.slice(0,4).map(item => <Block label={item.label} key={item.field} />) }
+      </Container>
+    );
+  }
+
+  return (
+    <Container service={service}>
+      { mappings.slice(0,4).map(mapping => <Block
+        label={mapping.label}
+        key={mapping.field}
+        value={formatValue(t, mapping, getValue(mapping.field, customData))}
+      />) }
+    </Container>
+  );
+}

src/widgets/customapi/widget.js

@@ -0,0 +1,8 @@
+import genericProxyHandler from "utils/proxy/handlers/generic";
+
+const widget = {
+  api: "{url}",
+  proxyHandler: genericProxyHandler,
+};
+
+export default widget;