functioncomponent -> react.fc

components/previews/EPUBPreview.tsx

@@ -1,4 +1,4 @@
-import { FunctionComponent, useEffect, useRef, useState } from 'react'
+import { FC, useEffect, useRef, useState } from 'react'
 import { ReactReader } from 'react-reader'
 import type { Rendition } from 'epubjs'
 
@@ -6,7 +6,7 @@ import Loading from '../Loading'
 import DownloadButtonGroup from '../DownloadBtnGtoup'
 import { DownloadBtnContainer } from './Containers'
 
-const EPUBPreview: FunctionComponent<{ file: any }> = ({ file }) => {
+const EPUBPreview: FC<{ file: any }> = ({ file }) => {
   const [epubContainerWidth, setEpubContainerWidth] = useState(400)
   const epubContainer = useRef<HTMLDivElement>(null)
 

components/previews/MarkdownPreview.tsx

@@ -1,4 +1,4 @@
-import { useEffect, FunctionComponent, CSSProperties } from 'react'
+import { useEffect, FC, CSSProperties } from 'react'
 import Prism from 'prismjs'
 import ReactMarkdown from 'react-markdown'
 import gfm from 'remark-gfm'
@@ -14,7 +14,7 @@ import DownloadButtonGroup from '../DownloadBtnGtoup'
 import useFileContent from '../../utils/fetchOnMount'
 import { DownloadBtnContainer, PreviewContainer } from './Containers'
 
-const MarkdownPreview: FunctionComponent<{ file: any; path: string; standalone?: boolean }> = ({
+const MarkdownPreview: FC<{ file: any; path: string; standalone?: boolean }> = ({
   file,
   path,
   standalone = true,

components/previews/OfficePreview.tsx

@@ -1,10 +1,10 @@
-import { FunctionComponent, useEffect, useRef, useState } from 'react'
+import { FC, useEffect, useRef, useState } from 'react'
 import Preview from 'preview-office-docs'
 
 import DownloadButtonGroup from '../DownloadBtnGtoup'
 import { DownloadBtnContainer } from './Containers'
 
-const OfficePreview: FunctionComponent<{ file: any }> = ({ file }) => {
+const OfficePreview: FC<{ file: any }> = ({ file }) => {
   const docContainer = useRef<HTMLDivElement>(null)
   const [docContainerWidth, setDocContainerWidth] = useState(600)
 

components/previews/PDFPreview.tsx

@@ -1,9 +1,7 @@
-import { FunctionComponent } from 'react'
-
 import DownloadButtonGroup from '../DownloadBtnGtoup'
 import { DownloadBtnContainer } from './Containers'
 
-const PDFEmbedPreview: FunctionComponent<{ file: any }> = ({ file }) => {
+const PDFEmbedPreview: React.FC<{ file: any }> = ({ file }) => {
   // const url = `/api/proxy?url=${encodeURIComponent(file['@microsoft.graph.downloadUrl'])}&inline=true`
   const url = `https://mozilla.github.io/pdf.js/web/viewer.html?file=${encodeURIComponent(
     file['@microsoft.graph.downloadUrl']

components/previews/VideoPreview.tsx

@@ -1,4 +1,3 @@
-import { FunctionComponent } from 'react'
 import ReactPlayer from 'react-player'
 import { useRouter } from 'next/router'
 import { useClipboard } from 'use-clipboard-copy'
@@ -8,7 +7,7 @@ import { getBaseUrl } from '../../utils/getBaseUrl'
 import { DownloadButton } from '../DownloadBtnGtoup'
 import { DownloadBtnContainer, PreviewContainer } from './Containers'
 
-const VideoPreview: FunctionComponent<{ file: any }> = ({ file }) => {
+const VideoPreview: React.FC<{ file: any }> = ({ file }) => {
   const { asPath } = useRouter()
   const clipboard = useClipboard()