chore(deps): update react to 18 (#2943)

src/components/Common/Accordion/index.tsx

@@ -16,19 +16,24 @@ export interface AccordionChildProps {
   AccordionContent: any;
 }
 
-export const AccordionContent: React.FC<{ isOpen: boolean }> = ({
+type AccordionContentProps = {
+  isOpen: boolean;
+  children: React.ReactNode;
+};
+
+export const AccordionContent = ({
   isOpen,
   children,
-}) => {
+}: AccordionContentProps) => {
   return <AnimateHeight height={isOpen ? 'auto' : 0}>{children}</AnimateHeight>;
 };
 
-const Accordion: React.FC<AccordionProps> = ({
+const Accordion = ({
   single,
   atLeastOne,
   initialOpenIndexes,
   children,
-}) => {
+}: AccordionProps) => {
   const initialState = initialOpenIndexes || (atLeastOne && [0]) || [];
   const [openIndexes, setOpenIndexes] = useState<number[]>(initialState);
 

src/components/Common/Alert/index.tsx

@@ -8,9 +8,10 @@ import React from 'react';
 interface AlertProps {
   title?: React.ReactNode;
   type?: 'warning' | 'info' | 'error';
+  children?: React.ReactNode;
 }
 
-const Alert: React.FC<AlertProps> = ({ title, children, type }) => {
+const Alert = ({ title, children, type }: AlertProps) => {
   let design = {
     bgColor: 'bg-yellow-600',
     titleColor: 'text-yellow-100',

src/components/Common/Badge/index.tsx

@@ -5,14 +5,15 @@ interface BadgeProps {
   badgeType?: 'default' | 'primary' | 'danger' | 'warning' | 'success';
   className?: string;
   href?: string;
+  children: React.ReactNode;
 }
 
-const Badge: React.FC<BadgeProps> = ({
+const Badge = ({
   badgeType = 'default',
   className,
   href,
   children,
-}) => {
+}: BadgeProps) => {
   const badgeStyle = [
     'px-2 inline-flex text-xs leading-5 font-semibold rounded-full whitespace-nowrap',
   ];

src/components/Common/ButtonWithDropdown/index.tsx

@@ -13,11 +13,11 @@ interface DropdownItemProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
   buttonType?: 'primary' | 'ghost';
 }
 
-const DropdownItem: React.FC<DropdownItemProps> = ({
+const DropdownItem = ({
   children,
   buttonType = 'primary',
   ...props
-}) => {
+}: DropdownItemProps) => {
   let styleClass = 'button-md text-white';
 
   switch (buttonType) {
@@ -46,14 +46,14 @@ interface ButtonWithDropdownProps
   buttonType?: 'primary' | 'ghost';
 }
 
-const ButtonWithDropdown: React.FC<ButtonWithDropdownProps> = ({
+const ButtonWithDropdown = ({
   text,
   children,
   dropdownIcon,
   className,
   buttonType = 'primary',
   ...props
-}) => {
+}: ButtonWithDropdownProps) => {
   const [isOpen, setIsOpen] = useState(false);
   const buttonRef = useRef<HTMLButtonElement>(null);
   useClickOutside(buttonRef, () => setIsOpen(false));

src/components/Common/CachedImage/index.tsx

@@ -10,7 +10,7 @@ import useSettings from '../../../hooks/useSettings';
  * It uses the `next/image` Image component but overrides
  * the `unoptimized` prop based on the application setting `cacheImages`.
  **/
-const CachedImage: React.FC<ImageProps> = (props) => {
+const CachedImage = (props: ImageProps) => {
   const { currentSettings } = useSettings();
 
   return <Image unoptimized={!currentSettings.cacheImages} {...props} />;

src/components/Common/ConfirmButton/index.tsx

@@ -6,14 +6,15 @@ interface ConfirmButtonProps {
   onClick: () => void;
   confirmText: React.ReactNode;
   className?: string;
+  children: React.ReactNode;
 }
 
-const ConfirmButton: React.FC<ConfirmButtonProps> = ({
+const ConfirmButton = ({
   onClick,
   children,
   confirmText,
   className,
-}) => {
+}: ConfirmButtonProps) => {
   const ref = useRef(null);
   useClickOutside(ref, () => setIsClicked(false));
   const [isClicked, setIsClicked] = useState(false);

src/components/Common/Header/index.tsx

@@ -3,13 +3,10 @@ import React from 'react';
 interface HeaderProps {
   extraMargin?: number;
   subtext?: React.ReactNode;
+  children: React.ReactNode;
 }
 
-const Header: React.FC<HeaderProps> = ({
-  children,
-  extraMargin = 0,
-  subtext,
-}) => {
+const Header = ({ children, extraMargin = 0, subtext }: HeaderProps) => {
   return (
     <div className="mt-8 md:flex md:items-center md:justify-between">
       <div className={`min-w-0 flex-1 mx-${extraMargin}`}>

src/components/Common/List/index.tsx

@@ -4,9 +4,10 @@ import { withProperties } from '../../../utils/typeHelpers';
 interface ListItemProps {
   title: string;
   className?: string;
+  children: React.ReactNode;
 }
 
-const ListItem: React.FC<ListItemProps> = ({ title, className, children }) => {
+const ListItem = ({ title, className, children }: ListItemProps) => {
   return (
     <div>
       <div className="max-w-6xl py-4 sm:grid sm:grid-cols-3 sm:gap-4">
@@ -22,9 +23,10 @@ const ListItem: React.FC<ListItemProps> = ({ title, className, children }) => {
 interface ListProps {
   title: string;
   subTitle?: string;
+  children: React.ReactNode;
 }
 
-const List: React.FC<ListProps> = ({ title, subTitle, children }) => {
+const List = ({ title, subTitle, children }: ListProps) => {
   return (
     <>
       <div>

src/components/Common/ListView/index.tsx

@@ -18,13 +18,13 @@ interface ListViewProps {
   onScrollBottom: () => void;
 }
 
-const ListView: React.FC<ListViewProps> = ({
+const ListView = ({
   items,
   isEmpty,
   isLoading,
   onScrollBottom,
   isReachingEnd,
-}) => {
+}: ListViewProps) => {
   const intl = useIntl();
   useVerticalScroll(onScrollBottom, !isLoading && !isEmpty && !isReachingEnd);
   return (

src/components/Common/LoadingSpinner/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-export const SmallLoadingSpinner: React.FC = () => {
+export const SmallLoadingSpinner = () => {
   return (
     <div className="inset-0 flex h-full w-full items-center justify-center text-gray-200">
       <svg
@@ -29,7 +29,7 @@ export const SmallLoadingSpinner: React.FC = () => {
   );
 };
 
-const LoadingSpinner: React.FC = () => {
+const LoadingSpinner = () => {
   return (
     <div className="inset-0 flex h-64 items-center justify-center text-gray-200">
       <svg

src/components/Common/Modal/index.tsx

@@ -33,9 +33,10 @@ interface ModalProps {
   iconSvg?: ReactNode;
   loading?: boolean;
   backdrop?: string;
+  children?: ReactNode;
 }
 
-const Modal: React.FC<ModalProps> = ({
+const Modal = ({
   title,
   onCancel,
   onOk,
@@ -58,7 +59,7 @@ const Modal: React.FC<ModalProps> = ({
   tertiaryText,
   onTertiary,
   backdrop,
-}) => {
+}: ModalProps) => {
   const intl = useIntl();
   const modalRef = useRef<HTMLDivElement>(null);
   useClickOutside(modalRef, () => {

src/components/Common/PageTitle/index.tsx

@@ -6,15 +6,16 @@ interface PageTitleProps {
   title: string | (string | undefined)[];
 }
 
-const PageTitle: React.FC<PageTitleProps> = ({ title }) => {
+const PageTitle = ({ title }: PageTitleProps) => {
   const settings = useSettings();
 
+  const titleText = `${
+    Array.isArray(title) ? title.filter(Boolean).join(' - ') : title
+  } - ${settings.currentSettings.applicationTitle}`;
+
   return (
     <Head>
-      <title>
-        {Array.isArray(title) ? title.filter(Boolean).join(' - ') : title} -{' '}
-        {settings.currentSettings.applicationTitle}
-      </title>
+      <title>{titleText}</title>
     </Head>
   );
 };

src/components/Common/PlayButton/index.tsx

@@ -12,7 +12,7 @@ export interface PlayButtonLink {
   svg: ReactNode;
 }
 
-const PlayButton: React.FC<PlayButtonProps> = ({ links }) => {
+const PlayButton = ({ links }: PlayButtonProps) => {
   if (!links || !links.length) {
     return null;
   }

src/components/Common/ProgressCircle/index.tsx

@@ -6,11 +6,11 @@ interface ProgressCircleProps {
   useHeatLevel?: boolean;
 }
 
-const ProgressCircle: React.FC<ProgressCircleProps> = ({
+const ProgressCircle = ({
   className,
   progress = 0,
   useHeatLevel,
-}) => {
+}: ProgressCircleProps) => {
   const ref = useRef<SVGCircleElement>(null);
 
   let color = '';

src/components/Common/SensitiveInput/index.tsx

@@ -12,10 +12,7 @@ interface CustomFieldProps extends React.ComponentProps<typeof Field> {
 
 type SensitiveInputProps = CustomInputProps | CustomFieldProps;
 
-const SensitiveInput: React.FC<SensitiveInputProps> = ({
-  as = 'input',
-  ...props
-}) => {
+const SensitiveInput = ({ as = 'input', ...props }: SensitiveInputProps) => {
   const [isHidden, setHidden] = useState(true);
   const Component = as === 'input' ? 'input' : Field;
   const componentProps =

src/components/Common/SettingsTabs/index.tsx

@@ -15,14 +15,17 @@ export interface SettingsRoute {
   hidden?: boolean;
 }
 
-const SettingsLink: React.FC<{
+type SettingsLinkProps = {
   tabType: 'default' | 'button';
   currentPath: string;
   route: string;
   regex: RegExp;
   hidden?: boolean;
   isMobile?: boolean;
-}> = ({
+  children: React.ReactNode;
+};
+
+const SettingsLink = ({
   children,
   tabType,
   currentPath,
@@ -30,7 +33,7 @@ const SettingsLink: React.FC<{
   regex,
   hidden = false,
   isMobile = false,
-}) => {
+}: SettingsLinkProps) => {
   if (hidden) {
     return null;
   }
@@ -66,10 +69,13 @@ const SettingsLink: React.FC<{
   );
 };
 
-const SettingsTabs: React.FC<{
+const SettingsTabs = ({
+  tabType = 'default',
+  settingsRoutes,
+}: {
   tabType?: 'default' | 'button';
   settingsRoutes: SettingsRoute[];
-}> = ({ tabType = 'default', settingsRoutes }) => {
+}) => {
   const router = useRouter();
   const { user: currentUser } = useUser();
 

src/components/Common/SlideOver/index.tsx

@@ -10,15 +10,16 @@ interface SlideOverProps {
   title: React.ReactNode;
   subText?: string;
   onClose: () => void;
+  children: React.ReactNode;
 }
 
-const SlideOver: React.FC<SlideOverProps> = ({
+const SlideOver = ({
   show = false,
   title,
   subText,
   onClose,
   children,
-}) => {
+}: SlideOverProps) => {
   const [isMounted, setIsMounted] = useState(false);
   const slideoverRef = useRef(null);
   useLockBodyScroll(show);

src/components/Common/Table/index.tsx

@@ -1,18 +1,21 @@
-import type { AllHTMLAttributes } from 'react';
 import React from 'react';
 import { withProperties } from '../../../utils/typeHelpers';
 
-const TBody: React.FC = ({ children }) => {
+type TBodyProps = {
+  children: React.ReactNode;
+};
+
+const TBody = ({ children }: TBodyProps) => {
   return (
     <tbody className="divide-y divide-gray-700 bg-gray-800">{children}</tbody>
   );
 };
 
-const TH: React.FC<AllHTMLAttributes<HTMLTableHeaderCellElement>> = ({
+const TH = ({
   children,
   className,
   ...props
-}) => {
+}: React.ComponentPropsWithoutRef<'th'>) => {
   const style = [
     'px-4 py-3 bg-gray-500 text-left text-xs leading-4 font-medium text-gray-200 uppercase tracking-wider truncate',
   ];
@@ -28,18 +31,18 @@ const TH: React.FC<AllHTMLAttributes<HTMLTableHeaderCellElement>> = ({
   );
 };
 
-interface TDProps extends AllHTMLAttributes<HTMLTableCellElement> {
+type TDProps = {
   alignText?: 'left' | 'center' | 'right';
   noPadding?: boolean;
-}
+};
 
-const TD: React.FC<TDProps> = ({
+const TD = ({
   children,
   alignText = 'left',
   noPadding,
   className,
   ...props
-}) => {
+}: TDProps & React.ComponentPropsWithoutRef<'td'>) => {
   const style = ['text-sm leading-5 text-white'];
 
   switch (alignText) {
@@ -69,7 +72,11 @@ const TD: React.FC<TDProps> = ({
   );
 };
 
-const Table: React.FC = ({ children }) => {
+type TableProps = {
+  children: React.ReactNode;
+};
+
+const Table = ({ children }: TableProps) => {
   return (
     <div className="flex flex-col">
       <div className="my-2 -mx-4 overflow-x-auto md:mx-0 lg:mx-0">