From bb57421e9878e8c00636c357afb80eff563ba263 Mon Sep 17 00:00:00 2001 From: Pinapelz Date: Thu, 10 Oct 2024 01:29:18 -0700 Subject: added diff historical to channel card, fix channel card CD alignment on sm devices --- src/components/ChannelCard/ChannelCard.tsx | 210 ++++++++++-------- src/components/Countdown.tsx | 117 +++++----- src/pages/stats/[slug].tsx | 345 +++++++++++++++-------------- 3 files changed, 366 insertions(+), 306 deletions(-) (limited to 'src') diff --git a/src/components/ChannelCard/ChannelCard.tsx b/src/components/ChannelCard/ChannelCard.tsx index 1cdb03e..5337b26 100644 --- a/src/components/ChannelCard/ChannelCard.tsx +++ b/src/components/ChannelCard/ChannelCard.tsx @@ -1,98 +1,130 @@ -import React from 'react'; -import Image from 'next/image'; -import Countdown from '../Countdown'; +import React from "react"; +import Image from "next/image"; +import Countdown from "../Countdown"; type ChannelCardProps = { - channel_id: string; - name: string; - avatarUrl: string; - subscriberCount: number; - videoCount: number; - viewCount: number; - suborg?: string; - nextMilestone: string; - nextMilestoneDays: string; - nextMilestoneDate: string; + channel_id: string; + name: string; + avatarUrl: string; + subscriberCount: number; + videoCount: number; + viewCount: number; + suborg?: string; + nextMilestone: string; + nextMilestoneDays: string; + nextMilestoneDate: string; + diff_1d: number; + diff_7d: number; + diff_30d: number; }; const ChannelCard: React.FC = ({ - channel_id, - name, - avatarUrl, - subscriberCount, - videoCount, - viewCount, - suborg, - nextMilestone, - nextMilestoneDays, - nextMilestoneDate, + channel_id, + name, + avatarUrl, + subscriberCount, + videoCount, + viewCount, + suborg, + nextMilestone, + nextMilestoneDays, + nextMilestoneDate, + diff_1d, + diff_7d, + diff_30d, }) => { - return ( -
-
- {name} -
-

- {name} -

- {suborg && ( -

- {suborg} -

- )} -
-
-
-
-

- {subscriberCount.toLocaleString()} -

-

- Subscribers -

-
-
-

- {videoCount.toLocaleString()} -

-

- Videos -

-
-
-

- {viewCount.toLocaleString()} -

-

- Views -

-
-
-
-

- Next Milestone: {Number(nextMilestone).toLocaleString()} -

-

- Estimated Date: {nextMilestoneDate} -

-
- + return ( +
+
+ {name} +
+

+ {name} +

+ {suborg && ( +

+ {suborg} +

+ )} +
+
+
+
+

+ {subscriberCount.toLocaleString()} +

+

+ Subscribers +

+
+
+

+ {videoCount.toLocaleString()} +

+

Videos

+
+
+

+ {viewCount.toLocaleString()} +

+

Views

+
+
+

+ {diff_1d.toLocaleString()} +

+

+ 24 Hour Change +

+
+
+

+ {diff_7d.toLocaleString()} +

+

+ 7 Day Change +

+
+
+

+ {diff_30d.toLocaleString()} +

+

+ 30 Day Change +

+
+
+
+

+ Next Milestone: {Number(nextMilestone).toLocaleString()} +

+

+ Estimated Date: {nextMilestoneDate} +

+
+ +
+
+ +
-
- -
- ); + ); }; -export default ChannelCard; \ No newline at end of file +export default ChannelCard; diff --git a/src/components/Countdown.tsx b/src/components/Countdown.tsx index a7af166..51b11af 100644 --- a/src/components/Countdown.tsx +++ b/src/components/Countdown.tsx @@ -1,70 +1,77 @@ -import React, { useEffect, useState } from 'react'; +import React, { useEffect, useState } from "react"; interface CountdownProps { - targetDate: string; + targetDate: string; } const Countdown: React.FC = ({ targetDate }) => { - const calculateTimeLeft = () => { - const difference = new Date(targetDate).getTime() - new Date().getTime(); - let timeLeft = { - days: '0', - hours: '0', - minutes: '0', - seconds: '0', - }; + const calculateTimeLeft = () => { + const difference = + new Date(targetDate).getTime() - new Date().getTime(); + let timeLeft = { + days: "0", + hours: "0", + minutes: "0", + seconds: "0", + }; - if (difference > 0) { - timeLeft = { - days: Math.floor(difference / (1000 * 60 * 60 * 24)).toString(), - hours: Math.floor((difference / (1000 * 60 * 60)) % 24).toString(), - minutes: Math.floor((difference / 1000 / 60) % 60).toString(), - seconds: Math.floor((difference / 1000) % 60).toString(), - }; - } + if (difference > 0) { + timeLeft = { + days: Math.floor(difference / (1000 * 60 * 60 * 24)).toString(), + hours: Math.floor( + (difference / (1000 * 60 * 60)) % 24, + ).toString(), + minutes: Math.floor((difference / 1000 / 60) % 60).toString(), + seconds: Math.floor((difference / 1000) % 60).toString(), + }; + } - return timeLeft; - }; + return timeLeft; + }; - const [timeLeft, setTimeLeft] = useState({ - days: '--', - hours: '--', - minutes: '--', - seconds: '--', - }); + const [timeLeft, setTimeLeft] = useState({ + days: "--", + hours: "--", + minutes: "--", + seconds: "--", + }); - useEffect(() => { - setTimeLeft(calculateTimeLeft()); + useEffect(() => { + setTimeLeft(calculateTimeLeft()); - const timer = setInterval(() => { - setTimeLeft(calculateTimeLeft()); - }, 1000); + const timer = setInterval(() => { + setTimeLeft(calculateTimeLeft()); + }, 1000); - return () => clearInterval(timer); - }, [targetDate]); + return () => clearInterval(timer); + }, [targetDate]); - return ( -
-
-
-
{timeLeft.days}
-
Days
-
-
-
{timeLeft.hours}
-
Hours
-
-
-
{timeLeft.minutes}
-
Minutes
-
-
-
{timeLeft.seconds}
-
Seconds
+ return ( +
+
+
+
{timeLeft.days}
+
Days
+
+
+
{timeLeft.hours}
+
Hours
+
+
+
+ {timeLeft.minutes} +
+
Minutes
+
+
+
+ {timeLeft.seconds} +
+
Seconds
+
+
-
-
- ); + ); }; -export default Countdown; \ No newline at end of file +export default Countdown; diff --git a/src/pages/stats/[slug].tsx b/src/pages/stats/[slug].tsx index 82d2757..6e6534a 100644 --- a/src/pages/stats/[slug].tsx +++ b/src/pages/stats/[slug].tsx @@ -4,197 +4,218 @@ import CompactTable from "@/components/CompactTable/CompactTable"; import DataChart from "@/components/DataChart/DataChart"; import Divider from "@/components/Divider/Divider"; import Footer from "@/components/Footer/Footer"; -import ChannelCard from "@/components/ChannelCard/ChannelCard" +import ChannelCard from "@/components/ChannelCard/ChannelCard"; 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[]; + labels: string[]; + datasets: number[]; } interface CompactTableProps { - dates: string[]; - milestones: string[]; + 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 milestoneData = await getMilestoneData(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, - milestoneData, - }, - }; + return { + props: { + chartData, + channelData, + slug, + sevenDayGraphData, + milestoneData, + }, + }; }; function Page({ - chartData, - channelData, - sevenDayGraphData, - slug, - milestoneData, - }: { - chartData: GraphDataProp; - channelData: ChannelDataProp; - sevenDayGraphData: GraphDataProp; - slug: string; - milestoneData: CompactTableProps; - }) { - return ( - <> - - {slug as string} - PhaseTracker - - - - - - - - -
- -
-
- -
-
- -
-
- -
-
- -
- -
-
-