From 7c3f1298095727fcacdc903fa79369d5624bf3df Mon Sep 17 00:00:00 2001 From: Pinapelz Date: Wed, 26 Jun 2024 22:01:38 -0700 Subject: lint project --- src/components/CompactTable/CompactTable.tsx | 65 +++++----- src/components/DataChart/DataChart.tsx | 130 ++++++++++---------- src/components/Divider/Divider.tsx | 18 +-- src/components/Footer/Footer.tsx | 48 ++++---- src/components/SubscriberTable/SubscriberTable.tsx | 123 ++++++++++--------- .../SubscriberTable/SubscriberTableRow.tsx | 70 ++++++----- src/components/TitleBar/TitleBar.tsx | 71 +++++++---- src/components/channel-card.tsx | 131 ++++++++++++--------- src/components/ui/avatar.tsx | 76 ++++++------ src/components/ui/badge.tsx | 54 ++++----- src/components/ui/card.tsx | 125 ++++++++++---------- 11 files changed, 503 insertions(+), 408 deletions(-) (limited to 'src/components') diff --git a/src/components/CompactTable/CompactTable.tsx b/src/components/CompactTable/CompactTable.tsx index 64eb4f2..6ec6b7c 100644 --- a/src/components/CompactTable/CompactTable.tsx +++ b/src/components/CompactTable/CompactTable.tsx @@ -1,36 +1,45 @@ -import React from 'react'; +import type React from "react"; interface CompactTableProps { - tableData: { - dates: string[]; - milestones: string[]; - } - + tableData: { + dates: string[]; + milestones: string[]; + }; } const CompactTable: React.FC = ({ tableData }) => { - return ( -
-
-
-

Dates

-
    - {tableData.dates.map((date, index) => ( -
  • {date}
    • - ))} -
-
-
-

Milestones

-
    - {tableData.milestones.map((milestone, index) => ( -
  • {milestone.toLocaleString()}
    • - ))} -
-
-
-
- ); + return ( +
+
+
+

Dates

+
    + {tableData.dates.map((date, index) => ( +
  • + {date} +
    • + ))} +
+
+
+

Milestones

+
    + {tableData.milestones.map((milestone, index) => ( +
  • + {milestone.toLocaleString()} +
    • + ))} +
+
+
+
+ ); }; export default CompactTable; diff --git a/src/components/DataChart/DataChart.tsx b/src/components/DataChart/DataChart.tsx index 4f8eecd..3b8304a 100644 --- a/src/components/DataChart/DataChart.tsx +++ b/src/components/DataChart/DataChart.tsx @@ -1,82 +1,82 @@ -import React from "react"; import { - Chart as ChartJS, - CategoryScale, - LinearScale, - PointElement, - LineElement, - Title, - Tooltip, - Legend, + CategoryScale, + Chart as ChartJS, + Legend, + LineElement, + LinearScale, + PointElement, + Title, + Tooltip, } from "chart.js"; +import type React from "react"; import { Line } from "react-chartjs-2"; ChartJS.register( - CategoryScale, - LinearScale, - PointElement, - LineElement, - Title, - Tooltip, - Legend + CategoryScale, + LinearScale, + PointElement, + LineElement, + Title, + Tooltip, + Legend, ); interface DataChartProps { - chartData?: any; - graphTitle?: string; - fullData?: boolean; - overrideBorderColor?: string - overrideBGColor?: string + chartData?: any; + graphTitle?: string; + fullData?: boolean; + overrideBorderColor?: string; + overrideBGColor?: string; } const DataChart: React.FC = ({ - chartData, - graphTitle, - fullData, - overrideBGColor, - overrideBorderColor + chartData, + graphTitle, + fullData, + overrideBGColor, + overrideBorderColor, }) => { - const options = { - responsive: true, - plugins: { - legend: { - position: "top" as const, - }, - title: { - display: true, - text: graphTitle || "Historical Subscriber Data", - font: { - size: 18, - }, - }, - }, - scales: { - x: { - ticks: { - autoSkip: true, - maxTicksLimit: 10, - }, - }, - }, - }; + const options = { + responsive: true, + plugins: { + legend: { + position: "top" as const, + }, + title: { + display: true, + text: graphTitle || "Historical Subscriber Data", + font: { + size: 18, + }, + }, + }, + scales: { + x: { + ticks: { + autoSkip: true, + maxTicksLimit: 10, + }, + }, + }, + }; - const data = { - labels: chartData.labels, - datasets: [ - { - label: "Subscriber Count", - data: chartData.datasets, - borderColor: overrideBorderColor||"rgb(255, 99, 132)", - backgroundColor: overrideBGColor||"rgba(255, 99, 132, 0.5)", - }, - ], - }; + const data = { + labels: chartData.labels, + datasets: [ + { + label: "Subscriber Count", + data: chartData.datasets, + borderColor: overrideBorderColor || "rgb(255, 99, 132)", + backgroundColor: overrideBGColor || "rgba(255, 99, 132, 0.5)", + }, + ], + }; - if (!fullData) { - return ; - } else { - return ; - } + if (!fullData) { + return ; + } else { + return ; + } }; export default DataChart; diff --git a/src/components/Divider/Divider.tsx b/src/components/Divider/Divider.tsx index 55e6844..e2ef41b 100644 --- a/src/components/Divider/Divider.tsx +++ b/src/components/Divider/Divider.tsx @@ -1,12 +1,14 @@ interface DividerProps { - text: string; + text: string; } const Divider = (props: DividerProps) => { - return ( -
-
{props.text}
-
- ) -} -export default Divider; \ No newline at end of file + return ( +
+
+ {props.text} +
+
+ ); +}; +export default Divider; diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx index 22573cd..8686e4c 100644 --- a/src/components/Footer/Footer.tsx +++ b/src/components/Footer/Footer.tsx @@ -1,26 +1,32 @@ - -import React from 'react'; +import React from "react"; const Footer = () => { - return ( -
-
-

- Information -

-

- Information is collected once per hour. Data collection will stop upon graduation -
- This page is in no way affiliated with Phase Connect or with any of the channels listed here. -
- Data Collection Started: 2022-04-01 (Earlier data may not be fully accurate) -

-

- Source Code
-

-
-
- ); + return ( +
+
+

Information

+

+ Information is collected once per hour. Data collection will stop upon + graduation +
+ This page is in no way affiliated with Phase Connect or with any of + the channels listed here. +
+ Data Collection Started: 2022-04-01 (Earlier data may not be fully + accurate) +

+

+ + Source Code + +
+

+
+
+ ); }; export default Footer; diff --git a/src/components/SubscriberTable/SubscriberTable.tsx b/src/components/SubscriberTable/SubscriberTable.tsx index b07c75d..05080ca 100644 --- a/src/components/SubscriberTable/SubscriberTable.tsx +++ b/src/components/SubscriberTable/SubscriberTable.tsx @@ -2,67 +2,82 @@ import React from "react"; import ChannelRow from "./SubscriberTableRow"; interface ChannelDataProp { - channel_name: string; - profile_pic: string; - subscribers: number; - sub_org: string; - video_count: number; - day_diff: number; - views: number; + channel_name: string; + profile_pic: string; + subscribers: number; + sub_org: string; + video_count: number; + day_diff: number; + views: number; } interface SubscriberDataTableProp { - channel_data: ChannelDataProp[]; - timestamp: string; + channel_data: ChannelDataProp[]; + timestamp: string; } const DataTable = ({ channel_data, timestamp }: SubscriberDataTableProp) => { - if (!channel_data) { - return null; - } + if (!channel_data) { + return null; + } -return ( - <> -
-

Subscriber Count

-

Last Updated: {timestamp}

-
-
- - - - - - - - - - - - - - {channel_data.map((channel, index) => ( - - ))} - -
- RANK - - CHANNEL - - GROUP - - VIDEO COUNT - - VIEW COUNT - - SUBSCRIBERS - - DIFF (24H) -
-
- -); + return ( + <> +
+

Subscriber Count

+

Last Updated: {timestamp}

+
+
+ + + + + + + + + + + + + + {channel_data.map((channel, index) => ( + + ))} + +
+ RANK + + CHANNEL + + GROUP + + VIDEO COUNT + + VIEW COUNT + + SUBSCRIBERS + + DIFF (24H) +
+
+ + ); }; export default DataTable; diff --git a/src/components/SubscriberTable/SubscriberTableRow.tsx b/src/components/SubscriberTable/SubscriberTableRow.tsx index 040c693..595a2c1 100644 --- a/src/components/SubscriberTable/SubscriberTableRow.tsx +++ b/src/components/SubscriberTable/SubscriberTableRow.tsx @@ -1,36 +1,48 @@ -"use client" -import React from 'react'; -import Image from 'next/image'; -import { ChannelDataProp } from './SubscriberTable'; +"use client"; +import Image from "next/image"; +import type React from "react"; +import type { ChannelDataProp } from "./SubscriberTable"; interface ChannelRowProps { - channel: ChannelDataProp; - index: number; + channel: ChannelDataProp; + index: number; } const ChannelRow: React.FC = ({ channel, index }) => ( - window.location.href = "/stats/"+channel.channel_name}> - {index + 1} - - {channel.channel_name} - - {channel.channel_name} - - - {channel.sub_org} - {channel.video_count} - {Number(channel.views).toLocaleString()} - {Number(channel.subscribers).toLocaleString()} - - {channel.day_diff > 0 ? `+${Number(channel.day_diff).toLocaleString()}` : Number(channel.day_diff).toLocaleString()} - - + (window.location.href = "/stats/" + channel.channel_name)} + > + {index + 1} + + {channel.channel_name} + {channel.channel_name} + + + {channel.sub_org} + + + {channel.video_count} + + + {Number(channel.views).toLocaleString()} + + + {Number(channel.subscribers).toLocaleString()} + + + {channel.day_diff > 0 + ? `+${Number(channel.day_diff).toLocaleString()}` + : Number(channel.day_diff).toLocaleString()} + + ); -export default ChannelRow; \ No newline at end of file +export default ChannelRow; diff --git a/src/components/TitleBar/TitleBar.tsx b/src/components/TitleBar/TitleBar.tsx index 171e03a..127534e 100644 --- a/src/components/TitleBar/TitleBar.tsx +++ b/src/components/TitleBar/TitleBar.tsx @@ -1,32 +1,51 @@ -import React from 'react'; -import '../TitleBar/TitleBarStyle.css' -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' -import { faHouse } from '@fortawesome/free-solid-svg-icons' +import type React from "react"; +import "../TitleBar/TitleBarStyle.css"; +import { faHouse } from "@fortawesome/free-solid-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; interface TitleBarProps { - title: string; - redirectUrl?: string; - showHomeButton?: boolean; - backgroundColor?: string; + title: string; + redirectUrl?: string; + showHomeButton?: boolean; + backgroundColor?: string; } -const TitleBar: React.FC = ({ title, redirectUrl, showHomeButton, backgroundColor }) => { - return ( - <> -
-
- - {title} - - {showHomeButton && ( - - - - )} -
-
- - ); +const TitleBar: React.FC = ({ + title, + redirectUrl, + showHomeButton, + backgroundColor, +}) => { + return ( + <> +
+
+ + + {title} + + + {showHomeButton && ( + + + + )} +
+
+ + ); }; -export default TitleBar; \ No newline at end of file +export default TitleBar; diff --git a/src/components/channel-card.tsx b/src/components/channel-card.tsx index b66a6e0..c19f492 100644 --- a/src/components/channel-card.tsx +++ b/src/components/channel-card.tsx @@ -1,59 +1,84 @@ -import { AvatarImage, AvatarFallback, Avatar } from "@/components/ui/avatar" -import { CardTitle, CardHeader, CardContent, Card } from "@/components/ui/card" -import { Badge } from "@/components/ui/badge" +import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; +import { Badge } from "@/components/ui/badge"; +import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; interface 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; } export function ChannelCard(props: ChannelCardProps) { - const { channel_id, name, avatarUrl, subscriberCount, videoCount, viewCount, suborg, nextMilestone, nextMilestoneDays, nextMilestoneDate } = props - return ( - - -
- - - PR - -
- {name} - {suborg} -
-
- - -
- Subscribers - {Number(subscriberCount).toLocaleString()} -
-
- Videos - {videoCount} -
-
- View Count - {Number(viewCount).toLocaleString()} -
-
- Next Milestone - {Number(nextMilestone).toLocaleString()} -
- {nextMilestoneDays} days - {nextMilestoneDate} -
- -
- - - ) + const { + channel_id, + name, + avatarUrl, + subscriberCount, + videoCount, + viewCount, + suborg, + nextMilestone, + nextMilestoneDays, + nextMilestoneDate, + } = props; + return ( + + +
+ + + PR + +
+ + {name} + + {suborg} +
+
+ + +
+ Subscribers + + {Number(subscriberCount).toLocaleString()} + +
+
+ Videos + {videoCount} +
+
+ View Count + + {Number(viewCount).toLocaleString()} + +
+
+ Next Milestone + + {Number(nextMilestone).toLocaleString()} + +
+ + {nextMilestoneDays} days + + + {nextMilestoneDate} + +
+
+ + + ); } diff --git a/src/components/ui/avatar.tsx b/src/components/ui/avatar.tsx index 1c69f50..3c884e8 100644 --- a/src/components/ui/avatar.tsx +++ b/src/components/ui/avatar.tsx @@ -1,50 +1,50 @@ -"use client" +"use client"; -import * as React from "react" -import * as AvatarPrimitive from "@radix-ui/react-avatar" +import * as AvatarPrimitive from "@radix-ui/react-avatar"; +import * as React from "react"; -import { cn } from "@/lib/utils" +import { cn } from "@/lib/utils"; const Avatar = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef + React.ElementRef, + React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( - -)) -Avatar.displayName = AvatarPrimitive.Root.displayName + +)); +Avatar.displayName = AvatarPrimitive.Root.displayName; const AvatarImage = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef + React.ElementRef, + React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( - -)) -AvatarImage.displayName = AvatarPrimitive.Image.displayName + +)); +AvatarImage.displayName = AvatarPrimitive.Image.displayName; const AvatarFallback = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef + React.ElementRef, + React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( - -)) -AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName + +)); +AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName; -export { Avatar, AvatarImage, AvatarFallback } +export { Avatar, AvatarImage, AvatarFallback }; diff --git a/src/components/ui/badge.tsx b/src/components/ui/badge.tsx index f000e3e..f38976c 100644 --- a/src/components/ui/badge.tsx +++ b/src/components/ui/badge.tsx @@ -1,36 +1,36 @@ -import * as React from "react" -import { cva, type VariantProps } from "class-variance-authority" +import { type VariantProps, cva } from "class-variance-authority"; +import type * as React from "react"; -import { cn } from "@/lib/utils" +import { cn } from "@/lib/utils"; const badgeVariants = cva( - "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", - { - variants: { - variant: { - default: - "border-transparent bg-primary text-primary-foreground hover:bg-primary/80", - secondary: - "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80", - destructive: - "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80", - outline: "text-foreground", - }, - }, - defaultVariants: { - variant: "default", - }, - } -) + "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", + { + variants: { + variant: { + default: + "border-transparent bg-primary text-primary-foreground hover:bg-primary/80", + secondary: + "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80", + destructive: + "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80", + outline: "text-foreground", + }, + }, + defaultVariants: { + variant: "default", + }, + }, +); export interface BadgeProps - extends React.HTMLAttributes, - VariantProps {} + extends React.HTMLAttributes, + VariantProps {} function Badge({ className, variant, ...props }: BadgeProps) { - return ( -
- ) + 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, +}; -- cgit v1.2.3