⚛️ #8 Change JSX.Element to ReactElement

src/renderer/about-window/AboutWindow.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { ReactElement } from 'react'
 import { AppInfo, ExternalSite } from '../../types/types'
 import Logo from '../../../assets/app-icons/app-icon.iconset/icon_128x128.png'
 import ExternalLink from './components/ExternalLink'
@@ -7,7 +7,7 @@ interface Props {
   appInfo: AppInfo
 }
 
-const AboutWindow = ({ appInfo }: Props): JSX.Element => {
+const AboutWindow = ({ appInfo }: Props): ReactElement => {
   document.title = `About ${appInfo.name}`
 
   return (

src/renderer/about-window/components/ExternalLink.tsx

@@ -1,12 +1,12 @@
-import React from 'react'
+import React, { ReactElement } from 'react'
 import { ExternalSite } from '../../../types/types'
 
 interface Props {
   children: React.ReactNode
   url: ExternalSite
 }
 
-const ExternalLink = ({ children, url }: Props): JSX.Element => {
+const ExternalLink = ({ children, url }: Props): ReactElement => {
   return <a onClick={() => window.electron.openExternal(url)}>{children}</a>
 }
 

src/renderer/main-window/MainWindow.tsx

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react'
+import React, { ReactElement, useContext } from 'react'
 import Navbar from './components/Navbar'
 import CutIcon from '../../../assets/images/cut.svg'
 import SheetMusicIcon from '../../../assets/images/sheet-music.svg'
@@ -23,7 +23,7 @@ interface Props {
   appData: AppData
 }
 
-const MainWindow = ({ appData }: Props): JSX.Element => {
+const MainWindow = ({ appData }: Props): ReactElement => {
   const { state: isLoading } = useContext(IsLoadingContext)
 
   return (

src/renderer/main-window/components/DropZone.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react'
+import React, { ReactElement, useCallback, useEffect, useRef, useState } from 'react'
 import { FileType, MessageBoxType } from '../../../types/types'
 
 interface Props {
@@ -7,7 +7,7 @@ interface Props {
   onDrop: (filePath: string) => unknown
 }
 
-const DropZone = ({ text, desiredFileType, onDrop }: Props): JSX.Element => {
+const DropZone = ({ text, desiredFileType, onDrop }: Props): ReactElement => {
   const [isDragging, setIsDragging] = useState(false)
   const dragCounter = useRef(0)
 

src/renderer/main-window/components/FileUploadField.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { ReactElement, useState } from 'react'
 import { Maybe } from '../../../types/types'
 import { resolveFieldName } from '../utils'
 
@@ -12,7 +12,7 @@ interface Props {
   onChange: () => unknown
 }
 
-const FileUploadField = ({ label, buttonLabel, placeholder, filePath, onButtonClick, onType, onChange }: Props): JSX.Element => {
+const FileUploadField = ({ label, buttonLabel, placeholder, filePath, onButtonClick, onType, onChange }: Props): ReactElement => {
   const [initialFilePath, setInitialFilepath] = useState('')
 
   const fieldName = resolveFieldName(label)

src/renderer/main-window/components/GoButton.tsx

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react'
+import React, { ReactElement, useContext } from 'react'
 import { IpcMainMessage, Payload } from '../../../types/types'
 import IsLoadingContext from '../context/IsLoadingContext'
 
@@ -7,7 +7,7 @@ interface Props {
   payload: Payload
 }
 
-const GoButton = ({ ipcMessage, payload }: Props): JSX.Element => {
+const GoButton = ({ ipcMessage, payload }: Props): ReactElement => {
   const { setState: setIsLoading } = useContext(IsLoadingContext)
 
   const go = async (): Promise<void> => {

src/renderer/main-window/components/Loader.tsx

@@ -1,6 +1,6 @@
-import React from 'react'
+import React, { ReactElement } from 'react'
 
-const Loader = (): JSX.Element => {
+const Loader = (): ReactElement => {
   return (
     <div id='loader' data-testid='loader' className='full-screen-overlay'>
       <div className='loader is-loading' />

src/renderer/main-window/components/Navbar.tsx

@@ -1,12 +1,12 @@
-import React from 'react'
+import React, { ReactElement } from 'react'
 import { Tab } from '../../../types/types'
 import NavbarTab from './NavbarTab'
 
 interface Props {
   tabs: Tab[]
 }
 
-const Navbar = ({ tabs }: Props): JSX.Element => {
+const Navbar = ({ tabs }: Props): ReactElement => {
   const tabComponents = tabs.map((tab, index) =>
     <NavbarTab tab={tab} key={index} />
   )

src/renderer/main-window/components/NavbarTab.tsx

@@ -1,12 +1,12 @@
-import React, { useContext } from 'react'
+import React, { ReactElement, useContext } from 'react'
 import { Tab } from '../../../types/types'
 import ActivePageContext from '../context/ActivePageContext'
 
 interface Props {
   tab: Tab
 }
 
-const NavbarTab = ({ tab }: Props): JSX.Element => {
+const NavbarTab = ({ tab }: Props): ReactElement => {
   const { state: activePage, setState: setActivePage } = useContext(ActivePageContext)
 
   return (

src/renderer/main-window/components/TextAreaField.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { ReactElement, useState } from 'react'
 import { Maybe } from '../../../types/types'
 import { resolveFieldName } from '../utils'
 
@@ -10,7 +10,7 @@ interface Props {
   onChange: () => unknown
 }
 
-const TextAreaField = ({ label, placeholder, text, onType, onChange }: Props): JSX.Element => {
+const TextAreaField = ({ label, placeholder, text, onType, onChange }: Props): ReactElement => {
   const [initialText, setInitialText] = useState('')
 
   const fieldName = resolveFieldName(label)

src/renderer/main-window/components/TextInputField.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { ReactElement, useState } from 'react'
 import { Maybe } from '../../../types/types'
 import { resolveFieldName } from '../utils'
 
@@ -10,7 +10,7 @@ interface Props {
   onChange: () => unknown
 }
 
-const TextInputField = ({ label, placeholder, text, onType, onChange }: Props): JSX.Element => {
+const TextInputField = ({ label, placeholder, text, onType, onChange }: Props): ReactElement => {
   const [initialText, setInitialText] = useState('')
 
   const fieldName = resolveFieldName(label)

src/renderer/main-window/context/ActivePageContext.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useState } from 'react'
+import React, { createContext, ReactElement, useState } from 'react'
 import { Page, Context } from '../../../types/types'
 
 const initialActivePage = Page.SEPARATE
@@ -11,7 +11,7 @@ const ActivePageContext = createContext<Context<Page>>({
 interface Props {
   children: React.ReactNode
 }
-const ActivePageProvider = ({ children }: Props): JSX.Element => {
+const ActivePageProvider = ({ children }: Props): ReactElement => {
   const [activePage, setActivePage] = useState<Page>(initialActivePage)
 
   return (

src/renderer/main-window/context/IsLoadingContext.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useState } from 'react'
+import React, { createContext, ReactElement, useState } from 'react'
 import { Context } from '../../../types/types'
 
 const initialIsLoading = false
@@ -11,7 +11,7 @@ const IsLoadingContext = createContext<Context<boolean>>({
 interface Props {
   children: React.ReactNode
 }
-const IsLoadingProvider = ({ children }: Props): JSX.Element => {
+const IsLoadingProvider = ({ children }: Props): ReactElement => {
   const [isLoading, setIsLoading] = useState<boolean>(initialIsLoading)
 
   return (

src/renderer/main-window/pages/GeneratePage.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useState } from 'react'
+import React, { ReactElement, useContext, useState } from 'react'
 import { FileType, GeneratePayload, IpcMainMessage, Page } from '../../../types/types'
 import DropZone from '../components/DropZone'
 import FileUploadField from '../components/FileUploadField'
@@ -12,7 +12,7 @@ const GeneratePage = ({
   songFoldersLocation: initialSongFoldersLocation,
   songList: initialSongList,
   instrumentPartsList: initialInstrumentPartsList
-}: GeneratePayload): JSX.Element => {
+}: GeneratePayload): ReactElement => {
   const { state: activePage } = useContext(ActivePageContext)
 
   const [collectionName, setCollectionName] = useState(

src/renderer/main-window/pages/SeparatePage.tsx

@@ -1,5 +1,5 @@
 import { FileType, IpcMainMessage, Page, SeparatePayload } from '../../../types/types'
-import React, { useContext, useState } from 'react'
+import React, { ReactElement, useContext, useState } from 'react'
 import FileUploadField from '../components/FileUploadField'
 import GoButton from '../components/GoButton'
 import TextAreaField from '../components/TextAreaField'
@@ -11,7 +11,7 @@ const SeparatePage = ({
   songTitle: initialSongTitle,
   pdfSourcePath: initialPdfSourcePath,
   partsList: initialPartsList
-}: SeparatePayload): JSX.Element => {
+}: SeparatePayload): ReactElement => {
   const { state: activePage } = useContext(ActivePageContext)
 
   const [songTitle, setSongTitle] = useState(initialSongTitle ?? '')