feat: metrics integration

package.json

@@ -68,8 +68,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,55 @@
+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) => {
+        console.log(res);
+        setStats(res);
+      })
+      .catch((err) => {
+        console.error(err);
+      });
+  }, [authorization]);
+
+  const statsData = useMemo(() => {
+    if (!stats) {
+      return {
+        hoursWatched: 420,
+        messages: 420,
+        topChannels: [
+          "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",
+        ],
+      };
+    }
+    return {
+      hoursWatched: stats.main_metrics.minutes_watched
+        ? stats.main_metrics.minutes_watched * 60
+        : 0,
+      messages: 420,
+      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) {
@@ -97,6 +101,7 @@ export default class Kernel {
       }
       // @ts-ignore
       interval = setInterval(() => {
+        console.log(currentCategory);
         browser.storage.sync.get("accessToken").then((res) => {
           const authorization: AccessTokenResponse = JSON.parse(
             res.accessToken,

src/services/user/user-consumer-service.ts

@@ -1,5 +1,10 @@
 import { env } from "~config/env";
-import type { AccessTokenResponse, TwitchUser, User } from "~types/types";
+import type {
+  AccessTokenResponse,
+  MetricsResponse,
+  TwitchUser,
+  User,
+} from "~types/types";
 
 const API_URL = env.data.CONSUMER_API_URL;
 const API_VERSION = env.data.CONSUMER_API_VERSION;
@@ -78,3 +83,16 @@ export async function sendHeartbeat(
     body: JSON.stringify(payload),
   });
 }
+
+export async function getMetrics(authentication: string) {
+  const uri = `${BASE_URL}/metrics/by-user`;
+
+  const response = await fetch(uri, {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: authentication,
+    },
+  });
+  return (await response.json()) as MetricsResponse;
+}

src/types/types.d.ts

@@ -64,3 +64,28 @@ export interface Account {
   created_at: string;
   updated_at: string;
 }
+
+// ----- Metrics
+export interface UserMetrics {
+  user_id: number;
+  minutes_watched: number | null;
+  messages_count: number | null;
+}
+
+export interface UserMetricsByCategory {
+  user_id: number;
+  minutes_watched: number | null;
+  category_id: string;
+}
+
+export interface UserMetricsByChannel {
+  user_id: number;
+  minutes_watched: number | null;
+  channel_id: string;
+}
+
+export interface MetricsResponse {
+  main_metrics: UserMetrics;
+  user_metrics_by_channel: UserMetricsByChannel[];
+  user_metrics_by_category: UserMetricsByCategory[];
+}

src/utils/regex.ts

@@ -1,11 +1,10 @@
-const watchablePages = [
-  /^https:\/\/dashboard\.twitch\.tv\/u\/([^\/]+)\/stream-manager$/,
-  /^https:\/\/www\.twitch\.tv\/embed\/([^\/]+)\/chat.*$/,
+const watchableUserPages = [
   /^https:\/\/www\.twitch\.tv\/([^\/]+)$/,
+  //TODO: check if there's any other page link that should be included here
 ];
 
 export function extractUsername(url) {
-  for (const regex of watchablePages) {
+  for (const regex of watchableUserPages) {
     const match = url.match(regex);
     if (match) {
       return match[1]; // Extracted username