fc -> plain

client/src/components/auth/AuthBasePage.tsx

@@ -13,12 +13,12 @@ interface AuthBasePageProps extends StackProps {
   children: React.ReactNode;
 }
 
-export const AuthBasePage: React.FC<AuthBasePageProps> = ({
+export const AuthBasePage = ({
   children,
   title,
   subtitle,
   ...props
-}) => {
+}: AuthBasePageProps) => {
   const theme = useTheme();
   return (
     <Stack gap={theme.spacing(10)} minHeight="100vh" {...props}>

client/src/components/common/HeatmapResponseTimeTooltip.tsx

@@ -6,10 +6,13 @@ import { useAppSelector } from "@/hooks/AppHooks";
 import type { LatestCheck } from "@/types/check";
 import { useTheme } from "@mui/material/styles";
 
-export const HeatmapResponseTimeTooltip: React.FC<{
+export const HeatmapResponseTimeTooltip = ({
+  children,
+  check,
+}: {
   children: React.ReactElement;
   check: LatestCheck;
-}> = ({ children, check }) => {
+}) => {
   const uiTimezone = useAppSelector((state: any) => state.ui.timezone);
   const theme = useTheme();
 

client/src/components/design-elements/Fallback.tsx

@@ -13,10 +13,7 @@ interface BaseFallbackProps extends StackProps {
   children: React.ReactNode;
 }
 
-export const BaseFallback: React.FC<BaseFallbackProps> = ({
-  children,
-  ...props
-}) => {
+export const BaseFallback = ({ children, ...props }: BaseFallbackProps) => {
   const theme = useTheme();
   const isSmall = useMediaQuery(theme.breakpoints.down("md"));
 

client/src/components/design-elements/InfoBox.tsx

@@ -8,7 +8,7 @@ interface InfoBoxProps {
   description: string;
 }
 
-export const InfoBox: React.FC<InfoBoxProps> = ({ title, description }) => {
+export const InfoBox = ({ title, description }: InfoBoxProps) => {
   const theme = useTheme();
 
   return (

client/src/components/design-elements/SkeletonCard.tsx

@@ -1,8 +1,7 @@
-import React from "react";
 import { Box, Stack, useTheme } from "@mui/material";
 
 interface SkeletonCardProps {
-  width?: number | string;
+  width?: number | string | { xs?: number | string; md?: number | string };
   showHalo?: boolean;
 }
 
@@ -11,10 +10,10 @@ interface SkeletonCardProps {
  * Shows an animated stacked card design with pulsing skeleton elements
  * Default size is 60% of original design
  */
-const SkeletonCard: React.FC<SkeletonCardProps> = ({
+const SkeletonCard = ({
   width = { xs: 130, md: 216 },
   showHalo = true,
-}) => {
+}: SkeletonCardProps) => {
   const theme = useTheme();
   const pulseAnimation = {
     "@keyframes pulse": {

client/src/components/design-elements/StatBox.tsx

@@ -13,11 +13,7 @@ type GradientBox = React.PropsWithChildren<{
   sx?: SxProps;
 }>;
 
-export const GradientBox: React.FC<GradientBox> = ({
-  children,
-  palette,
-  sx,
-}) => {
+export const GradientBox = ({ children, palette, sx }: GradientBox) => {
   const theme = useTheme();
   const isSmall = useMediaQuery(theme.breakpoints.down("md"));
   const isLight = theme.palette.mode === "light";
@@ -51,7 +47,7 @@ type StatBoxProps = React.PropsWithChildren<{
   onClick?: () => void;
 }>;
 
-export const StatBox: React.FC<StatBoxProps> = ({
+export const StatBox = ({
   title,
   subtitle,
   palette,
@@ -59,7 +55,7 @@ export const StatBox: React.FC<StatBoxProps> = ({
   sx,
   tooltip,
   onClick,
-}) => {
+}: StatBoxProps) => {
   const theme = useTheme();
   const textColor = palette ? theme.palette[palette].contrastText : "inherit";
 

client/src/components/design-elements/StatusBox.tsx

@@ -9,7 +9,7 @@ import { useTheme } from "@mui/material/styles";
 
 type StatusBoxProps = React.PropsWithChildren<{ children: React.ReactNode }>;
 
-export const BGBox: React.FC<StatusBoxProps> = ({ children }) => {
+export const BGBox = ({ children }: StatusBoxProps) => {
   const theme = useTheme();
   return (
     <BaseBox

client/src/components/design-elements/Table.tsx

@@ -322,7 +322,7 @@ function TablePaginationActions(props: TablePaginationActionsProps) {
   );
 }
 
-export const Pagination: React.FC<TablePaginationProps> = ({ ...props }) => {
+export const Pagination = ({ ...props }: TablePaginationProps) => {
   const isSmall = useMediaQuery((theme: any) => theme.breakpoints.down("sm"));
   const theme = useTheme();
   return (

client/src/components/design-elements/Tooltip.tsx

@@ -6,10 +6,7 @@ import type { TooltipProps } from "@mui/material/Tooltip";
 
 type StyledTooltipProps = TooltipProps;
 
-export const Tooltip: React.FC<StyledTooltipProps> = ({
-  placement = "top",
-  ...props
-}) => {
+export const Tooltip = ({ placement = "top", ...props }: StyledTooltipProps) => {
   const theme = useTheme();
 
   return (
@@ -44,11 +41,11 @@ export interface TooltipWithInfoProps
   iconColor?: string;
 }
 
-export const TooltipWithInfo: React.FC<TooltipWithInfoProps> = ({
+export const TooltipWithInfo = ({
   iconSize = 14,
   iconColor,
   ...props
-}) => {
+}: TooltipWithInfoProps) => {
   const theme = useTheme();
 
   const defaultColor = theme.palette.text.secondary;

client/src/components/inputs/AutoComplete.tsx

@@ -21,12 +21,12 @@ type AutoCompleteInputProps = Omit<
   required?: boolean;
 };
 
-export const AutoCompleteInput: React.FC<AutoCompleteInputProps> = ({
+export const AutoCompleteInput = ({
   fieldLabel,
   required,
   renderInput,
   ...props
-}) => {
+}: AutoCompleteInputProps) => {
   const theme = useTheme();
   const multiple = props.multiple;
 

client/src/components/inputs/ButtonGroup.tsx

@@ -6,12 +6,12 @@ import MenuItem from "@mui/material/MenuItem";
 import type { ButtonGroupProps } from "@mui/material/ButtonGroup";
 import { ChevronDown } from "lucide-react";
 
-export const ButtonGroupInput: React.FC<ButtonGroupProps> = ({
+export const ButtonGroupInput = ({
   orientation,
   children,
   sx,
   ...props
-}) => {
+}: ButtonGroupProps) => {
   const isVertical = orientation === "vertical";
 
   if (!isVertical) {

client/src/components/inputs/FieldLabel.tsx

@@ -7,11 +7,11 @@ interface FieldLabelProps {
   htmlFor?: string;
 }
 
-export const FieldLabel: React.FC<FieldLabelProps> = ({
+export const FieldLabel = ({
   children,
   required = false,
   htmlFor,
-}) => {
+}: FieldLabelProps) => {
   const theme = useTheme();
 
   return (

client/src/components/inputs/FormControlLabel.tsx

@@ -1,9 +1,7 @@
 import MuiFormControlLabel from "@mui/material/FormControlLabel";
 import type { FormControlLabelProps } from "@mui/material/FormControlLabel";
 
-export const FormControlLabel: React.FC<FormControlLabelProps> = ({
-  ...props
-}) => {
+export const FormControlLabel = ({ ...props }: FormControlLabelProps) => {
   return (
     <MuiFormControlLabel
       {...props}

client/src/components/inputs/FormField.tsx

@@ -9,12 +9,12 @@ interface FormFieldProps {
   htmlFor?: string;
 }
 
-export const FormField: React.FC<FormFieldProps> = ({
+export const FormField = ({
   label,
   required = false,
   children,
   htmlFor,
-}) => {
+}: FormFieldProps) => {
   const theme = useTheme();
 
   return (

client/src/components/inputs/RadioInput.tsx

@@ -7,7 +7,7 @@ import Typography from "@mui/material/Typography";
 
 interface RadioInputProps extends RadioProps {}
 
-export const RadioInput: React.FC<RadioInputProps> = ({ ...props }) => {
+export const RadioInput = ({ ...props }: RadioInputProps) => {
   const theme = useTheme();
   return (
     <Radio
@@ -39,9 +39,11 @@ export const RadioInput: React.FC<RadioInputProps> = ({ ...props }) => {
   );
 };
 
-export const RadioWithDescription: React.FC<
-  RadioInputProps & { label: string; description: string }
-> = ({ label, description, ...props }) => {
+export const RadioWithDescription = ({
+  label,
+  description,
+  ...props
+}: RadioInputProps & { label: string; description: string }) => {
   const theme = useTheme();
   return (
     <FormControlLabel

client/src/components/inputs/SwitchTeam.tsx

@@ -9,7 +9,6 @@ import { Tooltip } from "@/components/design-elements";
 import { useState, useEffect } from "react";
 import { useAppSelector, useAppDispatch } from "@/hooks/AppHooks";
 import { setSelectedTeamId } from "@/features/authSlice";
-import { useNavigate } from "react-router";
 import { useGet } from "@/hooks/UseApi";
 import type { ApiResponse } from "@/hooks/UseApi";
 import { useTheme } from "@mui/material/styles";
@@ -17,7 +16,6 @@ import { useTranslation } from "react-i18next";
 
 export const TeamSwitch = () => {
   const { t } = useTranslation();
-  const navigate = useNavigate();
   const dispatch = useAppDispatch();
   const theme = useTheme();
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);

client/src/components/monitors/Chart.tsx

@@ -12,13 +12,13 @@ type BaseChartProps = React.PropsWithChildren<{
   maxWidth?: number | string;
 }>;
 
-export const BaseChart: React.FC<BaseChartProps> = ({
+export const BaseChart = ({
   children,
   icon,
   title,
   width = "100%",
   maxWidth = "100%",
-}) => {
+}: BaseChartProps) => {
   const theme = useTheme();
 
   return (

client/src/components/monitors/ChartResponseTime.tsx

@@ -29,7 +29,7 @@ type XTickProps = {
   range: string;
 };
 
-export const XTick: React.FC<XTickProps> = ({ x, y, payload, range }) => {
+export const XTick = ({ x, y, payload, range }: XTickProps) => {
   const format = tickDateFormatLookup(range);
   const theme = useTheme();
   const uiTimezone = useAppSelector((state: any) => state.ui.timezone);
@@ -56,14 +56,14 @@ type ResponseTimeToolTipProps = {
   uiTimezone: string;
 };
 
-const ResponseTimeToolTip: React.FC<ResponseTimeToolTipProps> = ({
+const ResponseTimeToolTip = ({
   active,
   payload,
   label,
   range,
   theme,
   uiTimezone,
-}) => {
+}: ResponseTimeToolTipProps) => {
   if (!label) return null;
   if (!payload) return null;
   if (!active) return null;

client/src/components/monitors/HistogramInfrastructure.tsx

@@ -88,7 +88,7 @@ export const HistogramInfrastructure = ({
   range,
   title,
   type,
-  idx,
+  idx: _idx,
   checks,
   xKey,
   yDomain,
@@ -156,7 +156,7 @@ export const HistogramInfrastructure = ({
           {dataKeys?.map((dataKey, index) => {
             const gradientId = `gradient-${uniqueId}-${index}`;
             return (
-              <Fragment key={dataKey}>
+              <Fragment key={`${dataKey}-${index}`}>
                 {gradient === true &&
                   createGradient({
                     id: gradientId,

client/src/components/protected-route/index.tsx

@@ -2,9 +2,7 @@ import { useAppSelector } from "@/hooks/AppHooks";
 import { Navigate } from "react-router";
 import NotFound from "@/pages/errors/NotFound";
 
-export const ProtectedRoute: React.FC<React.PropsWithChildren> = ({
-  children,
-}) => {
+export const ProtectedRoute = ({ children }: React.PropsWithChildren) => {
   const isAuthenticated = useAppSelector((state) => state.auth.isAuthenticated);
   const user = useAppSelector((state) => state.auth.user);
   if (!isAuthenticated) {
@@ -22,9 +20,7 @@ export const ProtectedRoute: React.FC<React.PropsWithChildren> = ({
   return <>{children}</>;
 };
 
-export const MasterRoute: React.FC<React.PropsWithChildren> = ({
-  children,
-}) => {
+export const MasterRoute = ({ children }: React.PropsWithChildren) => {
   const user = useAppSelector((state) => state.auth.user);
 
   if (user?.teams.length === 0) {

client/src/pages/infrastructure/InfraDetailsNetGraphs.tsx

@@ -104,6 +104,7 @@ export const InfraDetailsNetGraphs = ({
               <HistogramInfrastructure
                 range={range}
                 title={config.type}
+                type={"net"}
                 idx={config.idx}
                 key={`${config.type}-${config.idx ?? ""}`}
                 checks={checks}