feat: metrics integration (#5)

## Motivation

Since we're about to release the metrics base to our users at v1
implementation, it's good to have a base integration with
tbp-consumer-api for now.

This PR adds the request and population of this specific page inside the
app.

![vai tomar no cu react](https://github.com/user-attachments/assets/d7e54434-eb50-4fb6-b9ed-5fa45a880587)

Cheers for tw:gabrieldneto for helping me to implement it.

---------

Co-authored-by: Mateus Vasconcelos <[email protected]>

package.json

@@ -30,6 +30,7 @@
     "@radix-ui/react-tabs": "^1.1.0",
     "@types/firefox": "^0.0.34",
     "@types/firefox-webext-browser": "^120.0.4",
+    "axios": "1.7.4",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "cmdk": "^1.0.0",
@@ -68,8 +69,7 @@
       "activeTab",
       "identity",
       "*://*.twitch.tv/*",
-      "https://twitch-extension.danielheart.dev/*",
-      "https://tbp.danielheart.dev/*",
+      "https://*.danielheart.dev/*",
       "*://localhost/*",
       "storage"
     ]

src/resources/components/stats/stats.tsx

@@ -1,20 +1,48 @@
+import { useStorage } from "@plasmohq/storage/dist/hook";
+import { useEffect, useMemo, useState } from "react";
+import { getMetrics } from "~services/user/user-consumer-service";
+import type { AccessTokenResponse, MetricsResponse } from "~types/types";
+
 const Stats = () => {
-  const statsData = {
-    hoursWatched: 254,
-    messages: 420,
-    topChannels: [
-      "https://static-cdn.jtvnw.net/jtv_user_pictures/f5c84939-a415-4654-b5da-60ff968280e6-profile_image-150x150.png",
-      "https://static-cdn.jtvnw.net/jtv_user_pictures/f5c84939-a415-4654-b5da-60ff968280e6-profile_image-150x150.png",
-      "https://static-cdn.jtvnw.net/jtv_user_pictures/f5c84939-a415-4654-b5da-60ff968280e6-profile_image-150x150.png",
-      "https://static-cdn.jtvnw.net/jtv_user_pictures/f5c84939-a415-4654-b5da-60ff968280e6-profile_image-150x150.png",
-    ],
-    topCategories: [
-      "https://static-cdn.jtvnw.net/jtv_user_pictures/f5c84939-a415-4654-b5da-60ff968280e6-profile_image-150x150.png",
-      "https://static-cdn.jtvnw.net/jtv_user_pictures/f5c84939-a415-4654-b5da-60ff968280e6-profile_image-150x150.png",
-      "https://static-cdn.jtvnw.net/jtv_user_pictures/f5c84939-a415-4654-b5da-60ff968280e6-profile_image-150x150.png",
-      "https://static-cdn.jtvnw.net/jtv_user_pictures/f5c84939-a415-4654-b5da-60ff968280e6-profile_image-150x150.png",
-    ],
-  };
+  const [authorization] = useStorage<AccessTokenResponse>("accessToken");
+
+  const [stats, setStats] = useState<MetricsResponse>();
+
+  useEffect(() => {
+    getMetrics(authorization?.access_token)
+      .then((res) => {
+        setStats(res);
+      })
+      .catch((err) => {
+        console.error(err);
+      });
+  }, [authorization]);
+
+  const statsData = useMemo(() => {
+    if (!stats) {
+      return {
+        hoursWatched: 0,
+        messages: 0,
+        topChannels: ["https://http.cat/404"],
+        topCategories: ["https://http.cat/404"],
+      };
+    }
+    return {
+      hoursWatched:
+        stats.main_metrics.minutes_watched > 0
+          ? Math.round(stats.main_metrics.minutes_watched / 60)
+          : 0,
+      messages: 0,
+      topChannels: stats.user_metrics_by_channel.slice(0, 4).map((channel) => {
+        return `https://twitch-cdn.danielheart.dev/u/${channel.channel_id}.png`;
+      }),
+      topCategories: stats.user_metrics_by_category
+        .slice(0, 4)
+        .map((channel) => {
+          return `https://twitch-cdn.danielheart.dev/c/${channel.category_id}.png`;
+        }),
+    };
+  }, [stats]);
 
   const StatItem = ({ label, value }) => (
     <div className="w-1/2">

src/scripting/index.ts

@@ -88,6 +88,10 @@ export default class Kernel {
     console.log("TBP: Checking for category changes...");
     const channelName = extractUsername(window.location.href);
 
+    if (!channelName) {
+      return;
+    }
+
     setTimeout(() => {
       const categoryElement = document.querySelector(CATEGORY_ELEMENT_SELECTOR);
       if (categoryElement) {
@@ -101,7 +105,6 @@ export default class Kernel {
           const authorization: AccessTokenResponse = JSON.parse(
             res.accessToken,
           );
-          console.log(authorization);
 
           if (!authorization) {
             return;