feat: re-implement individual statistic pages on next

1 files changed, 61 insertions, 11 deletions

diff --git a/src/pages/stats/[slug].tsx b/src/pages/stats/[slug].tsx
index 03f8adf..1971c1e 100644
--- a/src/pages/stats/[slug].tsx
+++ b/src/pages/stats/[slug].tsx
@@ -1,16 +1,66 @@
-"use client"
-import { useRouter } from 'next/router'
- 
+"use client";
+import React, { useEffect, useState } from "react";
+import { useRouter } from "next/router";
+import "../../app/globals.css";
+import TitleBar from "../../components/TitleBar/TitleBar";
+import { ChannelCard } from "@/components/channel-card";
+import DataChart from "@/components/DataChart/DataChart";
+import axios from "axios";
+
+interface ChannelDataProp {
+  channel_name: string;
+  profile_pic: string;
+  subscribers: number;
+  sub_org: string;
+  video_count: number;
+  next_milestone: string;
+  days_until_next_milestone: string;
+  next_milestone_date: string;
+}
+
 export default function Page() {
+  const [channelData, setChannelData] = useState<ChannelDataProp | null>(null);
   const router = useRouter();
+  const { slug } = router.query;
+  useEffect(() => {
+    const apiUrl = process.env.NEXT_PUBLIC_API_URL;
+    if (slug) {
+      const encodedSlug = encodeURIComponent(slug as string);
+      console.log(apiUrl + `/api/channel/${encodedSlug}`);
+      axios.get(apiUrl + `/api/channel/${encodedSlug}`).then((response) => {
+        console.log(response);
+        setChannelData(response.data);
+      });
+    }
+  }, [slug]);
+
   return (
-    <div className="flex items-center justify-center h-screen">
-      <div className="bg-black p-8 rounded-lg shadow-lg">
-        <h1 className="text-2xl font-bold mb-4">Under Construction</h1>
-        <p className="text-gray-600">We are currently working on this page. Please check back later.</p>
-        <p className="text-gray-600">Thank you for your patience</p>
-        <p className="text-gray-600">Slug: {router.query.slug}</p>
+    <>
+      <TitleBar title={slug as string} redirectUrl="/" showHomeButton />
+      <div className="flex justify-center">
+        <div className="flex flex-col items-center">
+          {channelData && (
+            <ChannelCard
+              name={channelData.channel_name}
+              avatarUrl={channelData.profile_pic}
+              subscriberCount={channelData.subscribers}
+              videoCount={channelData.video_count}
+              suborg={channelData.sub_org}
+              nextMilestone={channelData.next_milestone}
+              nextMilestoneDays={channelData.days_until_next_milestone}
+              nextMilestoneDate={channelData.next_milestone_date}
+            />
+          )}
+        </div>
       </div>
-    </div>
+      <div className="px-48 mb-10 mt-10">
+        <div className="mb-12">
+          <DataChart channel_name={slug as string}/>
+        </div>
+        <div className="mb-4">
+          <DataChart channel_name={slug as string} requestUrl={`${process.env.NEXT_PUBLIC_API_URL}/api/subscribers/${slug as string}/7d`} graphTitle="7 Day Historical"/>
+        </div>
+      </div>
+    </>
   );
-}
\ No newline at end of file
+}