{`${slug

- ) + return ( +

+ ); } -export { Badge, badgeVariants } +export { Badge, badgeVariants }; diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx index 0f7034b..2681236 100644 --- a/src/components/ui/card.tsx +++ b/src/components/ui/card.tsx @@ -1,79 +1,86 @@ -import * as React from "react" +import * as React from "react"; -import { cn } from "@/lib/utils" +import { cn } from "@/lib/utils"; const Card = React.forwardRef< - HTMLDivElement, - React.HTMLAttributes + HTMLDivElement, + React.HTMLAttributes >(({ className, ...props }, ref) => ( -

-)) -Card.displayName = "Card" +

+)); +Card.displayName = "Card"; const CardHeader = React.forwardRef< - HTMLDivElement, - React.HTMLAttributes + HTMLDivElement, + React.HTMLAttributes >(({ className, ...props }, ref) => ( -

-)) -CardHeader.displayName = "CardHeader" +

+)); +CardHeader.displayName = "CardHeader"; const CardTitle = React.forwardRef< - HTMLParagraphElement, - React.HTMLAttributes + HTMLParagraphElement, + React.HTMLAttributes >(({ className, ...props }, ref) => ( -

-)) -CardTitle.displayName = "CardTitle" +

+)); +CardTitle.displayName = "CardTitle"; const CardDescription = React.forwardRef< - HTMLParagraphElement, - React.HTMLAttributes + HTMLParagraphElement, + React.HTMLAttributes >(({ className, ...props }, ref) => ( -
-)) -CardDescription.displayName = "CardDescription" +
+)); +CardDescription.displayName = "CardDescription"; const CardContent = React.forwardRef< - HTMLDivElement, - React.HTMLAttributes + HTMLDivElement, + React.HTMLAttributes >(({ className, ...props }, ref) => ( -
-)) -CardContent.displayName = "CardContent" +
+)); +CardContent.displayName = "CardContent"; const CardFooter = React.forwardRef< - HTMLDivElement, - React.HTMLAttributes + HTMLDivElement, + React.HTMLAttributes >(({ className, ...props }, ref) => ( -
-)) -CardFooter.displayName = "CardFooter" +
+)); +CardFooter.displayName = "CardFooter"; -export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } +export { + Card, + CardHeader, + CardFooter, + CardTitle, + CardDescription, + CardContent, +}; diff --git a/src/lib/utils.ts b/src/lib/utils.ts index d084cca..ac680b3 100644 --- a/src/lib/utils.ts +++ b/src/lib/utils.ts @@ -1,6 +1,6 @@ -import { type ClassValue, clsx } from "clsx" -import { twMerge } from "tailwind-merge" +import { type ClassValue, clsx } from "clsx"; +import { twMerge } from "tailwind-merge"; export function cn(...inputs: ClassValue[]) { - return twMerge(clsx(inputs)) + return twMerge(clsx(inputs)); } diff --git a/src/pages/stats/[slug].tsx b/src/pages/stats/[slug].tsx index 224046f..5fc76cb 100644 --- a/src/pages/stats/[slug].tsx +++ b/src/pages/stats/[slug].tsx @@ -1,134 +1,207 @@ -import { GetServerSideProps } from "next"; +import type { GetServerSideProps } from "next"; import "../../app/globals.css"; -import TitleBar from "../../components/TitleBar/TitleBar"; -import { ChannelCard } from "@/components/channel-card"; +import CompactTable from "@/components/CompactTable/CompactTable"; import DataChart from "@/components/DataChart/DataChart"; -import Footer from "@/components/Footer/Footer"; -import Head from 'next/head' import Divider from "@/components/Divider/Divider"; +import Footer from "@/components/Footer/Footer"; +import { ChannelCard } from "@/components/channel-card"; +import Head from "next/head"; +import TitleBar from "../../components/TitleBar/TitleBar"; interface ChannelDataProp { - channel_id: string; - channel_name: string; - profile_pic: string; - subscribers: number; - sub_org: string; - video_count: number; - view_count: number; - next_milestone: string; - days_until_next_milestone: string; - next_milestone_date: string; + channel_id: string; + channel_name: string; + profile_pic: string; + subscribers: number; + sub_org: string; + video_count: number; + view_count: number; + next_milestone: string; + days_until_next_milestone: string; + next_milestone_date: string; +} + +interface GraphDataProp { + labels: string[]; + datasets: number[]; } -interface GraphDataProp{ - labels: string[]; - datasets: number[]; +interface CompactTableProps { + dates: string[]; + milestones: string[]; } export const getServerSideProps: GetServerSideProps = async (context) => { - const { slug } = context.params || {}; + const { slug } = context.params || {}; - const chartData = await getGraphData(slug as string); - const channelData = await getChannelData(slug as string); - const sevenDayGraphData = await get7DGraphData(slug as string); + const chartData = await getGraphData(slug as string); + const channelData = await getChannelData(slug as string); + const sevenDayGraphData = await get7DGraphData(slug as string); + const milestoneData = await getMilestoneData(slug as string); - return { - props: { - chartData, - channelData, - slug, - sevenDayGraphData - }, - }; + return { + props: { + chartData, + channelData, + slug, + sevenDayGraphData, + milestoneData, + }, + }; }; -function Page({ chartData, channelData, sevenDayGraphData, slug }: { chartData: GraphDataProp, channelData: ChannelDataProp, sevenDayGraphData: GraphDataProp, slug: string }) { - return ( - <> - - {slug as string} - PhaseTracker - - - - - - - - -
-
- -
-
- -
-
- -
-
- -
-
-
- - ); +function Page({ + chartData, + channelData, + sevenDayGraphData, + slug, + milestoneData, +}: { + chartData: GraphDataProp; + channelData: ChannelDataProp; + sevenDayGraphData: GraphDataProp; + slug: string; + milestoneData: CompactTableProps; +}) { + console.log(milestoneData); + return ( + <> + + {slug as string} - PhaseTracker + + + + + + + + +
+
+ +
+
+ +
+
+ +
+
+ +
+ +
+ +
+
+
+ + ); } -async function getGraphData(slug: string){ - const encodedSlug = encodeURIComponent(slug as string); - const apiUrl = process.env.NEXT_PUBLIC_API_URL - const response = await fetch(apiUrl+`/api/subscribers/${encodedSlug}`, { - headers: { - 'Cache-Control': 'no-cache' - }, - cache: 'no-cache' - }); - if(!response.ok){ - console.log(response.statusText); - } - return response.json(); +async function getGraphData(slug: string) { + const encodedSlug = encodeURIComponent(slug as string); + const apiUrl = process.env.NEXT_PUBLIC_API_URL; + const response = await fetch(apiUrl + `/api/subscribers/${encodedSlug}`, { + headers: { + "Cache-Control": "no-cache", + }, + cache: "no-cache", + }); + if (!response.ok) { + console.log(response.statusText); + } + return response.json(); } -async function getChannelData(slug: string){ - const encodedSlug = encodeURIComponent(slug as string); - const apiUrl = process.env.NEXT_PUBLIC_API_URL - const response = await fetch(apiUrl+`/api/channel/${encodedSlug}`, { - headers: { - 'Cache-Control': 'no-cache' - }, - cache: 'no-cache' - }); - if(!response.ok){ - console.log(response.statusText); - } - return response.json(); +async function getChannelData(slug: string) { + const encodedSlug = encodeURIComponent(slug as string); + const apiUrl = process.env.NEXT_PUBLIC_API_URL; + const response = await fetch(apiUrl + `/api/channel/${encodedSlug}`, { + headers: { + "Cache-Control": "no-cache", + }, + cache: "no-cache", + }); + if (!response.ok) { + console.log(response.statusText); + } + return response.json(); } -async function get7DGraphData(slug: string){ - const encodedSlug = encodeURIComponent(slug as string); - const apiUrl = process.env.NEXT_PUBLIC_API_URL - const response = await fetch(apiUrl+`/api/subscribers/${encodedSlug}/7d`, { - headers: { - 'Cache-Control': 'no-cache' - }, - cache: 'no-cache' - }); - if(!response.ok){ - console.log(response.statusText); - } - return response.json(); +async function get7DGraphData(slug: string) { + const encodedSlug = encodeURIComponent(slug as string); + const apiUrl = process.env.NEXT_PUBLIC_API_URL; + const response = await fetch(apiUrl + `/api/subscribers/${encodedSlug}/7d`, { + headers: { + "Cache-Control": "no-cache", + }, + cache: "no-cache", + }); + if (!response.ok) { + console.log(response.statusText); + } + return response.json(); } +async function getMilestoneData(slug: string) { + const encodedSlug = encodeURIComponent(slug as string); + const apiUrl = process.env.NEXT_PUBLIC_API_URL; + const response = await fetch( + apiUrl + `/api/subscribers/${encodedSlug}/milestones`, + { + headers: { + "Cache-Control": "no-cache", + }, + cache: "no-cache", + }, + ); + if (!response.ok) { + console.log(response.statusText); + } + return response.json(); +} export default Page; -- cgit v1.2.3

Dates

Milestones

Dates

Milestones

Subscriber Count

Subscriber Count

-)) -CardTitle.displayName = "CardTitle" +