Feature: Linkwarden service widget (#3836)

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

src/widgets/linkwarden/component.jsx

@@ -0,0 +1,55 @@
+import React, { useState, useEffect } from "react";
+
+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 { widget } = service;
+
+  const [stats, setStats] = useState({
+    totalLinks: null,
+    collections: { total: null },
+    tags: { total: null },
+  });
+
+  const { data: collectionsStatsData, error: collectionsStatsError } = useWidgetAPI(widget, "collections");
+  const { data: tagsStatsData, error: tagsStatsError } = useWidgetAPI(widget, "tags");
+
+  useEffect(() => {
+    if (collectionsStatsData?.response && tagsStatsData?.response) {
+      setStats({
+        // eslint-disable-next-line no-underscore-dangle
+        totalLinks: collectionsStatsData.response.reduce((sum, collection) => sum + (collection._count?.links || 0), 0),
+        collections: {
+          total: collectionsStatsData.response.length,
+        },
+        tags: {
+          total: tagsStatsData.response.length,
+        },
+      });
+    }
+  }, [collectionsStatsData, tagsStatsData]);
+
+  if (collectionsStatsError || tagsStatsError) {
+    return <Container service={service} error={collectionsStatsError || tagsStatsError} />;
+  }
+
+  if (!tagsStatsData || !collectionsStatsData) {
+    return (
+      <Container service={service}>
+        <Block label="linkwarden.links" />
+        <Block label="linkwarden.collections" />
+        <Block label="linkwarden.tags" />
+      </Container>
+    );
+  }
+
+  return (
+    <Container service={service}>
+      <Block label="linkwarden.links" value={stats.totalLinks} />
+      <Block label="linkwarden.collections" value={stats.collections.total} />
+      <Block label="linkwarden.tags" value={stats.tags.total} />
+    </Container>
+  );
+}

src/widgets/linkwarden/widget.js

@@ -0,0 +1,17 @@
+import credentialedProxyHandler from "utils/proxy/handlers/credentialed";
+
+const widget = {
+  api: "{url}/api/v1/{endpoint}",
+  proxyHandler: credentialedProxyHandler,
+
+  mappings: {
+    collections: {
+      endpoint: "collections",
+    },
+    tags: {
+      endpoint: "tags",
+    },
+  },
+};
+
+export default widget;