From 569dd344355d1990877ff60c0989f2bd5ecb8907 Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Fri, 3 Nov 2023 15:30:36 +0100
Subject: [PATCH] refactor: remove FC, not needed

---
 .../header/account-bar/account-bar.tsx        |  4 ++--
 src/components/header/header.tsx              |  8 +++----
 .../header/post-buttons/post-buttons.tsx      |  4 ++--
 .../header/sort-buttons/sort-buttons.tsx      |  4 ++--
 src/components/post/embed/embed.tsx           | 24 +++++++++----------
 .../post/expand-button/expand-button.tsx      |  3 +--
 src/components/post/expando/expando.tsx       |  3 +--
 src/components/post/flair/flair.tsx           |  3 +--
 .../post-tools-label/post-tools-label.tsx     |  3 +--
 src/components/post/post-tools/post-tools.tsx |  3 +--
 src/components/post/post.tsx                  |  4 ++--
 src/components/post/thumbnail/thumbnail.tsx   |  3 +--
 src/components/reply/reply.tsx                |  4 ++--
 src/components/topbar/topbar.tsx              |  4 ++--
 src/views/home/home.tsx                       |  4 ++--
 src/views/post/post.tsx                       |  4 ++--
 16 files changed, 38 insertions(+), 44 deletions(-)

diff --git a/src/components/header/account-bar/account-bar.tsx b/src/components/header/account-bar/account-bar.tsx
index b178c47f..33b5a0f4 100644
--- a/src/components/header/account-bar/account-bar.tsx
+++ b/src/components/header/account-bar/account-bar.tsx
@@ -1,10 +1,10 @@
-import { FC } from 'react';
+
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 import styles from './account-bar.module.css';
 import { useAccount } from '@plebbit/plebbit-react-hooks';
 
-const AccountBar: FC = () => {
+const AccountBar = () => {
   const account = useAccount();
   const { t } = useTranslation();
 
diff --git a/src/components/header/header.tsx b/src/components/header/header.tsx
index aef95e30..0e719bc2 100644
--- a/src/components/header/header.tsx
+++ b/src/components/header/header.tsx
@@ -1,4 +1,4 @@
-import { FC } from 'react';
+
 import { Link, useLocation, useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import styles from './header.module.css';
@@ -11,7 +11,7 @@ import SortButtons from '../header/sort-buttons';
 const availableLanguages = ['ar', 'bn', 'cs', 'da', 'de', 'el', 'en', 'es', 'fa', 'fi', 'fil', 'fr', 'he', 'hi', 'hu', 'id', 'it', 'ja', 'ko', 'mr', 'nl', 'no', 'pl', 'pt', 'ro', 'ru', 'sq', 'sv', 'te', 'th', 'tr', 'uk', 'ur', 'vi', 'zh'];
 
 // TODO: move to settings page
-const Theme: FC = () => {
+const Theme = () => {
   const [theme, setTheme] = useTheme();
   const { t } = useTranslation();
 
@@ -26,7 +26,7 @@ const Theme: FC = () => {
 };
 
 // TODO: move to settings page
-const Language: FC = () => {
+const Language = () => {
   const { i18n } = useTranslation();
   const { changeLanguage, language } = i18n;
 
@@ -47,7 +47,7 @@ const Language: FC = () => {
   );
 };
 
-const Header: FC = () => {
+const Header = () => {
   const [theme] = useTheme();
   const { sortType, subplebbitAddress, commentCid } = useParams();
   const location = useLocation();
diff --git a/src/components/header/post-buttons/post-buttons.tsx b/src/components/header/post-buttons/post-buttons.tsx
index f5c858bd..72263e95 100644
--- a/src/components/header/post-buttons/post-buttons.tsx
+++ b/src/components/header/post-buttons/post-buttons.tsx
@@ -1,10 +1,10 @@
-import { FC } from 'react';
+
 import { Link, useParams } from 'react-router-dom';
 import styles from './post-buttons.module.css';
 import { useTranslation } from 'react-i18next';
 import { useSubplebbit } from '@plebbit/plebbit-react-hooks';
 
-const PostButtons: FC = () => {
+const PostButtons = () => {
   const { t } = useTranslation();
   const { subplebbitAddress, commentCid } = useParams();
   const subplebbit = useSubplebbit({ subplebbitAddress });
diff --git a/src/components/header/sort-buttons/sort-buttons.tsx b/src/components/header/sort-buttons/sort-buttons.tsx
index a3685c02..0203a8ff 100644
--- a/src/components/header/sort-buttons/sort-buttons.tsx
+++ b/src/components/header/sort-buttons/sort-buttons.tsx
@@ -1,11 +1,11 @@
-import { FC, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Link, useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import styles from './sort-buttons.module.css';
 
 const choices = ['/hot', '/new', '/active', '/controversialAll', '/topAll'];
 
-const SortButtons: FC = () => {
+const SortButtons = () => {
   const { sortType } = useParams<{ sortType: string }>();
   const { t } = useTranslation();
   const [selected, setSelected] = useState(sortType || '/topMonth');
diff --git a/src/components/post/embed/embed.tsx b/src/components/post/embed/embed.tsx
index 92a480e4..cb559973 100644
--- a/src/components/post/embed/embed.tsx
+++ b/src/components/post/embed/embed.tsx
@@ -1,11 +1,11 @@
-import { FC } from 'react';
+
 import styles from './embed.module.css';
 
 interface EmbedProps {
   url: string;
 }
 
-const Embed: FC<EmbedProps> = ({ url }) => {
+const Embed = ({ url }: EmbedProps) => {
   const parsedUrl = new URL(url);
 
   if (youtubeHosts.has(parsedUrl.host)) {
@@ -46,7 +46,7 @@ interface EmbedComponentProps {
 
 const youtubeHosts = new Set<string>(['youtube.com', 'www.youtube.com', 'youtu.be', 'www.youtu.be']);
 
-const YoutubeEmbed: FC<EmbedComponentProps> = ({ parsedUrl }) => {
+const YoutubeEmbed = ({ parsedUrl }: EmbedComponentProps) => {
   let youtubeId;
   if (parsedUrl.host.endsWith('youtu.be')) {
     youtubeId = parsedUrl.pathname.replaceAll('/', '');
@@ -69,7 +69,7 @@ const YoutubeEmbed: FC<EmbedComponentProps> = ({ parsedUrl }) => {
 
 const xHosts = new Set<string>(['twitter.com', 'www.twitter.com', 'x.com', 'www.x.com']);
 
-const XEmbed: FC<EmbedComponentProps> = ({ parsedUrl }) => {
+const XEmbed = ({ parsedUrl }: EmbedComponentProps) => {
   return (
     <iframe
       className={styles.xEmbed}
@@ -90,7 +90,7 @@ const XEmbed: FC<EmbedComponentProps> = ({ parsedUrl }) => {
 
 const redditHosts = new Set<string>(['reddit.com', 'www.reddit.com', 'old.reddit.com']);
 
-const RedditEmbed: FC<EmbedComponentProps> = ({ parsedUrl }) => {
+const RedditEmbed = ({ parsedUrl }: EmbedComponentProps) => {
   return (
     <iframe
       className={styles.redditEmbed}
@@ -117,7 +117,7 @@ const RedditEmbed: FC<EmbedComponentProps> = ({ parsedUrl }) => {
 
 const twitchHosts = new Set<string>(['twitch.tv', 'www.twitch.tv']);
 
-const TwitchEmbed: FC<EmbedComponentProps> = ({ parsedUrl }) => {
+const TwitchEmbed = ({ parsedUrl }: EmbedComponentProps) => {
   let iframeUrl;
   if (parsedUrl.pathname.startsWith('/videos/')) {
     const videoId = parsedUrl.pathname.replace('/videos/', '');
@@ -142,7 +142,7 @@ const TwitchEmbed: FC<EmbedComponentProps> = ({ parsedUrl }) => {
 
 const tiktokHosts = new Set<string>(['tiktok.com', 'www.tiktok.com']);
 
-const TiktokEmbed: FC<EmbedComponentProps> = ({ parsedUrl }) => {
+const TiktokEmbed = ({ parsedUrl }: EmbedComponentProps) => {
   const videoId = parsedUrl.pathname.replace(/.+\/video\//, '').replaceAll('/', '');
   return (
     <iframe
@@ -164,7 +164,7 @@ const TiktokEmbed: FC<EmbedComponentProps> = ({ parsedUrl }) => {
 
 const instagramHosts = new Set<string>(['instagram.com', 'www.instagram.com']);
 
-const InstagramEmbed: FC<EmbedComponentProps> = ({ parsedUrl }) => {
+const InstagramEmbed = ({ parsedUrl }: EmbedComponentProps) => {
   const pathNames = parsedUrl.pathname.replace(/\/+$/, '').split('/');
   const id = pathNames[pathNames.length - 1];
   return (
@@ -187,7 +187,7 @@ const InstagramEmbed: FC<EmbedComponentProps> = ({ parsedUrl }) => {
 
 const odyseeHosts = new Set<string>(['odysee.com', 'www.odysee.com']);
 
-const OdyseeEmbed: FC<EmbedComponentProps> = ({ parsedUrl }) => {
+const OdyseeEmbed = ({ parsedUrl }: EmbedComponentProps) => {
   const iframeUrl = `https://odysee.com/$/embed${parsedUrl.pathname}`;
   return (
     <iframe
@@ -205,7 +205,7 @@ const OdyseeEmbed: FC<EmbedComponentProps> = ({ parsedUrl }) => {
 
 const bitchuteHosts = new Set<string>(['bitchute.com', 'www.bitchute.com']);
 
-const BitchuteEmbed: FC<EmbedComponentProps> = ({ parsedUrl }) => {
+const BitchuteEmbed = ({ parsedUrl }: EmbedComponentProps) => {
   const videoId = parsedUrl.pathname.replace(/\/video\//, '').replaceAll('/', '');
   return (
     <iframe
@@ -223,7 +223,7 @@ const BitchuteEmbed: FC<EmbedComponentProps> = ({ parsedUrl }) => {
 
 const streamableHosts = new Set<string>(['streamable.com', 'www.streamable.com']);
 
-const StreamableEmbed: FC<EmbedComponentProps> = ({ parsedUrl }) => {
+const StreamableEmbed = ({ parsedUrl }: EmbedComponentProps) => {
   const videoId = parsedUrl.pathname.replaceAll('/', '');
   return (
     <iframe
@@ -241,7 +241,7 @@ const StreamableEmbed: FC<EmbedComponentProps> = ({ parsedUrl }) => {
 
 const spotifyHosts = new Set<string>(['spotify.com', 'www.spotify.com', 'open.spotify.com']);
 
-const SpotifyEmbed: FC<EmbedComponentProps> = ({ parsedUrl }) => {
+const SpotifyEmbed = ({ parsedUrl }: EmbedComponentProps) => {
   const iframeUrl = `https://open.spotify.com/embed${parsedUrl.pathname}?theme=0`;
   return (
     <iframe
diff --git a/src/components/post/expand-button/expand-button.tsx b/src/components/post/expand-button/expand-button.tsx
index 0e1788a6..5776b4b3 100644
--- a/src/components/post/expand-button/expand-button.tsx
+++ b/src/components/post/expand-button/expand-button.tsx
@@ -1,4 +1,3 @@
-import { FC } from 'react';
 import styles from './expand-button.module.css';
 import { CommentMediaInfo } from '../../../lib/utils';
 
@@ -11,7 +10,7 @@ interface ExpandButtonProps {
   toggleExpanded: () => void;
 }
 
-const ExpandButton: FC<ExpandButtonProps> = ({ commentMediaInfo, content, expanded, hasThumbnail, link, toggleExpanded }) => {
+const ExpandButton = ({ commentMediaInfo, content, expanded, hasThumbnail, link, toggleExpanded }: ExpandButtonProps) => {
   const initialButtonType = hasThumbnail || commentMediaInfo?.type === 'audio' || commentMediaInfo?.type === 'iframe' ? 'playButton' : 'textButton';
 
   const buttonType = expanded ? 'closeButton' : initialButtonType;
diff --git a/src/components/post/expando/expando.tsx b/src/components/post/expando/expando.tsx
index d867621d..bc6dc34c 100644
--- a/src/components/post/expando/expando.tsx
+++ b/src/components/post/expando/expando.tsx
@@ -1,4 +1,3 @@
-import { FC } from 'react';
 import { Link } from 'react-router-dom';
 import styles from './expando.module.css';
 import Embed from '../embed';
@@ -13,7 +12,7 @@ interface ExpandoProps {
   toggleExpanded?: () => void;
 }
 
-const Expando: FC<ExpandoProps> = ({ commentMediaInfo, content, expanded, link, showContent, toggleExpanded }) => {
+const Expando = ({ commentMediaInfo, content, expanded, link, showContent, toggleExpanded }: ExpandoProps) => {
   let mediaComponent = null;
   let noExpandButton = false;
 
diff --git a/src/components/post/flair/flair.tsx b/src/components/post/flair/flair.tsx
index 492421ca..e7e18838 100644
--- a/src/components/post/flair/flair.tsx
+++ b/src/components/post/flair/flair.tsx
@@ -1,4 +1,3 @@
-import { FC } from 'react';
 import styles from './flair.module.css';
 
 interface FlairProps {
@@ -10,7 +9,7 @@ interface FlairProps {
   };
 }
 
-const Flair: FC<FlairProps> = ({ flair }) => {
+const Flair = ({ flair }: FlairProps) => {
   const isExpired = flair.expiresAt ? Date.now() / 1000 > flair.expiresAt : false;
 
   if (isExpired) {
diff --git a/src/components/post/post-tools/post-tools-label/post-tools-label.tsx b/src/components/post/post-tools/post-tools-label/post-tools-label.tsx
index 8766115f..b6056c9e 100644
--- a/src/components/post/post-tools/post-tools-label/post-tools-label.tsx
+++ b/src/components/post/post-tools/post-tools-label/post-tools-label.tsx
@@ -1,4 +1,3 @@
-import { FC } from 'react';
 import styles from './post-tools-label.module.css';
 import { useComment } from '@plebbit/plebbit-react-hooks';
 import { useTranslation } from 'react-i18next';
@@ -7,7 +6,7 @@ interface PostToolsLabelProps {
   commentCid: string;
 }
 
-const PostToolsLabel: FC<PostToolsLabelProps> = ({ commentCid }) => {
+const PostToolsLabel = ({ commentCid }: PostToolsLabelProps) => {
   const comment = useComment({ commentCid });
   const { spoiler } = comment;
   const { t } = useTranslation();
diff --git a/src/components/post/post-tools/post-tools.tsx b/src/components/post/post-tools/post-tools.tsx
index 3d82eb48..e93c8fba 100644
--- a/src/components/post/post-tools/post-tools.tsx
+++ b/src/components/post/post-tools/post-tools.tsx
@@ -1,4 +1,3 @@
-import { FC } from 'react';
 import styles from './post-tools.module.css';
 import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
@@ -11,7 +10,7 @@ interface PostToolsProps {
   subplebbitAddress: string;
 }
 
-const PostTools: FC<PostToolsProps> = ({ cid, replyCount, spoiler, subplebbitAddress }) => {
+const PostTools = ({ cid, replyCount, spoiler, subplebbitAddress }: PostToolsProps) => {
   const { t } = useTranslation();
   const commentCount = replyCount === 0 ? t('post_no_comments') : `${replyCount ?? ''} ${replyCount === 1 ? t('post_comment') : t('post_comments')}`;
 
diff --git a/src/components/post/post.tsx b/src/components/post/post.tsx
index 591e8b8a..e012e3f4 100644
--- a/src/components/post/post.tsx
+++ b/src/components/post/post.tsx
@@ -1,4 +1,4 @@
-import { FC, useState } from 'react';
+import { useState } from 'react';
 import styles from './post.module.css';
 import { Link } from 'react-router-dom';
 import utils from '../../lib/utils';
@@ -16,7 +16,7 @@ interface PostProps {
   isPostView?: boolean;
 }
 
-const Post: FC<PostProps> = ({ post, index, isPostView = false }) => {
+const Post = ({ post, index, isPostView = false }: PostProps) => {
   const { author, cid, content, downvoteCount, flair, link, linkHeight, linkWidth, replyCount, spoiler, subplebbitAddress, timestamp, title, upvoteCount } = post || {};
   const subplebbit = useSubplebbit({ subplebbitAddress });
   const { t } = useTranslation();
diff --git a/src/components/post/thumbnail/thumbnail.tsx b/src/components/post/thumbnail/thumbnail.tsx
index 89c1e6ae..244cd49d 100644
--- a/src/components/post/thumbnail/thumbnail.tsx
+++ b/src/components/post/thumbnail/thumbnail.tsx
@@ -1,4 +1,3 @@
-import { FC } from 'react';
 import styles from './thumbnail.module.css';
 import { Link } from 'react-router-dom';
 import { CommentMediaInfo } from '../../../lib/utils';
@@ -15,7 +14,7 @@ interface ThumbnailProps {
   toggleExpanded?: () => void;
 }
 
-const Thumbnail: FC<ThumbnailProps> = ({ cid, commentMediaInfo, expanded = false, isReply = false, link, linkHeight, linkWidth, subplebbitAddress, toggleExpanded }) => {
+const Thumbnail = ({ cid, commentMediaInfo, expanded = false, isReply = false, link, linkHeight, linkWidth, subplebbitAddress, toggleExpanded }: ThumbnailProps) => {
   const iframeThumbnail = commentMediaInfo?.patternThumbnailUrl || commentMediaInfo?.thumbnail;
   let displayWidth, displayHeight, hasLinkDimensions;
   const routeOrLink = isReply ? link : `/p/${subplebbitAddress}/c/${cid}`;
diff --git a/src/components/reply/reply.tsx b/src/components/reply/reply.tsx
index 0f9214c2..7b13604e 100644
--- a/src/components/reply/reply.tsx
+++ b/src/components/reply/reply.tsx
@@ -1,4 +1,4 @@
-import { FC, useState } from 'react';
+import { useState } from 'react';
 import { Comment } from '@plebbit/plebbit-react-hooks';
 import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
@@ -15,7 +15,7 @@ interface ReplyProps {
   reply: Comment;
 }
 
-const Reply: FC<ReplyProps> = ({ reply }) => {
+const Reply = ({ reply }: ReplyProps) => {
   const {
     author: { shortAddress },
     content,
diff --git a/src/components/topbar/topbar.tsx b/src/components/topbar/topbar.tsx
index f9c2845b..02eb3e4b 100644
--- a/src/components/topbar/topbar.tsx
+++ b/src/components/topbar/topbar.tsx
@@ -1,11 +1,11 @@
-import { FC, useState, useEffect, useRef } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import styles from './topbar.module.css';
 import { useAccount } from '@plebbit/plebbit-react-hooks';
 import useDefaultSubplebbitAddresses from '../../hooks/use-default-subplebbit-addresses';
 
-const TopBar: FC = () => {
+const TopBar = () => {
   const [isClicked, setIsClicked] = useState(false);
   const dropdownRef = useRef<HTMLDivElement>(null);
   const account = useAccount();
diff --git a/src/views/home/home.tsx b/src/views/home/home.tsx
index 4dd8f6dd..bf5e6f49 100644
--- a/src/views/home/home.tsx
+++ b/src/views/home/home.tsx
@@ -1,4 +1,4 @@
-import { FC, useEffect, useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import { useParams } from 'react-router-dom';
 import { Virtuoso, VirtuosoHandle, StateSnapshot } from 'react-virtuoso';
 import { useFeed } from '@plebbit/plebbit-react-hooks';
@@ -11,7 +11,7 @@ const lastVirtuosoStates: { [key: string]: StateSnapshot } = {};
 
 const NoPosts = () => 'no posts';
 
-const Home: FC = () => {
+const Home = () => {
   const subplebbitAddresses = useDefaultSubplebbitAddresses();
   const sortType = useParams<{ sortType: string }>().sortType || 'hot';
   const { feed, hasMore, loadMore } = useFeed({ subplebbitAddresses, sortType });
diff --git a/src/views/post/post.tsx b/src/views/post/post.tsx
index fd2cac6d..ddf4f8ac 100644
--- a/src/views/post/post.tsx
+++ b/src/views/post/post.tsx
@@ -1,4 +1,4 @@
-import { FC, useEffect } from 'react';
+import { useEffect } from 'react';
 import { useParams } from 'react-router-dom';
 import { useComment, useSubplebbit } from '@plebbit/plebbit-react-hooks';
 import { useTranslation } from 'react-i18next';
@@ -8,7 +8,7 @@ import useReplies from '../../hooks/use-replies';
 import Reply from '../../components/reply';
 import useStateString from '../../hooks/use-state-string';
 
-const Post: FC = () => {
+const Post = () => {
   const { commentCid } = useParams();
   const comment = useComment({ commentCid });
   const { content, replyCount, subplebbitAddress, title } = comment || {};