fix: update types

Author: Findmitrey

src/components/common/CarouselArrow/CarouselArrow.tsx

@@ -1,7 +1,8 @@
+import { WithChildrenProps } from '@app/types/generalTypes';
 import React from 'react';
 import { CustomArrowProps } from 'react-slick';
 import * as S from './CarouselArrow.styles';
 
-export const CarouselArrow: React.FC<CustomArrowProps> = ({ children, ...props }) => {
+export const CarouselArrow: React.FC<WithChildrenProps<CustomArrowProps>> = ({ children, ...props }) => {
   return <S.ArrowWrapper {...props}>{children}</S.ArrowWrapper>;
 };

src/components/common/PageTitle/PageTitle.tsx

@@ -1,7 +1,8 @@
+import { WithChildrenProps } from '@app/types/generalTypes';
 import React from 'react';
 import { Helmet } from 'react-helmet';
 
-export const PageTitle: React.FC = ({ children }) => {
+export const PageTitle: React.FC<WithChildrenProps> = ({ children }) => {
   return (
     <Helmet>
       <title>{children} | Lightence Admin</title>

src/components/common/ThemeSwitcher.tsx

@@ -1,7 +1,8 @@
+import { WithChildrenProps } from '@app/types/generalTypes';
 import React, { useEffect, useState } from 'react';
 import { useThemeSwitcher } from 'react-css-theme-switcher';
 
-interface ThemeSwitcherProps {
+interface ThemeSwitcherProps extends WithChildrenProps {
   theme: string;
 }
 

src/components/common/charts/PieChartCustomLegend.tsx

@@ -24,7 +24,10 @@ export const PieChartCustomLegend: React.FC<PieChartCustomLegend> = ({
 }) => {
   const [activeItemIndex, setActiveItemIndex] = useState<number | null>(null);
 
-  const onMouseOver = useCallback(({ dataIndex }) => setActiveItemIndex(dataIndex), [setActiveItemIndex]);
+  const onMouseOver = useCallback(
+    ({ dataIndex }: { dataIndex: number | null }) => setActiveItemIndex(dataIndex),
+    [setActiveItemIndex],
+  );
   const onMouseOut = useCallback(() => setActiveItemIndex(null), [setActiveItemIndex]);
 
   const onEvents = {

src/components/layouts/main/MainHeader/MainHeader.tsx

@@ -1,7 +1,8 @@
+import { WithChildrenProps } from '@app/types/generalTypes';
 import React from 'react';
 import * as S from './MainHeader.styles';
 
-interface MainHeaderProps {
+interface MainHeaderProps extends WithChildrenProps {
   isTwoColumnsLayout: boolean;
 }
 

src/components/profile/profileCard/profileFormNav/nav/PersonalInfo/PersonalInfo.tsx

@@ -17,6 +17,7 @@ import { ZipcodeItem } from '@app/components/profile/profileCard/profileFormNav/
 import { AddressItem } from '@app/components/profile/profileCard/profileFormNav/nav/PersonalInfo/AddressItem/AddressItem';
 import { WebsiteItem } from '@app/components/profile/profileCard/profileFormNav/nav/PersonalInfo/WebsiteItem/WebsiteItem';
 import { SocialLinksItem } from '@app/components/profile/profileCard/profileFormNav/nav/PersonalInfo/SocialLinksItem/SocialLinksItem';
+import { CreditCard } from '@app/components/profile/profileCard/profileFormNav/nav/payments/paymentMethod/paymentForm/interfaces';
 import { useAppSelector } from '@app/hooks/reduxHooks';
 import { Dates } from '@app/constants/Dates';
 import { notificationController } from '@app/controllers/notificationController';
@@ -98,7 +99,7 @@ export const PersonalInfo: React.FC = () => {
   const { t } = useTranslation();
 
   const onFinish = useCallback(
-    (values) => {
+    (values: CreditCard) => {
       // todo dispatch an action here
       setLoading(true);
       setTimeout(() => {

src/components/profile/profileCard/profileFormNav/nav/payments/paymentMethod/paymentForm/CardThemeItem/CardThemeItem.tsx

@@ -2,7 +2,7 @@ import React, { useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Col, Row } from 'antd';
 import { BaseButtonsForm } from '@app/components/common/forms/BaseButtonsForm/BaseButtonsForm';
-import { cardThemes } from '@app/constants/cardThemes';
+import { CardTheme, cardThemes } from '@app/constants/cardThemes';
 import { CreditCard } from '@app/components/profile/profileCard/profileFormNav/nav/payments/paymentMethod/paymentForm/interfaces';
 import * as S from './CardThemeItem.styles';
 
@@ -15,7 +15,7 @@ export const CardThemeItem: React.FC<CardThemeItemProps> = ({ cardData, setCardD
   const { t } = useTranslation();
 
   const handleChange = useCallback(
-    (item) => () => {
+    (item: CardTheme) => () => {
       setCardData({ ...cardData, background: item.background });
     },
     [setCardData, cardData],

src/components/profile/profileCard/profileFormNav/nav/payments/paymentMethod/paymentForm/PaymentForm/PaymentForm.tsx

@@ -44,7 +44,7 @@ export const PaymentForm: React.FC<PaymentFormProps> = ({ closeModal, onFormFini
   );
 
   const onFinish = useCallback(
-    (values) => {
+    (values: CreditCard) => {
       setLoading(true);
       setTimeout(() => {
         setLoading(false);

src/components/router/RequireAuth.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
 import { Navigate } from 'react-router-dom';
 import { useAppSelector } from '@app/hooks/reduxHooks';
+import { WithChildrenProps } from '@app/types/generalTypes';
 
-const RequireAuth: React.FC = ({ children }) => {
+const RequireAuth: React.FC<WithChildrenProps> = ({ children }) => {
   const token = useAppSelector((state) => state.auth.token);
 
   return token ? <>{children}</> : <Navigate to="/auth/login" replace />;

src/constants/cardThemes.ts

@@ -1,4 +1,4 @@
-interface CardTheme {
+export interface CardTheme {
   id: number;
   background: string;
 }

src/types/generalTypes.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+
+export type WithChildrenProps<T = undefined> = T extends undefined
+  ? {
+      children?: ReactNode;
+    }
+  : T & {
+      children?: ReactNode;
+    };