chore: refactor React.FC (#113)

gravity-ui · Sep 26, 2023 · 843099b · 843099b
1 parent 1d26e3d
commit 843099b
Show file tree

Hide file tree

Showing 33 changed files with 47 additions and 47 deletions.
diff --git a/src/blocks/Author/Author.tsx b/src/blocks/Author/Author.tsx
@@ -12,7 +12,7 @@ import './Author.scss';
 
 const b = block('author');
 
-export const Author: React.FC<AuthorProps> = (props) => {
+export const Author = (props: AuthorProps) => {
     const {image, paddingTop, paddingBottom, authorId, qa} = props;
 
     const {post} = useContext(PostPageContext);

diff --git a/src/blocks/Author/__tests__/Author.test.tsx b/src/blocks/Author/__tests__/Author.test.tsx
@@ -18,7 +18,7 @@ const authorProps = {
     qa: 'author-block',
 };
 
-const RenderComponent: React.FC<AuthorProps> = (props) => {
+const RenderComponent = (props: AuthorProps) => {
     return (
         <PostPageContext.Provider
             value={{post: post as unknown as PostData, suggestedPosts: [] as PostData[]}}

diff --git a/src/blocks/Banner/Banner.tsx b/src/blocks/Banner/Banner.tsx
@@ -15,15 +15,15 @@ const b = block('banner');
 
 const BANNER_CUSTOM_QA_ATTRIBUTES = ['image-container'];
 
-export const Banner: React.FC<BannerProps> = ({
+export const Banner = ({
     color,
     imageSize = 's',
     image,
     paddingTop,
     paddingBottom,
     qa,
     ...content
-}) => {
+}: BannerProps) => {
     const contentStyle: Record<string, string> = {};
     const qaAttributes = getQaAttributes(qa, BANNER_CUSTOM_QA_ATTRIBUTES);
 

diff --git a/src/blocks/CTA/CTA.tsx b/src/blocks/CTA/CTA.tsx
@@ -13,7 +13,7 @@ import './CTA.scss';
 
 const b = block('cta');
 
-export const CTA: React.FC<CTAProps> = ({items, paddingTop, paddingBottom}) => {
+export const CTA = ({items, paddingTop, paddingBottom}: CTAProps) => {
     /**
      * @deprecated Metrika will be deleted after launch of analyticsEvents
      */

diff --git a/src/blocks/ColoredText/ColoredText.tsx b/src/blocks/ColoredText/ColoredText.tsx
@@ -12,13 +12,13 @@ import './ColoredText.scss';
 
 const b = block('colored-text');
 
-export const ColoredText: React.FC<ColoredTextProps> = ({
+export const ColoredText = ({
     background,
     paddingTop,
     paddingBottom,
     qa,
     ...content
-}) => {
+}: ColoredTextProps) => {
     const contentData = updateContentSizes(content);
     const qaAttributes = getQaAttributes(qa);
 

diff --git a/src/blocks/Feed/Feed.tsx b/src/blocks/Feed/Feed.tsx
@@ -28,7 +28,7 @@ const CONTAINER_ID = 'blog-cards';
 const PAGE_QUERY = 'page';
 const FIRST_PAGE = 1;
 
-export const Feed: React.FC<FeedProps> = ({image}) => {
+export const Feed = ({image}: FeedProps) => {
     const {
         posts,
         totalCount,

diff --git a/src/blocks/Header/Header.tsx b/src/blocks/Header/Header.tsx
@@ -26,7 +26,7 @@ const breadcrumbsGoals = [
     },
 ];
 
-export const Header: React.FC<HeaderProps> = (props) => {
+export const Header = (props: HeaderProps) => {
     const {theme, paddingTop, paddingBottom} = props;
     const {post} = useContext(PostPageContext);
     const {locale} = useContext(LocaleContext);

diff --git a/src/blocks/Layout/Layout.tsx b/src/blocks/Layout/Layout.tsx
@@ -1,4 +1,4 @@
-import React, {ReactElement, useMemo} from 'react';
+import React, {PropsWithChildren, ReactElement, useMemo} from 'react';
 
 import {
     Col,
@@ -32,13 +32,13 @@ type SortedLayoutItems = {
     right: ReactElement[];
 };
 
-export const Layout: React.FC<LayoutProps> = ({
+export const Layout = ({
     fullWidth,
     mobileOrder,
     children,
     paddingTop = 'xs',
     paddingBottom = 'xs',
-}) => {
+}: PropsWithChildren<LayoutProps>) => {
     const layout: LayoutType = useMemo(() => {
         const layoutConfig: LayoutType = {
             leftCol: {

diff --git a/src/blocks/Media/Media.tsx b/src/blocks/Media/Media.tsx
@@ -11,7 +11,7 @@ import './Media.scss';
 
 const b = block('media');
 
-export const Media: React.FC<MediaProps> = ({text, paddingTop, paddingBottom, ...mediaProps}) => (
+export const Media = ({text, paddingTop, paddingBottom, ...mediaProps}: MediaProps) => (
     <Wrapper
         paddings={{
             [PaddingsDirections.top]: paddingTop,

diff --git a/src/blocks/Meta/Meta.tsx b/src/blocks/Meta/Meta.tsx
@@ -31,7 +31,7 @@ const breadcrumbsGoals = [
     },
 ];
 
-export const Meta: React.FC<MetaProps> = (props) => {
+export const Meta = (props: MetaProps) => {
     const {paddingTop = 'l', paddingBottom = 'l', theme = 'light'} = props;
     const {post} = useContext(PostPageContext);
     const {locale} = useContext(LocaleContext);

diff --git a/src/blocks/Suggest/Suggest.tsx b/src/blocks/Suggest/Suggest.tsx
@@ -29,7 +29,7 @@ const metrikaGoals = [
  *
  * @returns -jsx
  */
-export const Suggest: React.FC<SuggestProps> = ({paddingTop = 'l', paddingBottom = 'l'}) => {
+export const Suggest = ({paddingTop = 'l', paddingBottom = 'l'}: SuggestProps) => {
     const {suggestedPosts} = useContext(PostPageContext);
 
     if (suggestedPosts.length === 0) {

diff --git a/src/blocks/YFM/YFM.tsx b/src/blocks/YFM/YFM.tsx
@@ -10,7 +10,7 @@ import {getQaAttributes} from '../../utils/common';
 
 const b = cn('yfm');
 
-export const YFM: React.FC<YFMProps> = (props) => {
+export const YFM = (props: YFMProps) => {
     const {text, paddingTop, paddingBottom, qa} = props;
     const qaAttributes = getQaAttributes(qa);
 

diff --git a/src/components/FeedHeader/FeedHeader.tsx b/src/components/FeedHeader/FeedHeader.tsx
@@ -23,7 +23,7 @@ type FeedHeaderProps = HeaderProps & ControlsProps;
 
 type FeedHeaderContainerProps = FeedHeaderProps & ClassNameProps;
 
-export const FeedHeader: React.FC<FeedHeaderContainerProps> = ({
+export const FeedHeader = ({
     tags,
     services,
     handleLoadData,
@@ -33,7 +33,7 @@ export const FeedHeader: React.FC<FeedHeaderContainerProps> = ({
     verticalOffset = 'l',
     className,
     queryParams,
-}) => {
+}: FeedHeaderContainerProps) => {
     const backgroundThemed = background && getThemedValue(background, theme as Theme);
 
     return (

diff --git a/src/components/FeedHeader/components/Controls/Controls.tsx b/src/components/FeedHeader/components/Controls/Controls.tsx
@@ -40,12 +40,12 @@ const ICON_SIZE = 16;
 const DEFAULT_PAGE = 1;
 const VIRTUALIZATION_THRESHOLD = 1000;
 
-export const Controls: React.FC<ControlsProps> = ({
+export const Controls = ({
     handleLoadData,
     tags = [],
     services = [],
     queryParams,
-}) => {
+}: ControlsProps) => {
     const {hasLikes} = useContext(LikesContext);
     const handleAnalyticsTag = useAnalytics(DefaultEventNames.Tag);
     const handleAnalyticsService = useAnalytics(DefaultEventNames.Service);

diff --git a/src/components/PostCard/PostCard.tsx b/src/components/PostCard/PostCard.tsx
@@ -23,14 +23,14 @@ type PostCardProps = {
 
 const b = block('post-card');
 
-export const PostCard: React.FC<PostCardProps> = ({
+export const PostCard = ({
     post,
     metrikaGoals,
     fullWidth = false,
     size = PostCardSize.SMALL,
     showTag = false,
     titleHeadingLevel = PostCardTitleHeadingLevel.H3,
-}) => {
+}: PostCardProps) => {
     const {
         title: postTitle,
         htmlTitle,

diff --git a/src/components/PostInfo/PostInfo.tsx b/src/components/PostInfo/PostInfo.tsx
@@ -41,14 +41,14 @@ type PostInfoProps = QAProps & {
  *
  * @returns jsx
  */
-export const PostInfo: React.FC<PostInfoProps> = ({
+export const PostInfo = ({
     date,
     readingTime,
     postId,
     theme = 'light',
     metrikaGoals,
     qa,
-}) => {
+}: PostInfoProps) => {
     const {likes} = useContext(PostPageContext);
 
     return (

diff --git a/src/components/PostInfo/SuggestPostInfo.tsx b/src/components/PostInfo/SuggestPostInfo.tsx
@@ -38,14 +38,14 @@ export interface SuggestPostInfoProps
  *
  * @returns jsx
  */
-export const SuggestPostInfo: React.FC<SuggestPostInfoProps> = ({
+export const SuggestPostInfo = ({
     postId,
     date,
     readingTime,
     likes,
     size = PostCardSize.SMALL,
     qa,
-}) => {
+}: SuggestPostInfoProps) => {
     const {hasUserLike, likesCount, handleLike} = useLikes({
         hasLike: likes?.hasUserLike,
         count: likes?.likesCount,

diff --git a/src/components/PostInfo/components/Date.tsx b/src/components/PostInfo/components/Date.tsx
@@ -14,7 +14,7 @@ type DateProps = {
     size?: PostCardSize;
 };
 
-export const Date: React.FC<DateProps> = ({date, size = PostCardSize.SMALL}) => {
+export const Date = ({date, size = PostCardSize.SMALL}: DateProps) => {
     const {locale} = useContext(LocaleContext);
 
     return <div className={b('item', {size})}>{format(date, 'longDate', locale?.code)}</div>;

diff --git a/src/components/PostInfo/components/ReadingTime.tsx b/src/components/PostInfo/components/ReadingTime.tsx
@@ -17,7 +17,7 @@ type ReadingTimeProps = {
     size?: 's' | 'm';
 };
 
-export const ReadingTime: React.FC<ReadingTimeProps> = ({readingTime, size = 's'}) => (
+export const ReadingTime = ({readingTime, size = 's'}: ReadingTimeProps) => (
     <div className={b('item', {size})}>
         <span className={b('icon')}>
             <Icon data={Time} size={ICON_SIZE} className={b('icon-color')} />

diff --git a/src/components/PostInfo/components/Save.tsx b/src/components/PostInfo/components/Save.tsx
@@ -43,7 +43,7 @@ type SaveProps = QAProps & {
  *
  * @returns jsx
  */
-export const Save: React.FC<SaveProps> = ({
+export const Save = ({
     title,
     postId,
     hasUserLike,
@@ -52,7 +52,7 @@ export const Save: React.FC<SaveProps> = ({
     size,
     theme,
     qa,
-}) => {
+}: SaveProps) => {
     const {toggleLike, isSignedInUser, requireSignIn} = useContext(LikesContext);
     const handleAnalytics = useAnalytics(DefaultEventNames.SaveButton);
     const isLikeable = Boolean(toggleLike);

diff --git a/src/components/PostInfo/components/Sharing.tsx b/src/components/PostInfo/components/Sharing.tsx
@@ -26,7 +26,7 @@ type SharingProps = {
     metrikaGoal?: string;
 };
 
-export const Sharing: React.FC<SharingProps> = ({theme, metrikaGoal}) => {
+export const Sharing = ({theme, metrikaGoal}: SharingProps) => {
     const router = useContext(RouterContext);
     const isMobile = useContext(MobileContext);
     const {shareOptions} = useContext(PostPageContext);

diff --git a/src/components/Posts/Posts.tsx b/src/components/Posts/Posts.tsx
@@ -31,7 +31,7 @@ type PostCardProps = {
     pageCountForShowSupportButtons?: number;
 };
 
-export const Posts: React.FC<PostCardProps> = ({
+export const Posts = ({
     containerId,
     pinnedPostOnPage,
     currentPage,
@@ -44,7 +44,7 @@ export const Posts: React.FC<PostCardProps> = ({
     handleShowMore,
     handlePageChange,
     pageCountForShowSupportButtons,
-}) => (
+}: PostCardProps) => (
     <div className={b()}>
         {isFetching && <div className={b('loaderContainer')} />}
         <div id={containerId} className={b('cards-container', {isLoading: isFetching})}>

diff --git a/src/components/PostsEmpty/PostsEmpty.tsx b/src/components/PostsEmpty/PostsEmpty.tsx
@@ -7,7 +7,7 @@ import './PostsEmpty.scss';
 
 const b = block('posts-empty');
 
-export const PostsEmpty: React.FC = () => (
+export const PostsEmpty = () => (
     <div className={b('container')}>
         <div className={b('title')}>{i18(Keyset.TitleEmptyContainer)}</div>
         <div className={b('subtitle')}>{i18(Keyset.ContextEmptyContainer)}</div>

diff --git a/src/components/PostsError/PostsError.tsx b/src/components/PostsError/PostsError.tsx
@@ -13,7 +13,7 @@ type PostsErrorContainerProps = {
     onButtonClick?: () => void | Promise<void>;
 };
 
-export const PostsError: React.FC<PostsErrorContainerProps> = ({onButtonClick}) => {
+export const PostsError = ({onButtonClick}: PostsErrorContainerProps) => {
     const handleClick = () => (onButtonClick ? onButtonClick() : window.location.reload());
 
     return (

diff --git a/src/constructor/BlogConstructorProvider.tsx b/src/constructor/BlogConstructorProvider.tsx
@@ -1,4 +1,4 @@
-import React, {Fragment} from 'react';
+import React, {Fragment, PropsWithChildren} from 'react';
 
 import {AnalyticsContext, AnalyticsContextProps} from '@gravity-ui/page-constructor';
 
@@ -22,7 +22,7 @@ export interface BlogConstructorProviderProps {
     children?: React.ReactNode;
 }
 
-export const BlogConstructorProvider: React.FC<BlogConstructorProviderProps> = ({
+export const BlogConstructorProvider = ({
     isMobile,
     locale = {} as Locale,
     router = {} as RouterContextProps,
@@ -31,7 +31,7 @@ export const BlogConstructorProvider: React.FC<BlogConstructorProviderProps> = (
     analytics = {},
     settings = {},
     children,
-}) => {
+}: PropsWithChildren<BlogConstructorProviderProps>) => {
     const context = [
         <ThemeValueContext.Provider value={{themeValue: theme}} key="theme-context" />,
         <LocaleContext.Provider value={{locale}} key="locale-context" />,

diff --git a/src/containers/BlogPostPage/BlogPostPage.tsx b/src/containers/BlogPostPage/BlogPostPage.tsx
@@ -38,7 +38,7 @@ export interface BlogPostPageProps {
     onClickSignIn?: React.EventHandler<SyntheticEvent>;
 }
 
-export const BlogPostPage: React.FC<BlogPostPageProps> = ({
+export const BlogPostPage = ({
     metaData,
     suggestedPosts,
     likes,
@@ -49,7 +49,7 @@ export const BlogPostPage: React.FC<BlogPostPageProps> = ({
     shareOptions,
     isSignedInUser = false,
     onClickSignIn,
-}) => {
+}: BlogPostPageProps) => {
     const {hasUserLike, likesCount, handleLike} = useLikes({
         hasLike: likes?.hasUserLike,
         count: likes?.likesCount,

diff --git a/src/icons/Close.tsx b/src/icons/Close.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import {a11yHiddenSvgProps} from '../utils/svg';
 
-export const Close: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+export const Close = (props: React.SVGProps<SVGSVGElement>) => (
     <svg
         xmlns="http://www.w3.org/2000/svg"
         width="10"

diff --git a/src/icons/DropdownArrow.tsx b/src/icons/DropdownArrow.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import {a11yHiddenSvgProps} from '../utils/svg';
 
-export const DropdownArrow: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+export const DropdownArrow = (props: React.SVGProps<SVGSVGElement>) => (
     <svg
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 16 16"

diff --git a/src/icons/Save.tsx b/src/icons/Save.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import {a11yHiddenSvgProps} from '../utils/svg';
 
-export const Save: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+export const Save = (props: React.SVGProps<SVGSVGElement>) => (
     <svg
         xmlns="http://www.w3.org/2000/svg"
         width="16"

diff --git a/src/icons/SaveFilled.tsx b/src/icons/SaveFilled.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import {a11yHiddenSvgProps} from '../utils/svg';
 
-export const SaveFilled: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+export const SaveFilled = (props: React.SVGProps<SVGSVGElement>) => (
     <svg
         xmlns="http://www.w3.org/2000/svg"
         width="16"

diff --git a/src/icons/SearchIcon.tsx b/src/icons/SearchIcon.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import {a11yHiddenSvgProps} from '../utils/svg';
 
-export const SearchIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+export const SearchIcon = (props: React.SVGProps<SVGSVGElement>) => (
     <svg
         xmlns="http://www.w3.org/2000/svg"
         width="16"

diff --git a/src/icons/ShareArrowUp.tsx b/src/icons/ShareArrowUp.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import {a11yHiddenSvgProps} from '../utils/svg';
 
-export const ShareArrowUp: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+export const ShareArrowUp = (props: React.SVGProps<SVGSVGElement>) => (
     <svg
         xmlns="http://www.w3.org/2000/svg"
         width="16"