diff options
Diffstat (limited to 'src/pages/stats')
| -rw-r--r-- | src/pages/stats/[slug].tsx | 72 |
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 +} |