make channel-card name link to channel

3 files changed, 7 insertions, 4 deletions

diff --git a/backend/app.py b/backend/app.py
index 9926220..5e2be6d 100644
--- a/backend/app.py
+++ b/backend/app.py
@@ -71,8 +71,7 @@ def get_channel_information(channel_name):
             return ((subscriber_count // 1000000) + 1) * 1000000
     server = SQLHandler(CONFIG["SQL"]["host"], CONFIG["SQL"]["user"], CONFIG["SQL"]["password"], CONFIG["SQL"]["database"])
     data = server.execute_query("SELECT * FROM subscriber_data WHERE name = %s", (channel_name,))
-    channel_data = {"channel_name":data[0][3], "profile_pic": data[0][2], "subscribers": data[0][4], "sub_org": data[0][5], "video_count": data[0][6]}
-
+    channel_data = {"channel_id":data[0][1],"channel_name":data[0][3], "profile_pic": data[0][2], "subscribers": data[0][4], "sub_org": data[0][5], "video_count": data[0][6]}
     historical_data = server.execute_query("SELECT * FROM subscriber_data_historical WHERE name = %s", (channel_name,))
     current_subscriber_count = data[0][4]
     subscriber_points = []
diff --git a/src/components/channel-card.tsx b/src/components/channel-card.tsx
index 599c48a..839cde6 100644
--- a/src/components/channel-card.tsx
+++ b/src/components/channel-card.tsx
@@ -3,6 +3,7 @@ import { CardTitle, CardHeader, CardContent, Card } from "@/components/ui/card"
 import { Badge } from "@/components/ui/badge"
 
 interface ChannelCardProps {
+  channel_id: string
   name: string
   avatarUrl: string
   subscriberCount: number
@@ -14,7 +15,7 @@ interface ChannelCardProps {
 }
 
 export function ChannelCard(props: ChannelCardProps) {
-  const { name, avatarUrl, subscriberCount, videoCount, suborg, nextMilestone, nextMilestoneDays, nextMilestoneDate } = props
+  const { channel_id, name, avatarUrl, subscriberCount, videoCount, suborg, nextMilestone, nextMilestoneDays, nextMilestoneDate } = props
   return (
     <Card className="w-[500px] shadow-lg rounded-lg overflow-hidden mt-4 py-4">
       <CardHeader>
@@ -24,7 +25,7 @@ export function ChannelCard(props: ChannelCardProps) {
             <AvatarFallback>PR</AvatarFallback>
           </Avatar>
           <div>
-            <CardTitle>{name}</CardTitle>
+           <a className="hover:underline" href={`https://youtube.com/channel/${channel_id}`}><CardTitle>{name}</CardTitle></a>
             <Badge variant="secondary">{suborg}</Badge>
           </div>
         </div>
diff --git a/src/pages/stats/[slug].tsx b/src/pages/stats/[slug].tsx
index 6fe6460..fc3f8bf 100644
--- a/src/pages/stats/[slug].tsx
+++ b/src/pages/stats/[slug].tsx
@@ -5,8 +5,10 @@ import { ChannelCard } from "@/components/channel-card";
 import DataChart from "@/components/DataChart/DataChart";
 import Footer from "@/components/Footer/Footer";
 import Head from 'next/head'
+import { channel } from "diagnostics_channel";
 
 interface ChannelDataProp {
+  channel_id: string;
   channel_name: string;
   profile_pic: string;
   subscribers: number;
@@ -55,6 +57,7 @@ function Page({ chartData, channelData, sevenDayGraphData, slug }: { chartData:
       <div className="flex justify-center">
         <div className="flex flex-col items-center">
             <ChannelCard
+              channel_id={channelData.channel_id}
               name={channelData.channel_name}
               avatarUrl={channelData.profile_pic}
               subscriberCount={channelData.subscribers}